SolidJS

S

SolidJS

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

Join

Any workarounds or guidance for circular dependency warnings?

I realize Vite issue, but I was able to resolve in SvelteKit and no such luck (yet) w/ SS. Specifically, inclusion if AWS S3 client module is resulting in a lot of circular dependency spew at build time. W/ Svelte using node adapter, just need to regular dep (instead of dev dependency) so module doesn't get rolled-up, resulting in clean build output. Everything seems to be working fine, but the number of warnings being generated is unsettling. Same problem w/ auth-core, but to much lesser extent. Somebody has to have run into this w/ SS given S3 client usage. Any workarounds for SS, or folks just ignoring? Related thread: https://github.com/aws/aws-sdk-js-v3/issues/4435...

use:clickOutside not defined

Heyhey. I copy pasted the code from https://www.solidjs.com/tutorial/bindings_directives?solved but I get a runtime error ReferenceError: clickOutside is not defined. What am I missing here? I've added the TS declaration as mentioned in the docs here https://www.solidjs.com/docs/latest/api#use___ . My linter is complaining but I don't think it would have any impact on the solid compilation anyway?

Is it possible to create fully functional component without JSX/TSX syntax?

I'm trying to use Solid with PureScript, but seems like when component gets compiled from TSX to JS, a lot of stuff is happening. Basically, is it possible somehow to make something like this work? ```...

Typescript type for generic html props passthrough?

Looking to create a generic wrapper component that can take arbitrary HTML props (class, etc) without manually defining each prop. The Component type is too generic in this case. Is there a simple way to union the Component type with the generic HTML types? React has the React.HTMLProps option. Is there recommended approach?

Don't send component logic to client conditionally on data?

Hey everyone! I'm trying to wrap my head around this use case and can't understand how one would do it in SolidStart, if someone can help. In full SSR world: Very simple: on the server I have a backend request that tells me if user has permission A or not. ...

Adding aws-amplify libs adds 5s each time I change a line of code

So after adding "aws-amplify": "^5.0.15", to my project, as well as ``` { find: "./runtimeConfig",...

Component is not updated when prop is changed

I have a component "ShowDocument" with a resource inside, the component has a variables that needs to used in the resources. The component is called with the following: <ShowDocument documentId={showDoc()} onClose={closePanel} /> my issues is that when signal showDoc() in the prop "documentId" is updated the component ShowDocument is not updated, and will continue to show what was there when it was first rendered. ``` const ShowDocument = (props: { documentId: string | undefined; onClose: () => void }) => { console.log("ShowDocument: ", props.documentId); const { getSecureDocumentLink } = useDocuments();...

index.html <script> tag doesn't work?

Hi I'm using solidStart. The script tag in the index.html doesn't appear to be working. I add a console log in it and don't see the console log on either the client or server.

delay execution of createEffect.

I have a use case where I want one of my createEffect to be called before another . Currently they are called one after the other. I want to swap the executing sequence.

Breaking out proxied Stores object as a signal (while retaining reactivity)

Let's say I have an album object... ``` type Album = { id: string; artist: string;...

SSR Hydration error in ChildRoute with Context set in ParentRoute and intermediate Context Update

I have a ParentRoute that retrieves RouteData and uses that data to populate a Context ```tsx export default function Main() { const data = useRouteData();...

Right way of getting errors out of async context functions

I have a context that has methods that are async, the method itself on the context is sync, but that calls an Async method. This async method can throw an Unauthorized exception, it that happens i would like to redirect the user to "/signin". Would the correct way here be to have "error" signal that is read somewhere else on the UI thread and if that contains an error throw it, or are there a better way to do this? ``` export function PortfolioProvider(props: ProviderProps) { const { user, isAuthenticated } = useUser();...

Avoid Provider nesting

I am going to have a lot of Providers in my App, and i did not want to have 5+ nesting around my rotes. Here is the example with just 2 providers: ``` return ( <ErrorBoundary fallback={(err, reset) => <div onClick={reset}>Error: {err.toString()}</div>}>...

Tailwind Not applying?

hello, I am creating a set of fake "note cards" to display with different colors. When I created one card with one color, it worked, but now I'm using onMount to create many notecards in a loop and the tailwind color style is not applying. The font color is though, so I am inclined to believe it has to do with the order of rendering and applying styles. Any tips?

contextProvider using signal

Hi, noob question here -- just getting feet wet w/ SolidStart. Any help is appreciated!! Trying to create a context provider for setting theme, and prop is getting passed down but child comps not reacting. ```...

Guide for more complex usage of stores

Were can i find a more complex guid of how to use SolidJS stores. The example i wanted to do is to have a store of transactions, i will have a component to list all transactions, a component to create a new transaction with a parent page to contain it all. Down in the list component is a child component for each transaction. In the child component i can delete the given transaction, when this is done i would like to send a signal to the store that it needs to re-fetch the list of transactions, s...

Is it possible to create a `createCustomAction$`?

@nksaraf is it technically possible to create a custom createCustomAction$ function that builds on createServerAction$ or server$? This would allow library authors to keep the API simple, making the code more concise. Specifically, I would like to provide a SolidStart integration for my form library Modular Forms to enable the creation of progressively enhanced forms. Below is a code example. ```tsx...

filebased routing for 'regular' csr solidjs

since filebased routing is a vite-plugin and afaik it's isomorphic too, is it possible to set it up in a 'regular' client side rendered solidjs project?

$server v. tRPC

Hello, I'm kicking the tires on solid start and it looks amazing! (been using svelte-kit for past couple months for a project, but decided to give solid-start a try before getting deep in). One noob question I have is being able to make rpc call by simply defining $server function is -- like I said -- A M A Z I N G !!! -- so, why are folks using tRPC? (unless to other server backend).

useBeforeLeave or similar for tracking route change in Start

I need to track route changes within Start. Solid Router comes with useBeforeLeave which I can use to track the page the user is moving to however Start doesn't export it. Is everyone else importing router directly in this case?