SolidJS

S

SolidJS

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

Join

Use Common Store in js file and edit it using file 1 then use it in file 2.

I have context.js file and it have following code. `export function createI18n(i18n) { const [store, setStore] = createStore({ ...i18n,...

checkbox controlled from outside

I want to control a checkbox from the outside and expose either a function onChange and the props.checked that will be reactive. import { createSignal } from 'solid-js'; import c from './Switch.module.scss'; function SwitchButton(props) {...

Effects not running after a unhandled promise rejection event

When an unhandled error event occurs (e.g. by throwing new Error()), the ErrorBoundary is catching the error. When an unhandled promise rejection occurs, the UI/JSX is being updated, I display the state of the resource in the JSX, and it switches from pending to errored, but the createEffect functions are not running: ```ts createEffect(() => {...

Why is this page with `useParams` and `createResource` not reloading?

```jsx export default function ArticleDetail() { const [article] = createResource(useParams().id, fetchArticle); createEffect(() => {...

call `createServerData$` outside Route?

Can I call createServerData$ outside of a Route? I want to put it in a header that is outside of my routes. Do I need to create a "master route" that has children?...

`solid-start` site opens multiple `about:blank` on Load

My solid-start page is opening multiple about:blank tabs when loading localhost:3000 . Is there any way to figure out whats causing this?...

How to keep/reuse DOM elements across routes?

So, when using solid-start with routes, what is the most idiosyncratic way of keeping one element of the DOM the same, while the user changes pages? I.e. like youtube or spotify, where one element in the DOM is the <audio>/<video> that stays on screen no matter which page I load...

Disabling transition on load?

I have a sticky navbar lower in the page which uses an intersection observer to transition to another color when it reaches the top. But the problem is that there's a transition on page load, is there a smart SolidJS way to fix it?

createResource not fetching on page change

Im using solid and solid router, I have a dynamic route I want to fetch data based on the id. When i go to a route with a different id it just shows the originally resource and not refetching. /category/1 --> change to /category/2 shows the data for 1.
`` const fetchLibraries = async (id: string) => { const response = await fetch( http://localhost:4000/api/library/category/${id}`...

setStore function replace object value

https://playground.solidjs.com/anonymous/f0b1602b-24a8-48db-a37d-e60db6eb3f85 ```tsx function Counter() { const [store, setStore] = createStore({ a: { b: { c: 2, d: 3 }, e: { f: { g: 4, h: 5 } } },...

Solit-start routing works for a bit after `run dev`, but then only shows 404. Why?

After starting dev npm run dev, I get the overview: ``` ** ➜ Page Routes: ┌─ http://localhost:3000/*404...

passing signal to component

i try to pass a signal set function to a component but when i try to use the function inside the component i only get a props.settask is not a function error
<Todo name={cat} settodo={settasks()} list={task()}/>
<Todo name={cat} settodo={settasks()} list={task()}/>
...

Conditional fetching with createResource

Hi! Alright, this might be a little bit silly but here's my problem: I have a context provider component that fetches some data to be used later, with createResource. But I'm passing a boolean to the context provider as props, and I'd like the data to be fetched only if the boolean is set to true. What would be the best way to handle this? I'll provide some code if needed but really it's just a simple createResource calling the simplest fetcher....

Is there a polyfills.ts for `solid-start`? Or is there a way of modyfing the produced `index.html` ?

So, in the aws amplify framework there is a common bug, which all frameworks have to fix somehow: https://github.com/aws-amplify/amplify-js/issues/678 global is not defined ...

Pure client based page complaining about `window is not defined` in solid-start (No SSR needed)

Back when I was just working with solid.js I could use window in my code just fine, for. pages that are entirely client-rendered. With solid-start I use the solid-start-static for client based pages, like described in Alex' blog post https://dev.to/lexlohr/using-solid-start-with-github-pages-3iok . ```js export default defineConfig({...

Why does typescript not accept `text() && text().length === x` in solid-start?

Is anyone aware why typescript complains about
text() && text().length === 6
text() && text().length === 6
in a project with the tsconfig.json that comes with the solid-start template? (E.g. typescript complains I should use text()?.length but it didn't in other projects with solid.js) ...

Universal renderer createElement isn't running

I'm working on a custom renderer and I can't get the createElement function to run. I'm not sure if I missed some configuration or I'm misunderstanding. I have an example I'm going off for a basic custom renderer which calls createElement as expected, but in my version and a separate sandbox I'm not getting the expected log. https://codesandbox.io/p/sandbox/awesome-firefly-huojci?file=%2Fsrc%2FApp.tsx%3A16%2C25...

How to read reactive state from imperative contexts (audio/music)

tl;dr: is there any major DO NOT guideline around (constantly!) reading reactive states from functions (callbacks) that don´t need the reactivity? Will it create "tracking" "dependencies" or any other resources that won´t get actually used or not get properly disposed? Context: I am trying to build a fun little audio app using Solid and Tone.js In the visual UI part of the app I am accessing signals and stores containing things like "musical notes". The usual ...

How to handle auto scrolling in a chat app when new message comes in?

So this is an example what i currently have ```jsx const App = () => { const [messages, setMessages] = createSignal([]); let div;...

How to get `onMount` to be called on the client for a server-rendered site

I've set up a new project using solid-start with solid-start-aws. Running npm run build creates an index.mjs which I can then use as the lambda-function that creates the static website (with some minor corrections https://github.com/solidjs/solid-start/pull/898 ) Now, when using solid-start for a server rendered website, how do I run initialization code on the client? I.e. I would like to initialize some third party frameworks on the client....