SolidJS

S

SolidJS

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

Join

Solid-CLI won't create any project

When creating using node (either via npx or bunx) the CLI fails simply stating 'something went wrong' - when running under bun, zlib causes a crash and solid-cli reports the operation as cancelled
No description

createEffect is reactive, JSX isn't

``` export const SavedLineView = (props: { loading: Accessor<boolean> }) => { createEffect(() => { // This gets called with true, then false, the expected behavior console.log("What's the value here?", props.loading());...

Restricte route by user role, possibly a middleware?

Hello, I would appreciate some assistance from more experienced web developers, if possible. My issue revolves around user roles and restricting access to certain routes based on those roles. While I've successfully hidden the navigation buttons, there remains an issue: if a user types a restricted route directly into the URL, they can still access the associated component, which is something I want to prevent. Currently, I've implemented a solution where if a user attempts to access a restricted route, they are redirected back to their previous route in history. However, this solution isn't optimal as it causes a momentary loading of the component before the redirection occurs. - Im using SolidJS SPA + Go server, not SolidStart....

Navigating with A from and to dynamic route doesn't re-render.

I have a dynamic route routes/post/[postid].tsx. Within this route I have (simplified) ```tsx const [post, {mutate, refetch}] = createResource(() => { return getPost(params.postid); });...

[solved] Can't use `@solidjs/router` in external package for SolidStart

I'm trying to write a library for my SolidStart project & need to use the A component exported from @solidjs/router in the library. However, when I use the library in the app it breaks & complains that it needs to be wrapped in <Router>. If I copy paste the library code into the SolidStart project it suddenly works flawlessly. Does anyone know what's going on? For context, I'm trying to create a builder function that returns a wrapped A component, like so:...

Seems like I found a JSX bug

As long I know, you can add up variables and raw text inside a tag, something like: <p>{myVar} people</p> but if you do that in a SVG's <text> element inside a <For> loop it will throw an error, here is it in the playground: https://playground.solidjs.com/anonymous/c5ffdd2c-b93e-469d-bfc7-e5e49d95ba17 If you delete the % symbol, it will work normally. Is it a bug? or am I breaking some JSX rule?...

How can I protect nothing ever breaks, while the setTimeout is waiting

```tsx createEffect(() => { if (puzzle_lala().is_revealed && is_jump_to_next_puzzle_immediately()) { setTimeout(() => {...

Canonical way to handle exceptions in async functions to perform redirect?

Hi folks, I'm very new to solid and frontend development hence my question. I have a class that talks to server API. It uses cookie to authenticate so eventually cookie may expire and an endpoint returns http 401 error. ``` export class UserActions { ...

[solved]Issue with Solid Start MDX Project: 404 Error for New Page

Hello, I have created a Solid Start project using the “with MDX” mode. By default, the navigation includes an “About” page. However, when I click on the “About” page, it redirects to a 404 page (specifically, the “[…404].mdx” page located in the “routes” directory). I manually added an “about.mdx” file in the “routes” folder, but even after doing so, attempting to access “/about” still results in the 404 page (regardless of whether it’s “routes/about.mdx” or “routes/about/index.mdx”). Additionally, when I refresh the “/about” page, I encounter the error shown in the attached screenshot. Any guidance on resolving this issue would be greatly appreciated. Thank you! : Screenshot of the error encountered when refreshing the “/about” page....
No description

Trying SolidJS + Deno + ViteJS + Solid-Router + TailwindCSS, would love some help :)

Hello, all 😄 I'm trying to run SolidJS with Deno & ViteJS, thus I'm using a new plugin made by community to help ViteJS reolsve deno module (vite-deno-plugin). I have several problem with this repo, I don't have Solid-Refresh, The router does not work 😅 and when I build (vite build), Rollup stop because he cannot found memo inside solid-js package. If anyone has enough knowledge with build and ESM module, I'll be happy to receive some help in order to make it work 😄 Here is the repo: https://github.com/carere/solid-router-deno-vitejs-tailwind...

How to css preloading

When the file weighs a lot, I don’t immediately see the application of styles on the site. I connect app.css to app.tsx...

Handling of sensitive information from the front end

Hello, I am new in front end, now I am trying to make some components, that are shown/hidden depending on the role of the user, if it is admin I want them to see the button and the administration component that is rendered when clicking, but I am thinking that if I save the role in localstorage and a user changes the role of member by admin, he could see the button, then the component could not, because it makes a get request to the backend and this if it verifies in a jwt that is not admin, but...

Resource with async cache

Whats the pattern for using resources with caching that may be async? What I mean by that is that my cache_get function returns a promise so I cannot set it to the initialValue option of resources. I want to display the cached value while I fetch the actual, (the cached value is considered stale) so I cannot simply add it to the fetcher. I thought that using mutate with res.latest would give the desired behaviour, where Suspense is only triggered when initially, and not-triggered when cached value is set. Here are my two attempts:...

Getting this error - TypeError: Cannot read properties of null (reading '_isDirty')

Hi all! I am trying to create a simple home page using lighting Solid JS something like a netflix page. (Images/Posters are rendered using and imagesArray that has the links to the images and rendering using For each loop. I have another Row that will render another row of movie tiles by fetching the data from a url, and stored in an array. each element has the url of the movie poster. in my main page inside the Row I have rendered a list which ultimately does this * export default function IListItemRenderer(props) {...
No description

Derived signals with args?

Docs says that we can create derived signals with functions like this:
const double = () => 2 * count();
const double = () => 2 * count();
Is it okay to add args to it? I mean something like this:...

JS Full stack framework designed web vs API fetch use web

I would like to know what are new features available in JS Full stack web DreamWorks than API data fetching system. API fetch use web means frontend use solidjs and backend use other languages like PHP, rust etc. Use API endpoint to get data. API endpoint or web socket. JS Full stack framework designed web means website design with solidstart, remix or react + nextjs. ...

How do you preserve reactivity across package boundaries?

I've spent most of the day trying every way I could think of to resolve an issue where my components stopped reacting to signal updates when I refactored them into a separate library. The components render fine, they just never receive updates. If I copy the exact code back into the main application package, it behaves as expected. The parent application is being built with vite and the vite-preset-solid plugin. The component library package is npm linked into the application. Here are a few of the methods I attempted that seem like they should have worked:...

How to create a wrapper for SolidJS's setStore in TypeScript?

I have a SolidJS store defined:
const [store, setStore] = createStore<SomeComplexType>();
const [store, setStore] = createStore<SomeComplexType>();
I need to run some code before every execution of setStore, so I would like to wrap it with my own function. Is there a way to do that, that preserves all types and all overloads?...

submit form without reloading

Hello! I have come across a few situations where I want to use the actions but don't want it to trigger a reload of the route for client side purposes - but I can't seem to figure it out now that Solid Router overwrites the native form element. I'm not using SolidStart - just vanila Solid/Router with Tauri. In alpha SS it was pretty easy due to the invalidate helper but I'm finding it pretty hard in the README to figure out a similar functionality? Is this to be expected and now if you want to use native forms - you are forced into the server-like route reload with using actions? Just trying to understand the new flow of things?...