SolidJS

S

SolidJS

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

Join

How to detect env in `createServerData`

Hey there, during development I like to run npm run dev on my site, so I can render it locally in the browser and quickly iterate design. With npm run build it'll create the code that is actually run on the server environment. Now, inside of createServerData the db I have available on the server is not available when just running npm run dev, so I would like to inject some test-data....

Uncaught ReferenceError: _$HY is not defined

So, I'm trying to change my site to server side rendering. The site runs locally when run via yarn dev, but then I deploy it, I get:
Uncaught ReferenceError: _$HY is not defined
Uncaught ReferenceError: _$HY is not defined
...

createResource swallows error?

I noticed errors get swallowed when I use createResource. Here is some simplified example code: ```typescript window.addEventListener('unhandledrejection', (e) => console.error(e)); window.addEventListener('error', (e) => console.error(e)); ...

Make signal react on prop change

Say you initialize a signal by a prop:
const [error, setError] = createSignal(props.error);
const [error, setError] = createSignal(props.error);
If the prop changes, the signal won't react. What must be written is:...

Make sure the dom updates (equivalent of `tick` in Svelte)?

I created some library where a piece of code relies on the dom having been updated: ```jsx // in some callback setError(true); ...

Solid Transition with createServerData$

Is there a way to get Solid Transition (https://docs.solidjs.com/guides/how-to-guides/animations-in-solid/solid-transition-group) to work with showing data that's fetched using createServerData$? I get no animation when I try to use solid transition on a component that uses createServerData$. I get animations when I use solid transition of arrays like this one: const test = ['123', 'abc'] so I'm pretty sure the reason there is no animation is because of createServerData$. Actually it shows...

How to use SolidJS Routes in Astro?

I try to use solidjs route in astro project but it does not show anything. This test 1 and 2 code not give any outputs. Test 1: index.astro...

how to get two class managers to cooperate on a single ref?

I’m making a currency input field that is supposed to interact with a 3rd party slider class that expects a native html input element to manipulate when the slider changes. So I’ve been trying to use the callback version of the ref to set the props.ref to a proxy wrapped version of the elements’s ref that can intercept the .value reads and writes the slider manager is trying to do. But I’m getting the error ”Cannot set properly ref of #<Object> which has only a getter” so I don’t think that’s p...

Does SolidStart have CSRF protection by default?

questionmark Didnt find it in docs, so I'm just asking to be sure...

Context not working as expected

Hi everyone. I’ve got a strange behaviour in my project. I want to use my context as a global state manager so when I pass a function which has my useContext function in it to an addEventListener, when the addEventListener is fired I don’t have the correct value of the store contained in my context but only the default value.

Conditional tailwind css using signal

Hi there, I am looking for a way to apply a tailwind css style to a div when the signal is set to true. Is that possible?...

problem with "use:" and custom directives in tsx

I copied the custom directive from the docs ``` import { onCleanup } from 'solid-js'; export default function clickOutside(el, accessor) {...

Uncaught TypeError: _tmpl$6 is not a function

I'm trying to create a library that exposes a web component that's implemented internally with Solid.js. I'm using Rollup with rollup-preset-solid to bundle the library as an ESModule, but when I try to consume the library I get this error. This is my rollup config file: ```js import withSolid from "rollup-preset-solid";...

CreateResource Not complete Fetch (promise) when page first loads, but completes when VsCode Saves

Hey I'm severely confused about what's happening under the hood for npm run dev. When I'm using createResource(fetcher) and do a console.log(response) in the fetcher function, the data gets printed out in my VSCode terminal only. But once when I hit save without changing anything, it will show up in the console of my browser (chrome). Does anyone know what is happening to cause this? My example: ```import { createResource, Suspense } from "solid-js";...

HTTP trip, custom backend

I was reading about this main idea of SSR, that it skips one step by fetching data and sending it from the backend instead of frontend So what if I want to have my own backend, then when route changes my createServerData$ sends a request to my other backend instead of straight to database and thats an additional trip (? if I got it right) So the question is ...

force a dom update when updating a signal before the rest of the onMount function

in this code csvColumns is dependant on setData, how can I force the render update? ```jsx...

Add a ref and make it also exposable

To create a ref, I can write:
<input ref={ref} />
<input ref={ref} />
In order to expose it to a parent component, I can write:...

Running tests in docker fails, but works outside of docker

I am attempting to set up a Docker development environment for a SolidJS application using Docker Compose. When I access the webpage via localhost:3000, the application renders without issues. However, when I attempt to run npm test using vitest inside the Docker container, I run into a problem. The issue appears to be with the render function, as it does not seem to render the application correctly within the Docker container. The debug output only shows <body><div /><body>. Interestingly, when I run npm test outside the Docker container on my local machine, the test passes just fine and the debug correctly renders the application. Here's the relevant code from my test file: My test file:...

Best way to implement a dialog in Solid.js

I'm using Solid.js for a library and need to implement a dialog to capture some user input (say, a selection from a set of multiple options). I want to provide a function that will display the dialog and return a promise that will resolve with the result of the dialog (e.g. the option the user selected). What's the best way to go about this? What I have in mind is to render the dialog and add an event handler for an option being selected that will resolve the promise and destroy the dialog. However, I can't figure out how I should destroy it. Is there a better method I'm missing?...

Reactivity when passing props down not reactive on nested component

Hi guys and girls, I'm currently struggling with reactivity. Here's a look at the code: ParentComponent.tsx ```typescript ...