How to give default value instead of undefined when deleting a property?

[lmk123]

const defaults = { foo: 'bar' }
const state = proxy(deepClone(defaults))

delete state.foo
console.log(state.foo) // I want it change to `'bar'`, not `undefined`

[dai-shi]

Something like this?

Object.assign(state, deepClone(defaults));

The idea of proxy() is that it works transparently.
So, what would you do for this case?

const defaults = { foo: 'bar' }
const state = deepClone(defaults)

delete state.foo
console.log(state.foo) // I want it change to `'bar'`, not `undefined`

[lmk123]

I'm developing a Chrome extension and I'm using the Chrome Storage API to store the extension's settings items.

When a user first installs my extension, I give them some default options:

const defaults = { foo: 'bar' }
// Since the user hasn't changed the settings yet, the readout will be the default value at this point.
const storage = await chrome.storage.local.get(defaults)

Since the Chrome Storage API is asynchronous, I'd like to have valtio act as an intermediate layer that manages changes and updates to user settings:

const defaults = { foo: 'bar' }
const storage = proxy(deepClone(defaults))

When the user changes the setting, I will implicitly call chrome.storage.local.set():

storage.foo = 'other'
console.log(storage.foo) // already 'other'

subscribe(storage, (unstable_ops) => {
  const changes = getChangesFrom(unstable_ops) // get `{ foo: 'other' }`
  chrome.storage.local.set(changes)
})

But when the user removes the attribute, I want the attribute to be reset to the default value instead of becoming undefined, after all, using undefined causes errors in many places, or I have to read the defaults again myself, e.g. <div>{(storage.foo || defaults.foo).length}</div>

delete storage.foo
console.log(storage.foo) // It's `undefined`, and that can cause errors to be reported elsewhere.

subscribe(storage, (unstable_ops) => {
  const removed = getRemovedFrom(unstable_ops) // get `['foo']`
  chrome.storage.local.remove(removed)
})

[dai-shi]

I'm not sure if this works, but how about:

subscribe(storage, () => {
  if (!('foo' in storage)) {
    storage.foo = 'bar'
  }
})

[lmk123]

I tried, but it's not stable.

delete storage.foo
// This may cause the react component to re-render and then the component will report an error for reading an `undefined`.

subscribe(storage, () => {
  if (!('foo' in storage)) {
    storage.foo = 'bar'
    // Here, the React component will re-render again and then it will go back to normal.
  }
})

The use case I'm running into can actually be bypassed in other ways as well, such as avoiding delete or making sure that the react component is only re-rendered after the subscribe callback, but I'd like to ask if it's possible to synchronize the reset to the defaults at the delete time, so that there's no need to do all the above workaround.

[dai-shi]

I'm not strongly suggesting it, but "sync" subscribe might help this specific case.

subscribe(storage, () => {
  if (!('foo' in storage)) {
    storage.foo = 'bar'
  }
}, true)