@decocms/start 0.31.1 → 0.32.0

package/scripts/migrate/phase-report.ts

@@ -0,0 +1,171 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext } from "./types.ts";
+import { logPhase } from "./types.ts";
+
+const FRAMEWORK_FINDINGS = [
+  "Session/analytics SDK is boilerplate duplicated across all sites — should be a single framework function",
+  "GTM event system (useGTMEvent, data-gtm-* listeners) is universal pattern — should be in @decocms/start",
+  "Route files (__root.tsx, index.tsx, $.tsx, deco/*) are near-identical across sites — should be generated by framework",
+  "server.ts, worker-entry.ts, router.tsx are pure boilerplate — should be a single createSite() call",
+  "setup.ts section registration via import.meta.glob is 100% boilerplate — framework should handle this",
+  "runtime.ts invoke proxy is identical across sites — already in @decocms/start but sites still have local copies",
+  "apps/site.ts is mostly empty after migration — platform config should be in a config file, not code",
+];
+
+export function report(ctx: MigrationContext): void {
+  logPhase("Report");
+
+  ctx.frameworkFindings = FRAMEWORK_FINDINGS;
+
+  const lines: string[] = [];
+
+  lines.push("# Migration Report");
+  lines.push("");
+  lines.push(`**Site:** ${ctx.siteName}`);
+  lines.push(`**Platform:** ${ctx.platform}`);
+  lines.push(`**GTM ID:** ${ctx.gtmId || "none"}`);
+  lines.push(`**Date:** ${new Date().toISOString().split("T")[0]}`);
+  lines.push(`**Mode:** ${ctx.dryRun ? "DRY RUN" : "EXECUTED"}`);
+  lines.push("");
+
+  // Summary
+  lines.push("## Summary");
+  lines.push("");
+  lines.push(`| Metric | Count |`);
+  lines.push(`|--------|-------|`);
+  lines.push(`| Files analyzed | ${ctx.files.length} |`);
+  lines.push(`| Files scaffolded | ${ctx.scaffoldedFiles.length} |`);
+  lines.push(`| Files transformed | ${ctx.transformedFiles.length} |`);
+  lines.push(`| Files deleted | ${ctx.deletedFiles.length} |`);
+  lines.push(`| Files moved | ${ctx.movedFiles.length} |`);
+  lines.push(
+    `| Manual review items | ${ctx.manualReviewItems.length} |`,
+  );
+  lines.push("");
+
+  // Scaffolded files
+  lines.push("## Scaffolded Files (new)");
+  lines.push("");
+  for (const f of ctx.scaffoldedFiles) {
+    lines.push(`- \`${f}\``);
+  }
+  lines.push("");
+
+  // Transformed files
+  lines.push("## Transformed Files");
+  lines.push("");
+  for (const f of ctx.transformedFiles) {
+    lines.push(`- \`${f}\``);
+  }
+  lines.push("");
+
+  // Deleted files
+  lines.push("## Deleted Files");
+  lines.push("");
+  for (const f of ctx.deletedFiles) {
+    lines.push(`- \`${f}\``);
+  }
+  lines.push("");
+
+  // Moved files
+  if (ctx.movedFiles.length > 0) {
+    lines.push("## Moved Files");
+    lines.push("");
+    for (const { from, to } of ctx.movedFiles) {
+      lines.push(`- \`${from}\` → \`${to}\``);
+    }
+    lines.push("");
+  }
+
+  // Manual review
+  if (ctx.manualReviewItems.length > 0) {
+    lines.push("## Manual Review Required");
+    lines.push("");
+    for (const item of ctx.manualReviewItems) {
+      const icon = item.severity === "error"
+        ? "🔴"
+        : item.severity === "warning"
+        ? "🟡"
+        : "🔵";
+      lines.push(`${icon} **\`${item.file}\`**: ${item.reason}`);
+    }
+    lines.push("");
+  }
+
+  // Always-present manual review items
+  lines.push("## Always Check (site-specific)");
+  lines.push("");
+  lines.push(
+    "- [ ] `FormEmail.tsx` — `invoke.resend.actions.emails.send()` needs new server function pattern",
+  );
+  lines.push(
+    "- [ ] `Slider.tsx` — verify `scriptAsDataURI` pattern works with React",
+  );
+  lines.push(
+    "- [ ] `Theme.tsx` — verify `SiteTheme` mapping to `@decocms/start`",
+  );
+  lines.push("- [ ] DaisyUI v4 → v5 class name changes");
+  lines.push(
+    "- [ ] Tailwind v3 → v4: verify all utility classes still work",
+  );
+  lines.push(
+    "- [ ] Check `src/styles/app.css` theme colors match the original design",
+  );
+  lines.push("");
+
+  // Framework findings
+  lines.push("## Framework Findings");
+  lines.push("");
+  lines.push(
+    "> These are patterns found during migration that should eventually be handled by `@decocms/start` instead of being duplicated in every site.",
+  );
+  lines.push("");
+  for (const finding of ctx.frameworkFindings) {
+    lines.push(`- ${finding}`);
+  }
+  lines.push("");
+
+  // Next steps
+  lines.push("## Next Steps");
+  lines.push("");
+  lines.push("```bash");
+  lines.push("# 1. Install dependencies");
+  lines.push("npm install");
+  lines.push("");
+  lines.push("# 2. Generate CMS blocks and schema");
+  lines.push("npm run generate:blocks");
+  lines.push("npm run generate:schema");
+  lines.push("");
+  lines.push("# 3. Generate routes");
+  lines.push("npx tsr generate");
+  lines.push("");
+  lines.push("# 4. Type check");
+  lines.push("npx tsc --noEmit");
+  lines.push("");
+  lines.push("# 5. Find unused code");
+  lines.push("npm run knip");
+  lines.push("");
+  lines.push("# 6. Run dev server");
+  lines.push("npm run dev");
+  lines.push("```");
+  lines.push("");
+
+  const content = lines.join("\n");
+
+  if (ctx.dryRun) {
+    console.log("\n" + content);
+  } else {
+    const reportPath = path.join(ctx.sourceDir, "MIGRATION_REPORT.md");
+    fs.writeFileSync(reportPath, content, "utf-8");
+    console.log(`  Report written to MIGRATION_REPORT.md`);
+  }
+
+  // Print summary to console
+  console.log(`\n  === Migration ${ctx.dryRun ? "(DRY RUN)" : "COMPLETE"} ===`);
+  console.log(`  Scaffolded: ${ctx.scaffoldedFiles.length}`);
+  console.log(`  Transformed: ${ctx.transformedFiles.length}`);
+  console.log(`  Deleted: ${ctx.deletedFiles.length}`);
+  console.log(`  Moved: ${ctx.movedFiles.length}`);
+  console.log(`  Manual review: ${ctx.manualReviewItems.length}`);
+}

