@asteby/metacore-runtime-react 23.12.0 → 23.12.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @asteby/metacore-runtime-react
 
+## 23.12.2
+
+### Patch Changes
+
+- 5333315: fix(dynamic-table): don't rewrite a clean filtered deep-link (no URL flicker)
+
+  Normalise the `eq:` operator when fingerprinting the query string and stop
+  stamping `per_page` for the plain server default, so opening/clicking a
+  sidebar deep-link (`f_status=eq:in_progress&view=list`) is a true no-op: the
+  table adopts the filter without rewriting the URL to its own spelling
+  (`f_status=in_progress&per_page=15`). This removes the visible URL flicker and
+  keeps the sidebar active-state exact-href match working.
+
+## 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,+BAwmCnB"}

package/dist/dynamic-table.js

@@ -78,6 +78,13 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const [filterOptionsMap, setFilterOptionsMap] = useState(new Map());
     const initializedFromUrl = useRef(false);
     const urlHadPerPage = useRef(false);
+    // The model's server-declared default page size. When the current page size
+    // is just this default (the user hasn't paged/resized and the URL didn't
+    // pin one), we deliberately DON'T stamp `per_page` into the URL — otherwise
+    // the table appends `per_page=15` to the sidebar's clean deep-link on mount,
+    // which reads as a URL flicker and fights the router's spelling. Starts at 10
+    // to match the initial pagination state until metadata arrives.
+    const defaultPerPage = useRef(10);
     useEffect(() => {
         if (prevBranchId.current !== currentBranch?.id) {
             prevBranchId.current = currentBranch?.id;
@@ -114,6 +121,29 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         const alias = operatorToUrlAlias[prefix];
         return alias ? `${alias}:${rest}` : value;
     };
+    // Order-, encoding- and operator-independent fingerprint of a query string.
+    // The host router (TanStack) and the sidebar deep-link the filter in THEIR
+    // canonical form — different key order, percent-encoded operator colons, and
+    // the explicit `eq:` operator (`f_status=eq%3Ain_progress`) — while the table
+    // internally unwraps `eq:` for selects and would write the bare value
+    // (`f_status=in_progress`). Comparing raw (or even just decoded) strings then
+    // NEVER matches, so the table rewrites the URL on every navigation and the
+    // two spellings visibly ping-pong ("parpadeo", "Throttling navigation…" +
+    // React #185). Normalising each `f_` value through `urlValueToInternal`
+    // collapses `eq:X` and `X` to the same token, so a sorted `key=value` list is
+    // a true semantic fingerprint and the write effect can detect real no-ops —
+    // leaving the router's own spelling untouched (so the sidebar active-state
+    // match on the exact href keeps working too).
+    const canonicalSearch = (searchStr) => {
+        const p = new URLSearchParams(searchStr);
+        const entries = [];
+        p.forEach((value, key) => {
+            const norm = key.startsWith('f_') ? urlValueToInternal(value) : value;
+            entries.push(`${key}=${norm}`);
+        });
+        entries.sort();
+        return entries.join('&');
+    };
     useEffect(() => {
         if (!enableUrlSync || initializedFromUrl.current)
             return;
@@ -176,7 +206,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         }
         if (pagination.pageIndex > 0)
             params.set('page', String(pagination.pageIndex + 1));
-        if (pagination.pageSize !== 10)
+        // Only pin per_page when it deviates from the model's default (an explicit
+        // user page-size change) or the URL already carried one — not for the
+        // plain server default, which would needlessly mutate a clean deep-link.
+        if (pagination.pageSize !== defaultPerPage.current || urlHadPerPage.current)
             params.set('per_page', String(pagination.pageSize));
         if (sorting.length > 0) {
             params.set('sortBy', sorting[0].id);
@@ -195,6 +228,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 +252,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);
@@ -269,6 +314,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             // localStorage.
             if (cached) {
                 setMetadata(cached);
+                defaultPerPage.current = cached.defaultPerPage || 10;
                 if (!urlHadPerPage.current)
                     setPagination((prev) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }));
                 setLoading(false);
@@ -284,6 +330,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                     meta = fresh;
                     setMetadata(fresh);
                     cacheMetadata(model, fresh);
+                    defaultPerPage.current = fresh.defaultPerPage || 10;
                     if (!urlHadPerPage.current)
                         setPagination((prev) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }));
                 }

