SolidJS

S

SolidJS

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

Join

Stream SSR & BFF with full SPA transitions

Hey! Question about implementing :solid: SSR & BFF with full SPA transitions. Pls, help 🙂 Have a classic BFF with file-based routing on Fastify....

Modular Forms with SolidStart

I'm trying to use Modular Forms in my SolidStart application but am unable to get the form to submit. I've had it working before, submitting properly so trying to debug what is causing the issue now. Thank you ```typescript export type CreateApplication = { title: string;...

umd bundle for solidjs

I want to render solidjs components in the browser without builder step. For React I do it like this with babel standalone:
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js" crossorigin></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js" crossorigin></script>...

Server Functions cannot be nested in other blocks or functions

I just tried to upgrade to SolidStart 1.1.x. I started getting the Server Functions cannot be nested in other blocks or functions everywhere. I read this post by @Atila ....

Rendering a component at a specific target during runtime

This works so far, no issues with it right? ```jsx const createToast = () => { let div = document.createElement("div");...

How to make props reactive?

Hi why isnt the props reactive there, in Btn component? I hope i dont have to use a module for this now :/ ```jsx import { render } from "solid-js/web"; import { createSignal } from "solid-js";...

Solid Element how to render children

``` customElement("x-component", {}, (props, { element }) => { return ( <button> {props.children} /* This? */...

What is the idiomatic way to create a universally reusable solidjs component library?

By universally i mean the code should at least be able to be imported both in the browser and in nodejs, not necessarily be able to render everywhere (that would be up to the app to solve, ie for ssr). But I don't want the app to crash just because I happen to import something from the library in ie. node. Some questions I have: - What does a typical package.json look like? - Should the package export two different builds: dom and ssr, or can a single universal build be exported? ...

Server file being bundled on the frontend and env variable is undefined when used via process.env

I am facing an issue in solid start where my server file marked as "use server" is being bundled with the frontend code and I am unable to access node/server related code and getting errors in the chrome console. For testing this issue I created a basic "bare" solid start project. Created a src/lib folder with 2 files server.ts and index.ts (image attached). app.confg.ts (image attached as well). The error that I get in the console is "TEST_ENV_VARIABLE is not set" as the proces.env.TEST_ENV_VARIABLE is undefined. Also if I comment this error check and console the count value on the frontend then I get this error (see attached image). All these errors are due to server code being bundlede on the frontend....
No description

Async in onMount OK?

Is the following pattern OK? ``` export const AppUI: Component = () => { onMount(async () => {...

ai-sdk for solid (createMutable)

Is this implementation correct, following the svelte and vue implementations? replaceMessage doesn't seem to work as no signals on chat.messages are ever triggered on updates. ```ts import { createMutable,...

Express, SolidJS, and Solid Router- SSR Troubles

Good afternoon! I am scaffolding a new project that will use SolidJS for the front end, Solid Router as a router, express as my backend. I want to isomorphically render this app taking advantage of all the benefits of SSR. I am using webpack as my bundler, and have achieved server rendering and client side hydration. However, when trying to implement Solid Router, I am plagued by an error of attempting to use Client Side features on the server. I have tried soooo much to find a workaround, even investigating using TanStack router, but I would really like to just use SolidRouter as it is simpler and the native router for Solid. I will share a link to the github repo for my project so far, and if anyone has any advice as to how to set up routing that works with SSR, I would be more then happy to hear your thoughts. Thank you! https://github.com/colbydeniston/yart.git https://github.com/colbydeniston/yart...

Is there an idiomatic way for creating dependency injecting components?

For context, I am developing a UI library (not necessarily headless), and I want to give users the ability to customize how certain inner workings of components (e.g. things that normally would be incapsulated, such as inner elements of components) render. And following are the examples. Context-based approach...

Possible solidjs bug?

I have a problem with Kobalte (https://discord.com/channels/722131463138705510/1385724185070010458/1385724185070010458) but based on this comment it may be a solidjs bug: https://github.com/kobaltedev/kobalte/issues/542#issuecomment-2816878081 Should I report it, or is it really a Kobalte problem? Thanks....

Get intended URL a "use server" query is called from

I have a query that gets a user's info and redirects if they aren't logged in. I want add a redirectUrl parameter to the login page and return them to their intended url. Using the referer header works if I visit the URL directly, but for client-side navigation using a <A> or navigate() the referer header is from before the navigation completes. Currently, I am passing the path as a parameter to the query. Is there a better way to do this? One small downside is since the query is called with different keys, the cached value isn't used. Mainly I'd like to avoid manually passing the current path everywhere I use the query....

Expose a Function Outside of Component

I'm working on improvements to @solid-primitives/virtual, namely support for dynamic item sizes and fixes to broken reactivity. I implemented a scrollToItem utility function that is now returned from createVirtualList. This works perfectly fine if you are just using the headless virtual list. However, there is a VirtualList component that abstracts away the HTML boilerplate required for createVirtualList to function. For convenience, I would like to expose the scrollToItem function for use outside of VirtualList. Problem is, I have yet to find an idiomatic way to accomplish this after searching around for a bit....

How to sync two different signals inside a store maybe

I have an array and an index to the array defined separately as two signals, here I've demonstrated: ``` import { batch, createComputed, createMemo, createSignal, on, untrack } from "solid-js"; import { createStore } from "solid-js/store"; import { render } from "solid-js/web";...

same domain hrefs getting 404

issue can be reproduced in this page, https://www.solidjs.com/contributors search element by this xpath //*[@id="main-content"]/div/div/div[1]/div/div[2]/ul/li[1]/p[1]/a now change href of element to https://www.solidjs.com/img/bios/ryan-carniato.jpeg ...

Worker exceeded startup limits cloudflare

I am using Solidstart with SSR on deploy i started getting this weird error ✘ [ERROR] Your Worker failed validation because it exceeded startup limits. It only happens with SSR enabled. I do not have big app and cpuprofile is below 200ms i added photo. This only happens sometimes even rebuild can fix this problem....
No description