@decocms/start 0.31.1 → 0.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "0.31.1",
+  "version": "0.32.1",
   "type": "module",
   "description": "Deco framework for TanStack Start - CMS bridge, admin protocol, hooks, schema generation",
   "main": "./src/index.ts",
@@ -46,6 +46,8 @@
     "./scripts/generate-blocks": "./scripts/generate-blocks.ts",
     "./scripts/generate-schema": "./scripts/generate-schema.ts",
     "./scripts/generate-invoke": "./scripts/generate-invoke.ts",
+    "./scripts/migrate": "./scripts/migrate.ts",
+    "./scripts/tailwind-lint": "./scripts/tailwind-lint.ts",
     "./vite": "./src/vite/plugin.js"
   },
   "scripts": {

package/scripts/migrate/colors.ts

@@ -0,0 +1,46 @@
+/**
+ * Terminal color utilities — keeps output readable without adding dependencies.
+ */
+
+const isColorSupported =
+  typeof process !== "undefined" &&
+  process.stdout?.isTTY &&
+  !process.env.NO_COLOR;
+
+function wrap(code: number, resetCode: number) {
+  return (text: string) =>
+    isColorSupported ? `\x1b[${code}m${text}\x1b[${resetCode}m` : text;
+}
+
+export const bold = wrap(1, 22);
+export const dim = wrap(2, 22);
+export const red = wrap(31, 39);
+export const green = wrap(32, 39);
+export const yellow = wrap(33, 39);
+export const blue = wrap(34, 39);
+export const cyan = wrap(36, 39);
+export const gray = wrap(90, 39);
+
+export const icons = {
+  success: isColorSupported ? "\x1b[32m✓\x1b[0m" : "[OK]",
+  error: isColorSupported ? "\x1b[31m✗\x1b[0m" : "[FAIL]",
+  warning: isColorSupported ? "\x1b[33m⚠\x1b[0m" : "[WARN]",
+  info: isColorSupported ? "\x1b[34mℹ\x1b[0m" : "[INFO]",
+  arrow: isColorSupported ? "\x1b[36m→\x1b[0m" : "->",
+  bullet: isColorSupported ? "\x1b[90m•\x1b[0m" : "-",
+};
+
+export function banner(text: string) {
+  const line = "═".repeat(58);
+  console.log(`\n${cyan(`╔${line}╗`)}`);
+  console.log(`${cyan("║")}  ${bold(text.padEnd(56))}${cyan("║")}`);
+  console.log(`${cyan(`╚${line}╝`)}`);
+}
+
+export function phase(name: string) {
+  console.log(`\n${bold(blue(`━━━ ${name} ━━━`))}\n`);
+}
+
+export function stat(label: string, value: string | number) {
+  console.log(`  ${gray(label + ":")} ${bold(String(value))}`);
+}

package/scripts/migrate/phase-analyze.ts

@@ -0,0 +1,402 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type {
+  DetectedPattern,
+  FileRecord,
+  MigrationContext,
+  Platform,
+} from "./types.ts";
+import { log, logPhase } from "./types.ts";
+
+const PATTERN_DETECTORS: Array<[DetectedPattern, RegExp]> = [
+  ["preact-hooks", /from\s+["']preact\/hooks["']/],
+  ["preact-signals", /from\s+["']@preact\/signals/],
+  ["fresh-runtime", /from\s+["']\$fresh\/runtime/],
+  ["fresh-server", /from\s+["']\$fresh\/server/],
+  ["deco-hooks", /from\s+["']@deco\/deco\/hooks["']/],
+  ["deco-context", /Context\.active\(\)/],
+  ["deco-web", /from\s+["']@deco\/deco\/web["']/],
+  ["deco-blocks", /from\s+["']@deco\/deco\/blocks["']/],
+  ["apps-imports", /from\s+["']apps\//],
+  ["site-imports", /from\s+["']site\//],
+  ["class-attr", /<[a-zA-Z][^>]*\sclass\s*=/],
+  ["onInput-handler", /onInput\s*=/],
+  ["deno-lint-ignore", /deno-lint-ignore/],
+  ["npm-prefix", /from\s+["']npm:/],
+  ["component-children", /ComponentChildren/],
+  ["jsx-types", /JSX\.(?:SVG|HTML|Generic)/],
+  ["asset-function", /\basset\(/],
+  ["head-component", /<Head[\s>]/],
+  ["define-app", /defineApp\(/],
+  ["invoke-proxy", /proxy<Manifest/],
+];
+
+/** Files/dirs that should be completely skipped during scanning */
+const SKIP_DIRS = new Set([
+  "node_modules",
+  ".git",
+  ".github",
+  ".deco",
+  ".devcontainer",
+  ".vscode",
+  "_fresh",
+  "static",
+  ".context",
+  "scripts",
+  "src",
+  "public",
+  ".tanstack",
+]);
+
+const SKIP_FILES = new Set([
+  "deno.lock",
+  ".gitignore",
+  "README.md",
+  "LICENSE",
+  "browserslist",
+  "bw_stats.json",
+  "package.json",
+  "package-lock.json",
+]);
+
+/** Files that are generated and should be deleted */
+const GENERATED_FILES = new Set([
+  "fresh.gen.ts",
+  "manifest.gen.ts",
+  "fresh.config.ts",
+]);
+
+/** SDK files that have framework equivalents */
+const SDK_DELETE = new Set([
+  "sdk/clx.ts",
+  "sdk/useId.ts",
+  "sdk/useOffer.ts",
+  "sdk/useVariantPossiblities.ts",
+  "sdk/usePlatform.tsx",
+]);
+
+/** Loaders that depend on deleted admin tooling */
+const LOADER_DELETE = new Set([
+  "loaders/availableIcons.ts",
+  "loaders/icons.ts",
+]);
+
+/** Root config/infra files to delete */
+const ROOT_DELETE = new Set([
+  "main.ts",
+  "dev.ts",
+  "deno.json",
+  "deno.lock",
+  "tailwind.css",
+  "tailwind.config.ts",
+  "runtime.ts",
+  "constants.ts",
+  "fresh.gen.ts",
+  "manifest.gen.ts",
+  "fresh.config.ts",
+  "browserslist",
+  "bw_stats.json",
+]);
+
+/** Static files that are code/tooling, not assets — should be deleted */
+const STATIC_DELETE = new Set([
+  "static/adminIcons.ts",
+  "static/generate-icons.ts",
+  "static/tailwind.css",
+]);
+
+/**
+ * Scan file content for inline npm: imports and return { name: version } pairs.
+ * Matches patterns like: from "npm:fuse.js@7.0.0"
+ */
+function extractInlineNpmDeps(content: string): Record<string, string> {
+  const deps: Record<string, string> = {};
+  const regex = /from\s+["']npm:(@?[^@"']+)(?:@([^"']+))?["']/g;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    const name = match[1];
+    const version = match[2] || "*";
+    // Skip framework deps
+    if (name.startsWith("preact") || name.startsWith("@preact/")) continue;
+    deps[name] = `^${version}`;
+  }
+  return deps;
+}
+
+function detectPatterns(content: string): DetectedPattern[] {
+  const patterns: DetectedPattern[] = [];
+  for (const [name, regex] of PATTERN_DETECTORS) {
+    if (regex.test(content)) {
+      patterns.push(name);
+    }
+  }
+  return patterns;
+}
+
+function isReExport(content: string): { is: boolean; target?: string } {
+  const match = content.match(
+    /^export\s+\{\s*default\s*\}\s+from\s+["']([^"']+)["']/m,
+  );
+  if (match) return { is: true, target: match[1] };
+  return { is: false };
+}
+
+function categorizeFile(
+  relPath: string,
+): FileRecord["category"] {
+  if (relPath.startsWith("sections/")) return "section";
+  if (relPath.startsWith("islands/")) return "island";
+  if (relPath.startsWith("components/")) return "component";
+  if (relPath.startsWith("sdk/")) return "sdk";
+  if (relPath.startsWith("loaders/")) return "loader";
+  if (relPath.startsWith("actions/")) return "action";
+  if (relPath.startsWith("routes/")) return "route";
+  if (relPath.startsWith("apps/")) return "app";
+  if (relPath.startsWith("static/")) return "static";
+  if (GENERATED_FILES.has(relPath)) return "generated";
+  if (
+    relPath === "deno.json" || relPath === "tsconfig.json" ||
+    relPath === "tailwind.config.ts"
+  ) {
+    return "config";
+  }
+  return "other";
+}
+
+function decideAction(
+  record: FileRecord,
+): { action: FileRecord["action"]; targetPath?: string; notes?: string } {
+  const { path: relPath, category, isReExport: isReExp } = record;
+
+  // Generated files → delete
+  if (category === "generated") {
+    return { action: "delete" };
+  }
+
+  // Root config/infra → delete (will be scaffolded)
+  if (ROOT_DELETE.has(relPath)) {
+    return { action: "delete", notes: "Replaced by scaffolded config" };
+  }
+
+  // Routes → delete (will be scaffolded)
+  if (category === "route") {
+    return { action: "delete", notes: "Routes are scaffolded fresh" };
+  }
+
+  // Apps deco/ dir → delete
+  if (relPath.startsWith("apps/deco/")) {
+    return { action: "delete", notes: "Deco apps not needed in TanStack" };
+  }
+
+  // apps/site.ts → delete (will be scaffolded)
+  if (relPath === "apps/site.ts") {
+    return { action: "delete", notes: "Rewritten from scratch" };
+  }
+
+  // Loaders that depend on deleted admin tooling
+  if (LOADER_DELETE.has(relPath)) {
+    return {
+      action: "delete",
+      notes: "Admin icon loader — depends on deleted static/adminIcons.ts",
+    };
+  }
+
+  // SDK files to delete
+  if (SDK_DELETE.has(relPath)) {
+    return {
+      action: "delete",
+      notes: "Use framework equivalent from @decocms/start or @decocms/apps",
+    };
+  }
+
+  // cart/ directory → delete
+  if (relPath.startsWith("sdk/cart/")) {
+    return { action: "delete", notes: "Use @decocms/apps cart hooks" };
+  }
+
+  // Islands — if the section is a re-export of this island, island becomes section
+  if (category === "island") {
+    const sectionPath = relPath.replace("islands/", "sections/");
+    return {
+      action: "transform",
+      targetPath: `src/${sectionPath}`,
+      notes: "Island merged into section",
+    };
+  }
+
+  // Sections that are re-exports of islands → delete (island takes their place)
+  if (category === "section" && isReExp) {
+    return { action: "delete", notes: "Re-export wrapper, island merged" };
+  }
+
+  // Session component → delete (analytics moves to __root.tsx)
+  if (
+    relPath === "components/Session.tsx" || relPath === "sections/Session.tsx"
+  ) {
+    return {
+      action: "delete",
+      notes: "Analytics SDK moved to __root.tsx scaffold",
+    };
+  }
+
+  // Static code/tooling files → delete
+  if (STATIC_DELETE.has(relPath)) {
+    return { action: "delete", notes: "Code/tooling file, not an asset" };
+  }
+
+  // Static files → move
+  if (category === "static") {
+    const publicPath = relPath.replace("static/", "public/");
+    return { action: "move", targetPath: publicPath };
+  }
+
+  // Everything else → transform into src/
+  return { action: "transform", targetPath: `src/${relPath}` };
+}
+
+function scanDir(
+  dir: string,
+  baseDir: string,
+  files: FileRecord[],
+) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    const relPath = path.relative(baseDir, fullPath);
+
+    if (entry.isDirectory()) {
+      if (SKIP_DIRS.has(entry.name) || entry.name.startsWith(".")) continue;
+      scanDir(fullPath, baseDir, files);
+      continue;
+    }
+
+    // Skip dotfiles and known non-code files
+    if (SKIP_FILES.has(entry.name) || entry.name.startsWith(".")) continue;
+
+    // Only process .ts, .tsx, .css, .json files for transforms
+    const ext = path.extname(entry.name);
+    const isCode = [".ts", ".tsx", ".css", ".json"].includes(ext);
+
+    let content = "";
+    let patterns: DetectedPattern[] = [];
+    let reExport = { is: false, target: undefined as string | undefined };
+
+    if (isCode) {
+      content = fs.readFileSync(fullPath, "utf-8");
+      patterns = detectPatterns(content);
+      reExport = isReExport(content);
+    }
+
+    const record: FileRecord = {
+      path: relPath,
+      absPath: fullPath,
+      category: categorizeFile(relPath),
+      isReExport: reExport.is,
+      reExportTarget: reExport.target,
+      patterns,
+      action: "transform", // placeholder
+    };
+
+    const decision = decideAction(record);
+    record.action = decision.action;
+    record.targetPath = decision.targetPath;
+    record.notes = decision.notes;
+
+    files.push(record);
+  }
+}
+
+function extractGtmId(sourceDir: string): string | null {
+  const appPath = path.join(sourceDir, "routes", "_app.tsx");
+  if (!fs.existsSync(appPath)) return null;
+
+  const content = fs.readFileSync(appPath, "utf-8");
+  const match = content.match(/GTM-[A-Z0-9]+/);
+  return match ? match[0] : null;
+}
+
+function extractPlatform(sourceDir: string): Platform {
+  const sitePath = path.join(sourceDir, "apps", "site.ts");
+  if (!fs.existsSync(sitePath)) return "custom";
+
+  const content = fs.readFileSync(sitePath, "utf-8");
+
+  // Check for platform in Props or default
+  for (const p of ["vtex", "shopify", "wake", "vnda", "linx", "nuvemshop"] as const) {
+    if (content.includes(`"${p}"`) && content.includes("_platform")) {
+      // This is just detecting what's available, default is usually "custom"
+    }
+  }
+
+  return "custom";
+}
+
+function extractSiteName(sourceDir: string): string {
+  // Try to extract from .deco or directory name
+  const dirName = path.basename(path.resolve(sourceDir));
+
+  // Try deno.json
+  const denoPath = path.join(sourceDir, "deno.json");
+  if (fs.existsSync(denoPath)) {
+    const deno = JSON.parse(fs.readFileSync(denoPath, "utf-8"));
+    if (deno.name) return deno.name;
+  }
+
+  return dirName;
+}
+
+export function analyze(ctx: MigrationContext): void {
+  logPhase("Analyze");
+
+  // Parse deno.json for import map
+  const denoJsonPath = path.join(ctx.sourceDir, "deno.json");
+  if (fs.existsSync(denoJsonPath)) {
+    const denoJson = JSON.parse(fs.readFileSync(denoJsonPath, "utf-8"));
+    ctx.importMap = denoJson.imports || {};
+    log(
+      ctx,
+      `Found ${Object.keys(ctx.importMap).length} import map entries`,
+    );
+  }
+
+  // Extract metadata
+  ctx.siteName = extractSiteName(ctx.sourceDir);
+  ctx.platform = extractPlatform(ctx.sourceDir);
+  ctx.gtmId = extractGtmId(ctx.sourceDir);
+
+  console.log(`  Site: ${ctx.siteName}`);
+  console.log(`  Platform: ${ctx.platform}`);
+  console.log(`  GTM ID: ${ctx.gtmId || "none"}`);
+
+  // Scan all files
+  scanDir(ctx.sourceDir, ctx.sourceDir, ctx.files);
+
+  // Summary
+  const byAction = { transform: 0, delete: 0, move: 0, scaffold: 0, "manual-review": 0 };
+  const byCategory: Record<string, number> = {};
+
+  for (const f of ctx.files) {
+    byAction[f.action]++;
+    byCategory[f.category] = (byCategory[f.category] || 0) + 1;
+  }
+
+  // Scan all source files for inline npm: imports
+  for (const f of ctx.files) {
+    if (f.action === "delete") continue;
+    const ext = path.extname(f.path);
+    if (![".ts", ".tsx"].includes(ext)) continue;
+    try {
+      const content = fs.readFileSync(f.absPath, "utf-8");
+      const deps = extractInlineNpmDeps(content);
+      Object.assign(ctx.discoveredNpmDeps, deps);
+    } catch {}
+  }
+  if (Object.keys(ctx.discoveredNpmDeps).length > 0) {
+    log(ctx, `Discovered npm deps from source: ${JSON.stringify(ctx.discoveredNpmDeps)}`);
+  }
+
+  console.log(`\n  Files found: ${ctx.files.length}`);
+  console.log(`  By category: ${JSON.stringify(byCategory)}`);
+  console.log(`  By action: ${JSON.stringify(byAction)}`);
+}

package/scripts/migrate/phase-cleanup.ts

@@ -0,0 +1,212 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext } from "./types.ts";
+import { log, logPhase } from "./types.ts";
+
+/** Directories to remove entirely after migration */
+const DIRS_TO_DELETE = [
+  "islands",
+  "routes",
+  "apps/deco",
+  "sdk/cart",
+];
+
+/** Individual root files to delete */
+const ROOT_FILES_TO_DELETE = [
+  "main.ts",
+  "dev.ts",
+  "deno.json",
+  "deno.lock",
+  "tailwind.css",
+  "tailwind.config.ts",
+  "runtime.ts",
+  "constants.ts",
+  "fresh.gen.ts",
+  "manifest.gen.ts",
+  "fresh.config.ts",
+  "browserslist",
+  "bw_stats.json",
+];
+
+/** SDK files that have framework equivalents */
+const SDK_FILES_TO_DELETE = [
+  "sdk/clx.ts",
+  "sdk/useId.ts",
+  "sdk/useOffer.ts",
+  "sdk/useVariantPossiblities.ts",
+  "sdk/usePlatform.tsx",
+];
+
+/** Section/component wrappers that are no longer needed */
+const WRAPPER_FILES_TO_DELETE = [
+  "components/Session.tsx",
+  "sections/Session.tsx",
+];
+
+/** Loaders that depend on deleted admin tooling */
+const LOADER_FILES_TO_DELETE = [
+  "loaders/availableIcons.ts",
+  "loaders/icons.ts",
+];
+
+function deleteFileIfExists(ctx: MigrationContext, relPath: string) {
+  const fullPath = path.join(ctx.sourceDir, relPath);
+  if (!fs.existsSync(fullPath)) return;
+
+  if (ctx.dryRun) {
+    log(ctx, `[DRY] Would delete: ${relPath}`);
+    ctx.deletedFiles.push(relPath);
+    return;
+  }
+
+  fs.unlinkSync(fullPath);
+  ctx.deletedFiles.push(relPath);
+  log(ctx, `Deleted: ${relPath}`);
+}
+
+function deleteDirIfExists(ctx: MigrationContext, relPath: string) {
+  const fullPath = path.join(ctx.sourceDir, relPath);
+  if (!fs.existsSync(fullPath)) return;
+
+  if (ctx.dryRun) {
+    log(ctx, `[DRY] Would delete dir: ${relPath}/`);
+    ctx.deletedFiles.push(`${relPath}/`);
+    return;
+  }
+
+  fs.rmSync(fullPath, { recursive: true, force: true });
+  ctx.deletedFiles.push(`${relPath}/`);
+  log(ctx, `Deleted dir: ${relPath}/`);
+}
+
+function moveStaticFiles(ctx: MigrationContext) {
+  const staticDir = path.join(ctx.sourceDir, "static");
+  if (!fs.existsSync(staticDir)) return;
+
+  const publicDir = path.join(ctx.sourceDir, "public");
+
+  function moveRecursive(dir: string) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const srcPath = path.join(dir, entry.name);
+      const relFromStatic = path.relative(staticDir, srcPath);
+      const destPath = path.join(publicDir, relFromStatic);
+
+      // Skip generated files
+      if (
+        entry.name === "tailwind.css" || entry.name === "adminIcons.ts" ||
+        entry.name === "generate-icons.ts"
+      ) {
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        moveRecursive(srcPath);
+        continue;
+      }
+
+      if (ctx.dryRun) {
+        log(ctx, `[DRY] Would move: static/${relFromStatic} → public/${relFromStatic}`);
+        ctx.movedFiles.push({
+          from: `static/${relFromStatic}`,
+          to: `public/${relFromStatic}`,
+        });
+        continue;
+      }
+
+      // Ensure dest dir exists
+      fs.mkdirSync(path.dirname(destPath), { recursive: true });
+      fs.copyFileSync(srcPath, destPath);
+      ctx.movedFiles.push({
+        from: `static/${relFromStatic}`,
+        to: `public/${relFromStatic}`,
+      });
+      log(ctx, `Moved: static/${relFromStatic} → public/${relFromStatic}`);
+    }
+  }
+
+  moveRecursive(staticDir);
+
+  // Now delete static/ dir
+  if (!ctx.dryRun) {
+    fs.rmSync(staticDir, { recursive: true, force: true });
+    log(ctx, "Deleted dir: static/");
+  }
+}
+
+function cleanupOldSourceDirs(ctx: MigrationContext) {
+  // After transforms, the original top-level dirs have been copied to src/.
+  // Delete the old top-level copies if they still exist and src/ has them.
+  const dirsToClean = [
+    "sections",
+    "components",
+    "sdk",
+    "loaders",
+    "actions",
+    "apps",
+  ];
+
+  for (const dir of dirsToClean) {
+    const oldDir = path.join(ctx.sourceDir, dir);
+    const newDir = path.join(ctx.sourceDir, "src", dir);
+    if (fs.existsSync(oldDir) && fs.existsSync(newDir)) {
+      if (ctx.dryRun) {
+        log(ctx, `[DRY] Would delete old dir: ${dir}/ (moved to src/${dir}/)`);
+        ctx.deletedFiles.push(`${dir}/`);
+      } else {
+        fs.rmSync(oldDir, { recursive: true, force: true });
+        ctx.deletedFiles.push(`${dir}/`);
+        log(ctx, `Deleted old dir: ${dir}/ (now at src/${dir}/)`);
+      }
+    }
+  }
+}
+
+/** Delete sections that were re-export wrappers (their islands are now sections) */
+function cleanupReExportSections(ctx: MigrationContext) {
+  const reExports = ctx.files.filter(
+    (f) => f.category === "section" && f.isReExport && f.action === "delete",
+  );
+  for (const f of reExports) {
+    // These were already not transformed, just make sure we note them
+    log(ctx, `Skipped re-export wrapper: ${f.path}`);
+  }
+}
+
+export function cleanup(ctx: MigrationContext): void {
+  logPhase("Cleanup");
+
+  // 1. Move static → public
+  console.log("  Moving static/ → public/...");
+  moveStaticFiles(ctx);
+
+  // 2. Delete specific files
+  console.log("  Deleting old files...");
+  for (const file of ROOT_FILES_TO_DELETE) {
+    deleteFileIfExists(ctx, file);
+  }
+  for (const file of SDK_FILES_TO_DELETE) {
+    deleteFileIfExists(ctx, file);
+  }
+  for (const file of WRAPPER_FILES_TO_DELETE) {
+    deleteFileIfExists(ctx, file);
+  }
+  for (const file of LOADER_FILES_TO_DELETE) {
+    deleteFileIfExists(ctx, file);
+  }
+
+  // 3. Delete directories
+  console.log("  Deleting old directories...");
+  for (const dir of DIRS_TO_DELETE) {
+    deleteDirIfExists(ctx, dir);
+  }
+
+  // 4. Clean up old source directories
+  console.log("  Cleaning up old source dirs...");
+  cleanupOldSourceDirs(ctx);
+  cleanupReExportSections(ctx);
+
+  console.log(
+    `  Deleted ${ctx.deletedFiles.length} files/dirs, moved ${ctx.movedFiles.length} files`,
+  );
+}