Combining mutable with a check of localStorage?

[aaronkyle]

Hi Observablers!

I am experimenting with local storage for data persistence, and am having trouble correctly using Mutable in Framework.

When I define inputs to swap data that are hard-coded into my notebook, I can see the mutable value changing on button press and apparently working fine:

display(state_data)

let state_data = Mutable ({})

function swap_data(data) {
  state_data.value = data;
}

However if I add another function to first check whether there's an existing data object in localStorage, my application breaks. When separating the code block and writing the localStorage copy of state_data to the mutable with state_data.value, my inputs reading state_data are blank, and my mutable value is an object within an object. However I cannot write directly to state_data, as I get SyntaxError: Assignment to external variable 'state_data' (4:10).

const ephemeral_state = (function() {
    const ephemeral_state = localStorage.getItem('state_data');
    return ephemeral_state !== null && ephemeral_state !== 'null'
        ? state_data.value = JSON.parse(ephemeral_state)
        : state_data.value = template_data;
})();

If I try to combine this code block into the cell with the mutable definition and I try directly writing to state_data, my inputs stop loading the data and the swap function doesn't work. If I try to write to state_data.value, then I get the error "RuntimeError: change is not a function"

Here's a copy of a Framework project where I am trying to make this work:
https://github.com/aaronkyle/data-persistence

The index file is here: https://github.com/aaronkyle/data-persistence/blob/master/src/index.md

I have gotten the mutable state_data to work correctly in the notebook context here: https://observablehq.com/@aaronkyle/data-mutation-and-persistence

Any tips for how to make this function correctly in Framework?

[mbostock]

When state_data is a Mutable, you can never refer to state_data.value outside of the code block that declares state_data. You can only refer to state_data.value within the declaring code block.

If you want to assign the value of state_data outside the code block, you need to expose a setter function (as swap_data does) and use that. Likewise if you want to “peek” at the value of state_data non-reactively (i.e., from a code block where you don’t want the code to re-run whenever state_data changes), you need to expose a getter function.

A common pattern is to use Mutable like React’s useState hook:

const age = Mutable(28);
const setAge = (a) => age.value = a;

Then you can call setAge whenever you want to change the value of age (and re-run any code block that references age).

If your goal is to initialize the value of state_data from local storage, then you don’t need to assign to state_data.value at all; you just need to pass a different value to the Mutable constructor when you declare state_data.

const state_data = Mutable(JSON.parse(localStorage.getItem("state_data")) ?? template_data);

[aaronkyle]

Thank you, Mike! I appreciate your time and clarifications. I got the pattern working and have updated the repo. :)