bigmistqke 🌈
bigmistqke 🌈
PostsComments
SSolidJS
Created by bigmistqke 🌈 on 5/8/2024 in #support
hmr issues
Does anyone else have issues with solid's hmr recently? It happens to me quite often that hmr gets in a sort of loop where it keeps on building the same over and over. I can't kill the process, but have to terminate the terminal window when this happens.
1 replies
SSolidJS
Created by bigmistqke 🌈 on 1/7/2024 in #support
createMemo with `{equals: false}` not reactive
I am wondering if this is a bug or not: 
function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  const arr: number[] = [];
  const memo = createMemo(() => ((arr[0] = count()), arr), { equals: false });
  createEffect(() => console.log(memo()))
  
  return (
    <button type="button" onClick={increment}>
      {memo().join(', ')}
    </button>
  );
}
function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  const arr: number[] = [];
  const memo = createMemo(() => ((arr[0] = count()), arr), { equals: false });
  createEffect(() => console.log(memo()))
  
  return (
    <button type="button" onClick={increment}>
      {memo().join(', ')}
    </button>
  );
}
The effect nor the jsx gets updated. Is this expected behavior? playground
2 replies
SSolidJS
Created by bigmistqke 🌈 on 12/4/2023 in #support
setting signal inside createRenderEffect
say I have the following code 
function Counter() {
  const [count, setCount] = createSignal(1);
  const [other, setOther] = createSignal(1);
  const increment = () => setCount(count() + 1);

  createRenderEffect(() => console.log("effect", other()));

  createRenderEffect(() => {
    setOther(count());
    console.log("render");
  });

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}
function Counter() {
  const [count, setCount] = createSignal(1);
  const [other, setOther] = createSignal(1);
  const increment = () => setCount(count() + 1);

  createRenderEffect(() => console.log("effect", other()));

  createRenderEffect(() => {
    setOther(count());
    console.log("render");
  });

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}
I assumed in the above example, first all the effects dependent of other would be run, so it would log after clicking 2 times 
effect 1
render
effect 2
render
effect 3
render
effect 1
render
effect 2
render
effect 3
render
but instead we get 
effect 1
render
render
effect 2
render
effect 3
effect 1
render
render
effect 2
render
effect 3
initially it is executed directly as it is declared, as expected, but then afterwards the effects will only run after the current effect is completed. I understand it's not ideal to set signals during effects, probably for these sort of things, but I wonder if there is an escape hatch. playground: https://playground.solidjs.com/anonymous/d4a6e547-9bd0-4b63-9e72-f47b25a16b01
5 replies
SSolidJS
Created by bigmistqke 🌈 on 8/30/2023 in #support
why is it possible to use singletons in astro but not solid-start?
when ssr'ing solid with solid-start it's advised not to simply import and export signals/stores, aka singletons, since this could create shared state on the server. With astro on the other hand, this is a pattern that's being used with p.ex nanostores and the like. Is this potential bug of shared server state simply not possible in astro? Will we be able to share global state with singletons once solid-astro makes the move to astro?
6 replies
SSolidJS
Created by bigmistqke 🌈 on 8/11/2023 in #support
`Suspense` deep dive 🐬
I am dealing with some inconsistencies in how Suspense works between react vs solid while working on #solid-three. I wanna check up if my understanding of their mechanics is correct: react - In react, a Suspense is triggered by throwing a promise. This needs to be done in either the component-body or the jsx, no effects/memos. All code will run until that point. The code throws before anything can mount, nothing runs after the throw: no useEffect and useLayoutEffect, child-components do not run. The suspense-boundary catches the promise and re-renders its children once the promise is resolved. - ✔️ <Suspense><div>{resource()}</div></Suspense> - ✔️ <Suspense>{() => { resource(); return <></> }</Suspense> - ✔️ <Suspense><Component prop={resource()}></Suspense> - ❌ <Suspense>{() => { useLayoutEffect(() => resource()); return <></> }</Suspense> will throw instead solid - In solid, a Suspense is a 'special' signal. To trigger a Suspense boundary, the signal needs to be added directly in the jsx-tree or used inside a createRenderEffect or a createMemo. Unlike react, using it directly inside the component body will not trigger Suspense. Nothing throws, so code below the resource will still run. All siblings of the suspense will do their initial run. createEffect and onMount will only run once the resource is resolved, createRenderEffect and createMemo do run during initial run. - ✔️ <Suspense><div>{resource() || resource}</div></Suspense> - ❌ <Suspense>{() => { resource(); return <></> }</Suspense> - ❌ <Suspense><Component prop={resource() || resource}></Suspense>:(unless Component adds it to the jsx-tree or uses it inside createRenderEffect / createMemo) - ✔️ <Suspense>{() => { createRenderEffect(() => resource()); return <></> }</Suspense>
4 replies
SSolidJS
Created by bigmistqke 🌈 on 6/27/2023 in #support
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?
6 replies
SSolidJS
Created by bigmistqke 🌈 on 4/6/2023 in #support
how to throttle effects
Is there a way to throttle effects? Naive approaches, like slapping the callback of a createEffect in a throttle-function, don't seem to work (I assume it has something to do with the fact that it's sort of async-y)?
4 replies
SSolidJS
Created by bigmistqke 🌈 on 4/3/2023 in #support
createMemo with `equals: false` not reactive when mutating reference
I am trying to prevent to create DOMMatrix with each calculation, so I thought to mutate 1 with createMemo(() => ..., {equals: false}), assuming it would trigger all subscriptions even when returning the same value (in this case the mutated DOMMatrix), but it doesn't as you can see: https://playground.solidjs.com/anonymous/1a137694-7267-439b-a7d3-8164a541e800 Anybody an idea how to approach this?
7 replies
SSolidJS
Created by bigmistqke 🌈 on 3/26/2023 in #support
granularly derived store
My use-case: I have an array of coordinates as input. For each coordinate I want to keep a set of offsets. The input can change, coordinates can get removed or added to the array. I contorted something together with mapArray https://playground.solidjs.com/anonymous/981e35fd-a794-479e-a8dd-777306b24a87 but I wonder if there isn't something a bit more elegant/primitive-y to do the same.
4 replies
SSolidJS
Created by bigmistqke 🌈 on 2/17/2023 in #support
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?
12 replies
SSolidJS
Created by bigmistqke 🌈 on 1/9/2023 in #support
how to add package to https://www.solidjs.com/ecosystem?
I made a package and would like to add it to the solidjs website. Is there a write-up somewhere how to contribute?
2 replies
SSolidJS
Created by bigmistqke 🌈 on 1/9/2023 in #support
window.getComputedStyle returns react-style CSSStyleDeclaration?
if i const style = window.getComputedStyle(node) style has type CSSStyleDeclaration which follows react's camelCase formatting. I could cast it to JSX.CSSProperties but JSX.CSSProperties allow for numbers | string while window.getComputedStyle only returns string. what would be the solid way to type this?
13 replies
SSolidJS
Created by bigmistqke 🌈 on 1/8/2023 in #support
vite-template for building libraries
Is there a vite-template for writing ts (component-) libraries for solid? I can not seem to get the config right to bundle with type declaration-files.
3 replies
SSolidJS
Created by bigmistqke 🌈 on 1/8/2023 in #support
get types of HTMLElement-attributes
Is there a way to get the attributes of an HTMLElement? Similar to React.TextareaHTMLAttributes<HTMLTextAreaElement>? Can't seem to find anything about in the docs
4 replies
SSolidJS
Created by bigmistqke 🌈 on 1/4/2023 in #support
minimal ssr|ssg-setup, general pointers for solid on the server
I am hacking around with having a solid jsx-template generate a typescript-file describing the schema (https://codesandbox.io/p/github/bigmistqke/solid-three-parser/master?file=%2Fsrc%2FCMSApp.tsx be aware it's a bit unconventional). I have the typing sorted, but I need to open the browser to generate them. Ideally it would generate those types and save them in a file everytime I change them (inspired by payloadcms), without having to open the browser, but I am a bit puzzled with what would be the best way to approach that. It does not need reactivity, so I believe it could be done in node and ssr-mode, but am a complete noob regarding solid on the server so could really use some points. I thought a more minimal set-up, compared to solidstart, could help for me to play around with this, but can not immediately find anything when googling. if something like this would be possible in solidstart i would also be interested in these suggestions!
6 replies
SSolidJS
Created by bigmistqke 🌈 on 12/27/2022 in #support
Keep 'DEV' in production-mode
I would like to make use of the $NAME-symbol from solid-js/store (for my experimentations at https://github.com/bigmistqke/solid-yjs-store, so i can allow multiple store-paths leading to the same reactive value). this is currently only exported as part of DEV afaik. Is there a way how to keep DEV available when doing a production-build?
19 replies
SSolidJS
Created by bigmistqke 🌈 on 12/27/2022 in #support
setting getter in store on already defined key loses reactivity
const [store, setStore] = createStore({ value: 0, alreadyDefinedKey: {}});

setStore('newKey', {
 get get() {
   return store.value
 }
})

setStore('alreadyDefinedKey', {
 get get() {
   return store.value
 }
})
const [store, setStore] = createStore({ value: 0, alreadyDefinedKey: {}});

setStore('newKey', {
 get get() {
   return store.value
 }
})

setStore('alreadyDefinedKey', {
 get get() {
   return store.value
 }
})
in the above example store.alreadyDefinedKey.get will not update its value when store.value gets updated. is this expected behavior? can we only set getters when initializing its parent? https://playground.solidjs.com/anonymous/972b3aec-d7df-4ec0-9a68-c8b8b60785e3
4 replies
SSolidJS
Created by bigmistqke 🌈 on 12/19/2022 in #support
How to check if a variable is a solid-Mutable or -Store?
Is there a way how you can detect if a variable is a createMutable/Store-proxy? It is for the purpose of working with another library's proxies.
9 replies
SSolidJS
Created by bigmistqke 🌈 on 12/16/2022 in #support
client-side rendered solid-start, router and vercel
I am trying to deploy a CSR solid-start project to vercel. When I enter the route from the root and then navigate to a sub-route, I get properly routed, but if i directly go to a route I get a 404. Locally it works as expected. Is there something I need to add to my config for this to work?
2 replies
SSolidJS
Created by bigmistqke 🌈 on 12/12/2022 in #support
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?
35 replies