finsook Comments - Answer Overflow

I was hoping the compilers you referred to were these magical incremental update compilers, but it seems they are just minor syntax hacks to make using signals easier

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

Right, but say you have:

{ id: 'abc', a: 1, b: 2 } -> { id: 'abc', a: 1, b: 3 }

{ id: 'abc', a: 1, b: 2 } -> { id: 'abc', a: 1, b: 3 }

Then you can run the render function {id, a, b} => [id, <div>{a}+{b}</div> and get

['abc', <div>1 + 2</div>] -> ['abc', <div>1 + 3</div>]

['abc', <div>1 + 2</div>] -> ['abc', <div>1 + 3</div>]

And then turn that into a DOM text modification using a diff algorithm. And with a Sufficiently Smart Compiler you can skip the diff and compile the render function directly into an incremental DOM update function

function update({id_old, a_old, b_old}, {id_new, a_new, b_new}) {
  assert(id_old == id_new);
  if (a_old != a_new || b_old != b_new) {
    elem.textContent = `${a}+${b}`;
  }
}

function update({id_old, a_old, b_old}, {id_new, a_new, b_new}) {
  assert(id_old == id_new);
  if (a_old != a_new || b_old != b_new) {
    elem.textContent = `${a}+${b}`;
  }
}

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

well of course, everything is immutable. but if you change the items list then there is a new item and an old item matched by the id / key

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

yeah, I think you would also add a parameter for comparing the item against its cached version. Or just render the fragment and compare the fragment with dom-diffing

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

well like Key for example, a version that didn't pass signals

<Key2 each={items()} by={item => item.id} fallback={<div>No items</div>}>
  {{a,b} => <div>{a + b}</div>}
</Key>

<Key2 each={items()} by={item => item.id} fallback={<div>No items</div>}>
  {{a,b} => <div>{a + b}</div>}
</Key>

As peerreynders says it would probably have to use some sort of caching to avoid rerunning the function too much

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

but is there a reason one couldn't make a version of Index that acted like For and reran the function?

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

like with Key, everything is a signal. so you have to write item()

<Key each={items()} by={item => item.id} fallback={<div>No items</div>}>
  {item => <div>{item().a + item().b}</div>}
</Key>

<Key each={items()} by={item => item.id} fallback={<div>No items</div>}>
  {item => <div>{item().a + item().b}</div>}
</Key>

but with for, it is a value, so you can destructure

<For each={items()}>
  {{a,b} => <div>{a + b}</div>}
</For>

<For each={items()}>
  {{a,b} => <div>{a + b}</div>}
</For>

so it is much more convenient

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

but, is there a technical reason why Index could not pass values to its children function?

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

I guess I'm not clear, why is count a signal for Index but a value for For?

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

well in this case countList() is already a signal/memo. I guess it is not too important, it is mainly to write c instead of count() so the JSX is not too long

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

could you make it be inside an effect? like wrap the (count) => { ... } function in a createEffect function?

<Index each={countList()}>
  {createEffect((count) => { // doesn't work, createEffect returns void
    let c = count();
    return (
      <button type="button" onClick={increment}>
        {c.x + ' ' + c.y}
      </button>
    );
  })}
</Index>

<Index each={countList()}>
  {createEffect((count) => { // doesn't work, createEffect returns void
    let c = count();
    return (
      <button type="button" onClick={increment}>
        {c.x + ' ' + c.y}
      </button>
    );
  })}
</Index>

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

there is https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/reconcile.js which looks like basically the same algorithm as For.

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

hmm, so they both use ===: https://github.com/solidjs/solid/blob/c9049dc8ddb39fc2163082c7bde3f507eb1ce831/packages/solid/src/reactive/array.ts. I guess the difference is really that For has a diff algorithm type thing, whereas Index does a simple index-by-index check. In that sense Index does use the numeric index as a key.

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

for example instead of destructuring you can use as arr (arr[0])} in the each.

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

This isn't using crazy keys, but I think it shows how flexible Svelte is compared to Solid. AFAICT though it is the shortest way to emulate Solid's Index behavior.

{#each Array.from(countList.entries()) as [i,c] (i)}
    <button on:click={increment}>
        {c.x + " " + c.y}
    </button>
{/each}

{#each Array.from(countList.entries()) as [i,c] (i)}
    <button on:click={increment}>
        {c.x + " " + c.y}
    </button>
{/each}

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

it's similar, but it looks like in Svelte you can write an arbitrary expression for the key, it is not limited to an attribute

63 replies

SSolidJS

•Created by finsook on 6/20/2024 in #support

Reactivity not referentially transparent?

IDK, I am looking at Svelte and you can just give a value as the key, it seems easier.

63 replies

Gaming

Programming