SolidJS

S

SolidJS

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

Join

Conditional fetching with createResource

Hi! Alright, this might be a little bit silly but here's my problem: I have a context provider component that fetches some data to be used later, with createResource. But I'm passing a boolean to the context provider as props, and I'd like the data to be fetched only if the boolean is set to true. What would be the best way to handle this? I'll provide some code if needed but really it's just a simple createResource calling the simplest fetcher....

Is there a polyfills.ts for `solid-start`? Or is there a way of modyfing the produced `index.html` ?

So, in the aws amplify framework there is a common bug, which all frameworks have to fix somehow: https://github.com/aws-amplify/amplify-js/issues/678 global is not defined ...

Pure client based page complaining about `window is not defined` in solid-start (No SSR needed)

Back when I was just working with solid.js I could use window in my code just fine, for. pages that are entirely client-rendered. With solid-start I use the solid-start-static for client based pages, like described in Alex' blog post https://dev.to/lexlohr/using-solid-start-with-github-pages-3iok . ```js export default defineConfig({...

Why does typescript not accept `text() && text().length === x` in solid-start?

Is anyone aware why typescript complains about
text() && text().length === 6
text() && text().length === 6
in a project with the tsconfig.json that comes with the solid-start template? (E.g. typescript complains I should use text()?.length but it didn't in other projects with solid.js) ...

Universal renderer createElement isn't running

I'm working on a custom renderer and I can't get the createElement function to run. I'm not sure if I missed some configuration or I'm misunderstanding. I have an example I'm going off for a basic custom renderer which calls createElement as expected, but in my version and a separate sandbox I'm not getting the expected log. https://codesandbox.io/p/sandbox/awesome-firefly-huojci?file=%2Fsrc%2FApp.tsx%3A16%2C25...

How to read reactive state from imperative contexts (audio/music)

tl;dr: is there any major DO NOT guideline around (constantly!) reading reactive states from functions (callbacks) that don´t need the reactivity? Will it create "tracking" "dependencies" or any other resources that won´t get actually used or not get properly disposed? Context: I am trying to build a fun little audio app using Solid and Tone.js In the visual UI part of the app I am accessing signals and stores containing things like "musical notes". The usual ...

How to handle auto scrolling in a chat app when new message comes in?

So this is an example what i currently have ```jsx const App = () => { const [messages, setMessages] = createSignal([]); let div;...

How to get `onMount` to be called on the client for a server-rendered site

I've set up a new project using solid-start with solid-start-aws. Running npm run build creates an index.mjs which I can then use as the lambda-function that creates the static website (with some minor corrections https://github.com/solidjs/solid-start/pull/898 ) Now, when using solid-start for a server rendered website, how do I run initialization code on the client? I.e. I would like to initialize some third party frameworks on the client....

Reactivity with normal functions

I try the following: doubleCount is using createMemo while tripleCount is a normal anonymous function. They work just fine, the value is updated accordingly. The tripleCount is like an accessor at this point. - How can this work? Do signals simply re-trigger any functions that wrap it?...

Solid-js design system CSS troubleshooting

I have a design-system I am building out using Kobalte. However, when I export the components none of the CSS gets applied. I have tried both regular CSS imports and CSS module imports. In both cases none of the CSS gets applied in the consuming application. Has anyone had experiences creating design systems with solid-js?

How to throw an Error on an unknown route?

I define the content for each route like so: ```jsx return ( <Routes> <Route path={'/foo'} element={<Foo />} />...

Joining SolidJS Vite app with a rest api as single app

Hello, I'm building a simple front end with the default SolidJS+Vite template. I call this the client. The client need to call some things from a rest API server, so I currently have a second Node app running. Let's call this "server". The server uses Express to do some simple file management. This is all fine and well. When I'm building for production I first build the client into /dist. I then move the /dist folder into the server and build the server into the final /dist for production. This works, but I think it's a little ugly. Preferably I would want to have one single Node project with a single package.json, but that still has hot reloading....

How to make a sticky navbar change color when it has reached the top? Like in solidjs homepage

I think I should use this https://github.com/solidjs-community/solid-primitives/tree/main/packages/intersection-observer#readme , but I can't think of a way of implementing that. Code: ```javascript const Navbar = () => { const [getNav, setNav] = createSignal(true); const navHandler = () => {...

How to detect env in `createServerData`

Hey there, during development I like to run npm run dev on my site, so I can render it locally in the browser and quickly iterate design. With npm run build it'll create the code that is actually run on the server environment. Now, inside of createServerData the db I have available on the server is not available when just running npm run dev, so I would like to inject some test-data....

Uncaught ReferenceError: _$HY is not defined

So, I'm trying to change my site to server side rendering. The site runs locally when run via yarn dev, but then I deploy it, I get:
Uncaught ReferenceError: _$HY is not defined
Uncaught ReferenceError: _$HY is not defined
...

createResource swallows error?

I noticed errors get swallowed when I use createResource. Here is some simplified example code: ```typescript window.addEventListener('unhandledrejection', (e) => console.error(e)); window.addEventListener('error', (e) => console.error(e)); ...

Make signal react on prop change

Say you initialize a signal by a prop:
const [error, setError] = createSignal(props.error);
const [error, setError] = createSignal(props.error);
If the prop changes, the signal won't react. What must be written is:...

Make sure the dom updates (equivalent of `tick` in Svelte)?

I created some library where a piece of code relies on the dom having been updated: ```jsx // in some callback setError(true); ...

Solid Transition with createServerData$

Is there a way to get Solid Transition (https://docs.solidjs.com/guides/how-to-guides/animations-in-solid/solid-transition-group) to work with showing data that's fetched using createServerData$? I get no animation when I try to use solid transition on a component that uses createServerData$. I get animations when I use solid transition of arrays like this one: const test = ['123', 'abc'] so I'm pretty sure the reason there is no animation is because of createServerData$. Actually it shows...

How to use SolidJS Routes in Astro?

I try to use solidjs route in astro project but it does not show anything. This test 1 and 2 code not give any outputs. Test 1: index.astro...