MikeM42
createStore doesn't signal with a class as the store, but everything else works.
If I creatgeStore using a class: letss say a simple class like this one:
class TryMe {
'tryswitch'?: boolean
}
...
const [simpleTest, setSimpleTest] = createStore(new TryMe());
Then accessing and setting via setSimpleTest and simpleTest work fine. But when I set the "tryswitch" value there iss no signal being generated.
So this code:
<div class="field">
<div class="control has-text-left my-5">
<input id="switch" type="checkbox" name="switchExample" class="switch is-rounded"
checked={simpleValue.tryswitch}
onChange={(event) => setSimpleValue("tryswitch", event.currentTarget.checked)}
/>
<label for="switch"><span class="mx-2 has-text-weight-semibold">Switch</span></label>
</div>
</div>
<Show when={simpleValue.tryswitch}>
<SomeComponent.../>
</Show>
So the SomeComponent doesn't dynamically show when I change the myswitch value.
On the other hand if instead of a simple class I use the below then it works:
const [simpleTest, setSimpleTest] = createStore({
myswitch: false
});
Is this to be expected, is it hard to make it work with a class?7 replies
Solid Router within Router
Hi I am encountering something weird and can't figure out either what I am doing wrong.
I have an initial Router a the App.tsx level like so:
<Router base="/">
<Route path="/" component={StartApp} />
<Route path="/contract" component={ContractLifecycle}/>
<Route path="*404" component={()=> <div>Page Not found {useLocation().pathname}!</div>} />
</Router>
Then under ContractLifecycle I have another router like so:
<Router base="contract/">
<Route path="/" component={LoadEncode}/>
<Route path="/prepare" component={Prepare}/>
</Router>
When I load the App, the StartApp component loads fine, but when I navigate to "contract/", the LoadEncode component doesn't load, which is what I would have expected (same as / loading for the App router). If however I reload the page (click reload in the browser) then the LoadEncode component page shows up.
I also tried without the "/" at the end like so:
<Router base="contract">
<Route path="" component={LoadEncode}/>
<Route path="/prepare" component={Prepare}/>
</Router>
But the result is the same.22 replies
URL Query Parameters
This may be a silly question, but for URL Query parameters, so not something you pass through the route mechanism as someurl/:id/:something, but rather the type you would pass as someurl?param=something, is there a special solidJS way of handling those, or do I just use standared window.location.search, possibly wrapped in a URLSearchParams?
2 replies
computations created outside ... in a Context
I am creating a context, largely following the pattern indicated here: https://docs.solidjs.com/reference/component-apis/create-context
However in said context I want to store a set of values that get initialized through createResource. Because of that I get the computations created outside... warning.
This is because basically all the resources are being created at the module level (don't see how else to apply the createContext pattern) and hence as soon as I import the module, which is being done outside of createRoot or render I get the warning.
Is there a way to either import the module inside of the createRoot / render or a different way I could wrapper my context so I don't get this issue?
Here is a snippet of the context module:
interface WalletContextDetails {
wallet: Accessor<EIP6963ProviderDetail | undefined>,
walletProviders: Accessor<EIP6963ProviderDetail[] | undefined>,
activeProvider: Resource<Provider | undefined>,
}
const [selectedWallet, setSelectedWallet] = createSignal<EIP6963ProviderDetail>()
const providers = subscribeForWalletProviders();
const GetProvider = async() => {
let provider: Provider;
provider = ethers.getDefaultProvider()
return provider;
}
const [provider] = createResource(selectedWallet, GetProvider);
const value: WalletContextDetails = {
wallet: selectedWallet,
activeProvider: provider
}
const WalletContext = createContext<WalletContextDetails>(value);
export function WalletContextProvider(props: ParentProps) {
return (
<WalletContext.Provider value={value}>
{props.children}
</WalletContext.Provider>
);
}
export function useWalletContext() { return useContext(WalletContext); }
5 replies
Route definition within a component
I can't figure out if I can add routes within a component. I've created a simple app where I have a bulma panel with tabs, and trying to route the navigation of each tab to a different component, but can't figure out how to setup the routing. This is with the latest version of solid and solid-router.
I am attaching a zip with the key files here. If someone can help me figure this out I'd be appreciative.
When I use this code clicking on each tab results in the Page Not Found route from App being triggered
I wasnt' expecting to need to add the "Router" wrapper around the routes in the tab panel but if I don't do that I get an "Unrecognized Value" error at runtime. Note I've also tried to define the "base" for the router as "tabs" or "/tabs" or "tabs/" result is always same -> Page Not Found.
I've tried using anchors in the hrefs instead of path, but that didn't help. I also have no experience using anchors with routes, so not sure how those work.
I tried with routes beginning with / or ending with / like here, same thing. Can't figure it out.
2 replies
SolidJS with Router behind Apache Proxy
I had initially written my app without a Router and it was working fine running behind an apache proxy, but I wanted some of the cool features of the Router so I added it, but none of the routing works behind the apache proxy. Everything works fine locally without proxy, but no longer behind the proxy.
There's probably something I am either forgetting to configure in vite or in solid or in the apache proxy, but have no clue what it might be.
Basically I defined some routes as so:
export const Routes: Component = () => {
return <Router>
<Route path="/" component={SearchForm} />
<Route path="/urlselection" component={URLList} />
<Route path="/speech" component={Speech} />
</Router>
}
The app is simply define as follows:
const App: Component = () => {
return (
<SpeechContextProvider>
<div class={styles.App}>
<div class="container is-fluid">
<header class={styles.header}>
<HeaderAndConfig/>
</header>
<Routes/>
</div>
</div>
</SpeechContextProvider>
)
};
The VITE config as follows (pretrty basic). Note that I had to set the base URL as empty otherwise I also get in trouble though I can also set it as an environment variable
export default defineConfig(({ mode }) => {
return {
base: '',
plugins: [
/*
Uncomment the following line to enable solid-devtools.
For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
*/
// devtools(),
solidPlugin(),
],
server: {
port: 3000,
},
build: {
target: 'esnext',
}
}
})
The apache proxy setup is as follows:
ProxyRequests Off
<Location /speechai/>
ProxyPass http://localhost:8082/
</Location>
When I go to https://server/speechai/ I get ALL the content defined in the App but not anything from the Router.4 replies
createResource doesn't seem to be catching errors.
I have been at this for a while now and can't figure it out. I am calling a fetcher from a createResource, the fetcher does a pretty basic fetch(URL) request for which I have purposefully brought down the backend server. As a result I get a timeout on the HTTP POST request, which results in a TypeError, but that error doesn't seem to result in data.error (data is the name of the resource I created) to be set at any point.
I've tried to handle the eror by using Promise.reject in a .then(...).catch(return Promise.reject("it failed')) I've also tried to just let the erorr happen, or tried something like if (!response.ok) then {throw new Error("It failed")} bt none of these solutions seem to yield data.error being set.
I inspired myself to an extent from this article, https://www.thisdot.co/blog/how-to-handle-async-data-fetching-using-createresource-in-solidjs which makes it sound real easy but doesn't seem to apply to my problem.
10 replies