SolidJS

S

SolidJS

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

Join

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

Derived data in a store vs reconcile

Hey there, I'm trying to somehow have derived/computed data sit in a rather deeply nested store, ie values that depend on "real" values stored in the store. The docs suggests getters, and that works fine, until I try to use reconcile: ``` const [state, setState] = createStore({ a: 5,...

Best practices for reactively updating a store

I know you can use derived signals in SolidJS, but, is there a way to somehow make a store "derive" from a signal? The only way I can see to do this would be in an effect, but the effect docs say that it's not meant for functions that write reactive state. More specifically, I have a resource, and once that loads, I'd like to put it in the store. If that's a bad idea, is there some other way to have Suspense track an asynchronous operation that updates a store?...

Suggestions for refactoring an async image component?

Hi, I've written a small async image wrapper for a project I'm working on, and I'm wondering if anybody has any suggestions for helping me refactor my component, so that it doesn't feel so... off... ...

weird behavior: a button declared in TSX with onClick does not have onClick in the final html?

o/ i have this ```tsx export const FORM_URL = "https://forms.gle/..." export default function App() {...
No description

Should event: APIevent have client cookies on SSR?

```js import { type APIEvent } from "@solidjs/start/server/types"; import { app } from "./elysia"; const handler = async (event: APIEvent) => {...

Uncaught ReferenceError: React is not defined

Hello! I am using "solid-js": "^1.7.5" and "solid-start": "^0.2.32" for my solidjs project, but i'm getting this javascript-disabling bug! The full console error is below, any help is appreciated! ❤️ ``` Uncaught ReferenceError: React is not defined default StartClient.tsx:81...

Solid-Icons with Webpack and Module Federation?

I've been trying to get Solid-Icons to work with the create-mf-app function (Jack Herrington and Module Federations maintainers), but it won't transpile. Anyone have suggestions to make it work? As a work-around, I'm directly using the SVG code in a local file to create the icons I want from the library where I want them. It's a good learning for adding keys for dynamic styling, but I'd like to use the library the way it was meant to be used....

Is there any secure alternative to createEffect?

About the following statement on createEffect documentation:
"Effects are meant primarily for side effects that read but don't write to the reactive system: it's best to avoid setting signals in effects, which without care can cause additional rendering or even infinite effect loops. Instead, prefer using createMemo to compute new values that depend on other reactive values, so the reactive system knows what depends on what, and can optimize accordingly."
I get the point on the "best to avoid setting signals" inside a createEffect, but that's precisely what I need to do. Is there any other solid primitive to run my effect securely to avoid infinite loops. Your suggestion on createMemo does not fit my use case....

example authorization on the outside server

can anyone show an example of using solidstart with a third-party backend servicing app, for example authorization on the server

no luck with context providers

~hello... I'm trying to use a context provider in a tauri app(maybe you're familiar with it?) and it's not working. The last time I tried to use a solidJS context provider was in a astroJS app. I seem to be getting the exact same behavior here IIRC. It gets the initial values from the createContext and that's it... I can't seem to get the signals in the provider to update. I made a stack blitz that's very similar to what I'm trying to do and it works fine. Not sure why it doesn't work in my app. https://stackblitz.com/edit/solid-app-gn3dpd?file=src%2Findex.jsx,src%2FApp.jsx,src%2FProvider.jsx,src%2FHelloWorld.jsx...

solidstart authorized example

can anyone share the solidstart code which has authorization and redirection of the user if he is not authorized

[SOLVED] Textfield patterns (input masks)

Hello, I am working on something where I want to no allow the user to delete a certain part of text in an input. ```js function CustomInput() { // Define state for the input value const [value, setValue] = createSignal(".meas example foo ");...

How to better handle `from`'s possible `undefined` state?

I'm using from to observe a value from an external source. Because that's an observed value, it will be undefined at start. Further in my code I am using the value, for instance on a <Match>: ```...

renderToString without hydration markers?

Hello! Is there a way to use solid's renderToString such that it doesn't output the hydration markers (data-attributes and html comments)? Would be nice, then I could use the same JSX I already have in my project to send HTML emails.... Should I open up a feature request on GitHub?

Async SSR Magic?

Trying to get Async SSR working in my project, I'm using esbuild. Working on troubleshooting and I found this lovely text box on the SSR docs page: "Keep in mind that you will need a bundler like Vite, Webpack, or Rollup to bundle your application. Here's a fully functional example using rollup and express. solid-ssr-workbench. This repo contains examples of all 3 forms of SSR." I dove into the example repo provided, the only difference I could find between a typical solid config and this one was this line: presets: [["solid", { generate: "ssr", hydratable: true, async: true }]] ...

TRPC. The module system cannot find the file

Help pls. The module system cannot find the file ~/server/routers/root imported into E:/Coding/Projects/tv_emr_log/frontend/src/routes/api/trpc/[trpc].ts. this file root.ts: ```...

How do I use Solid.js with clear data model <-> UI primitive distinction?

Suppose I have a ES6 Map object like following: ```tsx const initialFiles = new Map([ ["a.txt", "foo"],...

Routes import issue

Installed solidjs route package, issues when importing "Routes", getting console error: "Uncaught SyntaxError: ambiguous indirect export: Routes". Anyone with a idea of what im doing wrong?...
No description