SolidJS

S

SolidJS

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

Join

Using SolidJS Playground in custom docs

I'd like to use the solidjs playground for interactive documentation of my library. (Should I use sandpack instead?) I noticed that an old version of solid-repl has been published to npm, but it hasn't been updated in a year. Meanwhile solid-playground seems to be chugging along, but it's not published. How can I use solidjs playground (or an equivalent live code editor) for my documentation? Thanks in advance!...

Favorite way of dealing with typescripts `!`-forbidden warnings

For example, I often do: ```jsx const MiddleContainer: ParentComponent = (props) => { const { isAuthenticated } = useAuthState()!;...

Manually mounting SolidJS component within HTML component via `render`

I'm on an adventure of doing some truly weird shit. I'm parsing YAML and dynamically creating HTML and inserting SolidJS components based on the template properties below: ```yaml group/main: template: | <div class="main">...

Solidjs and RxJS compatibility

Introduction: Hi! I’m new to Solidjs and I like that idea where it’s similar to React and does not re-render the entire component for no obvious reason. I came from Angular and React. ...

Question on Functions vs Components

Hey all! I have a quick question. What is the difference between using plain functions versus using components when both return JSX? I realized just now I accidentally had used functions instead of components in my code but when I changed them to components, it broke the functionality. Is it okay to use either or?

Is the createUniqueId-helper safe to use?

We are currently using the createUniqueId-helper on the client only and today one of our data entries was overwritten. We are relatively sure, that this was because its ID was generated a second time when we created a new data entry. Can id clashes happen? Ids are rather short, so I imagine that this is definitely a possibility. Would it be better to switch to something like nanoid here, which can be configured to use a longer id?...

Quiz on SolidJS

Hello, everyone! Anybody could help me? I want to render quiz on SolidJS. Initial I've a json-structure with questions and answers. I want to render quiz where user will choose answers in every questions. As result I get a dictionary with {question_id: answers_id[]} and send it to a backend. Maybe someone have some minutes and could help with my code? I can call via discord and share my screen. ```json...

FileRoutes props for app-wide signals

Hey there. I'm rewriting a small SPA from Yew (Rust πŸ¦€) to Solid with SolidStart. In my Yew app, I have a bunch of app-wide properties....

Nested For Loop?

Quick Version: Every time a For loop runs I'd like for one item to be displayed from the first set of data and one item from the second set of data. I have a For loop that creates a list of items fetched from a database. The stuff from the database is fed to a component in the For loop and each item in the list is the result of the component. OK! I have another list of items fetched from a database. Each time an item from the first data set is created in the For loop I'd like to create an item from the second data set using the same component in the For loop....

Is there some cases where createResource doesn't handle errors ?

Hello, I have this particular case where I'm fetching data based on searchParams and I have a basic error from the back-end: ```js const [baseUrl] = useContext(ARandomContext)...

Are global signals ever reset between test runs?

@lexlohr Sorry - another issue πŸ˜… As I've described in another issue I have structured my application in a way, that my global state mainly consists of global stores. Now to create tests I usually need to first populate my stores with some test data. This does seem to work fine in general, howerver I noticed, that apparently these stores will keep their state between tests. Is this a mistake on my end, am I using stores wrong, or is this a bug?...

How to have a default layout for all routes?

I am using @solidjs/router and I want to have a default layout to have a default background color. How do I do that?

Why does effect re-fire? How to use createStore values in effect correctly?

Check out this component. Why does the effect refire when I'm only changing person.name.first? It has something to do with the Proxy object, but how is that useful if any change to any store fires all the effects where any part of the store is referenced? import type { Component } from "solid-js"; import { createEffect } from "solid-js"; import { createStore, produce } from "solid-js/store";...

Access native html dialogs show/close methods in clickHandler

Hey folks, I am currently using native html dialogs inside my app and am accessing their show/close methods by using them from window (e.g. window.myModal.show()). However this is pretty error prone and also doesn't play well with testing. Is there a recommended way on how to use these without accessing the window? I thought of using refs but apparently these refs are not set, when my handler functions are created, so they stay undefined. πŸ€” ...

Uncaught ReferenceError: createDeepSignal is not defined

Not really sure what I'm doing wrong here. I definitely have SolidJS >v1.5 and I'm using a close copy of the documentation example. Do I need to manually create createDeepSignal? I feel like I'm making a silly error somewhere in here haha. Any help would be greatly appreciated! My code is below: ```ts import { createResource, createSignal } from "solid-js"; import { createStore } from "solid-js/store";...

__vite_ssr_import_0__.default is not a function only on API endpoints

I am getting an error from my api end-points when importing a third party library in my API code. I am able to use same import just fine in the client code. I have checked for the presence of any browser only APIs in the imported code and its dependencies but there is nothing that should break in Node. I am happy to set up a minimum reproduction repo. Just wanted to know if anybody using Solid-Start API features has encountered issues like this....

Why is storageSignal possibly null?

I am having trouble understanding why TypeScript thinks that this storageSignal theme can be null: ```js const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light" ...

Is there a way to debug how callbacks are called, when firing an event with testing-library?[SOLVED]

Hey, I am having a hard time testing my code and would like to find out if and how some of my event handlers are actually being called, when I run fireEvent.click() on a button. Some background: I am running solid inside a Tauri-Application which works very well....

Understanding Suspense in SolidStart SSR

To understand how Suspense behave in a SolidStart SSR project, I have project created using the SolidStart bare template, and updated the Home page and About page as in the attachment 2 questions: 1) When I first visit the page http://localhost:3000/, it does not show fallback of Suspense. I understand this as SSR will resolve all Suspense boundaries before returning the page. However, when I click on the about link to move to http://localhost:3000/about, it show the about page immediately, with fallback of Suspense, when the values are resolved, it shows the resolved values. How can I make the website wait for createServerData$ to resolve successfully first before showing the page (just like on the first page load)? 2) I add a button to trigger refetchRouteData. However, when I click on the button for createServerData$ and createRouteData , their Suspense don't show fallback. I thought the serverData and clientData are Resource and so, I can show the loading state with serverData.loading, just like how compData behaves, but this is not the case. How can I make them show the loading state? ...

SolidStart debugging in VSCode

How can I debug (mean put breakpoints and step over code) SolidStart project in VSCode? I am currently working on a testing SolidStart project, which includes a connection to MongoDB. You can have a look at the project through my public repository: https://github.com/ondrej-osnet-cz/solid-cms To start local project please follow readme instruction. ...