SolidJS

S

SolidJS

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

Join

SolidStart or Vite + solid-pwa plugin for creating a fast and secure PWA app?

I want to create a PWA app using Solid. I am not decided on if I want to use CSR or SSR but I'm leaning towards SSR. But should I choose SolidStart or Vite with a solid-pwa or a startup template for vite and solid like this: https://github.com/xbmlz/vitesse-solid that has the pwa plugin. Also when developing the PWA can I use google workbox or is that something else?...

is Index of Store that is array Signal?

I created an array containing several objects based on createStore. When I iterate through this array using a For component and access each object, I don’t need to use a function call to retrieve specific data. This behavior aligns with the documentation. However, when I want to perform actions based on the array’s index (such as deleting the current object), I need to use a function call to correctly obtain the index value. Here’s the code snippet: ```javascript <For each={items}> {(item, index) => (...

captureStoreUpdates vs reconcile

Hi! I'm trying to get a stream of immutable object values from a store. The store is frequently updated from a data source that sends big chunky records with minimal actual changes, so I use reconcile to keep the amount of signalled changes to a minimum. This works very well, but the captureStoreUpdates primitive from https://primitives.solidjs.community/package/deep somehow doesn't play ball and I can't figure out why not. ```...

Errors loading Bootstrap SASS in dev-mode

I'm migrating a small app from Solid Start 0.3 to 0.5, so I started with a new app and am bringing things over. One thing I use is Bootstrap SASS. I've added sass and then import Bootrsap. However, in dev mode there are a load of errors about undefined variables, etc. No issues with the build and running from the build though. Bootstrap version is the same as I use in my 0.3 app, and it works fine in dev-mode over there....

some confusion regarding authentication when accessing third-party APIs in SolidStart.

I have some confusion regarding authentication when accessing third-party APIs in SolidStart. Here’s the scenario: 1. I want to use Server-Side Rendering (SSR), so I chose SolidStart. 2. When accessing a third-party API, bearer authentication is required....

Uninitialized signal in JSX but initialized in component

I have a component that is using an xstate machine to handle some state. At the top of the component I initialize the machine and set up a signal to handle the state, and then reference it in the JSX I return. The signal is initialized and works fine in the component body but is undefined in the JSX: ```ts export const Authentication: Component = () => { const fsm = createActor(machine); const [getState, setState] = createSignal<State>(fsm.getSnapshot());...

understanding store setter updates

In this example: ```typescript import { produce } from "solid-js/store" ...

remove element from store array createStore([])

hi, i need to move element in store to the front of the array or delete it and add it to the front. i used signals, now switching to store. ```js const rect = board.getBoundingClientRect()...

Trying to simplify tab creation

I want to simply tab creation into 2 components: <TabGroup> which contains many <Tab> components. Each <Tab> has a name attribute that specifies the name of the tab displayed in the tab bar. The children of each <Tab> are content that are part of that specific tab. How can I implement this in Solid?

ReferenceError on something that should (and DO) exist

tl;dr: getting a reference error on an existing (declared and in scope) variable: ``` categories.tsx:33 Uncaught ReferenceError: categories is not defined at get when (categories.tsx:33:20) at Switch.createMemo.equals.equals [as fn] (chunk-DIOA272S.js?v=36072530:1608:28)...

Can't find variable: theme

I'm writing a solid + SUID + Tauri application, and I tried to start simple, by setting the application theme; but for some reason, when I actually try to run the app, whatever I put in for the value of theme is reported as 'can't find' (even though it clearly can) This issue occurs both in Chrome and in the Tauri window My code so far looks like this:...
No description

Uncaught TypeError: Cannot read properties of undefined (reading 'afterCreateSignal')

Hello, I have currently an error on dev but not in production :...
No description

SSR/SSG: How to share context between client and server

I am trying to implement a Design System of sorts using SolidJS (my prior experience is with React) and ran into this challenge:
How can we provide dynamic context that is both available when rendering document <html> as well as to components that need to consume it at both SSR and CSR time?
I was able to wrap the server side rendered document with a provider and everything works fine here 🥳 (which means that most of the features I am looking at will be straightforward to implement)....

api-routes

I want to use solidstart. But my backend API is in a different programming language. I need to communicate with it via the API and receive json. Also auth to it api. What do I need to use as an http client? Axios?

[h3] [unhandled] H3Error: Missing "./runtime/http-types" specifier in "vinxi" package

``` import type {FetchEvent} from "@solidjs/start/server/types"; import {getHeader, setResponseStatus} from "vinxi/runtime/http-types"; export const cors = async (event: FetchEvent) => { if (event.request.method !== "GET") {...

solid tagged template literala

I want to use solid with tagged template literals, now I want to have proper syntax highlighting and autocomplete in my html, is there an ide plugin that solid recommends using?

Lazy Loading make a blank page when component change

Hi, I have an issue with Lazy Loading for solid-start. Actually, I have implement a switch component with lazy loading enabled but when I change a component (who is lazy loaded), the page become blank during less than 1 seconds......

Error "RequestEvent is missing." for cloudflare build

Hi, I have updated to the latest 0.5.4 solid-start beta and started to see this error when building for cloudflare (on 0.4.11 it was not present). Interestingly it is only thrown after my code executed successfully, so there seems to be an issue with actually handling the return or non return of the function. Made a reproduction by using the with-auth example from the repo to make it less likely that it is my own doing. I was wondering if it has to do with the AsyncLocalStorage update in the latest beta and how to resolve this. Somebody got an idea....

Blank array of documents from Firestore - createEffect(), createSignal()

Hi all, I'm starting with web frameworks for the first time and chose SolidJS. I'm stuck... retrieving collection of docs with onSnapshot from firestore in createEffect. When the array of docs is populated I'm saving it in variable (createSignal([]) - default value empty array). When I'm using <For each> everything is working, but whenever I want to access an attribute of the first array element (without <For each>) I'm getting error "Cannot read properties of undefined". When debugging I see that the console log is running 2 times - first time the array is empty and second time it has my data. It seems obvious, that when the array is empty for the first time and I want to access the first element it's undefined, so the attribute cannot be retrieved, that's why this error. Is there any nice/standard way to solve this? I've tried to set up some dummy object for the createSignal default value like createSignal([{round_nr: 0}]) and this is working, because for the firt time when the function is running the array has this dummy object and is not more undefined and I can read the round_nr attribute which is 0 for the first time and immediately is switched with proper value when the function runs for the second time. ...

Custom auth solidstart by prisma

Can anyone help me make my authorization on solidstart? I have orm prisma. I created a user table, what else do I need? 1) how to authorize a user, I have an endpoint trpc. 2) when entering the site, I should receive information about the user; if the error code is 401, then the user is redirected to the logIn page