SolidJS

S

SolidJS

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

Join

Detect when client closes a connection that is being streamed from a server function

I have a server function that, when called from the client, yields data back to the client from a generator. This data stream is supposed to be continuous over time, with the restriction that the user can make a request that stops the stream (via a server function and in-memory cache). The problem I currently am facing is that if the user disconnects (leaves the page, drops connection/internet somehow), the stream remains open (server logs verify it still attempts to send data back). Is there a...

dealing with data shared between pages

this kind of seems like a common question among meta frameworks w/ routing built in of, "how do i share data from one page to the next". in this case, the cache doesn't help as this really only dedups for a single round trip more or less the scenario i'm dealing with, which i would appreciate advice, is follows: i have a dashboard page where i fetch all of the groups the user belongs to, and i display them as cards. if the user clicks a card, it brings them to /groups/[groupId]. here i render out a heading with the group name (which of course i already fetched on the previous page) and then all the rest of the page, which takes a bit to render due to fetching im waiting on. it is a nice touch if the heading renders while the rest of the page loads via suspense. this seems like a no brainer as i already have the data i wanna show.. i just don't know the best way to get it where i need it...

weird history/url derived state behavior when using mouse back button

kind of a weird issue. basically i have a modal/dialog for which i derive open/close state from the url as the source the general idea is in a hook i grab the search params, and then return a memo'd state method that parses the params and returns whether or not the dialog is open based on that. then some open/close methods too. it was seemingly working really nicely and i thought was an elegant solution, ux and dx. however, i'm noticing that the back button i have on my mouse, when trying to go back to closed state, does not work. the modal closes on button down, and then comes back on button up....

How to include Gzip compression to Solid Start project?

Hi, I was using google lighthouse to check the page performance and it suggests to me that I should use gzip compression for json api response. Is there any easy way to include it to my app?...

Prerender not working without javascript

Hello i just made my appm using solid start and i want to do prerendering. Everything compiles but when i load the page without javascript i have an empty page still. Is this normal? Here is my app.config ```ts export default defineConfig({...

Optimistically change URL and state without waiting for async to resolve

I have a list of <A/> in the sidebar. The pages that those <A/> link to have an async data using createAsync. The whole page component is wrapped in a Suspense boundary with a spinner fallback. Current behavior: when clicking a link, the URL and the state (in this case, the activeClass prop in the <A/>) stays the same until the whole request or the async data is resolved. While navigating, the page component displays the fallback spinner as it should, not the URL and and the <A/> state doesn't update....

Multiple layouts using `Router`

Hi, I cant figure out how to do nested layouts like this ```ts <SidebarProvider> <SiderBar />...

Missing SSR component after client side navigation (help with icons library SSR)

Hey all, I'm currently building a port of phosphor icons to solid, based on their react package. I wanted to also add SSR support, but I'm not very experienced in solid start. I was thinking about separate exports, like in their react package, and bundle it with babel-solid preset using ssr true. This kinda works, as I'm not getting any hydration errors, but after changing pages on client side (home -> about -> home) the icon disappears. I'm thinking that maybe in case of Solidjs it would be better to use isServer flag. Since I don't have much experience, wanted to ask for an advise, what would be the best way to export icons with good SSR support. In client side icons I'm using context for global theming of icons (like in react version). If anyone would like to share opinion or tip, I would be thankful! 😊...

Can't start solid start project

this is my dependencies. When try npm run dev and access the localhost:3000 this throws this 11:05:49 PM [vite] Error when evaluating SSR module $vinxi/handler/ssr: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>. at Module.notSup (file:///E:/SolidStartjs/firstTime%20SolidStart/solid-first/node_modules/solid-js/web/dist/server.js:1136:9)...
No description

Run server code only once

I'm trying to run an embedded db in SolidStart, but every time a new route is visited the db initialization is re-run and the db data gets corrupted. Is there a way to only run the db code once and reuse it for all routes? I saw this issue in nitro which seems like it would solve it, but the code still runs for every route https://github.com/nitrojs/nitro/issues/711#issuecomment-1415819402 My db initialization in utils/db.ts looks like: ```ts import { Database } from "db"...

[h3] [unhandled] H3Error: Client-only API called on the server side. Run client-only code in onMount

I keep getting the above error I have SSR true in configs when i set it to false everything works alright As it told me that server side code might have some client code I looked back at my server code but didnt find anything specific to client code, what could be a solution? has anyone gotten the error before?

Solidstart Hydration error when using show and jsx element

I am moving my project to solidstart and i having an error with this component ```ts interface ArrowButtonProps extends AnchorProps { prefixIcon?: JSX.Element;...

Setting infinitely deep store?

I'm building a website builder, and my model looks like this:
type Element = {
elements?: Element[]
content?: Content[]
}
type Element = {
elements?: Element[]
content?: Content[]
}
...

Difference between `effect` and `createEffect`

I notice the docs recommend createEffect for effects from solid-js But effect also exists as an import from solid-js/web What is the difference between them?...

Behavior of query.set / cache.set

Hello, I am trying to preform some optimistic updates with the SolidStard data loading features. I've found the undocumented .set function on query (previously named cache) but can't seem to get it to mutate any data. Calling it seems to have no effect on createAsync stores. A couple threads have asked about this but have not received answers. Would anyone be able to shed light on the subject?...

How to improve list rendering performance?

Good evening, Just recently, i made a simple app with Solid. However, i'm a bit stuck at rendering list. Is there any best practice in Solid to render list? I suspect that I'm somehow doing something stupid since there is delay around 1~2s every time there is a mutation on the state and the list is getting rebuilt. The performance degradation is apparent when rendering a big list....

Error handling with chained resources.

Hello, I'm facing a problem with a chained "createResources". In a normal case, everything works fine. However, if the first fetcher throws an error, the error is not caught, which breaks the reactivity. ```const [getId, setId] = createSignal(1);...

How to handle reactivity in this example?

Hello. I have a Project type I have a context provider that provides the store of Project. So in my components I grab it like so - const { project, setProject } = useProject(). I have a separate components that is supposed to render project.nodes and it uses SortableJS. This component grabs project store from context and then renders items inside a custom Sortable component. It all works fine, until I try to update the state on reorder....