SolidJS

S

SolidJS

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

Join

`useSession()` unexpectedly changing

I'm having a hard time with useSession() and I'm not sure how to articulate my issue. I have some routes protected by a getAdmin() query, redirecting the visitor if is not logged and not admin. The process is working, and the session is supposed to be valid for 14 days. However, after 1 click, or after n clicks – it varies, it does not work anymore. I noticed in the request header in my browser that the cookie value is changing when it happens: from cockpit=Fe26.2**78859073ec... (the valid/logged cookie) to cockpit=Fe26.2**1be0589ce4be (the invalid/blank cookie) without specific reasons. What I noticed though is that the cookie is changing due to the response of the admin layout route as shown in the screenshot....
No description

type augmentation in monorepo with turbo-repo

Not strictly solid specifacally related but wanted to try my luck here anyway, since i'm working on this in a solid-project. I have a monorepo setup with turbo-repo and trying to do "type augmentation" for LinkProps. I have a ui package set up of which i want to augment some props....
No description

Complex createResource management

I'm trying to write a way to handle a specific scenario where I wanted to use something like a const ws = useWebSocket(); that: - when called on the server side, initializes a WebSocket connection to another server and returns a server side wrapper to the WebSocket ~ must be waited and cached - when called on the client side, initializes a WebSocket connection to the SolidStart server and returns a client side wrapper to the WebSocket ~ must be cached - when the user session id changes, the connection must be closed if the id becomes undefined or create a new one if the id is not the same as the previous one - the wrapper contains the same functions on the server side and client side, allowing it to be used inside other resources...

SolidStart Meta not updating

Per the docs, I tried to add meta tags to my website, I added the base <MetaProvider> and the fallback tags inside my <Router layout={}/> as seen below ``` <MetaProvider> <Title>test</Title>...

abort `"user server"` function call

is it possible to abort a call to a "use server" function? behind the scenes they're just fetch()es right? if so is there some way to pass though an abort signal? thanks....

Unable to provide context to children

I'm writing a dropdown component, so I decided to use a context to provide tools to the children. I have defined the context as an object with some setters and accessors to a set of signals and no matter what I do, I can't get it from the children components. I'm using SolidJS + SolidStart Here's some code snippets:...

createSignal with preexisting data store?

https://playground.solidjs.com/anonymous/5ab699c2-0e36-470c-9aae-a9fa62d15d75 Seems the UI will not update when the data is updated outside of createSignal; how can I add it in my data.tsx file please? The timer (while burning) should update the current state to empty when the fuel runs out to 0. TIA...

Solid Start does not load images on load event?

```ts import { Show, createEffect, createSignal } from "solid-js"; interface LazyImageProps { placeholder?: string;...

Problem with text that jumps lines CSS

Would anyone know how to fix this problem? I have tried everything but it doesn't work for me, if I have a choice of for example 2 words, the dropdown will not increase its size to show both words on a single line, I can use no-wrap but if I shrink the window , the text will not skip lines so that everything is visible. I'm not sure how to fix it.
No description

Post CSS with Solid Start

I have one question. Does someone know to include Post-CSS in Solid-Start project? I use SCSS and I would like to make the bundles smaller by analyzing the .tsx files. My files use scss like so....

Impossible to build fresh Solidstart

I have "TypeError: Cannot read properties of null (reading 'push')" on every build I make with Solidstart. I tried multiple official templates and no one is working. I'm using pnpm & nodejs v21.4.0 on macOS...
No description

Solid MotionOne, how to animate presence in list (using For)

I'm trying to animate additions/removals of a list, but am running into problems. I have this code: ```import { type Component, For } from "solid-js"; import { Motion, Presence } from "solid-motionone";...

SolidJS Stores + SortableJS - Weird update bug at runtime | but data is correct.

I'm not sure how to best explain it so here's a video~. The code is actually pretty easy to follow (Thanks to SolidJS's stores primitive, it's amazing). I've learned a lot of best practices with Solid since then when I picked up SolidJS in May 2024. I'm running into another roadblock that's testing my knowledge. Anyone know how to maybe fix this? Or what the reason is? I'm already using reconcile. I'm thinking it's because SortableJS seems to perform updates on the DOM elements outside of SolidJS's knowledge so maybe it's just what it is?...

minified UI library package code calling undefined map

Hi, I have a lot of apps I want to make this year, so figured I should make a UI library for myself so I don't have to make a button or footer or what have you for each app. I am pretty good at the computer, so not daunted, but I'm getting this issue I can't quite figure out on my own and jippity is not helping lol....

Wrapping SolidStart: JSX is an unknown file extension

https://stackblitz.com/edit/sb1-k8bui6zy I am trying to create my own CLI to wrap around SolidStart CLI (Vinxi) to make a sort of meta-SolidStart framework. I kept running into problems with my project so I successfully re-created the errors in the stackblitz link above. I left some Readme files inside the packages to clarify what I'm trying to do. I want to use my custom CLI to control Vinxi, so I setup a CLI tool to run this code as a proof of concept: ```js...

Unexpected behavior when dealing with stores (createStore)

Hello everyone, so I have this line of code:
{data.user ? <A href={`/years/${data.user.position || "fy"}`}>Begin studying</A> : <A href="/login"><FaBrandsMicrosoft /> Login</A>}
{data.user ? <A href={`/years/${data.user.position || "fy"}`}>Begin studying</A> : <A href="/login"><FaBrandsMicrosoft /> Login</A>}
It works perfectly but when the user logs out (user sets to null), they get this error in the console:...

<style/> inserted above the component (unwanted)solidstart SSR

use "sass": ```css @use "sass:math"; @use "colors"; @use "mixins";...
No description

Registering API Endpoints on SolidStart

Hi everyone! I’m exploring ways to programmatically register API endpoints in SolidStart without relying on FileRoutes. My goal is to fully control the paths manually instead of using the file-based routing system. I know it’s possible to do this using a middleware like so: ```ts...

Pattern for "sticky" searchParams?

I have searchParams that I would like to be "sticky" over route changes? I know I could use the current searchParams to contruct the href for many of the links on the page, but I'm wondering if there is a common pattern for this? Thanks....

How to use query.set (prev cache.set) to mutate async data for optimistic updates?

i’m trying to use the undocumented query.set to mutate async data for optimistic updates. it works for async data from createAsync that’s reactive to param change. however, when i manually revalidate the data (either by calling revalidate somewhere, or revalidating from an action), it fetches fresh data rather than using the query.set i called earlier when should i use query.set if i’m going use revalidate() in order get the data? calling revalidate is the only way to get the data as my query isn’t reactive to a param change...