General Funky Usage

[ZachHandley]

Hey there,

so I have a few issues with the way persistent works

First of all, if I make a Map or Array persistent, it becomes readonly, in Svelte, in Astro, wherever, the persistent modules become readonly if they are an array or object. An example

export type XYZ = [x: number, y: number, z: number];
export const progressBarActiveScale: WritableAtom<XYZ> = persistentAtom<XYZ>('progressBarActiveScale', [1, 1.1, 1], {
    encode: (unencoded: number[]) => JSON.stringify(unencoded),
    decode: (encoded: string) => JSON.parse(encoded),
});

this is the configuration for my Threlte (Svelte ThreeJS) scene, I store it this way because my brother is going to OBS capture it, so between different loads I want the data to stay the same. Now the issue is, when I use it, it becomes readonly

so that's one issue, I don't know why it's readonly

The second issue is as someone else previously mentioned, and a more general Nanostores issue

      let tOnePBC = teamOneProgressBarColors.get();
      let tTwoPBC = teamTwoProgressBarColors.get();
      if (typeof tOnePBC === "string") {
        tOnePBC = JSON.parse(tOnePBC);
      }
      if (typeof tTwoPBC === "string") {
        tTwoPBC = JSON.parse(tTwoPBC);
      }

what the heck is the point of using encode and decode values if I still have to decode the stringified local value? That's confusing and I don't understand what's going on there.

[ai]

The map value’s is readonly is to prevent popular mistake of changing key directly in subscrlibe callback:

$store.subscribe(store => {
  store.initialized = true // This line will lead to unexpected behaviour
})

The problem is that changing key in store’s value will change the store, but will not notify the subscribers.

We didn’t plan to explicitly ban replacing the variable in Svelte, it is just side effect of this DX fix for pure JS subscribe() types.

If you know a way to keep protection from mistake and make it easier to write Svelte code, send PR.

[ai]

what the heck is the point of using encode and decode values if I still have to decode the stringified local value? That's confusing and I don't understand what's going on there.

Can you show teamOneProgressBarColors and teamTwoProgressBarColors definitions? Is it just atom() or persistentAtom()?

[ZachHandley]

what the heck is the point of using encode and decode values if I still have to decode the stringified local value? That's confusing and I don't understand what's going on there.

Can you show teamOneProgressBarColors and teamTwoProgressBarColors definitions? Is it just atom() or persistentAtom()?

export const teamOneProgressBarColors: WritableAtom<Array<RGB>> = persistentAtom<Array<RGB>>('progressBarColors', [[0, 0, 0], [0, 0, 0]], {
    encode: (unencoded: Array<RGB>) => JSON.stringify(unencoded),
    decode: (encoded: string) => JSON.parse(encoded),
});

persistent map (as these will be browser sourced in OBS and I want to use local caching to not reset the scene) -- the other thing i wanted to say was Vue has the same issue with maps, but the thing is you can't protect people from themselves. I can simply just do store = [...store.get(), newValueToReplace] like I do with Vue, in Vue the reactivity doesn't extend to the map too (individual items) but you can just fill it and it updates the whole definition, that's what I would prefer (or at least a toggle) because trying to make this work is hell. I have had to create an entire non-readonly copy of my map haha, it's a little horrible ngl

[ai]

BTW, why do you specify types? You can just write:

export const teamOneProgressBarColors = persistentAtom<RGB[]>('progressBarColors', [[0, 0, 0], [0, 0, 0]], {
    encode: (unencoded) => JSON.stringify(unencoded),
    decode: (encoded) => JSON.parse(encoded),
});

@nanostores/persistent has great type casting.

[ai]

With the current teamOneProgressBarColors you should not call JSON.parse again. It should just work (return RGB[] in get()).

Maybe we have a bug here?

But we have a test for that edge case
https://github.com/nanostores/persistent/blob/main/test/atom.test.ts#L106-L121

If you can create a minimum reproduction example, you can create an issue.

[ZachHandley]

I did that because it was [r: number, g: number, b: number] so I switched it, but my main issue is the read only here to be honest, the Vue usage isn't ideal either but in Vue I can create a ref to handle the reactivity and use a function to set it, in Svelte it's a drop in replacement so

[ai]

If you have a question about Vue you need to create another one with more examples. I can’t get the problem and how we can help here.

[euaaaio]

Honestly, it's hard for me to understand what you want to do and how you expect the code to work.
Maybe you can create a reproduction with a Vue related issue on StackBlitz?