SolidJS

S

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

Join

onClick preventDefault/stopPropagation not working

I have an solid-ag-grid based table with buttons in the table. I tried everything but clicking the button always triggers the onRowClicked too 🙁 ```ts...

Two-way-binding

I have a form with several fields that need to be pre-populated with values from the database on initial page load. When the user submits the form, the new values will be saved to the database. The latest values should always be displayed when the page is reloaded. If I'm not mistaken, I know I need to use createResource(...) to query the database. This returns a signal which I can use to populate the <input> and <select> HTML elements. The easiest way for me to populate a select element is by passing a value to its value property....

Dynamic Favicons

I'm trying to figure out how to do dynamic favicons in Solid Start. From what I can tell, entry-server is the place where I'd set the favicon, and that's historically where I've had it -- but is there a way to serve a different favicon there based on the route the user is on?...

cannot read properties of undefined (reading 'client')

I used the solid js cli to setup my solidstart project with trpc option but i am getting this error TypeError: Cannot read properties of undefined (reading 'client') at Object.get (C:/Users/USER/Documents/code/schoolmanager/node_modules/.pnpm/vinxi@0.5.8_db0@0.3.2_iored_9954f56ba07c8a3e53c0173fd9b9b83a/node_modules/vinxi/lib/manifest/prod-server-manifest.js:46:53) at createPageEvent (C:/Users/USER/Documents/code/schoolmanager/node_modules/.pnpm/@solidjs+start@1.2.0_solid-_a90b4d0317bcc58d5bc34a4af43825d1/node_modules/@solidjs/start/dist/server/pageEvent.js:30:45)...

How to Prevent ESLint from Marking Custom Directives As Unused?

Let's say I have a directive called directive, which is returned from some kind of function. I know that I can augment my TypeScript types so that directive can be used in the JSX. However, ESLint doesn't understand that this function is being used, and it throws a @typescript-eslint/no-unused-vars error. Is there a proper way to resolve this? Example: ```tsx function MyComponent() {...

Custom Rendering for OpenTUI

Does solid keep node references and re-use them after removal? Like in a Switch or For control flow, when things are not shown removes the nodes and when shown adds the same node again? OpenTUI renders to the terminal. The primitives like box and text must be destroyed when not used anymore to cleanup native resources and currently I see nodes being removed, but it seems like they get re-used and mounted again, which is not possible for OpenTUI nodes after they've been destroyed. Should I use a weak map for the nodes and try to let them clean up automatically?...

SSR for certain route, CSR for the rest

Is it possible to render a certain route using SSR method, and the rest of the routes on the client? Currently all routes are rendered on the client side. I'm trying to figure out how to have route /example render on the server, since the content from /example need to be displayed in google results. ```...

Prerendering and query params

In the below example, the list will not be sorted as expected when initially visiting /?sort=true, only if I navigate to another page first so that CSR has taken over. It works fine with the dev server so I believe this is an issue with SSG/pre-rendering. My content is completely static so I ideally would like to avoid SSR, is there any way to get this working with SSG/pre-rending or is it just a fundamental limitation? I am using Solid Start with the following config. ```ts...

In V8 Rust: `renderToString` always undefined `isServer` is false

In Rust V8, running renderToString gives me undefined. Interestingly isServer is always false. How do I tell solidjs to essentially run V8 like it's not in the browser. It seems to think it's in the browser or whatever. ...

Solid JSX Transform

Is there no lightweight way to transpile Solid JSX? With react or preact I can do a very nice on-the-fly transpilation for my application's JSX with just a 200kb js file that I can call to transform them. And for doing real builds, esbuild has it built in for react and preact. It seems like there isn't a very easy way to use Solid JSX if I am not using Node or if I wanted to. I could do a standard JSX transform to hyperscript but I would rather not do that as it would be sacrificing a lot. My wo...

Rendering issue

JdmartTidShell.jsx:83 HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': This node type does not support this method. case 1: if i comment the <show> block of heading() it works case 2: ...
No description

Solid Start create resource refetch issue

Hi I am looking for a solution to force refetch the resource provided below. I used { refetch } method and it works sometimes idk why. My temporary solution is to fetch new data is just by using window.location.reload(). example route: /employees/{id: UUID}...

a way to get the same css behaviour of angular where every component has its own css sheet in solid

how can i get solid to work with angular like components with css or scss angular just does it and allows to write its ts or js in 1 file its html in another and its css in another i would rather have them seperate is it possible in solid and if it is how?

Idiomatic way to dynamically create HTML select options

I have a form page that has only two HTML select elements: one for states and another for cities. On app load, I am using createResource(...) to make a fetch to my back end server to retrieve a nested list of states where each state has a list of cities. I would like for the city select element to start off empty. The user must first select an option from the state select element. Then the city select element is dynamically populated with results from the createResource(...) call....

Guidance on isServer vs onMount

I've got this utility function to create a debounced signal. From the server-side, I don't want to be setting timeouts. My first approach used isServer, but I also found that putting createEffect inside of an onMount gave similar behavior. Which of these is the most "solid"? Or maybe I shouldn't worry about this at all since I have the onCleanup? isServer version: ```ts export function createDebounced<T>(value: Accessor<T>, delay: number): Accessor<[T, number]> {...

submisison.error logs to console but isn't rendered on the page

In this example I see submission.error logs to the console but it doesn't render on the page? ```tsx const users: User[] = []; ...

createSingletonRoot shows cleanups created outside a `createRoot` or `render` will never be run

Hello, I've been using Context to create singleton instances that are used through my solid.js app. (mostly for services that make GRPC calls). It didn't exactly seem right to use Context for this. I saw createSingletonRoot which also allows me to create sharable singletons. Problem is I keep getting this warning when using createSingletonRoot. cleanups created outside a createRoot or render will never be run It sort of make sense since createSingletonRoot is outside of the main root. ...

How to have tags in <head> in <StartServer> render using async loaded data?

I am trying to setup lots of meta tags (eg. for Facebook Open Graph) and also page Schema (which is a <script> tag). Some of the data in there needs to depend on async loaded data. But I can't even get createResource to work inside StartServer (just having a createResource in it results in a hydration error)....

How to manually invoke server functions?

Hey all, have a bit of a weird problem trying to combine SolidStart with Cloudflare Durable Objects and Server Functions. The following works great, unless the server function is used during server side rendering, in which case the "request" context that we forward to the durable object is for the page being rendered, not for the invocation of the server function. So the durable object responds with the fully rendered page, instead of the server function result. As you can imagine, this causes issues. It's easy enough to detect when this happens, but I can't figure out how to construct a new request to send to the Durable Object to invoke just the server function? Or perhaps it would be best to skip any rendering on the worker entirely, and just send the whole request to the durable object to begin with. However this would require me to fork the cloudflare-durable preset....

Solid router doesnt match route /@:id

Hello, im having an issue with solid router not matching route /@:id properly, it just returns 404 instead. ```tsx <Route path="/@:handle"...
Next