package/scripts/migrate/phase-scaffold.ts

@@ -0,0 +1,133 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext } from "./types.ts";
+import { log, logPhase } from "./types.ts";
+import { generatePackageJson } from "./templates/package-json.ts";
+import { generateTsconfig } from "./templates/tsconfig.ts";
+import { generateViteConfig } from "./templates/vite-config.ts";
+import { generateWrangler } from "./templates/wrangler.ts";
+import { generateKnipConfig } from "./templates/knip-config.ts";
+import { generateRoutes } from "./templates/routes.ts";
+import { generateSetup } from "./templates/setup.ts";
+import { generateServerEntry } from "./templates/server-entry.ts";
+
+function writeFile(ctx: MigrationContext, relPath: string, content: string) {
+  const fullPath = path.join(ctx.sourceDir, relPath);
+
+  if (ctx.dryRun) {
+    log(ctx, `[DRY] Would create: ${relPath}`);
+    ctx.scaffoldedFiles.push(relPath);
+    return;
+  }
+
+  // Ensure directory exists
+  const dir = path.dirname(fullPath);
+  fs.mkdirSync(dir, { recursive: true });
+
+  fs.writeFileSync(fullPath, content, "utf-8");
+  log(ctx, `Created: ${relPath}`);
+  ctx.scaffoldedFiles.push(relPath);
+}
+
+export function scaffold(ctx: MigrationContext): void {
+  logPhase("Scaffold");
+
+  // Root config files
+  writeFile(ctx, "package.json", generatePackageJson(ctx));
+  writeFile(ctx, "tsconfig.json", generateTsconfig());
+  writeFile(ctx, "vite.config.ts", generateViteConfig(ctx));
+  writeFile(ctx, "wrangler.jsonc", generateWrangler(ctx));
+  writeFile(ctx, "knip.config.ts", generateKnipConfig());
+  writeFile(ctx, ".prettierrc", JSON.stringify({
+    semi: true,
+    singleQuote: false,
+    trailingComma: "all" as const,
+    printWidth: 100,
+    tabWidth: 2,
+  }, null, 2) + "\n");
+
+  // Server entry files
+  const serverEntryFiles = generateServerEntry(ctx);
+  for (const [filePath, content] of Object.entries(serverEntryFiles)) {
+    writeFile(ctx, filePath, content);
+  }
+
+  // Route files
+  const routeFiles = generateRoutes(ctx);
+  for (const [filePath, content] of Object.entries(routeFiles)) {
+    writeFile(ctx, filePath, content);
+  }
+
+  // Setup
+  writeFile(ctx, "src/setup.ts", generateSetup(ctx));
+
+  // Styles
+  writeFile(ctx, "src/styles/app.css", generateAppCss(ctx));
+
+  // Apps
+  writeFile(ctx, "src/apps/site.ts", generateSiteApp(ctx));
+
+  // Create public/ directory
+  if (!ctx.dryRun) {
+    fs.mkdirSync(path.join(ctx.sourceDir, "public"), { recursive: true });
+  }
+
+  console.log(`  Scaffolded ${ctx.scaffoldedFiles.length} files`);
+}
+
+function generateAppCss(_ctx: MigrationContext): string {
+  return `@import "tailwindcss";
+@plugin "daisyui";
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+  color-scheme: light;
+
+  /* TODO: Extract theme colors from the old Theme section's CMS config */
+  --color-primary: #6B21A8;
+  --color-secondary: #141414;
+  --color-accent: #FFF100;
+  --color-neutral: #393939;
+  --color-base-100: #FFFFFF;
+  --color-base-200: #F3F3F3;
+  --color-base-300: #868686;
+  --color-info: #006CA1;
+  --color-success: #007552;
+  --color-warning: #F8D13A;
+  --color-error: #CF040A;
+}
+
+@theme {
+  --color-*: initial;
+  --color-white: #fff;
+  --color-black: #000;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-inherit: inherit;
+}
+
+/* View transitions */
+@view-transition {
+  navigation: auto;
+}
+`;
+}
+
+function generateSiteApp(ctx: MigrationContext): string {
+  return `export type Platform =
+  | "vtex"
+  | "vnda"
+  | "shopify"
+  | "wake"
+  | "linx"
+  | "nuvemshop"
+  | "custom";
+
+export const _platform: Platform = "${ctx.platform}";
+
+export type AppContext = {
+  device: "mobile" | "desktop" | "tablet";
+  platform: Platform;
+};
+`;
+}

