SolidJS

S

SolidJS

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

Join

referenceError _$HY is not defined, on 0.3.7 prod, but not on 0.2.32

Only difference I have noticed is that when I compile with 0.3.7, it shows this kind of message: Site doesnt work at all on production in 0.3.7, but is fine on 0.2.32 ``` nodemodules/.pnpm/solid-start@0.3.7@solidjs+meta@0.28.6_@solidjs+router@0.8.3_solid-js@1.8.3_solid-start-node@0.3.7_vite@4.5.0/node_modules/solid-start/islands/A.tsx (1:0) Module level directives cause errors when bundled, "use client" in "nodemodules/.pnpm/solid-start@0.3.7@solidjs+meta@0.28.6_@solidjs+router@0.8.3_solid-js@1.8.3_solid-start-node@0.3.7_vite@4.5.0/node_modules/solid-start/islands/A.tsx" was ignored....

How do i create library?

I have this component that render svg from specified url, i dont see it anywhere library that does this. Id like to publish it but i have zero knowledge on building library? Been searching on google but i didnt find any. If anyone know an guide on how to do this or simply a keyword to search to id be grateful, thanks!

Typing nested routeData

It seems the API for typing nested routeData has changed after I updated to 0.3.7. I used to have ```typescript import { routeData as appRouteData } from "../app" ...

createSelection() primitive odd behaviour in contentEditable div's

Now I am not entirely looking for a solution with this post, though one would be appreciated, I believe I am just going to work around this behaviour for my use case. However, when using the createSelection() primitive to get the user selection in a textarea versus a contentEditable div, the behaviour is fairly different and bordering on broken in the case of the contentEditable div ( and I am aware of why this is and will get into that soon ). If you take a look at the attached video, and pay close attention to whenever I input a newline character, moving the cursor to the beginning of that newly created line, in the contentEditable div ( above ) the primitve returns the [start,end] tuple of [0,0] regardless of whether or not there is content on previous lines - contrast this to the textarea where it correctly gets the length of the text previous to the cursor and also accounts for this when the selection is not collapsed, i.e start !== end. I am aware this is because of differences in the window.getSelection() API and the properties available on each DOM element's object representation in TS, we can see this in the source code of the primitive where you'll notice special handling of the textarea and input element cases since those objects have the available selectionStart and selectionEnd properties which simplify the process of fetching these values, and for other cases the function goes on to fallback to the window.getSelection() API:...

What's the most idiomatic way of forwarding an onClick event handler?

Given a Button component that wraps a <button>, what's the best way to forward the onClick handler? Seems handlers can be functions or tuples. When passing the prop directly to the button,
<button onClick={props.onClick}>...</button>
<button onClick={props.onClick}>...</button>
...

Load more button

Heres the scenario, i have signal of an array which hold list of words. Then i show them with <For /> component. Now i dont fetch all words in single fetch, i have "load more" button if you need more word. Now the problem is i dont know how to fetch and push new words to the signal. My initial thought was to put that array of words inside another signal array of pages, then we iterate each page with <For/> and we then iterate each word. The problem was when i fetch more pages everything get re-r...

How is the type of the onclick event ?

Hello I have a question about the on-click method of the button, the event doesn't have a type, the type is something like this, is that the real type? it should be one type only for the event ```tsx const handleClick = (event: MouseEvent & { target: Element;...

Loading CSS issue (FOUC) on optional parameter

I have setup a simple website with below route. ``` src └── routes └── home...
No description

Any advantages by tanstack libraries for solidjs users?

I found that tanstack have some libraries support for solidjs. tanstack query, tanstack table, tanstack virtual. Any benefits of use of tanstack libraries?...

Setting a deeply nested store property changes produces new reference for property's parent?

Wanted to confirm the observed behavior I'm seeing when modifying deeply nested store properties. Given a store with the following structure: createStore({ a: { b: { c: "end" } } });, a createEffect that references either the store or store.a will not re-run when c is changed, but will re-run when using store.a.b or store.a.b.c.. It was surprising that the effect ran when referencing store.a.b . The modification to c is done with setStore("a", "b", "c", "rand" + Math.random());....

Can I avoid the getter while keeping the reactivity?

const [organization] = useSelectedOrganization();

const formatMoney = () => moneyFormatter(organization);
const [organization] = useSelectedOrganization();

const formatMoney = () => moneyFormatter(organization);
...

Combining Solid store with query engine?

My app needs to support a wide range of object queries and I want them to be fast, i.e. indexed. Something like Loki.js would be perfect (and there are a bunch of other options). However I also need my data to be Solid-reactive, like a Solid store. Has anyone had any experience trying to integrate the Solid store and a query engine? Or other ideas for fast and flexible declarative queries? Thanks...

ESLint error: ref is never reassigned, use const

With a farily simple practice app set up with TS + ESLint, there seems to be an issue when using refs in Solid. ESLint is reporting a lonely let myForm: HTMLFormElement as unused, despite it being passed to a ref prop later on in the code, ```tsx function MyComponent() { let myForm: HTMLFormElement = undefined;...

children.forEach typescript problem

I have this problem in the forEach with typescript. Property 'forEach' does not exist on type 'ResolvedChildren'. Property 'forEach' does not exist on type 'number'.ts(2339) ```Typescript...

Solid Router with Suspense does not fire signals

I currently have a setup where a Router is wrapped in a Suspense and many routes are loaded with lazy. The Suspense works properly and a loading message is displayed when the page is initially loading. However, there are some cases where signals do not fire during page navigation. The minimum reproduction I got is at https://gist.github.com/iczero/46eff94d6f8e6dbbf19c5254969759ed. The first setProgress does not fire, but the second one does. If the first one is wrapped in queueMicrotask, it does fire. If the Suspense outside the router is removed, the issue goes away. Is this intended behavior? Is there a better way of showing a fallback while the router is loading without wrapping the router in Suspense?...

Using pending & error states with createRouteAction

I'm writing a handleSubmit function that, assuming the post request goes through, a user will be navigated to the next page. My function looks like the following: ``` const handleSumbit = async() => { await doThisAction()...

direct link?

Hello. Is it possible to directly link to a page? If not, any suggestions? This is my App.jsx page. It is an app that is behind a login. If no session it goes to the login, if it's a nonexistent page it goes to a custom 404. It's hosted on Netlify. It worked locally. Any ideas/thoughts/suggestions? Thanks....
No description

Dependency on `window`?

I'm using babel-preset-solid and for some reason the generated output has a dependency on window: ```function delegateEvents(eventNames, document = window.document) { const e = document[$$EVENTS] || (document[$$EVENTS] = new Set()); for (let i = 0, l = eventNames.length; i < l; i++) {...

Issue with reactivity when using mergeProps

https://playground.solidjs.com/anonymous/61802a1d-b0c8-44d9-9675-e6e73cdf36d3 In this demo, I do not understand why the last log says:
[Select] props.selectedOption {id: '2', name: 'bar'}
I expected undefined and if I remove the mergeProps call, the selected option will be undefined as expected. (note that the code itself doesn't make much sense but I removed as much code as possible from the real app)...

Regular Solid - the Correct way to use createResource?

In my app, on my Dashboard view, I am using createResource to get my user data. I'm then just updating another user signal with data returned from the createResource. I'm doing this because this user signal is used through out the app... so when it's populated the correct data is displayed. But this has me thinking... why not just use regular fetch in an onMount to get the data and update the user signal....