with-redux example storage syncing problems in Firefox

[Zweihander-Main]

I'm in the middle of debugging this but thought I'd put it into discussions in case anyone has any pointers:

The with-redux example when built for Firefox (--target=firefox-mv3 or --target=firefox-mv2) doesn't work as intended and has at least 2-3 odd behaviors. For explanatory purposes, I've added a console.log statement in store.ts:

new Storage().watch({
  [`persist:${persistConfig.key}`]: () => {
    console.log("Storage changed");
    persistor.resync()
  }
})

1. When using the example's default syncStorage under the persistConfig, the storage doesn't sync at all. Incrementing and decrementing in either the popup or the options page doesn't save the value. The console statement is never called.
2. When using localStorage in the persistConfig (and using {area: 'local'} in the Storage declaration), the storage goes into an infinite loop with the console statement being called repeatedly.

I came across behavior 2 in my own extension and worked around it by doing something like the following:

new Storage({area: 'local'}).watch({
  [`persist:${persistConfig.key}`]: (change) => {
    console.log("Storage changed");
    if (
    JSON.stringify(change.oldValue) !==
    JSON.stringify(change.newValue)
    ) {
      persistor.resync();
    }
  }
})

While this stops the infinite loop, it shows a third odd behavior:

3. In my extension I use multiple Redux Toolkit slices and store them using nested persists as outlined in the Redux-Persist docs. I therefore watch multiple keys for each of the nested persists. In Chrome, modifying the state of one of the nested persists will only cause the console statement to be output once for that particular state slice. In Firefox with the above workaround, every modification will cause all of the nested persists to trigger (and so n console statements will be output corresponding to the n slices).

I think the third behavior may hint at the root cause but I'm still playing around with it.

[Zweihander-Main]

Behavior 1 unrelated -- solved with temp ID as per README on @PlasmoHQ/storage. The second and third issues are still there. Both issues occur with either local or sync storage.

[Zweihander-Main]

Further diving in found this bug which I think is likely the root cause. Chrome (and apparently Safari) will not fire the onChanged event when the value hasn't changed whereas Firefox will trigger it every time thereby breaking the assumptions in the code.

I think it will probably require a Firefox only workaround for the with-redux example. I can add a PR but I want to play around with my extension first to see if there's a more performant way of doing it

More debugging details:
In store.ts:

new Storage({ area: "local" }).watch({
  [`persist:${persistConfig.key}`]: () => {
    setTimeout(() => {
      persistor.resync()
    }, 1000)
  }
})

In createPersistoid.ts of @plasmohq/redux-persist:

  function writeStagedState() {
    // cleanup any removed keys just before write.
    Object.keys(stagedState).forEach((key) => {
      if (lastState[key] === undefined) {
        delete stagedState[key]
      }
    })

   debugger;
    writePromise = storage
      .setItem(storageKey, serialize(stagedState))
      .catch(onWriteFail)
  }

In Chrome and Firefox, the debugger statement is called the same amount of times at the same interval. However, in Firefox, this causes the onChanged/watch listener to trigger again whereas in Chrome it doesn't.

Switching to chrome.storage.local.onChanged.addListener instead of watch also shows the same behavior so very likely nothing to do with @plasmohq/storage.

In store.ts replacing the watch statement with the following will also cause the infinite loop so that narrows it down:

const listener = (changes: any) => {
  console.log("Storage onChanged", changes)
  setTimeout(() => {
    console.log("Resyncing")
    chrome.storage.local.set({ test: "test" })
  }, 1000)
}

chrome.storage.local.onChanged.addListener(listener)

[louisgv]

Really appreciate the detailed write-up!

[Zweihander-Main]

Pull request for examples here.

Other approaches including what a Firefox-only approach would look like here.