SolidJS•7mo ago

Path syntax flexibility

Is this example from the docs supposed to work? Seems nice to be able to select keys using a function, but I can't seem to get it to work: https://docs.solidjs.com/concepts/stores#path-syntax-flexibility

9 Replies

jaakOP•7mo ago

https://playground.solidjs.com/anonymous/a82bc107-e183-483c-b568-c64bbd8e192c

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

REEEEE•7mo ago

That seems incorrect, the correct synatx is: updateUsers([1,3], 'loggedIn', false) Might be an issue with the docs

peerreynders•7mo ago

I wonder if that ever worked. The original examples where along the lines of

import { createStore } from 'solid-js/store';

const [users, updateUsers] = createStore<{
  values: Array<{ id: number; loggedIn: boolean }>;
}>({
  values: [
    { id: 0, loggedIn: false },
    { id: 1, loggedIn: true },
    { id: 2, loggedIn: false },
    { id: 3, loggedIn: false },
    { id: 4, loggedIn: true },
    { id: 5, loggedIn: true },
  ],
});

console.log(JSON.stringify(users, null, 2));
updateUsers('values', (user) => user.loggedIn, 'loggedIn', false);
console.log(JSON.stringify(users, null, 2));

import { createStore } from 'solid-js/store';

const [users, updateUsers] = createStore<{
  values: Array<{ id: number; loggedIn: boolean }>;
}>({
  values: [
    { id: 0, loggedIn: false },
    { id: 1, loggedIn: true },
    { id: 2, loggedIn: false },
    { id: 3, loggedIn: false },
    { id: 4, loggedIn: true },
    { id: 5, loggedIn: true },
  ],
});

console.log(JSON.stringify(users, null, 2));
updateUsers('values', (user) => user.loggedIn, 'loggedIn', false);
console.log(JSON.stringify(users, null, 2));

and

updateUsers('values', [1, 3], 'loggedIn', false);

updateUsers('values', [1, 3], 'loggedIn', false);

jaakOP•7mo ago

That's a shame, it looked very useful for a moment

REEEEE•7mo ago

It still works if you do updateUsers([1,3], 'loggedIn', false)

apollo79•7mo ago

It is possible to select records using functions though, like e.g. update("users", i => i.id === 42, 'loggedIn', false); It is a bit different use case though

jaakOP•7mo ago

Yeah, i know these, thanks. Im doing a lot of JsonPatch based patching when syncing to the server, so being able to represent paths as functions seemed useful

mavali•7mo ago

you could use shallow merging and do :

updateUsers([1,3], {loggedIn: false})

updateUsers([1,3], {loggedIn: false})

Its still compact and works if you don't like specifying the property as a string.

jaakOP•7mo ago

I looked into how produce is implemented, and realized I don't have to even pass the key! This might break in the future, but then i hope they expose the internal function (setProperty) that makes it possible for produce.

updateStore(() =>
      produce((value: any) => {
        value[key] = newValue
      })(unwrap(nestedStoreValue))
    )

updateStore(() =>
      produce((value: any) => {
        value[key] = newValue
      })(unwrap(nestedStoreValue))
    )

With this I made a proxy that works exactly like the one produce uses internally, but stores a JsonPatch for each mutation I just realized the outside updateStore doesn't do anything, so produce can update the store all by itself...

Gaming

Programming

Path syntax flexibility