package/scripts/migrate/phase-transform.ts

@@ -0,0 +1,102 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext, TransformResult } from "./types.ts";
+import { log, logPhase } from "./types.ts";
+import { transformImports } from "./transforms/imports.ts";
+import { transformJsx } from "./transforms/jsx.ts";
+import { transformFreshApis } from "./transforms/fresh-apis.ts";
+import { transformDenoIsms } from "./transforms/deno-isms.ts";
+import { transformTailwind } from "./transforms/tailwind.ts";
+
+/**
+ * Apply all transforms to a file's content in the correct order.
+ */
+function applyTransforms(content: string, filePath: string): TransformResult {
+  const allNotes: string[] = [];
+  let currentContent = content;
+  let anyChanged = false;
+
+  // Only transform code files
+  const ext = path.extname(filePath);
+  if (![".ts", ".tsx"].includes(ext)) {
+    return { content, changed: false, notes: [] };
+  }
+
+  // Pipeline: imports → jsx → fresh-apis → deno-isms → tailwind
+  const pipeline = [
+    { name: "imports", fn: transformImports },
+    { name: "jsx", fn: transformJsx },
+    { name: "fresh-apis", fn: transformFreshApis },
+    { name: "deno-isms", fn: transformDenoIsms },
+    { name: "tailwind", fn: transformTailwind },
+  ];
+
+  for (const step of pipeline) {
+    const result = step.fn(currentContent);
+    if (result.changed) {
+      anyChanged = true;
+      currentContent = result.content;
+      allNotes.push(...result.notes.map((n) => `[${step.name}] ${n}`));
+    }
+  }
+
+  return { content: currentContent, changed: anyChanged, notes: allNotes };
+}
+
+export function transform(ctx: MigrationContext): void {
+  logPhase("Transform");
+
+  const toTransform = ctx.files.filter((f) => f.action === "transform");
+  console.log(`  Files to transform: ${toTransform.length}`);
+
+  for (const record of toTransform) {
+    const { absPath, targetPath } = record;
+    if (!targetPath) continue;
+
+    // Read source
+    const content = fs.readFileSync(absPath, "utf-8");
+
+    // Apply transforms
+    const result = applyTransforms(content, absPath);
+
+    // Add manual review items
+    for (const note of result.notes) {
+      if (note.startsWith("[") && note.includes("MANUAL:")) {
+        ctx.manualReviewItems.push({
+          file: targetPath,
+          reason: note,
+          severity: "warning",
+        });
+      }
+    }
+
+    if (ctx.dryRun) {
+      if (result.changed) {
+        log(ctx, `[DRY] Would transform: ${record.path} → ${targetPath}`);
+        for (const note of result.notes) {
+          log(ctx, `       ${note}`);
+        }
+      }
+      ctx.transformedFiles.push(targetPath);
+      continue;
+    }
+
+    // Write to target path
+    const fullTargetPath = path.join(ctx.sourceDir, targetPath);
+    const dir = path.dirname(fullTargetPath);
+    fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(fullTargetPath, result.content, "utf-8");
+
+    ctx.transformedFiles.push(targetPath);
+    if (result.changed) {
+      log(
+        ctx,
+        `Transformed: ${record.path} → ${targetPath} (${result.notes.length} changes)`,
+      );
+    } else {
+      log(ctx, `Copied: ${record.path} → ${targetPath}`);
+    }
+  }
+
+  console.log(`  Transformed ${ctx.transformedFiles.length} files`);
+}

