SolidJS

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

SolidJS

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

9/4/2024

Will my "product" experience downtime when I publish my "codebase"/"admin panel"

I'm working on a classic "link-in-bio" project, where the "product" (profile page) is small and will almost never receive updates. The admin panel part is however big and will be updated most. The project is just solidjs (not start). I'm hosting on AWS amplify and when I push my codebase to Git, it publishes the website. 1. Will the "product"/profile experience downtime when the codebase is being published? 2. Can I somehow ignore publishing the <Page /> if there are no changes? (Or is this already how it works?) ...

cdegrel

9/4/2024

Warning in build with PandaCSS

Hello, I have this problem for a very long time. When I build the application, I always have this warning in console. It's possible to hide this? These error message come from PandaCSS....

McBrincie212

9/3/2024

Performance Overhead When Panning And Zooming

So im experiencing performance overhead when panning and zooming. I assume this is javascript's fault but i do need some way to optimise it because as of now its slow even with like 5 canvases opened

Workspace.css

col16

9/3/2024

Type '() => JSX.Element' is not assignable to type 'Element'

I'm in the process of upgrading some code I wrote 2 years ago. I have many instances of the following pattern in my codebase, where I've embedded logic (of various types) directly within the JSX output. Typescript is now complaining that Type '() => JSX.Element' is not assignable to type 'Element'. The code continues to work fine, but the TS error really bugs me! What's the solution? I want to minimise the amount of code re-working necessary because it affects so many files. But I also want to maintain the reactivity. ``` import type { Component } from "solid-js"; import { createSignal } from "solid-js";...

Max

9/3/2024

Show Callback with explicit condition

Hi, wondering if possible to use Show with callback and have condition explicity, for example false or undefined, not just any falsy value. imagine for example ts...

TheKnightCoder

9/3/2024

SSG/SSR on specific paths for landing page

My main web app has SSR set to false, I would like my landing page to be SSG (or SSR) for SEO purposes, how can I achieve this in one solid start app here is my current app.config.ts ```ts...

Angelelz

9/3/2024

Solid way to Show components based on information from the session or cookies or server only data?

With RSC, our team is used to use data available only in the server in the context of a request, like from headers, cookies, or even server only string arrays. For example: ```ts const updates300 = ["user1", "user2", "user3"]; export default async function Home() {...

mihaaai

9/2/2024

How to trigger server function for SSR when transitioning routes?

Is there any way to achieve a new SSR call to the backend for each route I navigate() with useNavigate() within a [slug] pattern? I have a createAsync() in [slug].tsx that is supposed to get some data from the backend based on the route I get to, but it triggers only with a full refresh of the tab in the browser or fisrt page load, if I try to navigate() from inside the app the createAsync() function is not called anymore, it's a "use server" declared function, with a cache() wrapper, just like the examples on docs. Ideally I wouldn't use <A> components and stick to useNavigate() but I'm open to anything would make this work....

Grahf

9/2/2024

onChange only fires when press enter ?!

```js const handleChannelSearch = (term) => { console.log('term: ', term) }...

Andre

9/1/2024

How to handle repeatedly updating a value in a large Store

Here is an example: https://playground.solidjs.com/anonymous/75bea6b0-4eb0-41d0-8f62-6117c969801d I feel like this is not the best approach for this case since searching the array for the ID each time the user types something would be inefficient if the store was large enough. Is there something recomended for this? Maybe some way to pass store setters directly to a component?...

McBrincie212

9/1/2024

How To Communicate Between Components

suppose this setup i got here ```html <div> <DrawToolsMenu /> <PixelArtCanvas />...

Raqueebuddin Aziz

8/30/2024

createAsync not updating UI on client

```ts const serverBoards = createAsync(async () => { const boards = await getBoards(appContext.path); const x = await Promise.all( boards.map(async (board) => {...

raf

8/30/2024

Cannot build SSG

So i'm trying to build SSG instead of SPA so it works better with SEO, however during prerendering, it always return this error

SyntaxError: The requested module 'file://C:/Users/RAFLYMAULANA/Documents/Github/@takodotid/v2-frontend/node_modules/.pnpm/solid-js@1.8.22/node_modules/solid-js/web/dist/server.js' does not provide an export

SyntaxError: The requested module 'file://C:/Users/RAFLYMAULANA/Documents/Github/@takodotid/v2-frontend/node_modules/.pnpm/solid-js@1.8.22/node_modules/solid-js/web/dist/server.js' does not provide an export

during building everything fine, if i compile to SPA everything is working fine too, however when trying to build SSG, it just fail, if the result output index.html, it just empty <div id="#app"></div> with no content...

Worble

8/30/2024

Reactivity from a hook passed down to a component

Hi, I am trying to create a hook that returns a discriminated union which is then passed to a helper component to handle some common states, however while this works for the first render, it doesn't appear to update on changes. Repro URL: https://playground.solidjs.com/anonymous/7e285c43-b1d0-4a35-adda-35c0ba825294 You can click the button to retrigger the hook and return a new result. I can see from the createEffect's that the components are subscribed to changing value, but if you keep clicking the button the new value is not rendered on the page. If you uncomment line 20, the changing state does appear to cause it to update properly after that...

microsoft

8/29/2024

Help understanding createResource

I have a setup like this (LIVE: https://playground.solidjs.com/anonymous/125ef44e-bee8-4049-b17c-166f6042f962) ```typescript import { render } from "solid-js/web"; import { createSignal,...

Mobs

8/29/2024

[Solved] Change store object using reconcile

I am not sure if I am using the api wrongly. But my case is very simple I am trying to build a filexplorer component and I have the following code.

mrVinicius

8/29/2024

Help styling an component via props using TailwindCss.

Reusable button component: ```tsx export type ButtonProps = { children: JSX.Element | string; variant?: ButtonVariant;...

Angelelz

8/29/2024

useLocation and useNavigate in the layout?

I'm getting this stupid "<A> and 'use' router primitives can be only used inside a Route." error when I use those primitives in the Layout. This is my app.tsx: ```ts export default function App() { const event = getRequestEvent();...

Bersaelor

8/28/2024

pagespeed.web.dev complains about `avoid serving legacy javascript` in my solid-start built site

pagespeed.web.dev complains "Avoid serving legacy JavaScript to modern browsers", supposedly the javascript vinxi puts out is legacy? Has anyone seen this before? Do I need to make a setting of ES6 somewhere in app.config.js?...

Mahmood

8/28/2024

solidstart with appwrite auth

I'm struggling with appwrite, I followed nextjs ssr tutorial but when i come to redirect for login page if the user isn't login, I can't do that. I also followed auth section in solidstart docs but it throws an error and not redirect Can u help me 🙏...

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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