@canmi/seam-react 0.4.11 → 0.4.18

package/README.md

@@ -4,14 +4,19 @@ React bindings for SeamJS, providing hooks and components to consume server-inje
 
 ## Key Exports
 
-| Export                | Purpose                                                       |
-| --------------------- | ------------------------------------------------------------- |
-| `defineRoutes`        | Define client-side route configuration                        |
-| `useSeamData`         | Access server-injected data from `SeamDataProvider` context   |
-| `SeamDataProvider`    | Context provider for server data                              |
-| `parseSeamData`       | Parse JSON from `<script id="__data">`                        |
-| `buildSentinelData`   | Build sentinel data for skeleton rendering                    |
-| `useSeamSubscription` | Hook for SSE subscriptions, returns `{ data, error, status }` |
+| Export                | Purpose                                                                |
+| --------------------- | ---------------------------------------------------------------------- |
+| `defineRoutes`        | Define client-side route configuration                                 |
+| `useSeamData`         | Access server-injected data from `SeamDataProvider` context            |
+| `SeamDataProvider`    | Context provider for server data                                       |
+| `parseSeamData`       | Parse JSON from `<script id="__data">`                                 |
+| `buildSentinelData`   | Build sentinel data for skeleton rendering                             |
+| `useSeamSubscription` | Hook for SSE subscriptions, returns `{ data, error, status }`          |
+| `LazyComponentLoader` | Type for dynamic `() => import(...)` page loaders (per-page splitting) |
+
+## Types
+
+`RouteDef.component` accepts either a `ComponentType` or a `LazyComponentLoader` (a function returning `Promise<{ default: ComponentType }>`). The lazy variant is produced by `@canmi/seam-vite` when per-page splitting is active.
 
 ## Structure
 

package/dist/index.d.ts

@@ -4,16 +4,21 @@ import { SeamClientError } from "@canmi/seam-client";
 
 //#region src/types.d.ts
 interface ParamMapping {
-  from: "route";
+  from: string;
   type?: "string" | "int";
 }
 interface LoaderDef {
   procedure: string;
   params?: Record<string, ParamMapping>;
 }