package/scripts/migrate/phase-verify.ts

@@ -0,0 +1,248 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext } from "./types.ts";
+import { logPhase } from "./types.ts";
+
+interface Check {
+  name: string;
+  fn: (ctx: MigrationContext) => boolean;
+  severity: "error" | "warning";
+}
+
+const REQUIRED_FILES = [
+  "package.json",
+  "tsconfig.json",
+  "vite.config.ts",
+  "wrangler.jsonc",
+  "knip.config.ts",
+  ".prettierrc",
+  "src/server.ts",
+  "src/worker-entry.ts",
+  "src/router.tsx",
+  "src/runtime.ts",
+  "src/context.ts",
+  "src/setup.ts",
+  "src/styles/app.css",
+  "src/apps/site.ts",
+  "src/routes/__root.tsx",
+  "src/routes/index.tsx",
+  "src/routes/$.tsx",
+  "src/routes/deco/meta.ts",
+  "src/routes/deco/invoke.$.ts",
+  "src/routes/deco/render.ts",
+];
+
+const MUST_NOT_EXIST = [
+  "deno.json",
+  "fresh.gen.ts",
+  "manifest.gen.ts",
+  "dev.ts",
+  "main.ts",
+  "islands/BlogFeed.tsx",
+  "routes/_app.tsx",
+];
+
+const checks: Check[] = [
+  {
+    name: "All scaffolded files exist",
+    severity: "error",
+    fn: (ctx) => {
+      const missing = REQUIRED_FILES.filter(
+        (f) => !fs.existsSync(path.join(ctx.sourceDir, f)),
+      );
+      if (missing.length > 0) {
+        console.log(`    Missing: ${missing.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: "Old artifacts removed",
+    severity: "error",
+    fn: (ctx) => {
+      const remaining = MUST_NOT_EXIST.filter(
+        (f) => fs.existsSync(path.join(ctx.sourceDir, f)),
+      );
+      if (remaining.length > 0) {
+        console.log(`    Still exists: ${remaining.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: "No preact imports in src/",
+    severity: "error",
+    fn: (ctx) => {
+      const srcDir = path.join(ctx.sourceDir, "src");
+      if (!fs.existsSync(srcDir)) return true;
+      const bad = findFilesWithPattern(srcDir, /from\s+["']preact/);
+      if (bad.length > 0) {
+        console.log(`    Still has preact imports: ${bad.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: "No $fresh imports in src/",
+    severity: "error",
+    fn: (ctx) => {
+      const srcDir = path.join(ctx.sourceDir, "src");
+      if (!fs.existsSync(srcDir)) return true;
+      const bad = findFilesWithPattern(srcDir, /from\s+["']\$fresh/);
+      if (bad.length > 0) {
+        console.log(`    Still has $fresh imports: ${bad.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: "No deno-lint-ignore in src/",
+    severity: "warning",
+    fn: (ctx) => {
+      const srcDir = path.join(ctx.sourceDir, "src");
+      if (!fs.existsSync(srcDir)) return true;
+      const bad = findFilesWithPattern(srcDir, /deno-lint-ignore/);
+      if (bad.length > 0) {
+        console.log(`    Still has deno-lint-ignore: ${bad.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: 'No class= in JSX (should be className=)',
+    severity: "warning",
+    fn: (ctx) => {
+      const srcDir = path.join(ctx.sourceDir, "src");
+      if (!fs.existsSync(srcDir)) return true;
+      const bad = findFilesWithPattern(srcDir, /<[a-zA-Z][^>]*\sclass\s*=/);
+      if (bad.length > 0) {
+        console.log(`    Still has class= in JSX: ${bad.slice(0, 5).join(", ")}${bad.length > 5 ? ` (+${bad.length - 5} more)` : ""}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: "public/ has static assets",
+    severity: "warning",
+    fn: (ctx) => {
+      const publicDir = path.join(ctx.sourceDir, "public");
+      if (!fs.existsSync(publicDir)) {
+        console.log("    public/ directory missing");
+        return false;
+      }
+      const hasSprites = fs.existsSync(
+        path.join(publicDir, "sprites.svg"),
+      );
+      const hasFavicon = fs.existsSync(
+        path.join(publicDir, "favicon.ico"),
+      );
+      if (!hasSprites) console.log("    Missing: public/sprites.svg");
+      if (!hasFavicon) console.log("    Missing: public/favicon.ico");
+      return hasSprites && hasFavicon;
+    },
+  },
+  {
+    name: "package.json has correct dependencies",
+    severity: "error",
+    fn: (ctx) => {
+      const pkgPath = path.join(ctx.sourceDir, "package.json");
+      if (!fs.existsSync(pkgPath)) return false;
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+      const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+      const required = [
+        "@decocms/start",
+        "@decocms/apps",
+        "react",
+        "react-dom",
+        "@tanstack/react-start",
+        "vite",
+        "knip",
+      ];
+      const missing = required.filter((d) => !deps[d]);
+      if (missing.length > 0) {
+        console.log(`    Missing deps: ${missing.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    name: "No site/ imports (should be ~/)",
+    severity: "warning",
+    fn: (ctx) => {
+      const srcDir = path.join(ctx.sourceDir, "src");
+      if (!fs.existsSync(srcDir)) return true;
+      const bad = findFilesWithPattern(srcDir, /from\s+["']site\//);
+      if (bad.length > 0) {
+        console.log(`    Still has site/ imports: ${bad.join(", ")}`);
+        return false;
+      }
+      return true;
+    },
+  },
+];
+
+function findFilesWithPattern(
+  dir: string,
+  pattern: RegExp,
+  results: string[] = [],
+): string[] {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === "node_modules" || entry.name === ".git") continue;
+      findFilesWithPattern(fullPath, pattern, results);
+    } else if (entry.name.endsWith(".ts") || entry.name.endsWith(".tsx")) {
+      const content = fs.readFileSync(fullPath, "utf-8");
+      if (pattern.test(content)) {
+        results.push(path.relative(dir, fullPath));
+      }
+    }
+  }
+  return results;
+}
+
+export function verify(ctx: MigrationContext): boolean {
+  logPhase("Verify (Smoke Test)");
+
+  if (ctx.dryRun) {
+    console.log("  Skipping verify in dry-run mode\n");
+    return true;
+  }
+
+  let errors = 0;
+  let warnings = 0;
+
+  for (const check of checks) {
+    const pass = check.fn(ctx);
+    const icon = pass ? "\x1b[32m✓\x1b[0m" : check.severity === "error" ? "\x1b[31m✗\x1b[0m" : "\x1b[33m⚠\x1b[0m";
+    console.log(`  ${icon} ${check.name}`);
+    if (!pass) {
+      if (check.severity === "error") errors++;
+      else warnings++;
+    }
+  }
+
+  console.log(
+    `\n  Result: ${checks.length - errors - warnings} passed, ${errors} errors, ${warnings} warnings`,
+  );
+
+  if (errors > 0) {
+    console.log("  \x1b[31mVerification FAILED — migration has issues that must be fixed\x1b[0m");
+    return false;
+  }
+  if (warnings > 0) {
+    console.log("  \x1b[33mVerification passed with warnings\x1b[0m");
+  } else {
+    console.log("  \x1b[32mVerification PASSED\x1b[0m");
+  }
+
+  return true;
+}

package/scripts/migrate/templates/knip-config.ts

@@ -0,0 +1,27 @@
+export function generateKnipConfig(): string {
+  return `import type { KnipConfig } from "knip";
+
+const config: KnipConfig = {
+  entry: [
+    "src/routes/**/*.{ts,tsx}",
+    "src/setup.ts",
+    "src/runtime.ts",
+    "src/sections/**/*.{ts,tsx}",
+    "vite.config.ts",
+  ],
+  project: ["src/**/*.{ts,tsx}"],
+  ignore: [
+    "src/server/invoke.gen.ts",
+    "src/server/cms/blocks.gen.ts",
+    "src/routeTree.gen.ts",
+  ],
+  ignoreDependencies: [
+    "babel-plugin-react-compiler",
+    "@vitejs/plugin-react",
+    "wrangler",
+  ],
+};
+
+export default config;
+`;
+}