package/package.json

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

package/src/dynamic-table.tsx

@@ -190,6 +190,13 @@ export function DynamicTable({
 
     const initializedFromUrl = useRef(false)
     const urlHadPerPage = useRef(false)
+    // The model's server-declared default page size. When the current page size
+    // is just this default (the user hasn't paged/resized and the URL didn't
+    // pin one), we deliberately DON'T stamp `per_page` into the URL — otherwise
+    // the table appends `per_page=15` to the sidebar's clean deep-link on mount,
+    // which reads as a URL flicker and fights the router's spelling. Starts at 10
+    // to match the initial pagination state until metadata arrives.
+    const defaultPerPage = useRef(10)
 
     useEffect(() => {
         if (prevBranchId.current !== currentBranch?.id) {
@@ -229,6 +236,30 @@ export function DynamicTable({
         return alias ? `${alias}:${rest}` : value
     }
 
+    // Order-, encoding- and operator-independent fingerprint of a query string.
+    // The host router (TanStack) and the sidebar deep-link the filter in THEIR
+    // canonical form — different key order, percent-encoded operator colons, and
+    // the explicit `eq:` operator (`f_status=eq%3Ain_progress`) — while the table
+    // internally unwraps `eq:` for selects and would write the bare value
+    // (`f_status=in_progress`). Comparing raw (or even just decoded) strings then
+    // NEVER matches, so the table rewrites the URL on every navigation and the
+    // two spellings visibly ping-pong ("parpadeo", "Throttling navigation…" +
+    // React #185). Normalising each `f_` value through `urlValueToInternal`
+    // collapses `eq:X` and `X` to the same token, so a sorted `key=value` list is
+    // a true semantic fingerprint and the write effect can detect real no-ops —
+    // leaving the router's own spelling untouched (so the sidebar active-state
+    // match on the exact href keeps working too).
+    const canonicalSearch = (searchStr: string): string => {
+        const p = new URLSearchParams(searchStr)
+        const entries: string[] = []
+        p.forEach((value, key) => {
+            const norm = key.startsWith('f_') ? urlValueToInternal(value) : value
+            entries.push(`${key}=${norm}`)
+        })
+        entries.sort()
+        return entries.join('&')
+    }
+
     useEffect(() => {
         if (!enableUrlSync || initializedFromUrl.current) return
         initializedFromUrl.current = true
@@ -282,7 +313,11 @@ export function DynamicTable({
             if (v) params.set(key, v)
         }
         if (pagination.pageIndex > 0) params.set('page', String(pagination.pageIndex + 1))
-        if (pagination.pageSize !== 10) params.set('per_page', String(pagination.pageSize))
+        // Only pin per_page when it deviates from the model's default (an explicit
+        // user page-size change) or the URL already carried one — not for the
+        // plain server default, which would needlessly mutate a clean deep-link.
+        if (pagination.pageSize !== defaultPerPage.current || urlHadPerPage.current)
+            params.set('per_page', String(pagination.pageSize))
         if (sorting.length > 0) {
             params.set('sortBy', sorting[0].id)
             params.set('order', sorting[0].desc ? 'desc' : 'asc')
@@ -295,6 +330,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 +354,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[]> = {}
@@ -361,6 +408,7 @@ export function DynamicTable({
             // localStorage.
             if (cached) {
                 setMetadata(cached)
+                defaultPerPage.current = cached.defaultPerPage || 10
                 if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }))
                 setLoading(false)
             } else {
@@ -374,6 +422,7 @@ export function DynamicTable({
                     meta = fresh
                     setMetadata(fresh)
                     cacheMetadata(model, fresh)
+                    defaultPerPage.current = fresh.defaultPerPage || 10
                     if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }))
                 }
             } catch (error) {