+/** Lazy component loader returned by dynamic import (per-page splitting) */
+type LazyComponentLoader = () => Promise<{
+  default: ComponentType<Record<string, unknown>>;
+  [key: string]: unknown;
+}>;
 interface RouteDef {
   path: string;
-  component?: ComponentType<Record<string, unknown>>;
+  component?: ComponentType<Record<string, unknown>> | LazyComponentLoader;
   layout?: ComponentType<{
     children: ReactNode;
   }>;
@@ -22,6 +27,8 @@ interface RouteDef {
   mock?: Record<string, unknown>;
   nullable?: string[];
   staleTime?: number;
+  /** Internal: override layout ID for group layouts to avoid toLayoutId collision */
+  _layoutId?: string;
 }
 //#endregion
 //#region src/define-routes.d.ts
@@ -56,5 +63,5 @@ declare function useSeamSubscription<T>(baseUrl: string, procedure: string, inpu
 declare const SeamNavigateProvider: react.Provider<(url: string) => void>;
 declare function useSeamNavigate(): (url: string) => void;
 //#endregion
-export { type LoaderDef, type ParamMapping, type RouteDef, SeamDataProvider, SeamNavigateProvider, type SubscriptionStatus, type UseSeamSubscriptionResult, buildSentinelData, defineRoutes, parseSeamData, useSeamData, useSeamNavigate, useSeamSubscription };
+export { type LazyComponentLoader, type LoaderDef, type ParamMapping, type RouteDef, SeamDataProvider, SeamNavigateProvider, type SubscriptionStatus, type UseSeamSubscriptionResult, buildSentinelData, defineRoutes, parseSeamData, useSeamData, useSeamNavigate, useSeamSubscription };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/define-routes.ts","../src/use-seam-data.ts","../src/sentinel.ts","../src/use-seam-subscription.ts","../src/use-seam-navigate.ts"],"mappings":";;;;;UAIiB,YAAA;EACf,IAAA;EACA,IAAA;AAAA;AAAA,UAGe,SAAA;EACf,SAAA;EACA,MAAA,GAAS,MAAA,SAAe,YAAA;AAAA;AAAA,UAGT,QAAA;EACf,IAAA;EACA,SAAA,GAAY,aAAA,CAAc,MAAA;EAC1B,MAAA,GAAS,aAAA;IAAgB,QAAA,EAAU,SAAA;EAAA;EACnC,QAAA,GAAW,QAAA;EACX,OAAA,GAAU,MAAA,SAAe,SAAA;EACzB,IAAA,GAAO,MAAA;EACP,QAAA;EACA,SAAA;AAAA;;;iBClBc,YAAA,CAAa,MAAA,EAAQ,QAAA,KAAa,QAAA;;;cCErC,gBAAA,EAA2C,KAAA,CAA3B,QAAA;AAAA,iBAEb,WAAA,oBAA+B,MAAA,kBAAA,CAAA,GAA4B,CAAA;AAAA,iBAO3D,aAAA,CAAc,MAAA,YAAoB,MAAA;;;;;;;;AFXlD;;;iBGMgB,iBAAA,CACd,GAAA,EAAK,MAAA,mBACL,MAAA,WACA,SAAA,GAAY,GAAA,WACX,MAAA;;;KCTS,kBAAA;AAAA,UAEK,yBAAA;EACf,IAAA,EAAM,CAAA;EACN,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,kBAAA;AAAA;AAAA,iBAGM,mBAAA,GAAA,CACd,OAAA,UACA,SAAA,UACA,KAAA,YACC,yBAAA,CAA0B,CAAA;;;cCThB,oBAAA,EAAmD,KAAA,CAA/B,QAAA,EAAA,GAAA;AAAA,iBAEjB,eAAA,CAAA,IAAoB,GAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/define-routes.ts","../src/use-seam-data.ts","../src/sentinel.ts","../src/use-seam-subscription.ts","../src/use-seam-navigate.ts"],"mappings":";;;;;UAIiB,YAAA;EACf,IAAA;EACA,IAAA;AAAA;AAAA,UAGe,SAAA;EACf,SAAA;EACA,MAAA,GAAS,MAAA,SAAe,YAAA;AAAA;;KAId,mBAAA,SAA4B,OAAA;EACtC,OAAA,EAAS,aAAA,CAAc,MAAA;EAAA,CACtB,GAAA;AAAA;AAAA,UAGc,QAAA;EACf,IAAA;EACA,SAAA,GAAY,aAAA,CAAc,MAAA,qBAA2B,mBAAA;EACrD,MAAA,GAAS,aAAA;IAAgB,QAAA,EAAU,SAAA;EAAA;EACnC,QAAA,GAAW,QAAA;EACX,OAAA,GAAU,MAAA,SAAe,SAAA;EACzB,IAAA,GAAO,MAAA;EACP,QAAA;EACA,SAAA;EAbsC;EAetC,SAAA;AAAA;;;iBC1Bc,YAAA,CAAa,MAAA,EAAQ,QAAA,KAAa,QAAA;;;cCErC,gBAAA,EAA2C,KAAA,CAA3B,QAAA;AAAA,iBAEb,WAAA,oBAA+B,MAAA,kBAAA,CAAA,GAA4B,CAAA;AAAA,iBAO3D,aAAA,CAAc,MAAA,YAAoB,MAAA;;;;;;;;AFXlD;;;iBGMgB,iBAAA,CACd,GAAA,EAAK,MAAA,mBACL,MAAA,WACA,SAAA,GAAY,GAAA,WACX,MAAA;;;KCTS,kBAAA;AAAA,UAEK,yBAAA;EACf,IAAA,EAAM,CAAA;EACN,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,kBAAA;AAAA;AAAA,iBAGM,mBAAA,GAAA,CACd,OAAA,UACA,SAAA,UACA,KAAA,YACC,yBAAA,CAA0B,CAAA;;;cCThB,oBAAA,EAAmD,KAAA,CAA/B,QAAA,EAAA,GAAA;AAAA,iBAEjB,eAAA,CAAA,IAAoB,GAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmi/seam-react",
-  "version": "0.4.11",
+  "version": "0.4.18",
   "license": "MIT",
   "files": [
     "dist",
@@ -18,12 +18,12 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@canmi/seam-client": "0.4.11",
+    "@canmi/seam-client": "0.4.18",
     "esbuild": "^0.27.3"
   },
   "devDependencies": {
-    "@canmi/seam-engine": "0.4.11",
-    "@canmi/seam-i18n": "0.4.11",
+    "@canmi/seam-engine": "0.4.18",
+    "@canmi/seam-i18n": "0.4.18",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^28.1.0",

package/scripts/build-skeletons.mjs

@@ -1,8 +1,8 @@
 /* src/client/react/scripts/build-skeletons.mjs */
 
 import { build } from "esbuild";
-import { readFileSync, mkdirSync, unlinkSync } from "node:fs";
-import { join, dirname, resolve } from "node:path";
+import { readFileSync, mkdirSync, unlinkSync, existsSync } from "node:fs";
+import { join, dirname, resolve, relative } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { SeamBuildError } from "./skeleton/render.mjs";
@@ -37,6 +37,16 @@ function loadI18nConfig(i18nArg) {
   }
 }
 
+/** Resolve a source file path, probing for .tsx/.ts/.jsx/.js extensions */
+function resolveSourcePath(p) {
+  if (existsSync(p)) return p;
+  const base = p.replace(/\.[jt]sx?$/, "");
+  for (const ext of [".tsx", ".ts", ".jsx", ".js"]) {
+    if (existsSync(base + ext)) return base + ext;
+  }
+  return p;
+}
+
 async function main() {
   const routesFile = process.argv[2];
   if (!routesFile) {
@@ -126,12 +136,26 @@ async function main() {
       stats: { hits: 0, misses: 0 },
     };
 
+    // Build sourceFileMap: route path -> component source file (relative to cwd)
+    const sourceFileMap = {};
+    for (const route of flat) {
+      if (route.component?.name) {
+        const specifier = importMap.get(route.component.name);
+        if (specifier) {
+          const abs = resolve(routesDir, specifier);
+          const resolved = resolveSourcePath(abs);
+          sourceFileMap[route.path] = relative(process.cwd(), resolved);
+        }
+      }
+    }
+
     const layouts = await processLayoutsWithCache(layoutMap, ctx);
     const renderedRoutes = await processRoutesWithCache(flat, ctx);
 
     const output = {
       layouts,
       routes: renderedRoutes,
+      sourceFileMap,
       warnings: buildWarnings,
       cacheStats: ctx.stats,
     };

package/scripts/skeleton/layout.mjs

@@ -19,18 +19,21 @@ function toLayoutId(path) {
     : `_layout_${path.replace(/^\/|\/$/g, "").replace(/\//g, "-")}`;
 }
 
-/** Extract layout components and metadata from route tree */
+/** Extract layout components and metadata from route tree.
+ *  When a node has both layout AND component, the loaders/mock belong to the
+ *  page (component), not the layout — emit the layout with empty loaders. */
 function extractLayouts(routes) {
   const seen = new Map();
   (function walk(defs, parentId) {
     for (const def of defs) {
       if (def.layout && def.children) {
-        const id = toLayoutId(def.path);
+        const id = def._layoutId || toLayoutId(def.path);
         if (!seen.has(id)) {
+          const isPageRoute = !!def.component;
           seen.set(id, {
             component: def.layout,
-            loaders: def.loaders || {},
-            mock: def.mock || null,
+            loaders: isPageRoute ? {} : def.loaders || {},
+            mock: isPageRoute ? null : def.mock || null,
             parentId: parentId || null,
           });
         }
@@ -80,7 +83,7 @@ function renderLayout(LayoutComponent, id, entry, manifest, i18nValue, ctx) {
 
   const fieldWarnings = checkFieldAccess(accessed, schema, `layout:${id}`);
   for (const w of fieldWarnings) {
-    const msg = `[seam] warning: ${w}`;
+    const msg = w;
     if (!ctx.seenWarnings.has(msg)) {
       ctx.seenWarnings.add(msg);
       ctx.buildWarnings.push(msg);
@@ -90,15 +93,40 @@ function renderLayout(LayoutComponent, id, entry, manifest, i18nValue, ctx) {
   return html;
 }
 
-/** Flatten routes, annotating each leaf with its parent layout id */
-function flattenRoutes(routes, currentLayout) {
+/** Join parent path prefix with a child path segment.
+ *  Handles root ("/"), absolute child paths, and relative segments. */
+function joinPaths(parent, child) {
+  if (child === "/") return parent || "/";
+  if (!parent || parent === "/") return child;
+  return parent + child;
+}
+
+/** Flatten routes, annotating each leaf with its parent layout id.
+ *  Accumulates parent path segments so nested children get full paths
+ *  (e.g. /blog + /:slug -> /blog/:slug). When a node has both layout
+ *  and component, the component is emitted as a leaf route. */
+function flattenRoutes(routes, currentLayout, parentPath) {
   const leaves = [];
   for (const route of routes) {
+    const fullPath = parentPath !== null ? joinPaths(parentPath, route.path) : route.path;
+
     if (route.layout && route.children) {
-      leaves.push(...flattenRoutes(route.children, toLayoutId(route.path)));
+      const layoutId = route._layoutId || toLayoutId(route.path);
+      // Layout boundary with both component and layout: emit the page as a leaf
+      if (route.component) {
+        const leaf = { ...route, path: fullPath };
+        delete leaf.children;
+        delete leaf.layout;
+        leaf._layoutId = layoutId;
+        leaves.push(leaf);
+      }
+      leaves.push(...flattenRoutes(route.children, layoutId, fullPath));
     } else if (route.children) {
-      leaves.push(...flattenRoutes(route.children, currentLayout));
+      // Container without layout: flatten children with accumulated path
+      leaves.push(...flattenRoutes(route.children, currentLayout, fullPath));
     } else {
+      // Leaf route: assign full accumulated path
+      route.path = fullPath;
       if (currentLayout) route._layoutId = currentLayout;
       leaves.push(route);
     }

package/scripts/skeleton/render.mjs

@@ -144,7 +144,7 @@ function guardedRender(routePath, component, data, i18nValue, ctx) {
 
   // After fatal check, only warnings remain — dedup per message
   for (const v of violations) {
-    const msg = `[seam] warning: ${routePath}\n  ${v.reason}`;
+    const msg = `${routePath}\n  ${v.reason}`;
     if (!ctx.seenWarnings.has(msg)) {
       ctx.seenWarnings.add(msg);
       ctx.buildWarnings.push(msg);

package/scripts/skeleton/schema.mjs

@@ -98,7 +98,7 @@ function renderRoute(route, manifest, i18nValue, ctx) {
 
   const fieldWarnings = checkFieldAccess(accessed, pageSchema, route.path);
   for (const w of fieldWarnings) {
-    const msg = `[seam] warning: ${w}`;
+    const msg = w;
     if (!ctx.seenWarnings.has(msg)) {
       ctx.seenWarnings.add(msg);
       ctx.buildWarnings.push(msg);