@plq/use-persisted-state 1.4.0 → 1.4.1

package/README.md

@@ -225,6 +225,20 @@ persisted_state_hook:example → {"count":0}
 
 Storage backends only ever see serialized strings. Anything you persist ends up unencrypted in the underlying storage — do not store secrets or sensitive data (see [SECURITY.md](https://github.com/Akurganow/use-persisted-state/blob/main/SECURITY.md)).
 
+### An entry the library cannot read
+
+A write replaces the factory's whole entry, so there is nothing safe to store when the entry already
+there is a string that will not parse, or parses to something that is not an object — another
+library writing under the same key, or a write cut short. The setter reports the failure on
+`console.error`, keeps the value you set in memory and writes nothing, leaving every other hook's
+key exactly where it is. The factory's `clear` removes the entry and lets writing resume.
+
+This reaches as far as the adapter reports. Web storage holds only strings, so anything under the
+key comes back and is checked. Extension storage holds arbitrary JSON, and the bundled adapters
+report a non-string value as absent — the library then reads the entry as empty and its next write
+**replaces that value**. Storing your own data under a `persisted_state_hook:` key in extension
+storage is not safe, whatever its type.
+
 ### Values JSON cannot carry
 
 A few values do not survive `JSON.stringify`. This follows from the format rather than from a choice

package/lib/create-async-persisted-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-async-persisted-state.d.ts","sourceRoot":"","sources":["../src/create-async-persisted-state.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAA;AAEtE,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,CAAC,SAAS,YAAY,EACtE,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,CAAC,GACT,CAAC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAqGvC"}
+{"version":3,"file":"create-async-persisted-state.d.ts","sourceRoot":"","sources":["../src/create-async-persisted-state.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAA;AAEtE,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,CAAC,SAAS,YAAY,EACtE,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,CAAC,GACT,CAAC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CA+IvC"}

package/lib/create-async-persisted-state.js

@@ -1,18 +1,90 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = createAsyncPersistedState;
 const react_1 = require("react");
-const use_storage_handler_1 = __importDefault(require("./utils/use-storage-handler"));
+const use_storage_handler_1 = __importStar(require("./utils/use-storage-handler"));
 const get_new_value_1 = __importDefault(require("./utils/get-new-value"));
 const get_new_item_1 = __importDefault(require("./utils/get-new-item"));
 const get_persisted_value_1 = __importDefault(require("./utils/get-persisted-value"));
 function createAsyncPersistedState(storageKey, storage) {
     const safeStorageKey = `persisted_state_hook:${storageKey}`;
+    // Every hook this factory makes lives in one entry, and storing a value means
+    // reading that entry, merging one key into it and writing all of it back, with
+    // a suspension point on either side of the merge. Left to overlap, a second
+    // writer merges into a snapshot taken before the first one landed and stores
+    // it: the first writer's key is gone from storage while its value is still on
+    // screen, and nothing reports the disagreement. It is the entry, not the hook,
+    // that has to be taken one at a time, so the chain belongs to the factory.
+    let entryWrites = Promise.resolve();
     const clear = () => {
-        return storage.remove(safeStorageKey);
+        // Removing the entry changes it as much as storing does, so it takes its turn
+        // in the same chain. Outside it, a write already queued lands after the
+        // removal and brings back what was cleared - and "clear this data" is the one
+        // request that cannot be allowed to half happen.
+        const removal = entryWrites.then(() => storage.remove(safeStorageKey));
+        entryWrites = removal.catch(() => undefined);
+        return removal;
+    };
+    const commitEntry = (key, newValue, pendingOwnWrites) => {
+        const write = entryWrites.then(async () => {
+            const persistedItem = await storage.get(safeStorageKey);
+            let newItem;
+            try {
+                newItem = (0, get_new_item_1.default)(key, persistedItem[safeStorageKey], newValue);
+            }
+            catch {
+                // Refused, and reported where it was refused. A write replaces the whole
+                // entry, so an entry that cannot be read is one no write can be built on
+                // without dropping every other hook's key; skipping leaves the bytes for
+                // a repair to reach. The caller keeps what it set, unpersisted.
+                return;
+            }
+            // Recorded before the write, because the backend may report it before the
+            // promise settles.
+            (0, use_storage_handler_1.recordOwnWrite)(pendingOwnWrites, newItem);
+            await storage.set({ [safeStorageKey]: newItem });
+        });
+        // The chain has to outlive a failed write, or one backend rejection stops
+        // every later write on this entry. The rejection itself is not swallowed: it
+        // stays on the promise handed back to the caller that asked for the write.
+        entryWrites = write.catch(() => undefined);
+        return write;
     };
     const usePersistedState = (key, initialValue) => {
         const [state, setState] = (0, react_1.useState)(initialValue);
@@ -29,17 +101,14 @@ function createAsyncPersistedState(storageKey, storage) {
             hasAppliedValue.current = true;
             setState(value);
         }, []);
-        // The exact entry this hook last wrote and has not yet seen reported back.
-        const pendingOwnWrite = (0, react_1.useRef)(null);
+        // The entries this hook has written and not yet seen reported back.
+        const pendingOwnWrites = (0, react_1.useRef)([]);
         const setPersistedState = (0, react_1.useCallback)(async (newState) => {
             const newValue = (0, get_new_value_1.default)(newState, latestValue.current);
+            // Applied before the write is even queued: the caller sees its value at
+            // once, and only the trip to storage waits its turn.
             applyValue(newValue);
-            const persistedItem = await storage.get(safeStorageKey);
-            const newItem = (0, get_new_item_1.default)(key, persistedItem[safeStorageKey], newValue);
-            // Recorded before the write, because the backend may report it before the
-            // promise settles.
-            pendingOwnWrite.current = newItem;
-            await storage.set({ [safeStorageKey]: newItem });
+            await commitEntry(key, newValue, pendingOwnWrites);
         }, [key, applyValue]);
         // As in `useState`, the value the load falls back to is the one given on the
         // first render. Later identities of an inline object must not reload, or the
@@ -50,7 +119,7 @@ function createAsyncPersistedState(storageKey, storage) {
         // between the read and the subscription in which a write belongs to neither
         // and is lost. Reading last covers everything written before the subscription
         // began, and the listener covers everything after.
-        (0, use_storage_handler_1.default)(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrite);
+        (0, use_storage_handler_1.default)(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrites);
         (0, react_1.useEffect)(() => {
             // Two separate questions, and one cell cannot hold both: whether this load
             // is still the current one, which only the closure it belongs to can answer,

package/lib/create-async-persisted-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-async-persisted-state.js","sourceRoot":"","sources":["../src/create-async-persisted-state.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"create-async-persisted-state.js","sourceRoot":"","sources":["../src/create-async-persisted-state.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,4CAkJC;AA5JD,iCAAgE;AAEhE,mFAA+E;AAC/E,0EAA+C;AAC/C,wEAA6C;AAC7C,sFAA2D;AAK3D,SAAwB,yBAAyB,CAC/C,UAAkB,EAClB,OAAU;IAEV,MAAM,cAAc,GAAG,wBAAwB,UAAU,EAAE,CAAA;IAE3D,8EAA8E;IAC9E,+EAA+E;IAC/E,4EAA4E;IAC5E,6EAA6E;IAC7E,8EAA8E;IAC9E,+EAA+E;IAC/E,2EAA2E;IAC3E,IAAI,WAAW,GAAqB,OAAO,CAAC,OAAO,EAAE,CAAA;IAErD,MAAM,KAAK,GAAG,GAAkB,EAAE;QAChC,8EAA8E;QAC9E,wEAAwE;QACxE,8EAA8E;QAC9E,iDAAiD;QACjD,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;QAEtE,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAA;QAE5C,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,CAAI,GAAW,EAAE,QAAW,EAAE,gBAA2C,EAAiB,EAAE;QAC9G,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;YACxC,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;YACvD,IAAI,OAAe,CAAA;YAEnB,IAAI,CAAC;gBACH,OAAO,GAAG,IAAA,sBAAU,EAAI,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,CAAA;YACvE,CAAC;YAAC,MAAM,CAAC;gBACP,yEAAyE;gBACzE,yEAAyE;gBACzE,yEAAyE;gBACzE,gEAAgE;gBAChE,OAAM;YACR,CAAC;YAED,0EAA0E;YAC1E,mBAAmB;YACnB,IAAA,oCAAc,EAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;YAEzC,MAAM,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;QAEF,0EAA0E;QAC1E,6EAA6E;QAC7E,2EAA2E;QAC3E,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAA;QAE1C,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAI,GAAW,EAAE,YAA2B,EAAwB,EAAE;QAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,YAAY,CAAC,CAAA;QAEnD,4EAA4E;QAC5E,0EAA0E;QAC1E,gEAAgE;QAChE,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAA;QAEjC,+EAA+E;QAC/E,6EAA6E;QAC7E,wEAAwE;QACxE,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAA;QAErC,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAQ,EAAQ,EAAE;YAChD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAA;YAC3B,eAAe,CAAC,OAAO,GAAG,IAAI,CAAA;YAE9B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,oEAAoE;QACpE,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAW,EAAE,CAAC,CAAA;QAE7C,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,KAAK,EAAE,QAAiC,EAAiB,EAAE;YACzD,MAAM,QAAQ,GAAG,IAAA,uBAAW,EAAI,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;YAE9D,wEAAwE;YACxE,qDAAqD;YACrD,UAAU,CAAC,QAAQ,CAAC,CAAA;YAEpB,MAAM,WAAW,CAAI,GAAG,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAA;QACvD,CAAC,EACD,CAAC,GAAG,EAAE,UAAU,CAAC,CAClB,CAAA;QAED,6EAA6E;QAC7E,6EAA6E;QAC7E,oDAAoD;QACpD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,YAAY,CAAC,CAAA;QAE9C,8EAA8E;QAC9E,yEAAyE;QACzE,4EAA4E;QAC5E,8EAA8E;QAC9E,mDAAmD;QACnD,IAAA,6BAAiB,EAAI,GAAG,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAA;QAE9F,IAAA,iBAAS,EAAC,GAAG,EAAE;YACb,2EAA2E;YAC3E,6EAA6E;YAC7E,4EAA4E;YAC5E,4EAA4E;YAC5E,2EAA2E;YAC3E,yEAAyE;YACzE,0EAA0E;YAC1E,IAAI,WAAW,GAAG,KAAK,CAAA;YAEvB,eAAe,CAAC,OAAO,GAAG,KAAK,CAAA;YAE/B,MAAM,kBAAkB,GAAG,KAAK,IAAmB,EAAE;gBACnD,IAAI,CAAC;oBACH,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;oBAEjD,IAAI,WAAW,IAAI,eAAe,CAAC,OAAO;wBAAE,OAAM;oBAElD,UAAU,CAAC,IAAA,6BAAiB,EAAI,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;gBAC3F,CAAC;gBAAC,OAAO,GAAG,EAAE,CAAC;oBACb,kEAAkE;oBAClE,+DAA+D;oBAC/D,kEAAkE;oBAClE,iEAAiE;oBACjE,sEAAsE;oBACtE,2DAA2D;oBAC3D,OAAO,CAAC,KAAK,CAAC,oDAAoD,EAAE,GAAG,CAAC,CAAA;gBAC1E,CAAC;YACH,CAAC,CAAA;YAED,kBAAkB,EAAE,CAAA;YAEpB,OAAO,GAAG,EAAE;gBACV,WAAW,GAAG,IAAI,CAAA;YACpB,CAAC,CAAA;QACH,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAA;QAErB,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAA;IACnC,CAAC,CAAA;IAED,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;AACnC,CAAC"}

package/lib/create-persisted-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-persisted-state.d.ts","sourceRoot":"","sources":["../src/create-persisted-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAA;AAOtE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,CAgE/G"}
+{"version":3,"file":"create-persisted-state.d.ts","sourceRoot":"","sources":["../src/create-persisted-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAA;AAOtE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,CA0E/G"}

package/lib/create-persisted-state.js

@@ -1,11 +1,44 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = createPersistedState;
 const react_1 = require("react");
-const use_storage_handler_1 = __importDefault(require("./utils/use-storage-handler"));
+const use_storage_handler_1 = __importStar(require("./utils/use-storage-handler"));
 const get_new_value_1 = __importDefault(require("./utils/get-new-value"));
 const get_new_item_1 = __importDefault(require("./utils/get-new-item"));
 const get_persisted_value_1 = __importDefault(require("./utils/get-persisted-value"));
@@ -38,17 +71,27 @@ function createPersistedState(storageKey, storage) {
             renderedKey.current = key;
             applyValue(readPersisted(key, initialValue));
         }
-        // The exact entry this hook last wrote and has not yet seen reported back.
-        const pendingOwnWrite = (0, react_1.useRef)(null);
+        // The entries this hook has written and not yet seen reported back.
+        const pendingOwnWrites = (0, react_1.useRef)([]);
         const setPersistedState = (0, react_1.useCallback)((newState) => {
             const newValue = (0, get_new_value_1.default)(newState, latestValue.current);
             applyValue(newValue);
             const persistedItem = storage.get(safeStorageKey)[safeStorageKey];
-            const newItem = (0, get_new_item_1.default)(key, persistedItem, newValue);
-            pendingOwnWrite.current = newItem;
+            let newItem;
+            try {
+                newItem = (0, get_new_item_1.default)(key, persistedItem, newValue);
+            }
+            catch {
+                // Refused, and reported where it was refused. A write replaces the whole
+                // entry, so an entry that cannot be read is one no write can be built on
+                // without dropping every other hook's key; skipping leaves the bytes for
+                // a repair to reach. The caller keeps what it set, unpersisted.
+                return;
+            }
+            (0, use_storage_handler_1.recordOwnWrite)(pendingOwnWrites, newItem);
             storage.set({ [safeStorageKey]: newItem });
         }, [key, applyValue]);
-        (0, use_storage_handler_1.default)(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrite);
+        (0, use_storage_handler_1.default)(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrites);
         return [state, setPersistedState];
     };
     return [usePersistedState, clear];

package/lib/create-persisted-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-persisted-state.js","sourceRoot":"","sources":["../src/create-persisted-state.ts"],"names":[],"mappings":";;;;;AAWA,uCAgEC;AA1ED,iCAAqD;AAKrD,sFAA2D;AAC3D,0EAA+C;AAC/C,wEAA6C;AAC7C,sFAA2D;AAE3D,SAAwB,oBAAoB,CAAC,UAAkB,EAAE,OAAgB;IAC/E,MAAM,cAAc,GAAG,wBAAwB,UAAU,EAAE,CAAA;IAC3D,MAAM,KAAK,GAAG,GAAS,EAAE;QACvB,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CAAI,GAAW,EAAE,YAAe,EAAK,EAAE,CAC3D,IAAA,6BAAiB,EAAI,GAAG,EAAE,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC,CAAA;IAEtF,MAAM,iBAAiB,GAAG,CAAI,GAAW,EAAE,YAAe,EAAwB,EAAE;QAClF,4EAA4E;QAC5E,8EAA8E;QAC9E,gEAAgE;QAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAA;QAE7E,4EAA4E;QAC5E,0EAA0E;QAC1E,gEAAgE;QAChE,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAA;QAEjC,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAQ,EAAQ,EAAE;YAChD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAA;YAE3B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,4EAA4E;QAC5E,8EAA8E;QAC9E,8EAA8E;QAC9E,4EAA4E;QAC5E,wCAAwC;QACxC,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,GAAG,CAAC,CAAA;QAE/B,IAAI,WAAW,CAAC,OAAO,KAAK,GAAG,EAAE,CAAC;YAChC,WAAW,CAAC,OAAO,GAAG,GAAG,CAAA;YAEzB,UAAU,CAAC,aAAa,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAA;QAC9C,CAAC;QAED,2EAA2E;QAC3E,MAAM,eAAe,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAA;QAEnD,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,QAAiC,EAAQ,EAAE;YAC1C,MAAM,QAAQ,GAAG,IAAA,uBAAW,EAAI,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;YAE9D,UAAU,CAAC,QAAQ,CAAC,CAAA;YAEpB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAA;YACjE,MAAM,OAAO,GAAG,IAAA,sBAAU,EAAI,GAAG,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAA;YAE3D,eAAe,CAAC,OAAO,GAAG,OAAO,CAAA;YAEjC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAA;QAC5C,CAAC,EACD,CAAC,GAAG,EAAE,UAAU,CAAC,CAClB,CAAA;QAED,IAAA,6BAAiB,EAAI,GAAG,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,CAAC,CAAA;QAE7F,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAA;IACnC,CAAC,CAAA;IAED,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;AACnC,CAAC"}
+{"version":3,"file":"create-persisted-state.js","sourceRoot":"","sources":["../src/create-persisted-state.ts"],"names":[],"mappings":"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"}

package/lib/utils/get-new-item.d.ts

@@ -1,2 +1,14 @@
-export default function <T>(key: string, persistedItem: string, newValue: T): string;
+/**
+ * Merges `newValue` under `key` into the serialized entry a factory shares between all of its
+ * hooks, and returns the entry to store.
+ *
+ * Reports and throws when the entry cannot be merged into, rather than answering with one built
+ * from nothing. What this returns is written over the whole entry, so an unreadable entry is the
+ * one case with nothing safe to return: every other hook's key would be replaced with nothing,
+ * and the bytes a repair still needs would go with them.
+ *
+ * @throws {SyntaxError} when the entry is not valid JSON.
+ * @throws {TypeError} when the entry is valid JSON but not an object of keys.
+ */
+export default function getNewItem<T>(key: string, persistedItem: string, newValue: T): string;
 //# sourceMappingURL=get-new-item.d.ts.map

package/lib/utils/get-new-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-new-item.d.ts","sourceRoot":"","sources":["../../src/utils/get-new-item.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,WAAW,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,CAenF"}
+{"version":3,"file":"get-new-item.d.ts","sourceRoot":"","sources":["../../src/utils/get-new-item.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,CAwB7F"}

package/lib/utils/get-new-item.js

@@ -1,17 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-function default_1(key, persistedItem, newValue) {
+exports.default = getNewItem;
+const is_1 = require("@plq/is");
+/**
+ * Merges `newValue` under `key` into the serialized entry a factory shares between all of its
+ * hooks, and returns the entry to store.
+ *
+ * Reports and throws when the entry cannot be merged into, rather than answering with one built
+ * from nothing. What this returns is written over the whole entry, so an unreadable entry is the
+ * one case with nothing safe to return: every other hook's key would be replaced with nothing,
+ * and the bytes a repair still needs would go with them.
+ *
+ * @throws {SyntaxError} when the entry is not valid JSON.
+ * @throws {TypeError} when the entry is valid JSON but not an object of keys.
+ */
+function getNewItem(key, persistedItem, newValue) {
     let persist;
     try {
         persist = persistedItem ? JSON.parse(persistedItem) : {};
     }
     catch (err) {
-        console.error(err);
-        persist = {};
+        console.error("use-persisted-state: Can't write value to storage", err);
+        throw err;
     }
-    return JSON.stringify(Object.assign(persist, {
-        [key]: newValue,
-    }));
+    if (!(0, is_1.isObject)(persist)) {
+        // A shared backend can leave any JSON under the key, and neither a primitive nor an array
+        // survives being merged into: `JSON.stringify` unwraps the first back to itself and keeps the
+        // second an array, so the value being set disappears with the property added to it. A stored
+        // `null` did not even get that far - it threw out of `Object.assign` and into the caller.
+        const err = new TypeError('the stored entry is not an object of keys');
+        console.error("use-persisted-state: Can't write value to storage", err);
+        throw err;
+    }
+    return JSON.stringify({ ...persist, [key]: newValue });
 }
 //# sourceMappingURL=get-new-item.js.map

package/lib/utils/get-new-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-new-item.js","sourceRoot":"","sources":["../../src/utils/get-new-item.ts"],"names":[],"mappings":";;AAAA,4BAeC;AAfD,mBAA4B,GAAW,EAAE,aAAqB,EAAE,QAAW;IACzE,IAAI,OAAiC,CAAA;IAErC,IAAI,CAAC;QACH,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1D,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAClB,OAAO,GAAG,EAAE,CAAA;IACd,CAAC;IAED,OAAO,IAAI,CAAC,SAAS,CACnB,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;QACrB,CAAC,GAAG,CAAC,EAAE,QAAQ;KAChB,CAAC,CACH,CAAA;AACH,CAAC"}
+{"version":3,"file":"get-new-item.js","sourceRoot":"","sources":["../../src/utils/get-new-item.ts"],"names":[],"mappings":";;AAcA,6BAwBC;AAtCD,gCAAkC;AAElC;;;;;;;;;;;GAWG;AACH,SAAwB,UAAU,CAAI,GAAW,EAAE,aAAqB,EAAE,QAAW;IACnF,IAAI,OAAgB,CAAA;IAEpB,IAAI,CAAC;QACH,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1D,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,mDAAmD,EAAE,GAAG,CAAC,CAAA;QAEvE,MAAM,GAAG,CAAA;IACX,CAAC;IAED,IAAI,CAAC,IAAA,aAAQ,EAAC,OAAO,CAAC,EAAE,CAAC;QACvB,0FAA0F;QAC1F,8FAA8F;QAC9F,6FAA6F;QAC7F,0FAA0F;QAC1F,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,2CAA2C,CAAC,CAAA;QAEtE,OAAO,CAAC,KAAK,CAAC,mDAAmD,EAAE,GAAG,CAAC,CAAA;QAEvE,MAAM,GAAG,CAAA;IACX,CAAC;IAED,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAA;AACxD,CAAC"}

package/lib/utils/use-storage-handler.d.ts

@@ -1,4 +1,15 @@
 import type React from 'react';
 import type { AsyncStorage, Storage } from '../@types/storage';
-export default function useStorageHandler<T>(key: string, storageKey: string, applyValue: (value: T) => void, storage: AsyncStorage | Storage, initialValue: T | (() => T), pendingOwnWrite: React.RefObject<string | null>): void;
+/**
+ * Remembers an entry the hook is about to write, so the change the backend
+ * reports for it can be told apart from someone else's write.
+ *
+ * Recorded before the write, because a backend may report it before the call
+ * settles. One slot was not enough: a backend free to report after its write
+ * settles - chrome and browser storage both are - lets the next write overwrite
+ * the record of a write still waiting to be reported, and that unsuppressed echo
+ * then puts the earlier value back over the later one.
+ */
+export declare function recordOwnWrite(pendingOwnWrites: React.RefObject<string[]>, item: string): void;
+export default function useStorageHandler<T>(key: string, storageKey: string, applyValue: (value: T) => void, storage: AsyncStorage | Storage, initialValue: T | (() => T), pendingOwnWrites: React.RefObject<string[]>): void;
 //# sourceMappingURL=use-storage-handler.d.ts.map

package/lib/utils/use-storage-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-storage-handler.d.ts","sourceRoot":"","sources":["../../src/utils/use-storage-handler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAiB,MAAM,mBAAmB,CAAA;AAiH7E,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EACzC,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAC9B,OAAO,EAAE,YAAY,GAAG,OAAO,EAC/B,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,GAC9C,IAAI,CAsBN"}
+{"version":3,"file":"use-storage-handler.d.ts","sourceRoot":"","sources":["../../src/utils/use-storage-handler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAiB,MAAM,mBAAmB,CAAA;AAkE7E;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAM9F;AA+DD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EACzC,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAC9B,OAAO,EAAE,YAAY,GAAG,OAAO,EAC/B,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAC3B,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,GAC1C,IAAI,CAsBN"}

package/lib/utils/use-storage-handler.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordOwnWrite = recordOwnWrite;
 exports.default = useStorageHandler;
 const react_1 = require("react");
 const is_1 = require("@plq/is");
@@ -37,13 +38,34 @@ function applyRemoval(change, itemKey, applyValue, latestInitialValue) {
         return;
     applyValue(initialValue);
 }
+// A backend that reports nothing back leaves every record unmatched, so the list
+// needs a ceiling or it grows by one string per write for as long as the hook is
+// mounted. A bound, not a tuning: a backend that does report drains the list on
+// every echo, and one that reports late is what the list exists for.
+const MAX_PENDING_OWN_WRITES = 8;
 /**
- * Reports whether this change is the write the hook itself just made, forgetting
- * the record when it is. A backend reports a write to every listener, the one
- * that made it included, and applying that echo is the storage-to-state re-sync
- * this hook was rebuilt without, arriving by another road: it decodes the entry
- * again and hands the caller an equal value with a new identity, plus a render
- * for a value it already holds.
+ * Remembers an entry the hook is about to write, so the change the backend
+ * reports for it can be told apart from someone else's write.
+ *
+ * Recorded before the write, because a backend may report it before the call
+ * settles. One slot was not enough: a backend free to report after its write
+ * settles - chrome and browser storage both are - lets the next write overwrite
+ * the record of a write still waiting to be reported, and that unsuppressed echo
+ * then puts the earlier value back over the later one.
+ */
+function recordOwnWrite(pendingOwnWrites, item) {
+    const pending = pendingOwnWrites.current;
+    if (pending.length >= MAX_PENDING_OWN_WRITES)
+        pending.shift();
+    pending.push(item);
+}
+/**
+ * Reports whether this change is a write the hook itself made, forgetting the
+ * record when it is. A backend reports a write to every listener, the one that
+ * made it included, and applying that echo is the storage-to-state re-sync this
+ * hook was rebuilt without, arriving by another road: it decodes the entry again
+ * and hands the caller an equal value with a new identity, plus a render for a
+ * value it already holds.
  *
  * The price, accepted knowingly: for a value JSON cannot carry, the writer keeps
  * what it set - NaN - while every other component on the key decodes the null
@@ -56,31 +78,38 @@ function applyRemoval(change, itemKey, applyValue, latestInitialValue) {
  * hook writing the same bytes is suppressed along with it, and nothing is lost:
  * it would have replaced a value with an equal one.
  */
-function consumeOwnWriteEcho(change, pendingOwnWrite) {
-    if (pendingOwnWrite.current === null || change.newValue !== pendingOwnWrite.current)
+function consumeOwnWriteEcho(entry, pendingOwnWrites) {
+    const matched = pendingOwnWrites.current.indexOf(entry);
+    if (matched === -1)
         return false;
-    pendingOwnWrite.current = null;
+    // Everything recorded before the reported entry goes with it: a backend applies
+    // writes in the order it took them and reports them in that order too, so a
+    // record still unmatched by now has no echo left to wait for.
+    pendingOwnWrites.current.splice(0, matched + 1);
     return true;
 }
 // Builds the change handler. Not a hook, despite living next to one.
-function createStorageHandler(itemKey, storageKey, applyValue, latestInitialValue, pendingOwnWrite) {
+function createStorageHandler(itemKey, storageKey, applyValue, latestInitialValue, pendingOwnWrites) {
     return (changes) => {
         for (const [key, change] of Object.entries(changes)) {
             if (key !== storageKey)
                 continue;
-            if (consumeOwnWriteEcho(change, pendingOwnWrite))
-                continue;
+            // Ahead of the echo check, which needs an entry to match and a removal has
+            // none. A removal is never one of this hook's own writes anyway: only the
+            // entries it stores are recorded.
             if (change.newValue === null || change.newValue === undefined) {
                 applyRemoval(change, itemKey, applyValue, latestInitialValue);
                 continue;
             }
+            if (consumeOwnWriteEcho(change.newValue, pendingOwnWrites))
+                continue;
             const newValue = readStoredValue(itemKey, change.newValue);
             if (newValue.status === 'stored')
                 applyValue(newValue.value);
         }
     };
 }
-function useStorageHandler(key, storageKey, applyValue, storage, initialValue, pendingOwnWrite) {
+function useStorageHandler(key, storageKey, applyValue, storage, initialValue, pendingOwnWrites) {
     // A removal restores the initial value the hook holds now, the same one the
     // key-change path reads, so a caller whose default travels with its data gets
     // that record's default back rather than the mounted one. Tracked through a ref
@@ -90,13 +119,13 @@ function useStorageHandler(key, storageKey, applyValue, storage, initialValue, p
     const latestInitialValue = (0, react_1.useRef)(initialValue);
     latestInitialValue.current = initialValue;
     (0, react_1.useEffect)(() => {
-        const handleStorage = createStorageHandler(key, storageKey, applyValue, latestInitialValue, pendingOwnWrite);
+        const handleStorage = createStorageHandler(key, storageKey, applyValue, latestInitialValue, pendingOwnWrites);
         storage.onChanged.addListener(handleStorage);
         return () => {
             if (storage.onChanged.hasListener(handleStorage)) {
                 storage.onChanged.removeListener(handleStorage);
             }
         };
-    }, [key, storage.onChanged, storageKey, applyValue, pendingOwnWrite]);
+    }, [key, storage.onChanged, storageKey, applyValue, pendingOwnWrites]);
 }
 //# sourceMappingURL=use-storage-handler.js.map

package/lib/utils/use-storage-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-storage-handler.js","sourceRoot":"","sources":["../../src/utils/use-storage-handler.ts"],"names":[],"mappings":";;AAmHA,oCA6BC;AA/ID,iCAAyC;AAEzC,gCAA8C;AAe9C,SAAS,eAAe,CAAI,GAAW,EAAE,KAAa;IACpD,IAAI,MAAe,CAAA;IAEnB,IAAI,CAAC;QACH,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,qDAAqD,EAAE,GAAG,CAAC,CAAA;QAEzE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,CAAA;IAClC,CAAC;IAED,8EAA8E;IAC9E,2EAA2E;IAC3E,mCAAmC;IACnC,IAAI,CAAC,IAAA,aAAQ,EAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC;QAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,CAAA;IAE3E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAM,EAAE,CAAA;AACtD,CAAC;AAED,+EAA+E;AAC/E,SAAS,YAAY,CACnB,MAAqB,EACrB,OAAe,EACf,UAA8B,EAC9B,kBAAkD;IAElD,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;QAAE,OAAM;IAErE,MAAM,QAAQ,GAAG,eAAe,CAAI,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC7D,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,CAAA;IACvD,2EAA2E;IAC3E,+EAA+E;IAC/E,WAAW;IACX,MAAM,YAAY,GAAG,IAAA,eAAU,EAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAA;IAErG,+EAA+E;IAC/E,8EAA8E;IAC9E,2EAA2E;IAC3E,WAAW;IACX,IAAI,QAAQ,CAAC,MAAM,KAAK,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,YAAY;QAAE,OAAM;IAE3E,UAAU,CAAC,YAAY,CAAC,CAAA;AAC1B,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,mBAAmB,CAAC,MAAqB,EAAE,eAA+C;IACjG,IAAI,eAAe,CAAC,OAAO,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,KAAK,eAAe,CAAC,OAAO;QAAE,OAAO,KAAK,CAAA;IAEjG,eAAe,CAAC,OAAO,GAAG,IAAI,CAAA;IAE9B,OAAO,IAAI,CAAA;AACb,CAAC;AAED,qEAAqE;AACrE,SAAS,oBAAoB,CAC3B,OAAe,EACf,UAAkB,EAClB,UAA8B,EAC9B,kBAAkD,EAClD,eAA+C;IAE/C,OAAO,CAAC,OAAyC,EAAQ,EAAE;QACzD,KAAK,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YACpD,IAAI,GAAG,KAAK,UAAU;gBAAE,SAAQ;YAEhC,IAAI,mBAAmB,CAAC,MAAM,EAAE,eAAe,CAAC;gBAAE,SAAQ;YAE1D,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC9D,YAAY,CAAI,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAA;gBAChE,SAAQ;YACV,CAAC;YAED,MAAM,QAAQ,GAAG,eAAe,CAAI,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAA;YAE7D,IAAI,QAAQ,CAAC,MAAM,KAAK,QAAQ;gBAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9D,CAAC;IACH,CAAC,CAAA;AACH,CAAC;AAED,SAAwB,iBAAiB,CACvC,GAAW,EACX,UAAkB,EAClB,UAA8B,EAC9B,OAA+B,EAC/B,YAA2B,EAC3B,eAA+C;IAE/C,4EAA4E;IAC5E,8EAA8E;IAC9E,gFAAgF;IAChF,yEAAyE;IACzE,gFAAgF;IAChF,kEAAkE;IAClE,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAC,YAAY,CAAC,CAAA;IAE/C,kBAAkB,CAAC,OAAO,GAAG,YAAY,CAAA;IAEzC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,oBAAoB,CAAI,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,CAAC,CAAA;QAE/G,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAA;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE,CAAC;gBACjD,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,aAAa,CAAC,CAAA;YACjD,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC,CAAA;AACvE,CAAC"}
+{"version":3,"file":"use-storage-handler.js","sourceRoot":"","sources":["../../src/utils/use-storage-handler.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plq/use-persisted-state",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "useState hook with persistence in storage",
   "type": "commonjs",
   "main": "lib/index.js",

package/src/create-async-persisted-state.ts

@@ -1,7 +1,7 @@
 import type React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import useStorageHandler from './utils/use-storage-handler'
+import useStorageHandler, { recordOwnWrite } from './utils/use-storage-handler'
 import getNewValue from './utils/get-new-value'
 import getNewItem from './utils/get-new-item'
 import getPersistedValue from './utils/get-persisted-value'
@@ -15,8 +15,55 @@ export default function createAsyncPersistedState<S extends AsyncStorage>(
 ): [PersistedState, () => Promise<void>] {
   const safeStorageKey = `persisted_state_hook:${storageKey}`
 
+  // Every hook this factory makes lives in one entry, and storing a value means
+  // reading that entry, merging one key into it and writing all of it back, with
+  // a suspension point on either side of the merge. Left to overlap, a second
+  // writer merges into a snapshot taken before the first one landed and stores
+  // it: the first writer's key is gone from storage while its value is still on
+  // screen, and nothing reports the disagreement. It is the entry, not the hook,
+  // that has to be taken one at a time, so the chain belongs to the factory.
+  let entryWrites: Promise<unknown> = Promise.resolve()
+
   const clear = (): Promise<void> => {
-    return storage.remove(safeStorageKey)
+    // Removing the entry changes it as much as storing does, so it takes its turn
+    // in the same chain. Outside it, a write already queued lands after the
+    // removal and brings back what was cleared - and "clear this data" is the one
+    // request that cannot be allowed to half happen.
+    const removal = entryWrites.then(() => storage.remove(safeStorageKey))
+
+    entryWrites = removal.catch(() => undefined)
+
+    return removal
+  }
+
+  const commitEntry = <T>(key: string, newValue: T, pendingOwnWrites: React.RefObject<string[]>): Promise<void> => {
+    const write = entryWrites.then(async () => {
+      const persistedItem = await storage.get(safeStorageKey)
+      let newItem: string
+
+      try {
+        newItem = getNewItem<T>(key, persistedItem[safeStorageKey], newValue)
+      } catch {
+        // Refused, and reported where it was refused. A write replaces the whole
+        // entry, so an entry that cannot be read is one no write can be built on
+        // without dropping every other hook's key; skipping leaves the bytes for
+        // a repair to reach. The caller keeps what it set, unpersisted.
+        return
+      }
+
+      // Recorded before the write, because the backend may report it before the
+      // promise settles.
+      recordOwnWrite(pendingOwnWrites, newItem)
+
+      await storage.set({ [safeStorageKey]: newItem })
+    })
+
+    // The chain has to outlive a failed write, or one backend rejection stops
+    // every later write on this entry. The rejection itself is not swallowed: it
+    // stays on the promise handed back to the caller that asked for the write.
+    entryWrites = write.catch(() => undefined)
+
+    return write
   }
 
   const usePersistedState = <T>(key: string, initialValue: T | (() => T)): UsePersistedState<T> => {
@@ -39,23 +86,18 @@ export default function createAsyncPersistedState<S extends AsyncStorage>(
       setState(value)
     }, [])
 
-    // The exact entry this hook last wrote and has not yet seen reported back.
-    const pendingOwnWrite = useRef<string | null>(null)
+    // The entries this hook has written and not yet seen reported back.
+    const pendingOwnWrites = useRef<string[]>([])
 
     const setPersistedState = useCallback(
       async (newState: React.SetStateAction<T>): Promise<void> => {
         const newValue = getNewValue<T>(newState, latestValue.current)
 
+        // Applied before the write is even queued: the caller sees its value at
+        // once, and only the trip to storage waits its turn.
         applyValue(newValue)
 
-        const persistedItem = await storage.get(safeStorageKey)
-        const newItem = getNewItem<T>(key, persistedItem[safeStorageKey], newValue)
-
-        // Recorded before the write, because the backend may report it before the
-        // promise settles.
-        pendingOwnWrite.current = newItem
-
-        await storage.set({ [safeStorageKey]: newItem })
+        await commitEntry<T>(key, newValue, pendingOwnWrites)
       },
       [key, applyValue],
     )
@@ -70,7 +112,7 @@ export default function createAsyncPersistedState<S extends AsyncStorage>(
     // between the read and the subscription in which a write belongs to neither
     // and is lost. Reading last covers everything written before the subscription
     // began, and the listener covers everything after.
-    useStorageHandler<T>(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrite)
+    useStorageHandler<T>(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrites)
 
     useEffect(() => {
       // Two separate questions, and one cell cannot hold both: whether this load

package/src/create-persisted-state.ts

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from 'react'
 import type { Storage } from './@types/storage'
 import type { PersistedState, UsePersistedState } from './@types/hook'
 
-import useStorageHandler from './utils/use-storage-handler'
+import useStorageHandler, { recordOwnWrite } from './utils/use-storage-handler'
 import getNewValue from './utils/get-new-value'
 import getNewItem from './utils/get-new-item'
 import getPersistedValue from './utils/get-persisted-value'
@@ -48,8 +48,8 @@ export default function createPersistedState(storageKey: string, storage: Storag
       applyValue(readPersisted(key, initialValue))
     }
 
-    // The exact entry this hook last wrote and has not yet seen reported back.
-    const pendingOwnWrite = useRef<string | null>(null)
+    // The entries this hook has written and not yet seen reported back.
+    const pendingOwnWrites = useRef<string[]>([])
 
     const setPersistedState = useCallback(
       (newState: React.SetStateAction<T>): void => {
@@ -58,16 +58,26 @@ export default function createPersistedState(storageKey: string, storage: Storag
         applyValue(newValue)
 
         const persistedItem = storage.get(safeStorageKey)[safeStorageKey]
-        const newItem = getNewItem<T>(key, persistedItem, newValue)
+        let newItem: string
 
-        pendingOwnWrite.current = newItem
+        try {
+          newItem = getNewItem<T>(key, persistedItem, newValue)
+        } catch {
+          // Refused, and reported where it was refused. A write replaces the whole
+          // entry, so an entry that cannot be read is one no write can be built on
+          // without dropping every other hook's key; skipping leaves the bytes for
+          // a repair to reach. The caller keeps what it set, unpersisted.
+          return
+        }
+
+        recordOwnWrite(pendingOwnWrites, newItem)
 
         storage.set({ [safeStorageKey]: newItem })
       },
       [key, applyValue],
     )
 
-    useStorageHandler<T>(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrite)
+    useStorageHandler<T>(key, safeStorageKey, applyValue, storage, initialValue, pendingOwnWrites)
 
     return [state, setPersistedState]
   }

package/src/utils/get-new-item.ts

@@ -1,16 +1,39 @@
-export default function <T>(key: string, persistedItem: string, newValue: T): string {
-  let persist: { [x: string]: unknown }
+import { isObject } from '@plq/is'
+
+/**
+ * Merges `newValue` under `key` into the serialized entry a factory shares between all of its
+ * hooks, and returns the entry to store.
+ *
+ * Reports and throws when the entry cannot be merged into, rather than answering with one built
+ * from nothing. What this returns is written over the whole entry, so an unreadable entry is the
+ * one case with nothing safe to return: every other hook's key would be replaced with nothing,
+ * and the bytes a repair still needs would go with them.
+ *
+ * @throws {SyntaxError} when the entry is not valid JSON.
+ * @throws {TypeError} when the entry is valid JSON but not an object of keys.
+ */
+export default function getNewItem<T>(key: string, persistedItem: string, newValue: T): string {
+  let persist: unknown
 
   try {
     persist = persistedItem ? JSON.parse(persistedItem) : {}
   } catch (err) {
-    console.error(err)
-    persist = {}
+    console.error("use-persisted-state: Can't write value to storage", err)
+
+    throw err
+  }
+
+  if (!isObject(persist)) {
+    // A shared backend can leave any JSON under the key, and neither a primitive nor an array
+    // survives being merged into: `JSON.stringify` unwraps the first back to itself and keeps the
+    // second an array, so the value being set disappears with the property added to it. A stored
+    // `null` did not even get that far - it threw out of `Object.assign` and into the caller.
+    const err = new TypeError('the stored entry is not an object of keys')
+
+    console.error("use-persisted-state: Can't write value to storage", err)
+
+    throw err
   }
 
-  return JSON.stringify(
-    Object.assign(persist, {
-      [key]: newValue,
-    }),
-  )
+  return JSON.stringify({ ...persist, [key]: newValue })
 }

package/src/utils/use-storage-handler.ts

@@ -60,13 +60,37 @@ function applyRemoval<T>(
   applyValue(initialValue)
 }
 
+// A backend that reports nothing back leaves every record unmatched, so the list
+// needs a ceiling or it grows by one string per write for as long as the hook is
+// mounted. A bound, not a tuning: a backend that does report drains the list on
+// every echo, and one that reports late is what the list exists for.
+const MAX_PENDING_OWN_WRITES = 8
+
 /**
- * Reports whether this change is the write the hook itself just made, forgetting
- * the record when it is. A backend reports a write to every listener, the one
- * that made it included, and applying that echo is the storage-to-state re-sync
- * this hook was rebuilt without, arriving by another road: it decodes the entry
- * again and hands the caller an equal value with a new identity, plus a render
- * for a value it already holds.
+ * Remembers an entry the hook is about to write, so the change the backend
+ * reports for it can be told apart from someone else's write.
+ *
+ * Recorded before the write, because a backend may report it before the call
+ * settles. One slot was not enough: a backend free to report after its write
+ * settles - chrome and browser storage both are - lets the next write overwrite
+ * the record of a write still waiting to be reported, and that unsuppressed echo
+ * then puts the earlier value back over the later one.
+ */
+export function recordOwnWrite(pendingOwnWrites: React.RefObject<string[]>, item: string): void {
+  const pending = pendingOwnWrites.current
+
+  if (pending.length >= MAX_PENDING_OWN_WRITES) pending.shift()
+
+  pending.push(item)
+}
+
+/**
+ * Reports whether this change is a write the hook itself made, forgetting the
+ * record when it is. A backend reports a write to every listener, the one that
+ * made it included, and applying that echo is the storage-to-state re-sync this
+ * hook was rebuilt without, arriving by another road: it decodes the entry again
+ * and hands the caller an equal value with a new identity, plus a render for a
+ * value it already holds.
  *
  * The price, accepted knowingly: for a value JSON cannot carry, the writer keeps
  * what it set - NaN - while every other component on the key decodes the null
@@ -79,10 +103,15 @@ function applyRemoval<T>(
  * hook writing the same bytes is suppressed along with it, and nothing is lost:
  * it would have replaced a value with an equal one.
  */
-function consumeOwnWriteEcho(change: StorageChange, pendingOwnWrite: React.RefObject<string | null>): boolean {
-  if (pendingOwnWrite.current === null || change.newValue !== pendingOwnWrite.current) return false
+function consumeOwnWriteEcho(entry: string, pendingOwnWrites: React.RefObject<string[]>): boolean {
+  const matched = pendingOwnWrites.current.indexOf(entry)
+
+  if (matched === -1) return false
 
-  pendingOwnWrite.current = null
+  // Everything recorded before the reported entry goes with it: a backend applies
+  // writes in the order it took them and reports them in that order too, so a
+  // record still unmatched by now has no echo left to wait for.
+  pendingOwnWrites.current.splice(0, matched + 1)
 
   return true
 }
@@ -93,19 +122,22 @@ function createStorageHandler<T>(
   storageKey: string,
   applyValue: (value: T) => void,
   latestInitialValue: React.RefObject<T | (() => T)>,
-  pendingOwnWrite: React.RefObject<string | null>,
+  pendingOwnWrites: React.RefObject<string[]>,
 ) {
   return (changes: { [key: string]: StorageChange }): void => {
     for (const [key, change] of Object.entries(changes)) {
       if (key !== storageKey) continue
 
-      if (consumeOwnWriteEcho(change, pendingOwnWrite)) continue
-
+      // Ahead of the echo check, which needs an entry to match and a removal has
+      // none. A removal is never one of this hook's own writes anyway: only the
+      // entries it stores are recorded.
       if (change.newValue === null || change.newValue === undefined) {
         applyRemoval<T>(change, itemKey, applyValue, latestInitialValue)
         continue
       }
 
+      if (consumeOwnWriteEcho(change.newValue, pendingOwnWrites)) continue
+
       const newValue = readStoredValue<T>(itemKey, change.newValue)
 
       if (newValue.status === 'stored') applyValue(newValue.value)
@@ -119,7 +151,7 @@ export default function useStorageHandler<T>(
   applyValue: (value: T) => void,
   storage: AsyncStorage | Storage,
   initialValue: T | (() => T),
-  pendingOwnWrite: React.RefObject<string | null>,
+  pendingOwnWrites: React.RefObject<string[]>,
 ): void {
   // A removal restores the initial value the hook holds now, the same one the
   // key-change path reads, so a caller whose default travels with its data gets
@@ -132,7 +164,7 @@ export default function useStorageHandler<T>(
   latestInitialValue.current = initialValue
 
   useEffect(() => {
-    const handleStorage = createStorageHandler<T>(key, storageKey, applyValue, latestInitialValue, pendingOwnWrite)
+    const handleStorage = createStorageHandler<T>(key, storageKey, applyValue, latestInitialValue, pendingOwnWrites)
 
     storage.onChanged.addListener(handleStorage)
 
@@ -141,5 +173,5 @@ export default function useStorageHandler<T>(
         storage.onChanged.removeListener(handleStorage)
       }
     }
-  }, [key, storage.onChanged, storageKey, applyValue, pendingOwnWrite])
+  }, [key, storage.onChanged, storageKey, applyValue, pendingOwnWrites])
 }