SolidJS

S

SolidJS

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

Join

Possible to map of `useSubmissions` result?

I was just playing with solid-router, and was curious if there was a way to map over the results of useSubmissions outside of a rendered <For> component. In the linked code: https://github.com/JacobSNGoodwin/scavenge-solid/blob/main/src/components/HuntItemsList.tsx#L43, I was trying to basically create a list of items where I optimistically filtered out any items being deleted and optimistically added any being added, while also sorting them. I was able to get the ids of submissions being deleted in a good old fashioned for loop, but we cannot map over the Proxied array (which may be fine and desirable). ...

Help Me Understand SolidStart vs. Next.js Caching

I'm new to meta frameworks like SolidStart and I'm learning about Next.js to understand them better. Next.js automatically caches data for faster performance, but it seems SolidStart doesn't do this. Why is that? Does SolidStart's unique reactivity system mean it doesn't need caching like Next.js?...

Understanding Solid Reactivity Lint Error

In the following component I get this lint warning:
The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored solid/reactivity
The reactive variable 'handleContextMenuCommand' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored solid/reactivity
...

Example in solid-testing-library example not working

Hello, the can render a route with the id test in the solid-testing-library https://github.com/solidjs/solid-testing-library/blob/main/src/__tests__/routes.tsx does not work for me. I get that:
FAIL src/test/pages/Drone-view.test.tsx > location option > can render a route with the id
TestingLibraryElementError: Unable to find an element with the text: Id: 1234. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
FAIL src/test/pages/Drone-view.test.tsx > location option > can render a route with the id
TestingLibraryElementError: Unable to find an element with the text: Id: 1234. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
...

"<A> and 'use' router primitives can be only used inside a Route." When testing component in router

I receieve this error when trying to test a component. The component is inside another component that has a route
No description

Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

I have a store:
export const [mainStore, setMainStore] = createStore<StoreType>({ countries: undefined });
export const [mainStore, setMainStore] = createStore<StoreType>({ countries: undefined });
of this type:...

Set default location state

Hi, I'm trying to have a default state object for all navigation using solid router. I tried using useBeforeLeave in a root component to overwrite the state but it seems that this feature is broken/unusable. ```typescript useBeforeLeave((e) => { e.preventDefault()...

Why does adding a new field duplicate the value?

https://stackblitz.com/edit/github-zon5da?file=src%2FApp.tsx When entering a value in the input field, and clicking on the "Add" button, it seems to be duplicating the input value. Why is this happening and how do i prevent this? Thanks....
No description

Dependency configuration in Astro

I'm trying to add solid-bootstrap as a dependency in an Astro + Solid project. This results in the solid export flag being turned on, so solid-bootstrap exports dist/esm/index.jsx by default. Then I get the error Could not import ./Accordion, I guess because .jsx isn't getting resolved as a default extension. I feel like this is probably standard... Is there some Vite configuration I should add? I tried ```json vite: {...

How do I postpone invocation of fetcher function of the solid-js resource?

I have following snippet in my .tsx file. Could you please explain why mappings resource is being called for switch branches that are false ? How can I avoid it ?
const [pipeline] = createResource(() => api.pipeline(params.id)) const [mappings] = createResource(() => api.pipelineMappings(params.id), { deferStream: true }) ...

how to edit html attribute?

In the v1.0rc of solidstart, the Html tag generated in the entry-server.jsx. Is there a method to change the html attribute such as change dark theme to light theme in other components? If I created a signal to control the theme in entry-server.jsx, I have to use context to share the signal. Is it a proper way to wrap StartServer component into a Context in entry-server.jsx? I think it is a little strange. Is there another method? thanks a lot...

How to deploy SolidStart project to Cloud (AWS/GCP etc.)

I build a simple app with solidstart and following folders show after build the project. Following folders shows. What are following folders use for?
.output...
No description

Resource loading from param blocks navigation

https://stackblitz.com/edit/github-xdufjx?file=src%2Froutes%2Fdetail%2F%5Bid%5D%2Findex.tsx on latest solidstart ```tsx export default function DetailPage() { const params = useParams();...

Is it bad to have A LOT of `createEffect` in a single component ?

Hello ! In my use case, I'm doing components to bridge classes from JavaFX to SolidJS. The classes are implemented in a way that you have a setX and getX for each property....

How SolidStart SSR (& hydration) work?

I would like to know how SSR work in SolidStart. When HTML DOM add to web page and render in server, it sends to client side (browser). Then client side handle events, states etc. (Dynamic parts). is this correct, how Solid knows Components or DOM to handle events (referencing) ? It has pre rendered content before JS load in client side (browser). When use SolidJS, JS return DOM and reference to the code within the JS code like button click event. How solidstart reference it when DOM in page not in JS file?...

Struggling with Router useParams() reactivity

Hello People! I'm loving SolidJS, and I am working on a little "garden" like project, where I can write notes in MDX and have it all work without ever compiling anything. I have an index.html page, that uses solid-js to render the MDX files client side. This does work very nicely. But while switching routes in the url bar of the browser, the site doesn't reload....

order of reactivity

Hi, i have this component ```jsx export default function Orders() { ...

how to deal with flashes of unstyled content

the version of soild-start is v1.0 RC. It shows a unstyled content a while when I refresh the page. In the example of with-tailwindcss, it has the memont of unstyled as well. Is there a solution to solve ? On other hand, Have I made some mistake during render? thanks a lot

Storybook `children` not working as expected

While migrating some code from React to Solid, I noticed an issue in how children are handled in Storybook args. The following works fine with React, but not Solid: ```tsx...