Losing reactivity in props passed to `children` callback
I've got a component
Field that passes a memo to props.children. I'm running into an issue where the child component is not updating on changes to the memo
``tsx
export function Field(props: { form: Form; children: JSXElement }) { // Form` is a SolidJS store
const fieldState = createMemo(() => {...1 property in `createMutable` with only 1 signal
I have a
createMutable. Most of the properties in this object I want to be behaving like a regular createMutable: all the properties are being represented by individual signals.
1 property on the other hand changes fast and will always be set as a whole, so as a performance optimization I would want this object to only occupy 1 signal, since this object can become rather large.
Is there a utility that can help with accomplishing this?...How can I tell `solid-start` that I want most `routes` to be rendered entirely in the client
Atm, I have two applications, one is a client-side-rendered
solid-start app with lot's of client data and authentication using aws.
For the detail page site.com/article/{id} I have a separate solid-start project which is entirely SSR, so I can inject header-tags on the server side.
Is there a way of combining those two applications?...Announcement: posts will now be indexed via Answer Overflow
Hi everyone, this is a note to let everyone know that we are starting to index our Discord with Answer Overflow. Please note that your posts will now appear outside our Discord. You can opt out of this with the Answer Overflow commands.
How to define reference for a component?
How can I define
ref for a custom component with TypeScript?signal of createResource is not reactive inside a For component
When passing the signal obtained in a request made by createResource and looping the results of that the reactivity when the resource mutate is lost.
It works fine if i iterate the signal with a .map() so i don't know what can be the issue....
createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData
I'm trying to figure out how to get createInfiniteScroll from @solid-primitives/pagination to work with createServerData$ and useRouteData
I believe createInfiniteScroll expects a fetcher function that returns a Promise<T[]> per the definition https://github.com/solidjs-community/solid-primitives/tree/main/packages/pagination#definition
But I think createServerData$ is like createResource in that it takes an asynchronous fetcher function and returns a signal that is updated with the resulting data when the fetcher completes....
Solid JS + Auth (How to store the credential)
Q1:
What is the most secure and efficient way to store and use credentials in a SolidJS application without using solid-start?
I am considering using
- cookies only...
Solid-testing library TS-eslint-errors
Hey<
I am just starting out using solids testing library and setup my project according to this example: https://github.com/solidjs/solid-start/tree/main/examples/with-vitest/src
However I am getting some TS-errors I am not quite sure how to resolve correctly....
Solid-start client side state best practices
Hey folks,
I noticed that the docs are still missing the section on the various kinds of application state.
Therefore I wanted to ask here what is considere to be a good approach to handle state after hydration.
...
Solid-start-vercel rollup error
Hey, I am trying to build my solidstart app with solid-start-vercel package included (it works just fine without it) and I am getting this error
I tried to search online and also in this DC server but haven't found anything quite like it. I know solid-start-vercel is experimental, I just couldn't manage to make my app work on vercel without it.
Thanks for help in advance....
base = Object.assign(new Error(base.message), base);23:18:46 ^23:18:4623:18:46Error [RollupError]: Module format "cjs" does not support top-level await. Use the "es" or "system" output formats rather.23:18:46 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)23:18:46 at Module.render (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:13883:20)23:18:46 at Chunk.renderModules (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:16335:41)23:18:46 at Chunk.render (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:15843:111)23:18:46 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:17480:7223:18:46 at Array.map (<anonymous>)23:18:46 at renderChunks (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:17480:53)23:18:46 at Bundle.generate (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:17702:19)23:18:46 at async file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:26543:2723:18:46 at async catchUnfinishedHookActions (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:25676:16)23:18:46 at async Object.build (file:///vercel/path0/node_modules/solid-start-vercel/index.js:183:7) {23:18:46 code: 'INVALID_TLA_FORMAT',23:18:46 id: '/vercel/path0/.solid/server/entry-server.js'23:18:46}23:18:4623:18:46Node.js v18.15.023:18:46Error: Command "npm run build" exited with 123:18:46BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1
base = Object.assign(new Error(base.message), base);23:18:46 ^23:18:4623:18:46Error [RollupError]: Module format "cjs" does not support top-level await. Use the "es" or "system" output formats rather.23:18:46 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)23:18:46 at Module.render (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:13883:20)23:18:46 at Chunk.renderModules (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:16335:41)23:18:46 at Chunk.render (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:15843:111)23:18:46 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:17480:7223:18:46 at Array.map (<anonymous>)23:18:46 at renderChunks (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:17480:53)23:18:46 at Bundle.generate (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:17702:19)23:18:46 at async file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:26543:2723:18:46 at async catchUnfinishedHookActions (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:25676:16)23:18:46 at async Object.build (file:///vercel/path0/node_modules/solid-start-vercel/index.js:183:7) {23:18:46 code: 'INVALID_TLA_FORMAT',23:18:46 id: '/vercel/path0/.solid/server/entry-server.js'23:18:46}23:18:4623:18:46Node.js v18.15.023:18:46Error: Command "npm run build" exited with 123:18:46BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1
Not sure whether I'm using reactivity right... (Codereview)
Ok so I recently ported my personal project to Solid coming from React, and while I did it I kind of translated anything React into it's Solid alternative, in this case something didn't quite work out. now, I actually got it to work but I'm not sure I'm doing it the right way and I definitely don't know what I'm doing, which is why I'm here.
Here's the code, with an explanation below:
```tsx
const PAGES = {
"/": "Home",...
How to improve performance in my code?
```js
const CompareStats = () => {
const [shown, setShown] = createSignal<Element[]>([]);
const [targets, setTargets] = createSignal<Element[]>([]);...
fetch in createEffect?
When a set of conditions are satisfied on some state, I want to execute an http request to the server. I'd have something like:
```js
createEffect(() => {
if (state() && anotherState()) {
andAnotherState();...
Coordinating Signals in a Layout System
Hi all, I'm trying to implement a layout system in SolidJS that works similarly to mobile frameworks like Jetpack Compose and SwiftUI. In my system, you write things like this:
```tsx
<Parent>
<Child1 />...
Signals not updating in <For> tag
I have code that looks like this:
```jsx
const [grid, updateGrid] = createSignal(new Array(10).fill([]).map( => new Array(10).fill(false).map( => Math.random() * 10 < 5)))
const flip = (x: number, y: number) => {...
Navigate then perform action
This function is an event handler for a bunch of buttons. It's prop(para) is different for each button.
It navigates to a different url. Each URL it navigates to loads the same components with different data based on the params, which change each time the button is pressed. When that component loads it sets an array from a provider with 100s of refs.
After the new URL has been navigated to and the refs have loaded I would very much like to .scrollIntoView() to that ref. SO I set a timeOut around all of that....to make sure the component has loaded and the refs are all in the provider. ...
typescript cssproperties
Solid accepts a type
CSSProperties in style attributes. I want to createMemo() with a style value, but I can't type it with CSSProperties type from Solid.
What do I do ?...