@asteby/metacore-runtime-react 18.17.2 → 18.17.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 18.17.3
+
+### Patch Changes
+
+- d2c92e1: Fix React #310: move flatten/order useMemo before the empty-state early return (conditional hook crashed on empty→populated)
+
 ## 18.17.2
 
 ### Patch Changes

package/dist/dashboard-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAW1B,uEAAuE;AACvE,wBAAgB,eAAe,CAC3B,MAAM,CAAC,EAAE,oBAAoB,EAAE,EAC/B,OAAO,CAAC,EAAE,mBAAmB,EAAE,GAChC,oBAAoB,EAAE,CAgBxB;AASD,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,GACV,EAAE,kBAAkB,qBAkJpB"}
+{"version":3,"file":"dashboard-grid.d.ts","sourceRoot":"","sources":["../src/dashboard-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EACR,kBAAkB,EAElB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,mBAAmB,CAAA;AAW1B,uEAAuE;AACvE,wBAAgB,eAAe,CAC3B,MAAM,CAAC,EAAE,oBAAoB,EAAE,EAC/B,OAAO,CAAC,EAAE,mBAAmB,EAAE,GAChC,oBAAoB,EAAE,CAgBxB;AASD,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,GACV,EAAE,kBAAkB,qBAiJpB"}

package/dist/dashboard-grid.js

@@ -106,15 +106,10 @@ export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, curr
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [keySig, loadData]);
-    // Global empty state (no widgets at all / none visible after gating).
-    if (visibleGroups.length === 0) {
-        return (_jsxs("div", { "data-testid": "dashboard-empty", className: cn('flex min-h-[40vh] flex-col items-center justify-center rounded-xl border border-dashed border-border/60 p-10 text-center', className), children: [_jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground", children: _jsx(DynamicIcon, { name: "LayoutDashboard", className: "size-7" }) }), _jsx("h3", { className: "text-base font-semibold text-foreground", children: tr(undefined, s.emptyTitle) || s.emptyTitle }), _jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: s.emptyDescription })] }));
-    }
-    // ONE unified dense grid across every group. Per-group sections used to
-    // break the layout into rows, so a lone-widget group (e.g. a single KPI)
-    // left the rest of its row blank. Flattening + `grid-flow-row-dense`
-    // backfills those holes; ordering compact KPIs before charts makes the top
-    // read as a metric band and the charts mosaic below it. No blank space.
+    // Flatten every group into ONE ordered list (compact KPIs before charts) for
+    // the masonry grid. MUST run before any early return — it is a hook, and a
+    // conditional hook (placed after the empty-state return) trips React #310
+    // when the dashboard transitions empty → populated.
     const ordered = React.useMemo(() => {
         const flat = visibleGroups.flatMap((g) => g.widgets);
         return flat
@@ -123,6 +118,10 @@ export function DashboardGrid({ groups, widgets, loadData, isAdmin, locale, curr
             a.i - b.i)
             .map((x) => x.w);
     }, [visibleGroups]);
+    // Global empty state (no widgets at all / none visible after gating).
+    if (visibleGroups.length === 0) {
+        return (_jsxs("div", { "data-testid": "dashboard-empty", className: cn('flex min-h-[40vh] flex-col items-center justify-center rounded-xl border border-dashed border-border/60 p-10 text-center', className), children: [_jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground", children: _jsx(DynamicIcon, { name: "LayoutDashboard", className: "size-7" }) }), _jsx("h3", { className: "text-base font-semibold text-foreground", children: tr(undefined, s.emptyTitle) || s.emptyTitle }), _jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: s.emptyDescription })] }));
+    }
     return (_jsx("div", { "data-testid": "dashboard-grid", className: cn(
         // Masonry: balanced CSS columns. Cards take their natural height
         // (compact stats, taller charts) and flow to equalize column

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.17.2",
+  "version": "18.17.3",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -64,8 +64,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.5.2",
-    "@asteby/metacore-sdk": "3.2.0"
+    "@asteby/metacore-sdk": "3.2.0",
+    "@asteby/metacore-ui": "2.5.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dashboard-grid.test.tsx

@@ -155,6 +155,24 @@ describe('DashboardGrid render', () => {
         render(<DashboardGrid widgets={[]} loadData={loaderOf({})} />)
         expect(screen.getByTestId('dashboard-empty')).toBeTruthy()
     })
+
+    it('survives an empty → populated transition (React #310 regression)', async () => {
+        // The flatten/order useMemo must run BEFORE the empty-state early return.
+        // When it sat after the return, an empty render called one fewer hook
+        // than the populated render → "Rendered more hooks" (React #310) crash.
+        const { rerender } = render(
+            <DashboardGrid widgets={[]} loadData={loaderOf({})} />,
+        )
+        expect(screen.getByTestId('dashboard-empty')).toBeTruthy()
+        rerender(
+            <DashboardGrid
+                widgets={[spec({ key: 'rev', kind: 'stat' })]}
+                loadData={loaderOf({ rev: { value: 5 } })}
+            />,
+        )
+        await waitFor(() => expect(screen.getByTestId('widget-rev')).toBeTruthy())
+        expect(screen.getByText('5')).toBeTruthy()
+    })
 })
 
 describe('DashboardGrid permission gating', () => {

package/src/dashboard-grid.tsx

@@ -132,6 +132,22 @@ export function DashboardGrid({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [keySig, loadData])
 
+    // Flatten every group into ONE ordered list (compact KPIs before charts) for
+    // the masonry grid. MUST run before any early return — it is a hook, and a
+    // conditional hook (placed after the empty-state return) trips React #310
+    // when the dashboard transitions empty → populated.
+    const ordered = React.useMemo(() => {
+        const flat = visibleGroups.flatMap((g) => g.widgets)
+        return flat
+            .map((w, i) => ({ w, i }))
+            .sort(
+                (a, b) =>
+                    (isTallWidget(a.w) ? 1 : 0) - (isTallWidget(b.w) ? 1 : 0) ||
+                    a.i - b.i,
+            )
+            .map((x) => x.w)
+    }, [visibleGroups])
+
     // Global empty state (no widgets at all / none visible after gating).
     if (visibleGroups.length === 0) {
         return (
@@ -155,23 +171,6 @@ export function DashboardGrid({
         )
     }
 
-    // ONE unified dense grid across every group. Per-group sections used to
-    // break the layout into rows, so a lone-widget group (e.g. a single KPI)
-    // left the rest of its row blank. Flattening + `grid-flow-row-dense`
-    // backfills those holes; ordering compact KPIs before charts makes the top
-    // read as a metric band and the charts mosaic below it. No blank space.
-    const ordered = React.useMemo(() => {
-        const flat = visibleGroups.flatMap((g) => g.widgets)
-        return flat
-            .map((w, i) => ({ w, i }))
-            .sort(
-                (a, b) =>
-                    (isTallWidget(a.w) ? 1 : 0) - (isTallWidget(b.w) ? 1 : 0) ||
-                    a.i - b.i,
-            )
-            .map((x) => x.w)
-    }, [visibleGroups])
-
     return (
         <div
             data-testid="dashboard-grid"