@decocms/start 1.2.5 → 1.2.7

package/scripts/migrate/templates/wrangler.ts

@@ -1,7 +1,6 @@
 import type { MigrationContext } from "../types.ts";
 
 export function generateWrangler(ctx: MigrationContext): string {
-  // Sanitize site name for worker name (lowercase, hyphens only)
   const workerName = ctx.siteName
     .toLowerCase()
     .replace(/[^a-z0-9-]/g, "-")
@@ -14,6 +13,10 @@ export function generateWrangler(ctx: MigrationContext): string {
   "main": "./src/worker-entry.ts",
   "workers_dev": true,
   "preview_urls": true,
+  // Uncomment for redirect/AB testing support via KV:
+  // "kv_namespaces": [
+  //   { "binding": "SITES_KV", "id": "YOUR_KV_NAMESPACE_ID" }
+  // ],
   "observability": {
     "logs": {
       "enabled": true,

package/scripts/migrate/transforms/dead-code.ts

@@ -62,12 +62,22 @@ export function transformDeadCode(content: string): TransformResult {
   let changed = false;
   let result = content;
 
-  // Remove old cache export: export const cache = "stale-while-revalidate";
-  if (/^export\s+const\s+cache\s*=\s*["'][^"']*["']/m.test(result)) {
+  // Remove old cache export: export const cache = "stale-while-revalidate" or { maxAge: ... }
+  if (/^export\s+const\s+cache\s*=/m.test(result)) {
+    // String form: export const cache = "stale-while-revalidate";
     result = result.replace(
       /^export\s+const\s+cache\s*=\s*["'][^"']*["'];?\s*\n?/gm,
       "",
     );
+    // Object form: export const cache = { maxAge: 60 * 10 };
+    result = result.replace(
+      /^export\s+const\s+cache\s*=\s*\{[^}]*\};?\s*\n?/gm,
+      "",
+    );
+    // Multiline object form (use brace-counting)
+    if (/^export\s+const\s+cache\s*=/m.test(result)) {
+      result = removeExportConstBlock(result, "cache");
+    }
     changed = true;
     notes.push("Removed dead `export const cache` (old caching system)");
   }
@@ -97,6 +107,17 @@ export function transformDeadCode(content: string): TransformResult {
     notes.push("MANUAL: crypto.subtle.digestSync is Deno-only — replaced with crypto.subtle.digest (needs await)");
   }
 
+  // Replace logger usage from @deco/deco/o11y with console
+  if (result.includes("logger.")) {
+    result = result.replace(/\blogger\.error\b/g, "console.error");
+    result = result.replace(/\blogger\.warn\b/g, "console.warn");
+    result = result.replace(/\blogger\.info\b/g, "console.info");
+    result = result.replace(/\blogger\.debug\b/g, "console.debug");
+    result = result.replace(/\blogger\.log\b/g, "console.log");
+    changed = true;
+    notes.push("Replaced logger.* with console.* (logger from @deco/deco/o11y removed)");
+  }
+
   // invoke.* calls are server RPC via runtime.ts proxy → keep as-is
   // The runtime.ts scaffolded file creates a proxy that routes to /deco/invoke/*
   // where the CMS config (API keys, tokens) is available server-side.

package/scripts/migrate/transforms/imports.ts

@@ -9,6 +9,7 @@ const IMPORT_RULES: Array<[RegExp, string | null]> = [
   // Fresh — remove entirely (handled by fresh-apis transform)
   [/^"\$fresh\/runtime\.ts"/, null],
   [/^"\$fresh\/server\.ts"/, null],
+  [/^"\$fresh\//, null], // catch-all for any $fresh/* import
 
   // Preact → React
   [/^"preact\/hooks"$/, `"react"`],
@@ -18,19 +19,25 @@ const IMPORT_RULES: Array<[RegExp, string | null]> = [
   [/^"@preact\/signals-core"$/, `"~/sdk/signal"`],
   [/^"@preact\/signals"$/, `"~/sdk/signal"`],
 
-  // Deco framework
+  // Deco framework — hooks need splitting (useDevice, useScript, useSection)
   [/^"@deco\/deco\/hooks"$/, `"@decocms/start/sdk/useScript"`],
-  [/^"@deco\/deco\/blocks"$/, `"@decocms/start/types"`],
+  [/^"@deco\/deco\/blocks"$/, `"~/types/deco"`],
+  [/^"@deco\/deco\/o11y"$/, null], // logger — use console.log/warn/error instead
   [/^"@deco\/deco\/web"$/, null], // runtime.ts is rewritten
-  [/^"@deco\/deco"$/, `"@decocms/start"`],
+  [/^"@deco\/deco\/utils\/invoke\.types\.ts"$/, null],
+  [/^"@deco\/deco\/utils\/([^"]+)"$/, null],
+  [/^"@deco\/deco"$/, `"~/types/deco"`],
 
   // Apps — widgets & components
-  [/^"apps\/admin\/widgets\.ts"$/, `"@decocms/start/types/widgets"`],
-  [/^"apps\/website\/components\/Image\.tsx"$/, `"@decocms/apps/commerce/components/Image"`],
-  [/^"apps\/website\/components\/Picture\.tsx"$/, `"@decocms/apps/commerce/components/Picture"`],
-  [/^"apps\/website\/components\/Video\.tsx"$/, `"@decocms/apps/commerce/components/Video"`],
+  [/^"apps\/admin\/widgets\.ts"$/, `"~/types/widgets"`],
+  [/^"apps\/website\/components\/Image\.tsx"$/, `"~/components/ui/Image"`],
+  [/^"apps\/website\/components\/Picture\.tsx"$/, `"~/components/ui/Picture"`],
+  [/^"apps\/website\/components\/Video\.tsx"$/, `"~/components/ui/Video"`],
   [/^"apps\/website\/components\/Theme\.tsx"$/, `"~/components/ui/Theme"`],
+  [/^"apps\/website\/components\/([^"]+?)(?:\.tsx?)?"$/, `"~/components/ui/$1"`],
   [/^"apps\/commerce\/types\.ts"$/, `"@decocms/apps/commerce/types"`],
+  [/^"apps\/commerce\/mod\.ts"$/, `"~/types/commerce-app"`],
+  [/^"apps\/commerce\/types"$/, `"@decocms/apps/commerce/types"`],
 
   // Apps — VTEX (hooks, utils, actions, loaders, types)
   [/^"apps\/vtex\/hooks\/([^"]+?)(?:\.ts)?"$/, `"@decocms/apps/vtex/hooks/$1"`],
@@ -65,15 +72,29 @@ const IMPORT_RULES: Array<[RegExp, string | null]> = [
   [/^"site\/sdk\/useVariantPossiblities(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/useVariantPossibilities"`],
   [/^"site\/sdk\/usePlatform(?:\.tsx?)?.*"$/, null],
 
+  // $store/account.json → ~/account.json (JSON import with assertion)
+  [/^"\$store\/account\.json"$/, `"~/account.json"`],
+  [/^"site\/account\.json"$/, `"~/account.json"`],
+
   // $store/ → ~/ (common Deno import map alias for project root)
   [/^"\$store\/sdk\/clx(?:\.tsx?)?.*"$/, `"~/sdk/clx"`],
   [/^"\$store\/sdk\/useId(?:\.tsx?)?.*"$/, `"react"`],
   [/^"\$store\/sdk\/useOffer(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/useOffer"`],
+  [/^"\$store\/sdk\/format(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/formatPrice"`],
   [/^"\$store\/sdk\/useVariantPossiblities(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/useVariantPossibilities"`],
   [/^"\$store\/sdk\/usePlatform(?:\.tsx?)?.*"$/, null],
   [/^"\$store\/(.+)"$/, `"~/$1"`],
 
+  // $home/ → ~/ (another common alias)
+  [/^"\$home\/(.+)"$/, `"~/$1"`],
+
   // site/ → ~/
+  [/^"site\/sdk\/clx(?:\.tsx?)?.*"$/, `"~/sdk/clx"`],
+  [/^"site\/sdk\/useId(?:\.tsx?)?.*"$/, `"react"`],
+  [/^"site\/sdk\/useOffer(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/useOffer"`],
+  [/^"site\/sdk\/format(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/formatPrice"`],
+  [/^"site\/sdk\/useVariantPossiblities(?:\.tsx?)?.*"$/, `"@decocms/apps/commerce/sdk/useVariantPossibilities"`],
+  [/^"site\/sdk\/usePlatform(?:\.tsx?)?.*"$/, null],
   [/^"site\/(.+)"$/, `"~/$1"`],
 ];
 
@@ -89,6 +110,8 @@ const RELATIVE_SDK_REWRITES: Array<[RegExp, string]> = [
   [/(?:\.\.\/)*sdk\/useId(?:\.tsx?)?$/, "react"],
   // sdk/useOffer → @decocms/apps/commerce/sdk/useOffer
   [/(?:\.\.\/)*sdk\/useOffer(?:\.tsx?)?$/, "@decocms/apps/commerce/sdk/useOffer"],
+  // sdk/format → @decocms/apps/commerce/sdk/formatPrice
+  [/(?:\.\.\/)*sdk\/format(?:\.tsx?)?$/, "@decocms/apps/commerce/sdk/formatPrice"],
   // sdk/useVariantPossiblities → @decocms/apps/commerce/sdk/useVariantPossibilities
   [/(?:\.\.\/)*sdk\/useVariantPossiblities(?:\.tsx?)?$/, "@decocms/apps/commerce/sdk/useVariantPossibilities"],
   // sdk/usePlatform → remove entirely
@@ -113,12 +136,19 @@ export function transformImports(content: string): TransformResult {
   const notes: string[] = [];
   let changed = false;
 
+  // Strip BOM that prevents ^ matching on the first line
+  if (content.charCodeAt(0) === 0xfeff) {
+    content = content.slice(1);
+    changed = true;
+  }
+
   // Match import/export lines with their specifiers
+  // The suffix group also captures import assertions (with { type: "json" }) and assert syntax
   const importLineRegex =
-    /^(import\s+(?:type\s+)?(?:\{[^}]*\}|[\w*]+(?:\s*,\s*\{[^}]*\})?)\s+from\s+)("[^"]+"|'[^']+')(;?\s*)$/gm;
+    /^(import\s+(?:type\s+)?(?:\{[^}]*\}|[\w*]+(?:\s*,\s*\{[^}]*\})?)\s+from\s+)("[^"]+"|'[^']+')((?:\s+(?:with|assert)\s+\{[^}]*\})?;?\s*)$/gm;
   const reExportLineRegex =
-    /^(export\s+(?:type\s+)?\{[^}]*\}\s+from\s+)("[^"]+"|'[^']+')(;?\s*)$/gm;
-  const sideEffectImportRegex = /^(import\s+)("[^"]+"|'[^']+')(;?\s*)$/gm;
+    /^(export\s+(?:type\s+)?\{[^}]*\}\s+from\s+)("[^"]+"|'[^']+')((?:\s+(?:with|assert)\s+\{[^}]*\})?;?\s*)$/gm;
+  const sideEffectImportRegex = /^(import\s+)("[^"]+"|'[^']+')((?:\s+(?:with|assert)\s+\{[^}]*\})?;?\s*)$/gm;
 
   /**
    * Post-process: split @deco/deco/hooks imports.

package/scripts/migrate/transforms/jsx.ts

@@ -220,6 +220,15 @@ export function transformJsx(content: string): TransformResult {
     notes.push("Prefixed setTimeout/setInterval with window. for correct typing");
   }
 
+  // Strip data-fresh-disable-lock (Fresh-specific, not needed in React/TanStack)
+  if (result.includes("data-fresh-disable-lock")) {
+    result = result.replace(/\s*data-fresh-disable-lock=\{[^}]*\}/g, "");
+    result = result.replace(/\s*data-fresh-disable-lock="[^"]*"/g, "");
+    result = result.replace(/\s*data-fresh-disable-lock/g, "");
+    changed = true;
+    notes.push("Removed data-fresh-disable-lock attribute (Fresh-specific)");
+  }
+
   // Ensure React import exists if we introduced React.* references
   if (
     (result.includes("React.") || result.includes("React,")) &&

package/scripts/migrate/transforms/section-conventions.ts

@@ -0,0 +1,83 @@
+import type { TransformResult, SectionMeta } from "../types.ts";
+
+/**
+ * Adds section convention exports (sync, eager, layout, cache)
+ * to section files based on metadata extracted during analysis.
+ *
+ * These exports are read by generate-sections.ts in @decocms/start
+ * to build the sections.gen.ts registry.
+ */
+export function transformSectionConventions(
+  content: string,
+  sectionMeta: SectionMeta | undefined,
+): TransformResult {
+  if (!sectionMeta) {
+    return { content, changed: false, notes: [] };
+  }
+
+  const notes: string[] = [];
+  let result = content;
+  let changed = false;
+
+  // Header, footer, theme → eager + sync + layout
+  if (sectionMeta.isHeader || sectionMeta.isFooter || sectionMeta.isTheme) {
+    if (!result.includes("export const eager")) {
+      result += "\nexport const eager = true;\n";
+      notes.push("Added: export const eager = true");
+      changed = true;
+    }
+    if (!result.includes("export const sync")) {
+      result += "export const sync = true;\n";
+      notes.push("Added: export const sync = true");
+      changed = true;
+    }
+    if (!result.includes("export const layout")) {
+      result += "export const layout = true;\n";
+      notes.push("Added: export const layout = true");
+      changed = true;
+    }
+  }
+
+  // Listing sections → cache = "listing"
+  if (sectionMeta.isListing && !result.includes("export const cache")) {
+    result += '\nexport const cache = "listing";\n';
+    notes.push('Added: export const cache = "listing"');
+    changed = true;
+  }
+
+  // Sections with loaders that use device → add sync (needs SSR device detection)
+  if (sectionMeta.hasLoader && sectionMeta.loaderUsesDevice && !result.includes("export const sync")) {
+    result += "\nexport const sync = true;\n";
+    notes.push("Added: export const sync = true (loader uses device)");
+    changed = true;
+  }
+
+  // Generate a basic LoadingFallback if the section doesn't have one
+  // and it's a listing section (visible skeleton improvement)
+  if (sectionMeta.isListing && !sectionMeta.hasLoadingFallback) {
+    result += `
+export function LoadingFallback() {
+  return (
+    <div className="w-full py-8">
+      <div className="container mx-auto px-4">
+        <div className="h-6 w-48 bg-base-200 animate-pulse rounded mb-4" />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex flex-col gap-2">
+              <div className="aspect-square bg-base-200 animate-pulse rounded" />
+              <div className="h-4 bg-base-200 animate-pulse rounded w-3/4" />
+              <div className="h-4 bg-base-200 animate-pulse rounded w-1/2" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+    notes.push("Added: LoadingFallback skeleton for listing section");
+    changed = true;
+  }
+
+  return { content: result, changed, notes };
+}

package/scripts/migrate/types.ts

@@ -63,6 +63,70 @@ export type DetectedPattern =
   | "define-app"
   | "invoke-proxy";
 
+/** Metadata extracted from a section file during analysis */
+export interface SectionMeta {
+  /** Relative path from source root (e.g. "sections/Header/Header.tsx") */
+  path: string;
+  /** Has export const loader or export function loader */
+  hasLoader: boolean;
+  /** Loader is async */
+  loaderIsAsync: boolean;
+  /** Has export function LoadingFallback */
+  hasLoadingFallback: boolean;
+  /** Is a header section (by filename) */
+  isHeader: boolean;
+  /** Is a footer section (by filename) */
+  isFooter: boolean;
+  /** Is a theme section (by filename) */
+  isTheme: boolean;
+  /** Is a shelf/carousel/listing section (by filename or content) */
+  isListing: boolean;
+  /** Has JSDoc @title */
+  hasTitle: boolean;
+  /** Has JSDoc @description */
+  hasDescription: boolean;
+  /** Loader uses ctx.device or similar device detection */
+  loaderUsesDevice: boolean;
+  /** Loader uses request URL / search params */
+  loaderUsesUrl: boolean;
+  /** Loader is an Account section (sections/Account/*) */
+  isAccountSection: boolean;
+  /** Loader only sets ctx.response.status (no real prop enrichment) */
+  isStatusOnly: boolean;
+  /** Loader sets isMobile (boolean) rather than device (string) */
+  usesMobileBoolean: boolean;
+}
+
+/** Classification of an island file */
+export interface IslandClassification {
+  /** Relative path from source root */
+  path: string;
+  /** "wrapper" = thin re-export/bridge, "standalone" = has real logic */
+  type: "wrapper" | "standalone";
+  /** If wrapper, the target component path */
+  wrapsComponent?: string;
+  /** If standalone, the suggested target path under src/ */
+  suggestedTarget: string;
+  /** Line count (used as heuristic) */
+  lineCount: number;
+}
+
+/** Information about a loader file */
+export interface LoaderInfo {
+  /** Relative path from source root */
+  path: string;
+  /** Has export const cache (SWR) */
+  hasCache: boolean;
+  /** Has export const cacheKey */
+  hasCacheKey: boolean;
+  /** Maps to a known @decocms/apps equivalent */
+  appsEquivalent: string | null;
+  /** Is a custom loader that needs dynamic import in commerce-loaders */
+  isCustom: boolean;
+  /** Detected platform relevance (vtex, shopify, etc.) */
+  platformRelevance: Platform | null;
+}
+
 export interface MigrationContext {
   sourceDir: string;
   siteName: string;
@@ -83,6 +147,13 @@ export interface MigrationContext {
   /** All categorized source files */
   files: FileRecord[];
 
+  /** Section metadata extracted during analysis */
+  sectionMetas: SectionMeta[];
+  /** Island classifications */
+  islandClassifications: IslandClassification[];
+  /** Loader inventory */
+  loaderInventory: LoaderInfo[];
+
   /** Files created by scaffold phase */
   scaffoldedFiles: string[];
   /** Files transformed */
@@ -126,6 +197,9 @@ export function createContext(
     themeColors: {},
     fontFamily: null,
     files: [],
+    sectionMetas: [],
+    islandClassifications: [],
+    loaderInventory: [],
     scaffoldedFiles: [],
     transformedFiles: [],
     deletedFiles: [],

package/src/cms/resolve.ts

@@ -627,7 +627,17 @@ async function resolveRawSection(
   section: unknown,
   rctx: ResolveContext,
 ): Promise<ResolvedSection[]> {
+  const sectionRt = (section as any)?.__resolveType;
+  if (String(sectionRt).includes("eader")) {
+    console.log(`[RAW-SECTION-ENTER] sectionRt="${sectionRt}"`);
+  }
+
   const resolved = await internalResolve(section, rctx);
+
+  if (String(sectionRt).includes("eader")) {
+    console.log(`[RAW-SECTION-RESOLVED] resolved type=${typeof resolved} isObj=${resolved && typeof resolved === 'object'} keys=${resolved && typeof resolved === 'object' ? Object.keys(resolved as any).join(',') : 'N/A'}`);
+  }
+
   if (!resolved || typeof resolved !== "object") return [];
 
   const items = Array.isArray(resolved) ? resolved : [resolved];

package/src/routes/cmsRoute.ts

@@ -99,8 +99,21 @@ async function loadCmsPageInternal(fullPath: string) {
   const request = new Request(urlWithSearch, {
     headers: originRequest.headers,
   });
+
+  for (const s of page.resolvedSections) {
+    if (s.component?.includes("eader")) {
+      console.log(`[CMS-ROUTE] BEFORE loaders: "${s.component}" propKeys=[${Object.keys(s.props || {}).join(",")}]`);
+    }
+  }
+
   const enrichedSections = await runSectionLoaders(page.resolvedSections, request);
 
+  for (const s of enrichedSections) {
+    if (s.component?.includes("eader")) {
+      console.log(`[CMS-ROUTE] AFTER loaders: "${s.component}" propKeys=[${Object.keys(s.props || {}).join(",")}]`);
+    }
+  }
+
   // Pre-import eager section modules so their default exports are cached
   // in resolvedComponents. This ensures SSR renders with direct component
   // refs, and the client hydration can skip React.lazy/Suspense.