SolidJS

S

SolidJS

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

Join

Solid Start + Tailwind?

Hello, I tried to use Solid Start with Tailwind, but my build ignores cssnano and the classes in the output are not minified/compressed. Is this a known issue? Thanks a lot....

What's the best way to debug `Buffer is not defined`

Hey folks, I am currently trying to re-restructure my code a bit, so it becomes more maintainable. One thing I noticed, is that I sometimes receive a Buffer is not defined runtime error inside the browser when moving things. This happened for example, when I accidentally put a module inside one of my routes sub-directories which wasn't a module and just contained some stuff to be consumed. However I also seem to get the issue, when I export server-specific functions in various places. Generally there seem to be various sources leading to this error....

Solid DND

Asking for help here, as the solid-dnd github seems to be pretty dead (as far as help and documentation go) - so just hoping someone can help 🙂 I am trying to figure out how to render a component using the library. Here is my current code: https://gist.github.com/ZanzyTHEbar/a6b104bf6e16453e6c94a25ee54dd9e4...

SolidStart unknown number of optional nested route parameters

Hi, looking if there's a way to set up file based routes where there's an unknown number of optional nested routes. So could be /:a?/:b?/:c?/.../:f?... But seems might have to then be array of args cause we don't have names. So for now just going 3-4 levels explicitly like ...

how to use solidjs meta

anyone used https://github.com/solidjs/solid-meta cuz I don't know how to use it what's "res" and an error logged saying "renderToString" is not supported

Resource chaining and other promise-like composition

With raw Promises, there are a number of ways to compose them usefully, e.g. .then() for value transformation, Promise.all() for orchestration, etc. Scanning through the docs, I wasn't able to find anything similar for resources. That means that if I have a higher-order caching library that returns Resources, there's no way to functionally compose those results. Am I missing something? If not, is this something I can provide a wrapper for as a user without breaking solid's reactivity model? Or barring that, is this reasonable to consider as a feature request?...

Dynamic parameter on routes

Hello! I have a question. Does anyone know how to manage this behavior with routes with solid start? I'm looking to incorporate a dynamic parameter at the beginning of the URL, like this: http://localhost:3000/{{dynamicParam}}/etc...

How to await on the Resource's promise?

Say users is a resource (from createResource). I would like to await for the underlying promise to complete. How could I acheive this? ```ts const fetchUser = async (userId: string) => { const [users] = useUsers(); // users is built with createResource await users.???; // how to await the underlying promise?...

Rotate Component.

Does anybody know of a Solidjs Library for rotating a component 90 degrees? (and unlike transform changes the dimensions of the element) Something similar to Flutters' RotatedBox https://www.youtube.com/watch?v=BFE6_UglLfQ...

Prevent route from rerendering

Is it possible to prevent a rerender going from /page1/subpage to /page1...

I don't understand why I get this kind of error.no matter which method you try

GET http://localhost:3000/backend An unhandled error occured: TypeError: Failed to parse URL from /api/data at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async fetchData (eval at instantiateModule (file:///D:/%E0%B8%87%E0%B8%B2%E0%B8%99/Discord/Discord%20Bot/discord-server-web/Frontend/node_modules/vite/dist/node/chunks/dep-df561101.js:55971:28), <anonymous>:15:22)...

solid-motion. Children exit animation not triggering.

I am using @motionone/solid for animation. I have a component wrapped in presence. This component contains multiple elements each with their own exit prop set to a animation. When the component is removed from dom, only the immediate child to presence plays it's exit animation. children deeper inside don't play any animation......

Solid start createResource not fetching as first route

Hi all, I'm new to solid start and been trying to create a simple pokemon project that fetches pokemons, lists them in a grid (/pokemon-finder) and then you can click them to get to the details page (/pokemon-finder/:pokemon-name). The problem I have is with the details page itself: whenever I navigate from the list, everything works fine. However, when I reload the page on the details page itself, the resource stays loading forever. I'm using createResouce on both pages: one for the pokemon list on the parent route/component and one for the details in the details page ...

Help me build a custom link component which adheres to solid's principles

```typescript import { ParentComponent } from "solid-js"; import { A } from "solid-start"; import { type AnchorProps } from "@solidjs/router"; ...

SVG images cannot use css variable as fill, they can only use rgb colors

SVG images can have a fill value in them, like so: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xmlns:v="https://vecta.io/nano"><path d="M26.528 82.964a7.14 7.14 0 0 0 2.113 5.063l.332.331c2.824 2.367 7.013 2.22 9.665-.44l32.78-32.878a7.15 7.15 0 0 0-.015-10.133l-32.879-32.78a7.15 7.15 0 0 0-9.329-.68l-.645.647c-2.612 2.62-2.781 6.724-.516 9.539L51.401 44.93a7.15 7.15 0 0 1 .015 10.133L28.361 78.187c-1.22 1.363-1.837 3.068-1.835 4.778z" fill="var(--bg-hover)"/></svg> In this case, the fill value is a css variable called --bg-hover. It is a medium gray color. This SVG image is not displayed as gray though, it is displayed as pitch black. ...

Delay <A> routing? UseTransition between routes?

Basically i want to delay <A> navigate by few 100ms. I would also like to use useTransition between routes when i press A. Is it possible?

useReducer vs createReducer

Hello! What are the pros and cons of 1. the useReducer in the tutorial (https://www.solidjs.com/tutorial/stores_immutable -> scroll down in the left pane), vs 2. createReducer from @solid-primitives/reducer ...

how do you set attributes on `<Html>` and `<Body>` from within a route?

this should happen on the server side so the attributes are set before the js is loaded

Anyone know a good solution for using GraphQL in Solid.js?

Hi, I've been using Solid.js to build a online gaming application. I'm currently working on the frontend which is being integrated with an enterprise-grade backend which uses GraphQL. I've came across two libraries for GraphQL for Solid.js frontend, namely, solid-apollo and solid-urql. The issue I am currently facing is that solid-apollo is quite basic at the moment and does not seem to support configuring HttpOnly cookies. (Corrent me if I'm wrong). Solid-urql does not seem to work in the most recent version of Solid.js, and the library seems quite outdated without receiving any updates the past year....

Signal cross bound a route

Hi, I'm new to Solidjs, I wonder if there's a way to make a solid-router to cross bound a signal? I try to make a emails client app, let's say I have folders for: inbox, sent, trash, later those folders are router link and I have emails list, each email is organized in multiple folders, ...