Generate static UI elements from server data only ONCE
I want to generate my navbar components based on my server folder structure
Specifically, I have folder
countries which contains file us.json and ca.json. For each file in folder countries, I want to generate an <A> element onto the Layout component. I struggle to know how to "send" this data from server to client and construct the UI, but only ONCE at startup - since the countries folder is static
Stackblitz: https://stackblitz.com/~/github.com/bhuynhdev/solid-start-test...Do a one-time server operation upon page load, and then re-use that data
I am looking for a way to do a one-time database query for a very rarely changed dataset -> And then store that data into server memory for subsequent re-use
More details:
1. I have a dynamic route
/map/[country].tsx
2. Upon loading this page the first time, I want to query database for list of country and store that data into server memory. So that subsequent navigation to the map/[country].tsx can just index the maps object instead of querying the db again...Component routing vs config-based routing
In Solid Router, what's the difference between component routing and config-based routing? Is the a particular reason someone wants to use one over the other?
Client-only API called on the server side.
There's this one nice library which can bundle MDX as a JSX Component. Thanks to
_jsx_runtime it's easy-ish to adapt it from react-only to other JSX supporting libraries. (https://github.com/kentcdodds/mdx-bundler)
I've managed to nail it down for some of the libraries, unfortunately I'm stuck with Solid's one, and I'm not that familiar with Solid (https://github.com/kentcdodds/mdx-bundler/pull/236)
I've...createSignal equals: false on mutable object value
Hi guys,
I have a resource source signal with { equals: false } that does not trigger fetching unless I wrap and deep copy the object literal value in the source param.
The value itself is a propety of an instance wrapped with
createMutable, which I suspect is at the crux of this....Third party authentication
What is the best way to implement third-party authentication like google and Facebook in solide.js?
I used to auth0 in react.js but for solid js its not supported...
Calling a JSX event handler explicitly
How can I call an event handler explicitly?
```ts
const handleFocus = (e: FocusEvent) => {
// perform some operation
...
How to filter/remove elements from an array within a Store
If I have the following
createStore invocation:
```tsx
export type WeeklyTimesheetSubmission = {
readonly cards: TimesheetCard[];...Related components
How would you implement a <Form> and <ValidatedField> component?
```
<Form>
<ValidedField ... />
<ValidedField ... />...
Error when using protected$ from @solid-mediakit/auth.
The error message is [error] node_modules/vinxi/runtime/http.js (71:9): "AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "node_modules/vinxi/runtime/http.js".
Range input issue with Dynamic component
Range slider input can't slide on Android devices. Please kindly check below sandbox demo.
https://codesandbox.io/p/devbox/694lr9...
solid router, absolute routes?
So i have compiled my solid app and have a few things i would like to change but dont know how, right now i host the app on my school server so for example server.com/name.surname/project_name/index.html
so as u can see the app should run inside the project name folder but when i use the routing in the app, the search bar domain says for example server.com/contact and not server.com/name.surname/project_name/contact like it should which also makes the links not work when manually browsing to them, any fix?
<Router root={Bars}>...
behaviour of createAsync in hooks - why cached?
I'm trying to get a better understanding on createAsync & query, and weather or not it is an appropriate way to share state.
I created a hook and use it like this.
This works perfectly fine. But I'm confused why the logs appear in the console, but no requests are made. I understood, that the query() cashes for only 5 seconds - so why is it not making requests all the timem even on navigation? I can import the hook and access the data from everywhere simultaneously.
...
Solid routing
so i have been trying out solid and i keep having some issues with the router, one of which is the routes tag which i believe is in the older versions but i'm using the newer one and dont really wanna downgrade...
so this is my code:
index.jsx:...
"Show done" in a basic todo list, and handling reactive arrays
Trying to create a basic todo app to get my grips with some basic solid/reactivity principles.
So far what I have works, but I have no idea if this is the idomatic way to handle array signals (ie if i'm changing/adding/removing elements the "correct") way.
I will post the code as a separate message because it's too long....
Reactive context in built-in components
I've looked into the source code of the core components, like: https://github.com/solidjs/solid/blob/fff8aed62b4bff78a0016c3c08ba644652ccac18/packages/solid/src/server/rendering.ts#L291
My question is: why are these components reactive at all? :]
I mean they seem to be simple JS functions, their code is not wrapped by the usual "reactive context" providers like JSX,
createMemo(), etc.
Thanks....Access ref in child component when using forwarding refs
I would like to use a forwarding ref as described in https://docs.solidjs.com/concepts/refs#forwarding-refs but also access the ref in the child component itself, like:
```tsx
// Child component
function Canvas(props) {
let anotherRef // <-- how to assign this?...
Lots of separate requests when using lucide-solid during devmode
I tried to use lucide-solid, and it works as expected.
My problem is that it downloads each icon JSX file separately during development, slowing down the initial page load, and completely "ruining" the Network view:
```
...
arrow-down-circle.jsx 304 script aliases.ts:138 145 B 591 ms...
Using useNavigate within client-only action/query
The docs says:
If you are inside of a cache or action function you will instead [of useNavigate] want to use redirect or reload.Does that include query/actions that only run on the client (don't use
"use server")?...Looping onMount
Hey, I currently try to create an userscript and wanna use SolidJS, does anyone know why onMount keeps getting called and why productElems stays null?
```
const { default: html } = await import("https://esm.sh/[email protected]/html");
const { render } = await import("https://esm.sh/[email protected]/web");
const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/[email protected]");...