webstrand Posts - Answer Overflow

webstrand

•Created by webstrand on 10/28/2024 in #support

<Show> not tracking signals

For some reason when I use another signal inside of Show's callback, it does not track that signal. When I don't use Show's callback, everything works fine. https://playground.solidjs.com/anonymous/9581e103-9f05-4744-ba92-f285dc89d19f

28 replies

SSolidJS

•Created by webstrand on 10/27/2024 in #support

solidjs/html use: attributes

What's the correct syntax for use: attributes when using lit-dom-expressions ? I've tried html`<div use:${myFunction}></div>` but that doesn't work and any properties following the use: are omitted.

10 replies

SSolidJS

•Created by webstrand on 10/22/2024 in #support

How are you supposed to satisfy refs when not forwarding to a pure DOM node?

function Example() {
  let controller: { open(): void } | undefined
  return <>
      <button onClick={() => controller?.open()}>Open</button>
      <Controllable ref={controller} />
  </>;
}

function Controllable(props: { ref: Ref<{ open(): void } | undefined> }) {
  let dialog: HTMLDialogElement | undefined;
  function open() {
    // do some stuff
    dialog?.showModal();
  }
  // How do I satisfy props.ref here properly? Or is this the way
  // and is there a way to eliminate the `| undefined` in the type of the ref?
  createRenderEffect(() => {
    typeof props.ref === "function" ? props.ref({ open }) : console.log("no ref")
  });
  return <dialog ref={dialog}>Hello</dialog>;
}

function Example() {
  let controller: { open(): void } | undefined
  return <>
      <button onClick={() => controller?.open()}>Open</button>
      <Controllable ref={controller} />
  </>;
}

function Controllable(props: { ref: Ref<{ open(): void } | undefined> }) {
  let dialog: HTMLDialogElement | undefined;
  function open() {
    // do some stuff
    dialog?.showModal();
  }
  // How do I satisfy props.ref here properly? Or is this the way
  // and is there a way to eliminate the `| undefined` in the type of the ref?
  createRenderEffect(() => {
    typeof props.ref === "function" ? props.ref({ open }) : console.log("no ref")
  });
  return <dialog ref={dialog}>Hello</dialog>;
}

https://playground.solidjs.com/anonymous/17acd607-9d8f-4dd8-b098-5cf0b5c9fb07

6 replies

SSolidJS

•Created by webstrand on 7/30/2024 in #support

Resource state never updates when consumed by <Show>

https://playground.solidjs.com/anonymous/d47ac50e-b5d4-4b1c-8cff-d2c8ed7e1199 Refetch the resource until it fails to make a joke, observe that the joke.state never updates afterward. Is this a bug?

36 replies

SSolidJS

•Created by webstrand on 4/16/2024 in #support

Adapting a list of objects to signals

I've got an API that returns a list of objects like

[
    { name: "foo", value: 200, message: "whatever" },
    { name: "foo", value: 44, message: "" },
    { name: "baz", value: 0, message: "blah" }
]

[
    { name: "foo", value: 200, message: "whatever" },
    { name: "foo", value: 44, message: "" },
    { name: "baz", value: 0, message: "blah" }
]

I fetch this data using useResource and I render it out with a tree of components like

function List(props: { results: Result[] }) {
    return <For each={props.results}>{(result) => <Result result={result}/>}</For>
}

function Result(props: { result: Result }) {
    return <ul>
      <li>{props.result.name}</li>
      <li><input type="number" value={props.result.value}/></li>
      <li><input type="text" value={props.result.message}/></li>
    </ul>
}

function List(props: { results: Result[] }) {
    return <For each={props.results}>{(result) => <Result result={result}/>}</For>
}

function Result(props: { result: Result }) {
    return <ul>
      <li>{props.result.name}</li>
      <li><input type="number" value={props.result.value}/></li>
      <li><input type="text" value={props.result.message}/></li>
    </ul>
}

The problem comes when I invalidate the resource and re-fetch it, all of the Result components get re-rendered from scratch, because the objects are different. And even if the objects were the "same" then they wouldn't update properly because props.result.value isn't a signal. Does solid provide any tools for mapping data like this into signals so that my components can be reactive to it?

8 replies

Gaming

Programming