SolidJS

S

SolidJS

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

Join

Bug with `solid-js/store` and `solid-primitives/history`

I ran into a bug and reproduced it in this stackblitz. For some reason with this configuration of the store object like this: { [key: number]: { image: { id: number } | undefined; } } the history object is starting to resurrect it incorrectly, like skipping the state (see in the video) My guess is that the reconcile function is not working correctly, but I could be wrong https://stackblitz.com/edit/solidjs-templates-jzapxh?file=src%2Ftest-todo.comopnent.tsx...

Clicking browser's Back button from external site doesn't render the right state

The problem occurs only in production, not in localhost. When a user is redirected to an external site, then presses the brower's Back button, the SolidJS SPA is not rendering the right state. Example:...

hydration mismatch when wrapping component in a suspense

I am trying to render a loading ui when data is being collected on the server: ```tsx function SectionA(props: { expanded: boolean }) { const apps = useRouteData<typeof routeData>(); return (...

getting route parameters severside

Is there a way to obtain route parameters on the serversides? I know that we can use useParam on the client, but i wish to fetch some data on the server. Any help would be greatly appreciated!...

I can't seem to get ref bindings correctly

I'm trying to implement spatial-navigation in my app so I want to convert this package from Reactjs to Solidjs: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/ (There are only 6 files to convert and 1/2 of them are vanilla JS code) My current issue is that I can't seem to get the ref bindings correctly. Here is a hook exported from the app:...

Running a script in a solid start project

Hi, I'd like to run a script, to seed my db, in a solid start project. I thought id just be able to npx ts-node src/foo.ts but I get an error TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" Any ideas on how to get this to work? TIA....

whats the use case of routeData and useRouteData

From my understanding, it seems possible to directly get the data needed using ‘createServerData$’ to fetch the data on the server, or is that an anti-pattern? From the docs, it seems that routeData is called once per route, but in most apps that i’ve built, i usually do the data fetching at the component that needs it. I.E, i’ll have pass it down as props....

How do we determine what's client side code and what's serverside code

As the title say, i'm unsure how to seggregate my code, or the right way to think about this framework. Any resource would help indefinitely! Thanks!

Controls

Hi all, I'm trying to use createStore from the API. I want to subscribe to change the store object itself, not its fields. But its behavior is different from the example https://www.solidjs.com/tutorial/stores_mutation?solved If I change the array to the object in the example, its new values are output to the console. But if I open the same page playground in incognito or copy the code into a new project, it stops working....
No description

Setter type errors

I'm trying to create a custom signal to use in the storage option of a resource The run-time logic of the setter works just fine but there's a type error that I can't pinpoint...
No description

"Deep linking" Why the disparity btn local & prod

Hey, I'm developing an app that uses Supabase's magicLink auth system. The user enters their email and a login link is emailed to them. The link hits Supabase's server with a token. After verification the user is redirected back my app with a JWT token. Straight forward enough. In my case the redirect is to a page that is configed in my Routes. During development (localhost:3000/) everything works fine...the JWT is saved in local storage, I get logged in. No problems. I push the code to Netlify by way of github, Netlify builds the app with no issues. However, when trying to log in to the production site, I was getting an error from Supabase 401: invalid claim: missing sub claim. WTF....

image error and load

hi guys i am making a retry function on an image when an error happens, also i want to improve my code and also i am getting a type error in the event on error but that type exists ```tsx const CustomImage: Component<CustomImageType> = (props) =>...

splitProps default value

how can i define the default value of a prop with split prop, for example the "loader" prop is optional i want tha make it true by default, but it is undefined ```tsx const [ local, rest ] = splitProps(props, ['loader'])...

Request data not consistent between createServerData$ and API route

I have a lucia x trpc x solidstart project setup. TLDR: I'm observing that the event passed to my createServerData$ and the event that is passed to my API handler is different. Here's my project structure:...

Show PDF on my page

Does anyone know of a good way to have an interactable/live preview of PDF files and a good way to go about them? I'm trying to provide multiple research docs on my site and would like to showcase them trough PDF's (it is also a requirement to provide PDFs so why not show them as well?) I tried adding the pdfsclick library for Solid but it wouldn't show the PDFs (the examples also look a bit broken) and there was not a lot of documentation for it. ...

Why does `Outlet` not work when using `element` instead of `component` in the configuration?

Wrapper / container ```tsx const MainContainer = () => ( <div class="flex flex-row min-h-screen"> <Outlet />...

Custom ProtectedRoutes component does not render elements on URL match

I've created a custom component ProtectedRoutes which is rendered within App.tsx. The purpose is to check the URL that the user is viewing, allow or deny based on store.user.isAuthenticated variable. There are also two sub-components for ProtectedRoutes. One is AllowAuthenticated: ```tsx...

Capture events from child of Portal

Hey I need some advice. I want to captured an event of an element inside a Portal by the parent element of the portal. But in the test file the event is not captured at all. If I remove/comment out the Portal it does work but with the Portal it doesn't. Does anyone have a solution for this? `...

Unable to find modules

Hey guys, new to solidjs and SSR frameworks in general. I'm testing out a solidstart template generated using a community tool called "Create JD app". This allows me to quickly spin up a boilerplate project similar to create-t3-app. The problem is that I'm facing this runtime error: ``` An error occured while server rendering /:...