@decocms/start 1.6.2 → 1.7.0

package/scripts/migrate/templates/ui-components.ts

@@ -16,7 +16,8 @@ export function generateUiComponents(_ctx: MigrationContext): Record<string, str
 } from "@decocms/apps/commerce/components/Image";
 `;
 
-  files["src/components/ui/Picture.tsx"] = `import {
+  files["src/components/ui/Picture.tsx"] = `import type { ReactNode } from "react";
+import {
   Image,
   getSrcSet,
   type FitOptions,
@@ -36,6 +37,19 @@ export interface PictureProps extends Omit<ImageProps, "sizes"> {
   sources: PictureSourceProps[];
 }
 
+export function Source(props: PictureSourceProps & { fit?: FitOptions }) {
+  const srcSet = getSrcSet(props.src, props.width, props.height, props.fit ?? "cover");
+  return (
+    <source
+      srcSet={srcSet}
+      media={props.media}
+      width={props.width}
+      height={props.height}
+      sizes={props.sizes ?? \`\${props.width}px\`}
+    />
+  );
+}
+
 export function Picture({
   sources,
   src,
@@ -43,24 +57,15 @@ export function Picture({
   height,
   fit = "cover",
   preload,
+  children,
   ...rest
-}: PictureProps) {
+}: PictureProps & { children?: ReactNode }) {
   return (
     <picture>
-      {sources.map((source, i) => {
-        const srcSet = getSrcSet(source.src, source.width, source.height, source.fit ?? fit);
-        return (
-          <source
-            key={i}
-            srcSet={srcSet}
-            media={source.media}
-            width={source.width}
-            height={source.height}
-            sizes={source.sizes ?? \`\${source.width}px\`}
-          />
-        );
-      })}
-      <Image src={src} width={width} height={height} fit={fit} preload={preload} {...rest} />
+      {children ?? sources?.map((source, i) => (
+        <Source key={i} {...source} fit={source.fit ?? fit} />
+      ))}
+      {src && <Image src={src} width={width} height={height} fit={fit} preload={preload} {...rest} />}
     </picture>
   );
 }
@@ -107,6 +112,32 @@ export default function Video({
     />
   );
 }
+`;
+
+  files["src/components/ui/Seo.tsx"] = `export interface Props {
+  title?: string;
+  description?: string;
+  canonical?: string;
+  image?: string;
+  noIndexing?: boolean;
+  jsonLDs?: unknown[];
+}
+
+export default function Seo({ jsonLDs }: Props) {
+  if (!jsonLDs?.length) return null;
+
+  return (
+    <>
+      {jsonLDs.map((jsonLD, i) => (
+        <script
+          key={i}
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLD) }}
+        />
+      ))}
+    </>
+  );
+}
 `;
 
   return files;

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

@@ -3,21 +3,30 @@ import type { MigrationContext } from "../types.ts";
 export function generateViteConfig(ctx: MigrationContext): string {
   const isVtex = ctx.platform === "vtex";
 
+  const vtexAccount = ctx.vtexAccount || ctx.siteName.replace(/-migrated$/, "").replace(/-storefront$/, "");
+
   const vtexProxy = isVtex ? `
     // VTEX API proxy for local development
     proxy: {
       "/api/": {
-        target: "https://\${process.env.VTEX_ACCOUNT || "${ctx.siteName}"}.vtexcommercestable.com.br",
+        target: VTEX_ORIGIN,
         changeOrigin: true,
-        secure: true,
+        cookieDomainRewrite: { "*": "" },
       },
-      "/checkout/": {
-        target: "https://\${process.env.VTEX_ACCOUNT || "${ctx.siteName}"}.vtexcommercestable.com.br",
+      "/checkout": {
+        target: VTEX_ORIGIN,
         changeOrigin: true,
-        secure: true,
+        cookieDomainRewrite: { "*": "" },
       },
     },` : "";
 
+  const vtexConstants = isVtex ? `
+const VTEX_ACCOUNT = "${vtexAccount}";
+const VTEX_ENVIRONMENT = "vtexcommercestable";
+const VTEX_DOMAIN = "com.br";
+const VTEX_ORIGIN = \`https://\${VTEX_ACCOUNT}.\${VTEX_ENVIRONMENT}.\${VTEX_DOMAIN}\`;
+` : "";
+
   return `import { cloudflare } from "@cloudflare/vite-plugin";
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import { decoVitePlugin } from "@decocms/start/vite";
@@ -27,7 +36,7 @@ import { defineConfig } from "vite";
 import path from "path";
 
 const srcDir = path.resolve(__dirname, "src");
-
+${vtexConstants}
 export default defineConfig({
   server: {
     allowedHosts: [".decocdn.com"],${vtexProxy}
@@ -106,6 +115,8 @@ export default defineConfig({
   },
   resolve: {
     dedupe: [
+      "@decocms/start",
+      "@decocms/apps",
       "@tanstack/react-start",
       "@tanstack/react-router",
       "@tanstack/react-start-server",

package/scripts/migrate/templates/wrangler.ts

@@ -8,12 +8,14 @@ export function generateWrangler(ctx: MigrationContext): string {
 
   return `{
   "name": "${workerName}-tanstack",
+  // TODO: Set your Cloudflare account_id for deployment
+  // "account_id": "YOUR_ACCOUNT_ID",
   "compatibility_date": "2026-02-14",
   "compatibility_flags": ["nodejs_compat", "no_handle_cross_request_promise_resolution"],
   "main": "./src/worker-entry.ts",
   "workers_dev": true,
   "preview_urls": true,
-  // Uncomment for redirect/AB testing support via KV:
+  // Uncomment and set KV namespace ID for redirect/AB testing:
   // "kv_namespaces": [
   //   { "binding": "SITES_KV", "id": "YOUR_KV_NAMESPACE_ID" }
   // ],

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

@@ -57,7 +57,114 @@ function removeExportConstBlock(src: string, name: string): string {
   return src; // unbalanced braces, don't touch
 }
 
-export function transformDeadCode(content: string): TransformResult {
+const ALL_PLATFORMS = ["vtex", "shopify", "linx", "vnda", "wake", "nuvemshop"];
+
+/**
+ * Strip imports, JSX conditionals, and if-blocks for non-active platforms.
+ * E.g. on a VTEX site, remove all shopify/linx/vnda/wake/nuvemshop branches.
+ */
+function stripNonPlatformCode(src: string, platform: string): { content: string; stripped: boolean } {
+  const deadPlatforms = ALL_PLATFORMS.filter((p) => p !== platform);
+  if (deadPlatforms.length === 0) return { content: src, stripped: false };
+
+  const deadRe = new RegExp(`\\b(${deadPlatforms.join("|")})\\b`, "i");
+  if (!deadRe.test(src)) return { content: src, stripped: false };
+
+  let result = src;
+  const removedIdentifiers: string[] = [];
+
+  // 1. Remove import lines referencing dead platforms
+  const importLineRe = /^import\s+(\w+)\s+from\s+["'][^"']*["'];?\s*$/gm;
+  result = result.replace(importLineRe, (line, ident) => {
+    if (deadRe.test(line)) {
+      removedIdentifiers.push(ident);
+      return "";
+    }
+    return line;
+  });
+
+  // Also handle: import type { X } from "path/platform"
+  const importTypeLineRe = /^import\s+type\s+\{[^}]*\}\s+from\s+["'][^"']*["'];?\s*$/gm;
+  result = result.replace(importTypeLineRe, (line) => {
+    if (deadRe.test(line)) return "";
+    return line;
+  });
+
+  // Handle lazy dynamic imports: const X = lazy(() => import("./platform/Cart"));
+  const lazyImportRe = /^const\s+(\w+)\s*=\s*lazy\(\s*\(\)\s*=>\s*import\(["'][^"']*["']\)\s*\);?\s*$/gm;
+  result = result.replace(lazyImportRe, (line, ident) => {
+    if (deadRe.test(line)) {
+      removedIdentifiers.push(ident);
+      return "";
+    }
+    return line;
+  });
+
+  // 2. Remove JSX conditionals: {platform === "shopify" && (...)} using paren-counting
+  for (const dp of deadPlatforms) {
+    const jsxPatternStr = `\\{\\s*platform\\s*===\\s*["']${dp}["']\\s*&&\\s*\\(`;
+    const jsxPattern = new RegExp(jsxPatternStr);
+    let match: RegExpExecArray | null;
+    while ((match = jsxPattern.exec(result)) !== null) {
+      const start = match.index;
+      // Find the opening paren after &&
+      let pos = result.indexOf("(", match.index + match[0].length - 1);
+      if (pos === -1) break;
+      let depth = 0;
+      for (; pos < result.length; pos++) {
+        if (result[pos] === "(") depth++;
+        else if (result[pos] === ")") {
+          depth--;
+          if (depth === 0) break;
+        }
+      }
+      // pos is at the closing paren. Find closing }
+      let end = pos + 1;
+      while (end < result.length && /\s/.test(result[end])) end++;
+      if (end < result.length && result[end] === "}") end++;
+      // Remove trailing newline
+      if (end < result.length && result[end] === "\n") end++;
+      result = result.slice(0, start) + result.slice(end);
+    }
+  }
+
+  // 3. Remove if-blocks: if (platform === "shopify") { ... }
+  for (const dp of deadPlatforms) {
+    const ifPatternStr = `if\\s*\\(\\s*platform\\s*===\\s*["']${dp}["']\\s*\\)\\s*\\{`;
+    const ifPattern = new RegExp(ifPatternStr);
+    let match: RegExpExecArray | null;
+    while ((match = ifPattern.exec(result)) !== null) {
+      const start = match.index;
+      let pos = result.indexOf("{", match.index);
+      if (pos === -1) break;
+      let depth = 0;
+      for (; pos < result.length; pos++) {
+        if (result[pos] === "{") depth++;
+        else if (result[pos] === "}") {
+          depth--;
+          if (depth === 0) break;
+        }
+      }
+      let end = pos + 1;
+      if (end < result.length && result[end] === "\n") end++;
+      result = result.slice(0, start) + result.slice(end);
+    }
+  }
+
+  // 4. Remove JSX references to removed identifiers: <RemovedIdent ... />
+  for (const ident of removedIdentifiers) {
+    // Self-closing: <Ident ... />
+    const selfClose = new RegExp(`\\s*<${ident}\\b[^>]*/>`, "g");
+    result = result.replace(selfClose, "");
+    // Open/close pair (rare for platform buttons, but handle it)
+    const openClose = new RegExp(`\\s*<${ident}\\b[^>]*>[\\s\\S]*?</${ident}>`, "g");
+    result = result.replace(openClose, "");
+  }
+
+  return { content: result, stripped: result !== src };
+}
+
+export function transformDeadCode(content: string, platform?: string): TransformResult {
   const notes: string[] = [];
   let changed = false;
   let result = content;
@@ -118,9 +225,228 @@ export function transformDeadCode(content: string): TransformResult {
     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.
+  // Remove re-exports of framework-only SEO Preview components
+  const seoPreviewRe = /^export\s*\{[^}]*\}\s*from\s*["'][^"']*_seo[^"']*["'];?\s*$/gm;
+  if (seoPreviewRe.test(result)) {
+    result = result.replace(seoPreviewRe, "");
+    changed = true;
+    notes.push("Removed re-export of _seo/Preview (framework-only component)");
+  }
+
+  // Replace imports of removed framework APIs with inline stubs
+  const removedApis: Array<{ import: RegExp; replacement: string; note: string }> = [
+    {
+      import: /import\s+\{([^}]*)\bgetSegmentFromBag\b([^}]*)\}\s+from\s+["'][^"']*segment["'];?\n?/,
+      replacement: `const getSegmentFromBag = (_ctx: any) => ({ value: {} as any });\n`,
+      note: "Stubbed getSegmentFromBag (Deco bag API removed — uses empty segment)",
+    },
+    // createHttpClient is now provided by ~/lib/http-utils (generated during scaffold)
+    // — no need to remove it here; the import rewrite handles it.
+    {
+      import: /import\s+\{([^}]*)\bfetchSafe\b([^}]*)\}\s+from\s+["'][^"']*["'];?\n?/,
+      replacement: `const fetchSafe = async (url: string | URL | Request, init?: RequestInit) => { const r = await fetch(url, init); if (!r.ok) throw new Error(\`fetchSafe: \${r.status}\`); return r; };\n`,
+      note: "Stubbed fetchSafe (old Deco fetch utility — using native fetch with error check)",
+    },
+    {
+      import: /import\s+\{([^}]*)\bgetISCookiesFromBag\b([^}]*)\}\s+from\s+["'][^"']*intelligentSearch["'];?\n?/,
+      replacement: `const getISCookiesFromBag = (_ctx: any) => ({});\n`,
+      note: "Stubbed getISCookiesFromBag (Deco bag API removed — returns empty cookies)",
+    },
+  ];
+
+  for (const api of removedApis) {
+    if (api.import.test(result)) {
+      const match = result.match(api.import);
+      if (match) {
+        const otherImports = (match[1] + match[2])
+          .split(",")
+          .map((s: string) => s.trim())
+          .filter((s: string) => s && s !== "getSegmentFromBag");
+        let importLine = "";
+        if (otherImports.length > 0) {
+          const fromMatch = match[0].match(/from\s+["']([^"']+)["']/);
+          const fromPath = fromMatch ? fromMatch[1] : "";
+          importLine = `import { ${otherImports.join(", ")} } from "${fromPath}";\n`;
+        }
+        result = result.replace(api.import, importLine + api.replacement);
+        changed = true;
+        notes.push(api.note);
+      }
+    }
+  }
+
+  // Strip code for non-active platforms (e.g. remove shopify/linx imports on VTEX site)
+  if (platform) {
+    const platformResult = stripNonPlatformCode(result, platform);
+    if (platformResult.stripped) {
+      result = platformResult.content;
+      changed = true;
+      notes.push(`Stripped non-${platform} platform code`);
+    }
+
+    // Remove usePlatform() — the hook and all platform prop threading.
+    // On a single-platform site the golden reference removes it entirely:
+    //   - `const platform = usePlatform()` → deleted
+    //   - `{platform === "vtex" && (<X />)}` → `<X />`
+    //   - `platform={platform}` / `platform={usePlatform()}` JSX attrs → deleted
+    //   - `platform: ReturnType<typeof usePlatform>` in types → deleted
+    //   - `platform,` in destructuring / param lists → deleted
+    if (result.includes("usePlatform")) {
+      const before = result;
+
+      // a) Remove `const platform = usePlatform();` declarations
+      result = result.replace(/^\s*const\s+platform\s*=\s*usePlatform\(\);?\s*\n?/gm, "");
+
+      // b) Collapse JSX conditionals for the ACTIVE platform:
+      //    {platform === "vtex" && (<Component .../>)} → <Component .../>
+      //    {platform === "vtex" && <Component .../> }  → <Component .../>
+      const activeJsxParen = new RegExp(
+        `\\{\\s*platform\\s*===\\s*["']${platform}["']\\s*&&\\s*\\(([\\s\\S]*?)\\)\\s*\\}`,
+        "g",
+      );
+      result = result.replace(activeJsxParen, (_m, inner) => inner.trim());
+
+      const activeJsxNoParen = new RegExp(
+        `\\{\\s*platform\\s*===\\s*["']${platform}["']\\s*&&\\s*(<[^{}]*/>)\\s*\\}`,
+        "g",
+      );
+      result = result.replace(activeJsxNoParen, (_m, jsx) => jsx.trim());
+
+      // c) Remove platform JSX attributes: platform={platform}, platform={usePlatform()}
+      result = result.replace(/\s+platform=\{usePlatform\(\)\}/g, "");
+      result = result.replace(/\s+platform=\{platform\}/g, "");
+
+      // d) Remove platform from type definitions / interfaces
+      //    platform: ReturnType<typeof usePlatform>;
+      result = result.replace(/^\s*platform\s*:\s*ReturnType<typeof usePlatform>;?\s*\n?/gm, "");
+      //    platform: Platform;  (when from ~/apps/site.ts)
+      result = result.replace(/^\s*platform\??\s*:\s*Platform;?\s*\n?/gm, "");
+      //    platform?: string;
+      result = result.replace(/^\s*platform\??\s*:\s*string;?\s*\n?/gm, "");
+
+      // e) Remove `platform` from Omit<..., "platform"> → just the base type
+      result = result.replace(/Omit<(\w+),\s*["']platform["']>/g, "$1");
+
+      // f) Clean up remaining references in destructuring and param lists
+      //    { platform, ...rest } → { ...rest } (or just remove the comma'd entry)
+      result = result.replace(/\bplatform\s*,\s*/g, "");
+      result = result.replace(/,\s*platform\b/g, "");
+
+      if (result !== before) {
+        changed = true;
+        notes.push(`Removed usePlatform() — collapsed to ${platform}-only code`);
+      }
+    }
+  }
+
+  // ── Module-scope React hook calls ────────────────────────────────────
+  // In Preact + signals, hooks like useUser()/useCart() can be called at module
+  // scope because they return signals (no component context needed).
+  // In React, hooks MUST be inside components. Detect and move them.
+  //
+  // Pattern: `const { a, b: alias } = useHookName();` at the top level
+  // (not indented, not inside a function body).
+  const moduleScopeHookRe = /^(const\s+\{([^}]+)\}\s*=\s*(use\w+)\(\);?\s*$)/gm;
+  const moduleScopeHooks: Array<{
+    fullMatch: string;
+    vars: string[];
+    hookCall: string;
+    hookName: string;
+  }> = [];
+
+  let hookMatch: RegExpExecArray | null;
+  while ((hookMatch = moduleScopeHookRe.exec(result)) !== null) {
+    const line = hookMatch[1];
+    const destructured = hookMatch[2];
+    const hookName = hookMatch[3];
+
+    // Skip non-React hooks (useAccount from ~/utils/sitename is just a function,
+    // useUI returns signals — both are safe at module scope)
+    const knownUnsafeHooks = ["useUser", "useCart", "useWishlist"];
+    if (!knownUnsafeHooks.includes(hookName)) continue;
+
+    const vars = destructured
+      .split(",")
+      .map((v) => {
+        const trimmed = v.trim();
+        const aliasMatch = trimmed.match(/(\w+)\s*:\s*(\w+)/);
+        return aliasMatch ? aliasMatch[2] : trimmed;
+      })
+      .filter(Boolean);
+
+    moduleScopeHooks.push({
+      fullMatch: line,
+      vars,
+      hookCall: `const { ${destructured.trim()} } = ${hookName}();`,
+      hookName,
+    });
+  }
+
+  if (moduleScopeHooks.length > 0) {
+    for (const hook of moduleScopeHooks) {
+      // Remove the module-scope line
+      result = result.replace(hook.fullMatch + "\n", "");
+      result = result.replace(hook.fullMatch, "");
+
+      // Find exported component functions and locate their body opener.
+      // Arrow: `export const Foo = (...) => {`  — body starts after `=> {`
+      // Function: `export function Foo(...) {`   — body starts after `) {`
+      const insertions: Array<{ index: number; hookCall: string }> = [];
+
+      // Arrow function body openers: "=> {"
+      const arrowBodyRe = /=>\s*\{/g;
+      // Function body openers: line starting with export ... function ... ) {
+      const funcDeclRe = /^export\s+(?:default\s+)?function\s+\w+/gm;
+
+      // Strategy: find all `=> {` and `) {` that follow an export declaration,
+      // then check the body for variable references.
+      const lines = result.split("\n");
+      let inExportDecl = false;
+      let charOffset = 0;
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+
+        // Track exported function/const declarations
+        if (/^export\s+(default\s+)?(function|const)\s+\w+/.test(line)) {
+          inExportDecl = true;
+        }
+
+        if (inExportDecl) {
+          // Look for body opener: `=> {` or `) {` (for function declarations)
+          let bodyOpenerIdx = -1;
+          const arrowMatch = line.match(/=>\s*\{/);
+          const funcMatch = line.match(/\)\s*\{$/);
+
+          if (arrowMatch && arrowMatch.index !== undefined) {
+            bodyOpenerIdx = charOffset + arrowMatch.index + arrowMatch[0].length;
+          } else if (funcMatch && funcMatch.index !== undefined) {
+            bodyOpenerIdx = charOffset + funcMatch.index + funcMatch[0].length;
+          }
+
+          if (bodyOpenerIdx >= 0) {
+            inExportDecl = false;
+            const bodySlice = result.slice(bodyOpenerIdx, bodyOpenerIdx + 3000);
+            const usesVars = hook.vars.some((v) => new RegExp(`\\b${v}\\b`).test(bodySlice));
+            if (usesVars) {
+              insertions.push({ index: bodyOpenerIdx, hookCall: `\n  ${hook.hookCall}` });
+            }
+          }
+        }
+
+        charOffset += line.length + 1; // +1 for \n
+      }
+
+      for (const ins of insertions.reverse()) {
+        result = result.slice(0, ins.index) + ins.hookCall + result.slice(ins.index);
+      }
+
+      if (insertions.length > 0) {
+        changed = true;
+        notes.push(`Moved module-scope ${hook.hookName}() into ${insertions.length} component(s)`);
+      }
+    }
+  }
 
   // Clean up blank lines
   result = result.replace(/\n{3,}/g, "\n\n");

package/scripts/migrate/transforms/deno-isms.ts

@@ -45,6 +45,25 @@ export function transformDenoIsms(content: string): TransformResult {
     notes.push("Replaced @ts-ignore with @ts-expect-error");
   }
 
+  // Remove jsdom/dompurify — these don't work on Cloudflare Workers.
+  // CMS rich-text content is trusted, so sanitization is unnecessary.
+  if (/from\s+["']jsdom["']/.test(result) || /from\s+["']dompurify["']/.test(result)) {
+    result = result.replace(/^import\s+.*from\s+["']jsdom["'];?\s*\n?/gm, "");
+    result = result.replace(/^import\s+.*from\s+["']dompurify["'];?\s*\n?/gm, "");
+    // Replace JSDOM + DOMPurify sanitization pattern with pass-through
+    result = result.replace(
+      /const\s+window\s*=\s*new\s+JSDOM\([^)]*\)\.window;\s*\n\s*const\s+DOMPurifyServer\s*=\s*DOMPurify\(window\);\s*\n\s*const\s+(\w+)\s*=\s*DOMPurifyServer\.sanitize\([^)]+\);/g,
+      "const $1 = text;",
+    );
+    // Simpler pattern: const sanitized = DOMPurify.sanitize(text)
+    result = result.replace(
+      /const\s+(\w+)\s*=\s*DOMPurify(?:Server)?\.sanitize\([^)]+\);/g,
+      "const $1 = text;",
+    );
+    changed = true;
+    notes.push("Stripped jsdom/dompurify — CMS content is trusted on Workers");
+  }
+
   // Remove Deno.* API usages — flag for manual review
   if (result.includes("Deno.")) {
     notes.push("MANUAL: Deno.* API usage found — needs Node.js equivalent");