@asteby/metacore-runtime-react 23.12.0 → 23.12.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @asteby/metacore-runtime-react
 
+## 23.12.1
+
+### Patch Changes
+
+- 8788161: fix(dynamic-table): stop infinite URL replaceState loop on filtered deep-links
+
+  The host router re-serializes the query string in its own canonical form
+  (different key order, percent-encoded operator colons) than the table writes,
+  so the raw-string comparison never matched and the table's write effect fought
+  the router's re-serialize forever ("Throttling navigation…" + React #185),
+  hanging any filtered sidebar view (e.g. `f_status=eq:reception`). Both URL-sync
+  effects now compare an order/encoding-independent fingerprint and the write is
+  skipped when semantically a no-op.
+
 ## 23.12.0
 
 ### Minor Changes

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAujCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAmlCnB"}

package/dist/dynamic-table.js

@@ -114,6 +114,21 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         const alias = operatorToUrlAlias[prefix];
         return alias ? `${alias}:${rest}` : value;
     };
+    // Order- and encoding-independent fingerprint of a query string. The host
+    // router (TanStack) re-serializes the same params in its own canonical form
+    // — different key order and percent-encoded operator colons
+    // (`f_status=eq%3Areception`) — than the table writes (`f_status=eq:reception`).
+    // Comparing raw strings then NEVER matches, so the table's write effect and
+    // the router's re-serialize fight forever ("Throttling navigation…" +
+    // React #185). URLSearchParams decodes values, so a sorted `key=value` list
+    // is stable across both spellings and lets us detect real no-ops.
+    const canonicalSearch = (searchStr) => {
+        const p = new URLSearchParams(searchStr);
+        const entries = [];
+        p.forEach((value, key) => entries.push(`${key}=${value}`));
+        entries.sort();
+        return entries.join('&');
+    };
     useEffect(() => {
         if (!enableUrlSync || initializedFromUrl.current)
             return;
@@ -195,6 +210,16 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 params.set(`f_${key}`, `in:${values.join(',')}`);
         });
         const search = params.toString();
+        // If what we'd write is semantically identical to what's already in the
+        // bar (only key order / colon-encoding differ from the router's form),
+        // skip the write entirely. Rewriting would flip the raw string, the
+        // router would re-serialize back to its form, and the two would ping-pong
+        // forever. We still adopt the current location as "ours" so the resync
+        // effect below doesn't treat the router's spelling as an external change.
+        if (canonicalSearch(search) === canonicalSearch(window.location.search)) {
+            lastSelfSearch.current = window.location.search;
+            return;
+        }
         const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname;
         lastSelfSearch.current = search ? `?${search}` : '';
         window.history.replaceState(null, '', newUrl);
@@ -209,7 +234,9 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current)
             return;
-        if (locationSearch === lastSelfSearch.current)
+        // Semantic compare: the router's spelling of the query string we just
+        // wrote (different order/encoding) is NOT an external change.
+        if (canonicalSearch(locationSearch) === canonicalSearch(lastSelfSearch.current ?? ''))
             return;
         lastSelfSearch.current = locationSearch;
         const params = new URLSearchParams(locationSearch);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.12.0",
+  "version": "23.12.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-table.tsx

@@ -229,6 +229,22 @@ export function DynamicTable({
         return alias ? `${alias}:${rest}` : value
     }
 
+    // Order- and encoding-independent fingerprint of a query string. The host
+    // router (TanStack) re-serializes the same params in its own canonical form
+    // — different key order and percent-encoded operator colons
+    // (`f_status=eq%3Areception`) — than the table writes (`f_status=eq:reception`).
+    // Comparing raw strings then NEVER matches, so the table's write effect and
+    // the router's re-serialize fight forever ("Throttling navigation…" +
+    // React #185). URLSearchParams decodes values, so a sorted `key=value` list
+    // is stable across both spellings and lets us detect real no-ops.
+    const canonicalSearch = (searchStr: string): string => {
+        const p = new URLSearchParams(searchStr)
+        const entries: string[] = []
+        p.forEach((value, key) => entries.push(`${key}=${value}`))
+        entries.sort()
+        return entries.join('&')
+    }
+
     useEffect(() => {
         if (!enableUrlSync || initializedFromUrl.current) return
         initializedFromUrl.current = true
@@ -295,6 +311,16 @@ export function DynamicTable({
             else params.set(`f_${key}`, `in:${values.join(',')}`)
         })
         const search = params.toString()
+        // If what we'd write is semantically identical to what's already in the
+        // bar (only key order / colon-encoding differ from the router's form),
+        // skip the write entirely. Rewriting would flip the raw string, the
+        // router would re-serialize back to its form, and the two would ping-pong
+        // forever. We still adopt the current location as "ours" so the resync
+        // effect below doesn't treat the router's spelling as an external change.
+        if (canonicalSearch(search) === canonicalSearch(window.location.search)) {
+            lastSelfSearch.current = window.location.search
+            return
+        }
         const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname
         lastSelfSearch.current = search ? `?${search}` : ''
         window.history.replaceState(null, '', newUrl)
@@ -309,7 +335,9 @@ export function DynamicTable({
     const locationSearch = typeof window !== 'undefined' ? window.location.search : ''
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current) return
-        if (locationSearch === lastSelfSearch.current) return
+        // Semantic compare: the router's spelling of the query string we just
+        // wrote (different order/encoding) is NOT an external change.
+        if (canonicalSearch(locationSearch) === canonicalSearch(lastSelfSearch.current ?? '')) return
         lastSelfSearch.current = locationSearch
         const params = new URLSearchParams(locationSearch)
         const filters: Record<string, string[]> = {}