@asteby/metacore-runtime-react 25.1.0 → 25.1.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @asteby/metacore-runtime-react
 
+## 25.1.2
+
+### Patch Changes
+
+- 7c19de1: fix(table): stop infinite reload loop when applying a column filter
+
+  The URL-resync effect read the location's search string from a render-time
+  snapshot, which lagged one commit behind the sibling write effect's imperative
+  `history.replaceState` (that write does not re-render). Applying any column
+  filter (e.g. the "Almacén" facet on /m/stock) made the resync misread its own
+  write as an external change, reset the filters, and ping-pong `{k:[v]} <-> {}`
+  every render — spinning the infinite-scroll fetch forever. The resync now reads
+  `window.location.search` fresh inside the effect, so a self-write is recognized
+  and skipped; only genuine external rewrites (sidebar deep-links, back/forward)
+  are adopted. Also lifts the pagination reset out of the `setDynamicFilters`
+  updater.
+
+## 25.1.1
+
+### Patch Changes
+
+- dea9d02: fix(table): las listas en infinite-scroll recargan al bumpear refreshTrigger
+
+  El efecto de recarga de la tabla en modo infinite-scroll omitía `refreshTrigger` de sus deps (aunque el comentario decía que lo respetaba), así que tras crear/editar/eliminar en la página la lista infinita no se recargaba ("a veces no recarga la tabla"). Se añade `refreshTrigger` a las deps para igualar el path clásico.
+
 ## 25.1.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;AAiEnF,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,+BAupCnB"}
+{"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;AAiEnF,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,+BA6qCnB"}

package/dist/dynamic-table.js

@@ -314,16 +314,30 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // the table kept showing the previous filter. On every render where the
     // location's search differs from the last URL we ourselves wrote,
     // re-parse the `f_` params and adopt them.
-    const locationSearch = typeof window !== 'undefined' ? window.location.search : '';
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current)
             return;
+        // Read the URL FRESH inside the effect — NOT a value captured during
+        // render. The write effect above mutates the URL imperatively via
+        // `history.replaceState`, which does NOT trigger a re-render, so a search
+        // string snapshotted at render time lags one commit behind what we just
+        // wrote. Comparing that stale snapshot against `lastSelfSearch` (which the
+        // write effect updated in this same commit) always mismatched, so the
+        // resync "adopted" a phantom external change and reset the filters — the
+        // write effect then re-wrote them, and the two effects ping-ponged the
+        // filters `{almacen:['Test']} <-> {}` on every render, spinning the
+        // infinite-scroll fetch forever the instant any column filter was applied.
+        // Reading fresh here means that right after our own write, `now` already
+        // equals `lastSelfSearch` and we bail out early. Only a genuine external
+        // rewrite (router deep-link from a sidebar sibling, browser back/forward)
+        // makes `now` diverge, which is exactly when we want to adopt it.
+        const now = typeof window !== 'undefined' ? window.location.search : '';
         // 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 ?? ''))
+        if (canonicalSearch(now) === canonicalSearch(lastSelfSearch.current ?? ''))
             return;
-        lastSelfSearch.current = locationSearch;
-        const params = new URLSearchParams(locationSearch);
+        lastSelfSearch.current = now;
+        const params = new URLSearchParams(now);
         const filters = {};
         params.forEach((rawValue, key) => {
             if (!key.startsWith('f_'))
@@ -337,14 +351,16 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             else
                 filters[filterKey] = [value];
         });
-        setDynamicFilters((prev) => {
-            if (JSON.stringify(prev) === JSON.stringify(filters))
-                return prev;
+        // Compare against the current filters directly (the effect re-runs every
+        // render, so this closure is always fresh) and only touch state on a real
+        // change — resetting pagination OUTSIDE any updater, never nested inside
+        // another setState's updater.
+        if (JSON.stringify(dynamicFilters) !== JSON.stringify(filters)) {
+            setDynamicFilters(filters);
             setPagination((p) => ({ ...p, pageIndex: 0 }));
-            return filters;
-        });
+        }
         const search = params.get('search');
-        if (search !== null)
+        if (search !== null && search !== globalFilter)
             setGlobalFilter(search);
     });
     const prefetchOptions = useCallback(async (endpoints) => {
@@ -669,8 +685,13 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             void fetchAggregates();
         }, 300);
         return () => clearTimeout(timeoutId);
