SolidJS

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

Join

SolidJS

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

Join

nikiv.dev

1/16/2023

How to do nested <For

I have a signal that is array of arrays ```js const [grid, setGrid] = createSignal([ [1, 1, 1, 1, 1, 1, 1, 1],...

Katja (katywings)

1/16/2023

Is there a way to make an iframe reactively render with state/signals from its parent?

Stuff that I tried: - Set state/setState in the iframe.window.someGlobal and access it in the iframe from there - Wrap createState in createRoot - Render the iframe solid app with runWithOwner with the owner of the parent app ...

nikiv.dev

1/16/2023

how can I use createEffect so it doesn't rerun when certain signals change

my code: https://github.com/nikitavoloboev/test/blob/main/solid-start/src/routes/snake.tsx

Martnart

1/16/2023

Forward reference a Component's state in Template

I try to wrap a Trigger and a Display component in a state managing component like so ``` export function Wrapper(props) { const [state, setState] = createSignal(false)...

foolswisdom

1/16/2023

Child component cannot access context that the parent can access?

I have a file like this: ```tsx import { useLexicalComposerContext } from "./LexicalComposerContext"; import { useLexicalEditable } from "./useLexicalEditable"; import { useCanShowPlaceholder } from "./shared/useCanShowPlaceholder";...

gsoutz

1/15/2023

How do I scroll to bottom, on a scrollable content that displays a Show when

<div ref={$content} Show when={signal()} ``` createEffect(() => { set_signal(true)...

FutureLights

1/15/2023

Solid JS force rerender on signal change

I need to force Solid JS to make changes to the DOM every time a signal changes. Currently it seems that it is batched, probably for performance reasons. I can get around this by wrapping my second signal change in a setTimeout, but I want to make sure I am not implementing a hacky solution. For example, could I reliably get away with using a requestAnimationFrame or is there some Solid JS provided function that I missed? Here is a code snippet that demonstrates the problem and the timeout fix. If you remove the setTimeout, you will see no change. ```...

Pridgey

1/15/2023

Subscribe to data in solid-start

I'm using Supabase with solid-start. I'm pulling data from the postgres db using createServerData$ function. I'm hoping to have this page subscribe to the data and update if another user inserts data to the postgres table. Are there any patterns to handle this using solid-start? I'm not sure how to subscribe in an SSR setting....

Razboy20

1/15/2023

Generate random numbers serverside and don't regenerate on hydration

I'm trying to generate a list of random numbers for a skeleton loader, and I've found a solution, but it does not feel like the right way to do this. ```tsx const [randomsResource] = createResource(() => [""], { initialValue: [...

Vexcited

1/14/2023

How can we lazy load route data using @solidjs/router ?

When using this pattern: ```javascript import UserData from "./pages/users/[id].data.js"; const User = lazy(() => import("/pages/users/[id].js"));...

FutureLights

1/13/2023

Context In Typescript

I'm trying to create a context in Typescript following this example, but copying and pasting the code results in an error when I try and use the ThemeContext.Provider in the ThemeProvider Component. https://www.solidjs.com/examples/context Cannot find namespace 'ThemeContext'....

Razboy20

1/13/2023

Vercel + Prisma

Hopefully someone here can help with my issue, but I'm trying to use Prisma with solid + vercel, however I'm getting an error that "no such file or directory, open '/var/task/schema.prisma'". The issue is, that file should exist. I have other projects on vercel with solid + prisma which work fine, and I have absolutely no idea what is wrong with this one. My package.json includes a vercel-build with

"prisma generate && solid-start build && cp node_modules/.pnpm/**/@prisma/engines/*query*  .vercel/output/functions/render.func/ && cp prisma/schema.prisma .vercel/output/functions/render.func/"

(To copy over the prisma engine/schema into the render function), however the error still appears, even though I am sure the files do get copied....

DanteOz

1/12/2023

Server rendering error on createResource. Inconsistent HMR.

I am currently get this error when calling npm run dev and npm run build just hangs. ```bash GET http://localhost:3000/ An unhandled error occured: TypeError: Cannot read properties of undefined (reading 'id') at Proxy.createResource (/Users/rexor/projects/fastsearch/solid/node_modules/solid-js/dist/server.cjs:412:35)...

FutureLights

1/12/2023

Set Timeout Example

I want to update a single every x seconds in a component. Are there any examples of this I can look at? Right now this is my approach, but it is not working. I can't seem to find any examples anywhere. ``` import { render } from "solid-js/web"; import { createSignal, onMount } from "solid-js";...

lili/lilith

1/12/2023

How to make an Isomorphic Component Library?

What's the proper way to deploy a SolidJS component library with isomorphic rendering?

Michael P. Jung

1/11/2023

How to access browser language during SSR?

In an SPA you would normally access navigator.language but during SSR the navigator is undefined. How can I access the browser language/locale during SSR?

Baptiste

1/11/2023

Currently, I need to give default values to component properties if I want them to be registered: ```ts customElement( 'typebot-standard',...

Tur

1/11/2023

how to make a route working after page reload

Hello! I bumped into a nasty problem with solid-route.
It works while I'm surfing from the root page to other pages. But once I refreshed a page, that is not root, it stop working. It throws 404. The mistake is showed just on production build. When I use npm start it works properly. What may be the reasons?...

XxX_MLG Noob_XxX

1/11/2023

Does SolidStart Have a Global `Context` That Server Functions Can Use?

Other SSR frameworks have a concept of a "context" that is globally available to all server functions. For instance, Svelte Kit has event.locals (https://kit.svelte.dev/docs/load#shared-state), which can be set at the server entry point (hooks.server.ts). This context info is then available to all of the server data loaders. Similarly, Remix passes a context argument to its loader and actions. The value of context can be set by getLoadContext (https://remix.run/docs/en/v1/route/loader#context). Does SolidStart have anything similar? Or are there at least plans to add something like this in the future? Having a global context is really helpful when it comes to user identifiers....

Boku 🜲

1/11/2023

how do i make my component to accept class and classList ?

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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