Passing data from route to layout in solid-start
I have a group of pages with one parent layout (ie /menu/lunch, /menu/dinner, with the layout under menu.tsx). The layout has a tab bar listing each of the pages under /menu. The color of this tab bar should change depending on the current route. Therefore I would like to be able to specify the color in the
routeData of that route and read it from the layout but it appears this is not possible (and I can see why things would get confusing if this were the case). What is the best way to pass da...Using custom element tags in JSX
I like to use descriptive custom elements e.g. <image-container> instead of <div> soup. Coming from Svelte, is there a way to make VSCode's tsx typescript checker not yell at me for doing this? It seems Solid itself handles it fine.
Dropdown with click outside pattern
What would be the best pattern to create a dropdown menu div or menu div with an onClick handler outside to auto close it? not a hover menu, mind you, but a click menu. I know how to show it, but I recall handling the onClick outside of the element actually implied something like portals or annoying dom manipulation in react, and I'm wondering if solid (or some community-made primitive) has a better idiomatic pattern for this?
Currently my component looks like ```js
export const FilteringDropdown = (props) => {
const [isShown, setIsShown] = createSignal(false)...
SOLID svg tsc error
any ideas about this?
and...
TS2322: Type '{ children: Element[]; width: string; height: string; viewBox: string; fill: string; xmlns: string; "xmlns:xlink": string; }' is not assignable to type 'SvgSVGAttributes<SVGSVGElement>'. Property 'xmlns:xlink' does not exist on type 'SvgSVGAttributes<SVGSVGElement>'.
TS2322: Type '{ children: Element[]; width: string; height: string; viewBox: string; fill: string; xmlns: string; "xmlns:xlink": string; }' is not assignable to type 'SvgSVGAttributes<SVGSVGElement>'. Property 'xmlns:xlink' does not exist on type 'SvgSVGAttributes<SVGSVGElement>'.
Looks like solid-router doesn't like encoded forward slashes as params?
I have a route path like
/app/:name/view and then the name might actually contain a forward slash, so i encode it with encodeURIComponent, but solid-router doesn't route it correct, it goes straight to 404.Vite v4 and You appear to have multiple instances of Solid
Hey peeps,
I am trying to upgrade my app to vite v4, however it ran into the error in header.
The error is clear and I understand what it means. However, I couldn't pin point which part of the app/libs caused the issue....
Is my Solid app size is huge?
index.css: 16.61KiB / gzip: 3.60 KiB
index.js: 87.04KiB / gzip: 27.29 KiB
I always check my build size whenever I add new codes. I wonder if my app size is huge or not.
Is it even small?...
ts-node not able to resolve ~ or node imports
I've got some scripts written in TypeScript in my project which I would like to execute. After some digging ts-node seams to be the obvious choice. However neither the
~ nor the import from node itself were working. After some digging I found that I can fix the node imports by either removing the types key from the tsconfig compilerOptions altogether or adding node to the array. Regarding the ~ paths however I'm stuck. I tried adding the tsconfig-paths package which doesn't seam to work at all, tried adding imports to the package.json and switching to a #root prefix instead.
Nothing seams to help and I'm stuck with the annoying error message:
```
CustomError: Cannot find package '~' imported from /home/bikeshedder/projects/myproject/src/scripts/gen_schema.ts...Vite v4 breaking solid-auth
Updating vite to 4.0.0 is causing problems where "uuid" is failing to load for some reason. I have no clue why, and was wondering whether anyone here may have any ideas. To replicate, I used
create-jd-app with solid-auth, then updated packages. When attempting to login, this error is produced: Error: Cannot read properties of undefined (reading 'v4')-coming from attempting to import { v4 } from "uuid". Vite 3 does not cause this issue.How to make a global layout?
I'd like to make a single layout for all of my pages within the route structure, but I'm not quite sure how to do this.
If I make a
routes/(root).tsx file, then the / path shows up as that html & css, but nothing from routes/index.tsx populates the <Outlet />. And if I navigate to /login then the html & css from the layout doesn't appear at all.
So I'm not sure what it should be instead....Is `style={}` performant?
I am using Vanilla Extract's Sprinkles API in my project to get static performance and a css-in-js feel but I can't put every style I need in a utility class. For instance sometimes I want to define a specific grid layout or gradient background. As far as I can tell my best options are using a style tag inline in the element which puts the css rules all together or to use vanilla extract's css modules which defines those specific styles in a separate file. What I don't know is the difference in performance between them. I know that in html the style tag is seen as not performant, is Solid different?
Example with style tags: (I like this but don't know about performance)
```jsx
// Hero.tsx...
Lazy in For results in renderToString timed out in production build
Using a bare solid-start project with the following code, and running the prod build of it, results in a "renderToString timed out". To be precise: the first request results in this time out. Every further request works without timeout.
Node version: v16.13.0
```jsx...
Virtual Scrolling with animation and dynamic loading
I don't have the bandwidth to expend too much on this idea, so it's more of a thought experiment for later, unless someone in the ecosystem team has come up with an elegant, premade solution for this. I have a list of cards rendered in a wrapper, where I need to scroll horizontally on clicking a button. My current idea that's unoptimised but functional (probably) is to just have an overflow:hidden CSS, and control the current scrolling position of the wrapper manually, setting it to "n * the width of a card*.
The main issue with that is that will a grand total of 4700 cards over 70 wrappers with individual scroll control, this might be... A bit slow.
Is virtual scrolling a solved problem in Solid? Is there a currently updated plugin that does it well enough? If not, I'll reserve some personal time to possibly work on it outside of work development time, but I was wondering... ☺️...
Should I use createMemo always?
I had a similar question when I used React before.
What's downside of createMemo?...
Refetch routeData when dynamic route changes
I use a dynamic route
[slug].tsx to display a blogpost for example. To get the data of the post from the database I use routeData in combination with createRouteData. Thereby I set the slug as the key. If I now navigate with a link between blogposts, routeData or createRouteData is not executed again, so the content of the dynamic route does not change. Is this intended or a bug? Do I need to use refetchRouteData to trigger this myself e.g. in createEffect?
```tsx
export function routeData({ params }: RouteDataArgs) {
return {...SolidStart render page from POST function
I have a form in
SolidStart with method="post" and action="".
To validate the form on server side, I export a POST function.
However I am wondering how I could, if the data I got isn't valid, show the form again with the data the user already submitted (and maybe additional error messages) from this POST function?...How to update nested store values such that it triggers updates
I have a store with the shape IUserState. Now I want to update some projectGroup to add a new project to it. How can I achieve this so that updates are triggered?
```typescript
export interface IUserState {
projectGroups: IProjectGroup[];...
How to have data attribute on Custom component?
I want to do something like <Foo data-something = { 'hello' } />
How to provide data props ?...
createStore from fetched data ?
Hello!
I'm sorry for asking this because I'm sure this is stupid. But here I go:
I'm fetching kind of heavy data from my own API and using useRouteData() in my component, and would like to display it in a table with actions, like delete, update some values, etc.
So far so good, I'm getting the data, but it takes a few seconds, and my createStore call isn't waiting for the data to be available :
const routeData = useRouteData();...
losing reactivity in For component
example repo: https://playground.solidjs.com/anonymous/b106963a-0ea6-4da2-a066-8bbf42bfc1f0
why is
todo.nested.data not updated when i set the store?...