SolidJS

S

SolidJS

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

Join

SolidJS: Manually using SSR with v8?

Hi, I am working on a project which has a PHP back-end, but which has access to a PHP V8 (https://github.com/phpv8/v8js) module, which means I can perform some sort of SSR behind-the-scenes and render the HTML/javascript before the page load- I'm curious if that is at all possible to accomplish using basically just V8 and solidjs in this way? I mean, I can use renderToString to extract the HTML, but I also need to generate and render the javascript which accompanies my page, in order to allow it to be interactive....

How to save canvas state to backend and load it later?

How can I load the state and save it to the backend later?

Is this really the most ergonomic way to preserve searchParams with <A>?

I've got what I imagine is a pretty common pattern: displaying a list of entities on the left, each one clickable, and when you click it a detail view shows up on the right. The list is filterable, and those filters end up as searchParams. An example URL might be /locations/123/leads/456?leadsCategory=3. For the anchor tags on the left, I've got the following JSX (searchParams is destructured from useSearchParams()): `` <A href={/locations/${...

How to instruct a component to reset a state it holds?

I have a form looking like this (simplified code): ```jsx <Form> <TextField value={store.foo} /> <Select value={store.bar} />...

reactiveMap does not work with size/delete

I have noticed that reactiveMap does not trigger update on delete or when we "subscribe" using size or forEach method. Most confusing for me is delete since if i use has i expect that update will trigger signal, but this is not the case. Is it expected behaviour ?...

[SPA Routing]: How to not call data function for the protected routes

Let's imagine we have the following app ```tsx const App = () => ( <AuthService>...

Why is this store still reactive?

https://playground.solidjs.com/anonymous/5b3ceb29-ea8d-493d-a2fb-fd464b28ae2b I create a store in a createRoot block. I call dispose() right after creating the store. As seen in the demo, the store is still reactive even though I called dispose. Anyone knows why the store didn't lose reactivity even though it was created under a disposed root? What did dispose do?...

Bundling Component SSR Compatible library - sharedConfig is undefined

Hello, I'm trying to create a SolidJS Component library which will be imported into an Astro project. Most of the components will be hydrated, which means they will be rendered in the server. I used the ssr:true option of vite solidPlugin, but I'm facing an issue, This is my vitejs config : ...

Is it possible to create a resource of type HTMLImageElement with SSR?

Is it possible to create a resource of type HTMLImageElement with SSR? The server would have to render the suspense fallback and then load the image right away on hydration. I tried delaying the resource until onMount, but that wouldn’t render the suspense fallback in the meantime...

solid-trpc and infiniteQuery

I am trying to create an infinite scroll, list using solid-infinite-scroll and solid-trpc (solid-start), there is little to no documentation on solid-trpcitself, as it uses different methods from the original, but using the original as the base The following code is what im doing, this returns undefined and keeps loading the same data: ```ts const query = trpc.eep.infiniteFeed.useInfiniteQuery(...

How to handle requests that need to be fetched later?

I use createResource to fetch data from the server and make it a reactive store. But on one page I have tabs. Say Users, Articles, Organizations tabs. For now, when a user navigates to this page, I send 3 requests to the server, and create 3 resources (create or get if already created previously). ```js...

Solid Start: CSR Only Page

I have one page that is very interactive and if client side rendering is not available I'd like to display a page along the lines of "javascript is required". I tried wrapping it in <ClientOnly> but that still comes out in the SSR content. Part of this is based on my bringing over the component from SolidJS and various browser only APIs are used....

Remove element from store not working

I'm trying to remove an element from a reactive store based on the index. I've tried versions of this but I keep getting an error telling me "Cannot mutate a Store directly": ``` props.setMyFilter(i(),reconcile(props.myFilters.splice(i(),1))) props.setMyFilter(reconcile(props.myFilters.splice(i(),1)))...

Protected route dynamic route that has to match certain parameter

I have a dynamic route for a user. The file route looks like this: routes/(home)/user/[user]/(user).jsx It's protected so you can only navigate it to when logged in. BUT.... since it's a dynamic route you can go to like: http://localhost:3000/user/kdjfhdjkf and it will load the same page as http://localhost:3000/user/grahf I think I'd like the page to load if and only if the parameter mathes the current logged in users name. In the (user).jsx component should I just check if the logged in username equals the parameter? If it doesn't then redirect to '/'?...

Default values in props with Merge Giving me a weird interface

In the situation where I want to possibly pass in prop, say arrOfStrings: ``` tsx interface ComponentProps { arrOfStrings?: string[]...

Solidjs site metadata (title, description, meta image etc.) in Javascript

I'm having difficulty with setting up metadata. My site is purely client side. When I use @solidjs/meta and publish the site, the metadata all appears to be null as seen here: https://www.heymeta.com/url/solidjs-bizcard.pages.dev/ I have been able to get successful metadata in the past by hardcoding it into the index.html file in the root folder. Such as with this page: https://www.heymeta.com/url/removeyoutube.pages.dev/. This is not ideal, I would like to be able to encode these in the jsx files so that I can populate them from a javascript object as a single source of truth from which other components draw. Is this currently possible with Solidjs?...

Panda CSS and Solid-Start = FOUC

When using Panda CSS with Solid-Start, I notice there is some major FOUC happening regardless of how I bootstrap up the project. Check out this message in #styling for more context: https://discord.com/channels/722131463138705510/932856348855660544/1143549210290049175...

Is there something like a replacePathParameters method?

Hello, I'm trying to do something like this with the SolidJS router: ```ts...

SolidStart with the static adapter and hynrid routing?

Hello! Is the hybrid routing (islandsRouter) supposed to work with the static adapter in SolidStart? Seems like it's either broken, or not a supported scenario, or I am doing something wrong.

What should I use if I want features of both Resources and Stores?

I'm using createResource in a RouteDataFunc, which fetches a JSON tree asynchrconously. I love using a Resource here because I get access to its state (to show loading etc). However, I want to be able to mutate said data using the amazing API that Store has, such as function addChild(thingId) { myData.update('things', (t) => t.id === thingId, 'child', { foo: 'bar' }); }. Sadly, that mutation API is only available on Store, not Resource -- and state is only available on `Resourc...