+        // refreshTrigger is included so an external bump (e.g. a create/edit/
+        // delete elsewhere on the page) reloads page 1 in infinite mode too —
+        // matching the classic path (fetchData carries refreshTrigger in its
+        // deps). Without it the comment above lied: infinite lists silently
+        // failed to reload after a create ("a veces no recarga la tabla").
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [infiniteScroll, metadata, filterSignature]);
+    }, [infiniteScroll, metadata, filterSignature, refreshTrigger]);
     const handleRefresh = useCallback(() => {
         // Infinite mode owns its own list: refresh reloads page 1 and drops the
         // accumulated pages (a classic fetchData would collapse it to one small

package/package.json

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

package/src/dynamic-table.tsx

@@ -432,14 +432,28 @@ export function DynamicTable({
     // the table kept showing the previous filter. On every render where the
     // location's search differs from the last URL we ourselves wrote,
     // re-parse the `f_` params and adopt them.
-    const locationSearch = typeof window !== 'undefined' ? window.location.search : ''
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current) return
+        // Read the URL FRESH inside the effect — NOT a value captured during
+        // render. The write effect above mutates the URL imperatively via
+        // `history.replaceState`, which does NOT trigger a re-render, so a search
+        // string snapshotted at render time lags one commit behind what we just
+        // wrote. Comparing that stale snapshot against `lastSelfSearch` (which the
+        // write effect updated in this same commit) always mismatched, so the
+        // resync "adopted" a phantom external change and reset the filters — the
+        // write effect then re-wrote them, and the two effects ping-ponged the
+        // filters `{almacen:['Test']} <-> {}` on every render, spinning the
+        // infinite-scroll fetch forever the instant any column filter was applied.
+        // Reading fresh here means that right after our own write, `now` already
+        // equals `lastSelfSearch` and we bail out early. Only a genuine external
+        // rewrite (router deep-link from a sidebar sibling, browser back/forward)
+        // makes `now` diverge, which is exactly when we want to adopt it.
+        const now = typeof window !== 'undefined' ? window.location.search : ''
         // 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)
+        if (canonicalSearch(now) === canonicalSearch(lastSelfSearch.current ?? '')) return
+        lastSelfSearch.current = now
+        const params = new URLSearchParams(now)
         const filters: Record<string, string[]> = {}
         params.forEach((rawValue, key) => {
             if (!key.startsWith('f_')) return
@@ -449,13 +463,16 @@ export function DynamicTable({
             if (value.startsWith('IN:')) filters[filterKey] = value.substring(3).split(',')
             else filters[filterKey] = [value]
         })
-        setDynamicFilters((prev: Record<string, string[]>) => {
-            if (JSON.stringify(prev) === JSON.stringify(filters)) return prev
+        // Compare against the current filters directly (the effect re-runs every
+        // render, so this closure is always fresh) and only touch state on a real
+        // change — resetting pagination OUTSIDE any updater, never nested inside
+        // another setState's updater.
+        if (JSON.stringify(dynamicFilters) !== JSON.stringify(filters)) {
+            setDynamicFilters(filters)
             setPagination((p: PaginationState) => ({ ...p, pageIndex: 0 }))
-            return filters
-        })
+        }
         const search = params.get('search')
-        if (search !== null) setGlobalFilter(search)
+        if (search !== null && search !== globalFilter) setGlobalFilter(search)
     })
 
     const prefetchOptions = useCallback(async (endpoints: string[]) => {
@@ -777,8 +794,13 @@ export function DynamicTable({
             void fetchAggregates()
         }, 300)
         return () => clearTimeout(timeoutId)
+        // refreshTrigger is included so an external bump (e.g. a create/edit/
+        // delete elsewhere on the page) reloads page 1 in infinite mode too —
+        // matching the classic path (fetchData carries refreshTrigger in its
+        // deps). Without it the comment above lied: infinite lists silently
+        // failed to reload after a create ("a veces no recarga la tabla").
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [infiniteScroll, metadata, filterSignature])
+    }, [infiniteScroll, metadata, filterSignature, refreshTrigger])
 
     const handleRefresh = useCallback(() => {
         // Infinite mode owns its own list: refresh reloads page 1 and drops the