fix: sync shared-name storage vars in the writing tab (#7567)

Author: anishgurjar

packages/reflex-base/news/+sync-same-tab-shared-name.bugfix.md

@@ -0,0 +1 @@
+Synced `LocalStorage` vars that share one storage `name` now update in the tab that writes, not only in other tabs.

packages/reflex-base/src/reflex_base/.templates/web/utils/state.js

@@ -1172,7 +1172,18 @@ export const connect = async (
         for (const substate in delta) {
           dispatch[substate](delta[substate]);
         }
-        applyClientStorageDelta(client_storage, delta);
+        const pending_syncs = applyClientStorageDelta(client_storage, delta);
+        if (pending_syncs.length > 0) {
+          queueEvents(
+            pending_syncs.map(({ key, state_keys }) =>
+              ReflexEvent(SYNC_LOCAL_STORAGE, { key, state_keys }),
+            ),
+            socket,
+            false,
+            navigate,
+            params,
+          ).catch(reportStateUpdateError);
+        }
       }
       if (update.events && update.events.length > 0) {
         queueEvents(update.events, socket, false, navigate, params).catch(
@@ -1363,8 +1374,13 @@ const takeEcho = (state_key, value) => {
  * Update client storage values based on backend state delta.
  * @param client_storage The client storage object from context.js
  * @param delta The state update from the backend
+ * @returns Storage syncs to send for this tab's sibling vars sharing a
+ *   written storage name, as [{key, state_keys}]. The storage event reaches
+ *   other tabs only, so same-tab siblings are synced from the write here.
  */
 const applyClientStorageDelta = (client_storage, delta) => {
+  // Syncs to send, keyed by storage name so one name syncs once per delta.
+  const pending_syncs = new Map();
   // find the main state and check for is_hydrated
   const unqualified_states = Object.keys(delta).filter(
     (key) => key.split(".").length === 1,
@@ -1377,7 +1393,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
     ) {
       // skip if the state is not hydrated yet, since all client storage
       // values are sent in the hydrate event
-      return;
+      return [];
     }
   }
   // Save known client storage values to cookies and localStorage.
@@ -1395,7 +1411,8 @@ const applyClientStorageDelta = (client_storage, delta) => {
         state_key in client_storage.local_storage &&
         typeof window !== "undefined"
       ) {
-        const name = client_storage.local_storage[state_key].name || state_key;
+        const options = client_storage.local_storage[state_key];
+        const name = options.name || state_key;
         const echo = takeEcho(state_key, value);
         const last = lastLocalStorageWrites[name];
         // Write an echo only over this tab's own later write, which the backend
@@ -1406,11 +1423,31 @@ const applyClientStorageDelta = (client_storage, delta) => {
           (last?.writes > echo.writes &&
             localStorage.getItem(name) === last.value)
         ) {
+          const previous = localStorage.getItem(name);
           localStorage.setItem(name, value);
           lastLocalStorageWrites[name] = {
             value,
             writes: ++localStorageWrites,
           };
+          // The storage event fires in other tabs only, so queue the sync for
+          // this tab's other synced vars sharing the name here, whether or
+          // not the written var itself syncs (storage writes raise the event
+          // cross-tab either way). Skip an unchanged value: its vars are
+          // already in sync, and re-sending would ping-pong when an echo
+          // misses. Deltas are per-session, and a sent update echoes back and
+          // takeEcho keeps it from writing again.
+          if (previous !== String(value) && !pending_syncs.has(name)) {
+            const state_keys = Object.keys(client_storage.local_storage).filter(
+              (other_key) =>
+                other_key !== state_key &&
+                client_storage.local_storage[other_key].sync &&
+                (client_storage.local_storage[other_key].name || other_key) ===
+                  name,
+            );
+            if (state_keys.length > 0) {
+              pending_syncs.set(name, state_keys);
+            }
+          }
         }
       } else if (
         client_storage.session_storage &&
@@ -1422,6 +1459,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
       }
     }
   }
+  return [...pending_syncs].map(([key, state_keys]) => ({ key, state_keys }));
 };
 
 /**

tests/units/compiler/state_js.test.mjs

@@ -32,6 +32,7 @@ async function setup({
   const timers = new Map();
   const firstHydrates = [];
   const updates = [];
+  const emits = [];
   const consoleErrors = [];
   let connectErrors = [];
   const errorUpdates = [];
@@ -47,6 +48,9 @@ async function setup({
     getItem(key) {
       return this.items.get(key) ?? null;
     },
+    setItem(key, value) {
+      this.items.set(key, String(value));
+    },
   };
   const document = new EventTarget();
   document.cookie = disabled ? "backend-enabled=false" : "";
@@ -107,6 +111,9 @@ async function setup({
       on(name, handler) {
         handlers.set(name, handler);
       },
+      emit(name, payload) {
+        emits.push(payload);
+      },
       connect() {
         // A ready transport can deliver these synchronously on namespace connect.
         for (const name of [
@@ -226,6 +233,7 @@ async function setup({
     localStorage,
     socket,
     updates,
+    emits,
     consoleErrors,
     get connectErrors() {
       // Like React with pending work, apply queued updaters only on render.
@@ -238,13 +246,13 @@ async function setup({
     module,
     dispose,
     flush: () => microtasks.splice(0).forEach((fn) => fn()),
-    connect: (transports = ["websocket"]) =>
+    connect: (transports = ["websocket"], storage = {}) =>
       module.namespace.connect(
         socket,
         { child: (delta) => updates.push(delta.count) },
         transports,
         (update) => errorUpdates.push(update),
-        {},
+        storage,
         () => {},
         { current: {} },
       ),
@@ -724,3 +732,162 @@ test("storage names that are Object.prototype properties sync like any other", a
     JSON.stringify({ third: null }),
   );
 });
+
+test("a synced storage write syncs the writing tab's sibling vars", async () => {
+  const clientStorage = {
+    local_storage: {
+      "child.first": { name: "shared", sync: true },
+      "child.second": { name: "shared", sync: true },
+      "child.third": { name: "shared", sync: true },
+      "child.unsynced": { name: "shared" },
+    },
+  };
+  const app = await setup({ clientStorage });
+  app.connect(["websocket"], clientStorage);
+  app.flush();
+  const sock = app.sockets[0];
+  const syncs = () =>
+    app.emits.filter((e) => e?.name?.endsWith?.("update_vars_internal"));
+
+  // The backend applies a write to one synced var.
+  sock.handlers.get("event")({ delta: { child: { first: "from-cs0" } } });
+  app.flush();
+  await new Promise((resolve) => setImmediate(resolve));
+
+  // The storage event only fires in other tabs, so the writing tab syncs its
+  // own sibling vars sharing the name.
+  assert.equal(app.localStorage.items.get("shared"), "from-cs0");
+  assert.equal(syncs().length, 1, JSON.stringify(app.emits));
+  assert.equal(
+    JSON.stringify(syncs()[0].payload.vars),
+    JSON.stringify({ "child.second": "from-cs0", "child.third": "from-cs0" }),
+  );
+
+  // The echoed sibling updates neither write again nor queue another sync.
+  sock.handlers.get("event")({
+    delta: { child: { second: "from-cs0", third: "from-cs0" } },
+  });
+  app.flush();
+  await new Promise((resolve) => setImmediate(resolve));
+  assert.equal(syncs().length, 1, JSON.stringify(app.emits));
+});
+
+test("an unsynced write still syncs its synced siblings in the writing tab", async () => {
+  const clientStorage = {
+    local_storage: {
+      "child.first": { name: "shared", sync: true },
+      "child.second": { name: "shared" },
+    },
+  };
+  const app = await setup({ clientStorage });
+  app.connect(["websocket"], clientStorage);
+  app.flush();
+  const sock = app.sockets[0];
+  const syncs = () =>
+    app.emits.filter((e) => e?.name?.endsWith?.("update_vars_internal"));
+
+  // Storage writes raise the cross-tab event whether or not the written var
+  // syncs, so the writing tab syncs its synced siblings either way.
+  sock.handlers.get("event")({ delta: { child: { second: "plain" } } });
+  app.flush();
+  await new Promise((resolve) => setImmediate(resolve));
+
+  assert.equal(app.localStorage.items.get("shared"), "plain");
+  assert.equal(syncs().length, 1, JSON.stringify(app.emits));
+  assert.equal(
+    JSON.stringify(syncs()[0].payload.vars),
+    JSON.stringify({ "child.first": "plain" }),
+  );
+});
+
+test("two same-name vars in one delta queue one sync per storage name", async () => {
+  const clientStorage = {
+    local_storage: {
+      "child.first": { name: "shared", sync: true },
+      "child.second": { name: "shared", sync: true },
+      "child.third": { name: "other", sync: true },
+      "child.fourth": { name: "other", sync: true },
+    },
+  };
+  const app = await setup({ clientStorage });
+  app.connect(["websocket"], clientStorage);
+  app.flush();
+  const sock = app.sockets[0];
+  const syncs = () =>
+    app.emits.filter((e) => e?.name?.endsWith?.("update_vars_internal"));
+
+  sock.handlers.get("event")({
+    delta: { child: { first: "one", second: "two", third: "three" } },
+  });
+  app.flush();
+  await new Promise((resolve) => setImmediate(resolve));
+
+  // One sync per storage name, reading the name's latest value when sent.
+  assert.equal(syncs().length, 2, JSON.stringify(app.emits));
+  const byVars = syncs().map((e) => JSON.stringify(e.payload.vars));
+  assert.ok(byVars.includes(JSON.stringify({ "child.second": "two" })));
+  assert.ok(byVars.includes(JSON.stringify({ "child.fourth": "three" })));
+});
+
+test("an unhydrated delta writes and syncs no client storage", async () => {
+  const clientStorage = {
+    local_storage: {
+      "child.first": { name: "shared", sync: true },
+      "child.second": { name: "shared", sync: true },
+    },
+  };
+  const app = await setup({ clientStorage });
+  app.connect(["websocket"], clientStorage);
+  app.flush();
+  const sock = app.sockets[0];
+
+  sock.handlers.get("event")({
+    delta: { child: { is_hydrated_rx_state_: false, first: "early" } },
+  });
+  app.flush();
+  await new Promise((resolve) => setImmediate(resolve));
+
+  assert.equal(app.localStorage.items.get("shared"), undefined);
+  assert.equal(
+    app.emits.filter((e) => e?.name?.endsWith?.("update_vars_internal")).length,
+    0,
+    JSON.stringify(app.emits),
+  );
+});
+
+test("a newer backend value re-syncs once, then the echo terminates it", async () => {
+  const clientStorage = {
+    local_storage: {
+      "child.first": { name: "shared", sync: true },
+      "child.second": { name: "shared", sync: true },
+    },
+  };
+  const app = await setup({ clientStorage });
+  app.connect(["websocket"], clientStorage);
+  app.flush();
+  const sock = app.sockets[0];
+  const syncs = () =>
+    app.emits.filter((e) => e?.name?.endsWith?.("update_vars_internal"));
+  const deliver = async (delta) => {
+    sock.handlers.get("event")({ delta });
+    app.flush();
+    await new Promise((resolve) => setImmediate(resolve));
+  };
+
+  await deliver({ child: { first: "v1" } });
+  assert.equal(syncs().length, 1, JSON.stringify(app.emits));
+
+  // A backend value that matches no sent value overrides storage and syncs
+  // the siblings once more.
+  await deliver({ child: { second: "v2" } });
+  assert.equal(app.localStorage.items.get("shared"), "v2");
+  assert.equal(syncs().length, 2, JSON.stringify(app.emits));
+  assert.equal(
+    JSON.stringify(syncs()[1].payload.vars),
+    JSON.stringify({ "child.first": "v2" }),
+  );
+
+  // That update's echo is recognized: no write, no third sync. No ping-pong.
+  await deliver({ child: { first: "v2" } });
+  assert.equal(syncs().length, 2, JSON.stringify(app.emits));
+});