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

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,43 @@ 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 synced vars sharing the name here, whether or not the
+          // written var itself syncs (storage writes raise the event
+          // cross-tab either way). Like handleStorage, the sync covers every
+          // synced var with the name: when one delta writes several of them,
+          // the last write wins in storage, and the sync reads that value.
+          // 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) =>
+                client_storage.local_storage[other_key].sync &&
+                (client_storage.local_storage[other_key].name || other_key) ===
+                  name,
+            );
+            // Sync only when another var shares the name. Skip when a synced
+            // var with the name has an unechoed sent value: this delta replies
+            // to an older event than that value. The echo of the newer value
+            // carries every applied key for the name, so storage and the
+            // sibling vars converge without a sync from this stale delta.
+            if (
+              state_keys.some((other_key) => other_key !== state_key) &&
+              !state_keys.some(
+                (other_key) => sentStorageValues[other_key]?.length > 0,
+              )
+            ) {
+              pending_syncs.set(name, state_keys);
+            }
+          }
         }
       } else if (
         client_storage.session_storage &&
@@ -1422,6 +1471,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
       }
     }
   }
+  return [...pending_syncs].map(([key, state_keys]) => ({ key, state_keys }));
 };
 
 /**

tests/integration/tests_playwright/test_hydration_storage.py

@@ -149,6 +149,7 @@ def get_delta(self):
 
     class SharedNameState(rx.State):
         synced: str = rx.LocalStorage("", name="hydrate-shared", sync=True)
+        synced2: str = rx.LocalStorage("", name="hydrate-shared", sync=True)
         plain: str = rx.LocalStorage("", name="hydrate-shared")
 
         @rx.event
@@ -160,6 +161,15 @@ def set_plain(self, value: str):
             """
             self.plain = value
 
+        @rx.event
+        def set_synced(self, value: str):
+            """Store a value through the synced var.
+
+            Args:
+                value: The value to store.
+            """
+            self.synced = value
+
     def synced():
         """Display a browser storage var synced across tabs.
 
@@ -174,11 +184,17 @@ def synced():
             rx.text(ReplaceState.plain, id="replace-plain"),
             rx.button("Keep", on_click=ReplaceState.keep_sent, id="keep-sent"),
             rx.text(SharedNameState.synced, id="shared-value"),
+            rx.text(SharedNameState.synced2, id="shared-value-2"),
             rx.button(
                 "Plain old",
                 on_click=SharedNameState.set_plain("old"),
                 id="set-plain-old",
             ),
+            rx.button(
+                "Synced new",
+                on_click=SharedNameState.set_synced("new"),
+                id="set-synced-new",
+            ),
             rx.text(rx.cond(rx.State.is_hydrated, "true", "false"), id="hydrated"),
         )
 
@@ -589,6 +605,28 @@ def test_synced_storage_echo_after_own_write_is_written(
     assert page.evaluate("key => localStorage.getItem(key)", key) == "sent"
 
 
+def test_synced_storage_shared_name_syncs_siblings_in_writing_tab(
+    hydration_storage_app: AppHarness, page: Page
+):
+    """A write to one synced var sharing a storage name updates the others in the writing tab.
+
+    The storage event only fires in other tabs, so the writing tab syncs its
+    sibling vars sharing the name itself (issue #7567).
+
+    Args:
+        hydration_storage_app: The running app.
+        page: A fresh browser page.
+    """
+    open_synced(hydration_storage_app, page)
+    page.locator("#set-synced-new").click()
+    expect(page.locator("#shared-value")).to_have_text("new")
+    expect(page.locator("#shared-value-2")).to_have_text("new")
+    page.wait_for_timeout(500)
+    expect(page.locator("#shared-value")).to_have_text("new")
+    expect(page.locator("#shared-value-2")).to_have_text("new")
+    assert page.evaluate("localStorage.getItem('hydrate-shared')") == "new"
+
+
 @pytest.mark.parametrize("other_tab_stores", [False, True], ids=["alone", "other_tab"])
 @pytest.mark.parametrize("synced", [True, False], ids=["synced", "plain"])
 def test_replaced_storage_echo_does_not_hide_later_change(