SolidJS

S

SolidJS

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

Join

$server rpc call failing (404) in production mode

Call works fine when running npm run dev but get 404 when build then run npm run start ... has anybody run into this?

How to re-render <Portal> if target component is removed or added?

I want to use <Portal> with id to dynamically insert component to other component. The problem is the target component (mount) can be also dynamically removed or added. What should I do in this case? I found the <Portal> component is not rendered after re-adding target component after removing it....

Modal Implementation

Has anyone ever written a generic component for a modal? Something lean and not an external UI framework is enough for me. I heard the <portal> component is quite useful for this. Background is that I want/need to implement a small DSGVO modal....

createServerData$ question

Hi, In example page below, why do I need to call data() in the export page function for the data to load (or to enable reactivity)? It's not blocking me, but curious if I'm doing something wrong, and seems like it should be unnecessary, esp. since data is referenced in the templated section....

Load component after createServerData$ fetches data and it is rendered

Once upon a time, using solidJS, I used .state from createResource to check when the .state was equal to "ready". I used <Show> to render a component when the .state was "ready". Basically trying to do the same thing in SolidStart but I'm using createServerData$ to get the data. Just want to load a component after the data is loaded and NOT before. Once it gets the data I'd like to show a component. I know createRouteData has a state property. But I'm not using that since m y createServerData$ function takes a prop as a value and as far as I know createRouteData can't use a prop value since it has to be exported, hence appear at the top level and wouldn't have access to props....

Can I make getElementById reactive?

I want to use document.getElementById () as signal. Is it possible?...

how to handle POST in a route?

Hey there, I was looking for something like remix’s action/useActionData, but I don’t even have the request on the routeData, how do I do it? The usecase is simply to render what was posted in formatted and interactive way, I don’t want to redirect or anything like it...

useServerContext() returns empty object in server$() callback

how come useServerContext() returns an empty object in server$() callbacks?

How to not render <Portal> if mount is undefined?

It seems <Portal> always insert to document.body if the mount is null. But I only want to render the mount has element....

get cookie inside $server rpc call

Hi, how can I get an http cookie inside $server rpc context? This is possible using tRPC, and I'm hoping possible w/ $server because it's working out well for me, and I'd hate pull in tRPC just to get a cookie. (edit: or make rest API call, which is prob what will do on second thought if not supported, but bummer to lose the easy type safety)

Solid PointerEvents, Firefox, RequestAnimationFrame and OffsetX/Y

Here's one that took up a bit of my afternoon after I wrote a RAF debouncer. Does Solid 'do' anything with events, like React does, or are they simply browser events? If you do an addEventListener on an element for pointermove, and place these in the handler: `` requestAnimationFrame(() => { console.log(event RAF`, event.offsetX, event.offsetY);...

Suspense triggered witout reading data

So... trying to wrap my head around suspense. This is based off the "Real word" Solid example: I have a service with a store which is populated through actions on singin/signup. ...

Mutating element onMount doesn't re-render

I am trying to mutate the innerText (or innerHTML) of a <div /> in an async function that I dispatch onMount(). This is in SSR mode, so maybe that's relevant here, but I did confirm that onMount is running in the browser only. 1. I tried holding a ref "refDiv", then mutating innerText, but that doesn't seem to mutate the DOM. Are refs copies or actual references to the DOM element? Is there a better way to approach this? ...

create-solid messed up peer dependencies

Upon creation I've got this warning ``` WARN  Issues with peer dependencies found . ├─┬ solid-start-node 0.2.22 │ └─┬ @rollup/plugin-node-resolve 13.3.0...

What's the simplest way to combine the classList prop?

I have a component that takes a classList prop, and I want to combine it with a reactive classList object of its own before setting it on an internal element. What's the easiest way to do that while keeping the prop and the internal object reactive?

How to import `renderToString` into a plain js/ts file

So, I have working serverless application, which has a handler.ts. Inside I atm do: ``ts const html = <html>...

Correct Syntax of passing a Component via prop

I have this component. ```tsx const Test = (props: ParentProps & { label?: JSXElement }) => { return ( <div>...

Animate on scroll in solid

Hey! I've been going through google search after search and I couldn't find any reasonable way to implement animation on scroll (basically if the element should be visible we fade it in). I've tried some interaction observer along with motion one but couldn't work out a solution. Is there any easy way to do so?...

Can a Solid store contain class objects?

Can a Solid store contain class objects? When I implement a simple type like below as a class, reactivity breaks for me when surfacing in a Solid store via a context provider. ```...

ProtectedRoute with a redirect using @solidjs/router

Hi everyone. Is there a way to implement a ProtectedRoute, but with a redirect using @solidjs/router? All the examples I have seen, do something like user ? <Component /> : <Login />, but the url remains the same..