@decocms/blocks-cli 7.0.0

package/scripts/migrate/transforms/jsx.ts

@@ -0,0 +1,317 @@
+import type { TransformResult } from "../types";
+
+/**
+ * Convert JSX attribute syntax to object literal entries.
+ * e.g. `page={page}` → `page`, `foo={bar.baz}` → `foo: bar.baz`, `label="hi"` → `label: "hi"`
+ */
+function jsxAttrsToObjectEntries(jsxAttrs: string): string {
+  return jsxAttrs
+    .replace(/(\w+)=\{(\1)\}/g, "$1") // shorthand: name={name} → name
+    .replace(/(\w+)=\{([^}]+)\}/g, "$1: $2") // name={expr} → name: expr
+    .replace(/(\w+)="([^"]*)"/g, '$1: "$2"') // name="str" → name: "str"
+    .replace(/(\w+)='([^']*)'/g, "$1: '$2'"); // name='str' → name: 'str'
+}
+
+/**
+ * Transforms Preact JSX patterns to React JSX patterns.
+ *
+ * - class= → className= (in JSX context)
+ * - onInput= → onChange= (React's onChange fires on every keystroke)
+ * - ComponentChildren → React.ReactNode
+ * - JSX.SVGAttributes → React.SVGAttributes
+ * - JSX.GenericEventHandler → React.FormEventHandler / React.EventHandler
+ * - type { JSX } from "preact" → (removed, use React types)
+ */
+export function transformJsx(content: string): TransformResult {
+  const notes: string[] = [];
+  let changed = false;
+  let result = content;
+
+  // class= → className= in JSX attributes
+  // Match class= that's preceded by whitespace and inside a JSX tag
+  if (/(<[a-zA-Z][^>]*?\s)class(\s*=)/.test(result)) {
+    result = result.replace(
+      /(<[a-zA-Z][^>]*?\s)class(\s*=)/g,
+      "$1className$2",
+    );
+    changed = true;
+    notes.push("Replaced class= with className=");
+  }
+
+  // Also handle class= at the start of a line in JSX (multi-line attributes)
+  if (/^(\s+)class(\s*=)/m.test(result)) {
+    result = result.replace(/^(\s+)class(\s*=)/gm, "$1className$2");
+    changed = true;
+  }
+
+  // onInput= → onChange= (React onChange fires on every keystroke, like Preact onInput)
+  if (result.includes("onInput=")) {
+    if (result.includes("onChange=") && result.includes("onInput=")) {
+      // Both exist — remove onInput blocks to avoid duplicate JSX attributes.
+      // onInput is redundant in React since onChange already fires on every keystroke.
+      // Match onInput={...handler...} including multi-line arrow functions
+      result = result.replace(
+        /\s*onInput=\{[^{}]*(?:\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}[^{}]*)*\}/g,
+        ""
+      );
+      changed = true;
+      notes.push("Removed onInput= (redundant with existing onChange= in React)");
+    } else {
+      result = result.replace(/onInput=/g, "onChange=");
+      changed = true;
+      notes.push("Replaced onInput= with onChange=");
+    }
+  }
+
+  // for= → htmlFor= in JSX (label elements)
+  if (/(<(?:label|Label)[^>]*?\s)for(\s*=)/.test(result)) {
+    result = result.replace(
+      /(<(?:label|Label)[^>]*?\s)for(\s*=)/g,
+      "$1htmlFor$2",
+    );
+    changed = true;
+    notes.push("Replaced for= with htmlFor= on label elements");
+  }
+  // Also handle for= at the start of a line in multi-line JSX attributes
+  if (/^\s+for\s*=\s*\{/m.test(result)) {
+    result = result.replace(/^(\s+)for(\s*=\s*\{)/gm, "$1htmlFor$2");
+    changed = true;
+  }
+
+  // ComponentChildren → ReactNode (named import, not React.ReactNode)
+  if (result.includes("ComponentChildren")) {
+    result = result.replace(/\bComponentChildren\b/g, "ReactNode");
+    // Add ReactNode import if not already imported
+    if (
+      !result.match(/\bReactNode\b.*from\s+["']react["']/) &&
+      !result.match(/from\s+["']react["'].*\bReactNode\b/)
+    ) {
+      // Check if there's already a react import we can extend
+      const reactImportMatch = result.match(
+        /^(import\s+(?:type\s+)?\{)([^}]*?)(\}\s+from\s+["']react["'];?)$/m,
+      );
+      if (reactImportMatch) {
+        const [fullMatch, prefix, existing, suffix] = reactImportMatch;
+        const items = existing.trim();
+        result = result.replace(
+          fullMatch,
+          `${prefix}${items ? `${items}, ` : ""}type ReactNode${suffix}`,
+        );
+      } else {
+        result = `import type { ReactNode } from "react";\n${result}`;
+      }
+    }
+    changed = true;
+    notes.push("Replaced ComponentChildren with ReactNode");
+  }
+
+  // JSX.SVGAttributes<SVGSVGElement> → React.SVGAttributes<SVGSVGElement>
+  if (result.includes("JSX.SVGAttributes")) {
+    result = result.replace(/\bJSX\.SVGAttributes/g, "React.SVGAttributes");
+    changed = true;
+    notes.push("Replaced JSX.SVGAttributes with React.SVGAttributes");
+  }
+
+  // JSX.GenericEventHandler<X> → React.FormEventHandler<X>
+  if (result.includes("JSX.GenericEventHandler")) {
+    result = result.replace(
+      /\bJSX\.GenericEventHandler/g,
+      "React.FormEventHandler",
+    );
+    changed = true;
+    notes.push(
+      "Replaced JSX.GenericEventHandler with React.FormEventHandler",
+    );
+  }
+
+  // JSX.HTMLAttributes<X> → React.HTMLAttributes<X>
+  if (result.includes("JSX.HTMLAttributes")) {
+    result = result.replace(
+      /\bJSX\.HTMLAttributes/g,
+      "React.HTMLAttributes",
+    );
+    changed = true;
+  }
+
+  // JSX.IntrinsicElements → React.JSX.IntrinsicElements
+  if (result.includes("JSX.IntrinsicElements")) {
+    result = result.replace(
+      /\bJSX\.IntrinsicElements/g,
+      "React.JSX.IntrinsicElements",
+    );
+    changed = true;
+  }
+
+  // Remove standalone "import type { JSX } from 'preact'" if JSX no longer used
+  // (it was already removed by imports transform, but double check)
+  result = result.replace(
+    /^import\s+type\s+\{\s*JSX\s*\}\s+from\s+["']preact["'];?\s*\n?/gm,
+    "",
+  );
+
+  // tabindex → tabIndex in JSX
+  if (/\btabindex\s*=/.test(result)) {
+    result = result.replace(/\btabindex(\s*=)/g, "tabIndex$1");
+    changed = true;
+    notes.push("Replaced tabindex with tabIndex");
+  }
+
+  // frameBorder → frameBorder (already camelCase, but just in case)
+  // referrerpolicy → referrerPolicy
+  if (result.includes("referrerpolicy=")) {
+    result = result.replace(/referrerpolicy=/g, "referrerPolicy=");
+    changed = true;
+    notes.push("Replaced referrerpolicy with referrerPolicy");
+  }
+
+  // allowFullScreen={true} is fine in React, but allowfullscreen is not
+  if (result.includes("allowfullscreen")) {
+    result = result.replace(/\ballowfullscreen\b/g, "allowFullScreen");
+    changed = true;
+  }
+
+  // `class` as a prop name in destructuring patterns → `className`
+  // Matches: { class: someVar } or { class, } or { ..., class: x } in function params
+  if (/[{,]\s*class\s*[,}:]/.test(result)) {
+    // class: varName → className: varName (anywhere in destructuring)
+    result = result.replace(
+      /([{,]\s*)class(\s*:\s*\w+)/g,
+      "$1className$2",
+    );
+    // class, → className, (shorthand, anywhere in destructuring)
+    result = result.replace(
+      /([{,]\s*)class(\s*[,}])/g,
+      "$1className$2",
+    );
+    changed = true;
+    notes.push("Replaced 'class' prop in destructuring with 'className'");
+  }
+
+  // `class` in interface/type definitions → className
+  // Matches: class?: string; or class: string;
+  if (/^\s+class\??\s*:/m.test(result)) {
+    result = result.replace(/^(\s+)class(\??\s*:)/gm, "$1className$2");
+    changed = true;
+    notes.push("Replaced 'class' in interface definitions with 'className'");
+  }
+
+  // Remove `alt` prop from non-img elements (<a>, <iframe>, <div>, etc.)
+  // In React, `alt` is only valid on <img>, <input type="image">, <area>
+  const altOnNonImgRegex = /(<(?:a|iframe|div|span|button|section)\s[^>]*?)\s+alt=(?:\{[^}]*\}|"[^"]*"|'[^']*')/g;
+  if (altOnNonImgRegex.test(result)) {
+    result = result.replace(
+      /(<(?:a|iframe|div|span|button|section)\s[^>]*?)\s+alt=(?:\{[^}]*\}|"[^"]*"|'[^']*')/g,
+      "$1",
+    );
+    changed = true;
+    notes.push("Removed invalid alt prop from non-img elements");
+  }
+
+  // Remove `type` prop from non-form elements (<span>, <div>, etc.)
+  // In React, `type` is only valid on <input>, <button>, <select>, <textarea>, <script>, <style>, <link>
+  const typeOnInvalidRegex = /(<(?:span|div|p|section|header|footer|nav|main|article|aside)\s[^>]*?)\s+type=(?:\{[^}]*\}|"[^"]*"|'[^']*')/g;
+  if (typeOnInvalidRegex.test(result)) {
+    result = result.replace(
+      /(<(?:span|div|p|section|header|footer|nav|main|article|aside)\s[^>]*?)\s+type=(?:\{[^}]*\}|"[^"]*"|'[^']*')/g,
+      "$1",
+    );
+    changed = true;
+    notes.push("Removed invalid type prop from non-form elements");
+  }
+
+  // setTimeout/setInterval return type: use window.setTimeout for correct typing
+  // In Node/CF Workers, setTimeout returns Timeout object, not number
+  // window.setTimeout always returns number
+  if (/\bsetTimeout\b/.test(result) && /:\s*number/.test(result)) {
+    // Only replace bare setTimeout when it's assigned to a typed variable
+    result = result.replace(
+      /\b(?<!window\.)setTimeout\(/g,
+      "window.setTimeout(",
+    );
+    result = result.replace(
+      /\b(?<!window\.)setInterval\(/g,
+      "window.setInterval(",
+    );
+    result = result.replace(
+      /\b(?<!window\.)clearTimeout\(/g,
+      "window.clearTimeout(",
+    );
+    result = result.replace(
+      /\b(?<!window\.)clearInterval\(/g,
+      "window.clearInterval(",
+    );
+    changed = true;
+    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)");
+  }
+
+  // Replace <x.Component {...x.props} /> with <SectionRenderer section={x} />
+  // In TanStack Start, nested sections have Component as a string key, not a function.
+  // SectionRenderer from @decocms/start/hooks handles the lazy registry lookup.
+  //
+  // Gate on ANY variant of the .Component/.props pattern (simple, extra props, or multi-line).
+  const sectionPatternGate = /\.\s*Component[\s\n]+\{\.\.\.(\w+)\.props\}/;
+  if (sectionPatternGate.test(result)) {
+    // 1. Simple: <x.Component {...x.props} />
+    result = result.replace(
+      /<(\w+)\.Component\s+\{\.\.\.(\w+)\.props\}\s*\/>/g,
+      (_, v1) => `<SectionRenderer section={${v1}} />`,
+    );
+
+    // 2. Extra props: <x.Component {...x.props} page={page} />
+    //    Convert JSX attrs to object entries: name={expr} → name: expr
+    result = result.replace(
+      /<(\w+)\.Component\s+\{\.\.\.(\w+)\.props\}\s+([^/]+?)\s*\/>/g,
+      (_, varName, _v2, extraJsx) => {
+        const objEntries = jsxAttrsToObjectEntries(extraJsx.trim());
+        return `<SectionRenderer section={{ ...${varName}, props: { ...${varName}.props, ${objEntries} } }} />`;
+      },
+    );
+
+    // 3. Multi-line: <x.Component\n  {...x.props}\n/>
+    result = result.replace(
+      /<(\w+)\.Component\s*\n\s*\{\.\.\.(\w+)\.props\}\s*\n\s*\/>/g,
+      (_, v1) => `<SectionRenderer section={${v1}} />`,
+    );
+
+    // 4. Multi-line with extra props: <x.Component\n {...x.props}\n extra={val}\n/>
+    result = result.replace(
+      /<(\w+)\.Component\s*\n\s*\{\.\.\.(\w+)\.props\}\s*\n\s*([^/]+?)\s*\n\s*\/>/g,
+      (_, varName, _v2, extraJsx) => {
+        const objEntries = jsxAttrsToObjectEntries(extraJsx.trim());
+        return `<SectionRenderer section={{ ...${varName}, props: { ...${varName}.props, ${objEntries} } }} />`;
+      },
+    );
+
+    if (!result.match(/^import\s.*SectionRenderer/m)) {
+      const hooksImportRe = /^import\s+\{([^}]*)\}\s+from\s+["']@decocms\/start\/hooks["'];?$/m;
+      const hooksMatch = result.match(hooksImportRe);
+      if (hooksMatch) {
+        result = result.replace(hooksImportRe, `import { ${hooksMatch[1].trim()}, SectionRenderer } from "@decocms/start/hooks";`);
+      } else {
+        result = `import { SectionRenderer } from "@decocms/start/hooks";\n${result}`;
+      }
+    }
+    changed = true;
+    notes.push("Replaced .Component/.props section pattern with SectionRenderer");
+  }
+
+  // Ensure React import exists if we introduced React.* references
+  if (
+    (result.includes("React.") || result.includes("React,")) &&
+    !result.match(/^import\s.*React/m)
+  ) {
+    result = `import React from "react";\n${result}`;
+    changed = true;
+  }
+
+  return { content: result, changed, notes };
+}

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

@@ -0,0 +1,210 @@
+import type {
+	SectionConventionSets,
+} from "../config";
+import { resolveSectionConventions } from "../config";
+import type { SectionMeta, TransformResult } from "../types";
+
+/**
+ * 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.
+ *
+ * The set of section *names* that get hints applied is configurable
+ * via `.deco-migrate.config.json` (see `migrate/config.ts`). The exported
+ * `transformSectionConventions` keeps a back-compat signature using the
+ * baked-in defaults; new callers should prefer
+ * `createSectionConventionsTransform(sets)` so config can drive the lists.
+ */
+
+function getSectionBasename(filePath: string): string {
+	return filePath.split("/").pop()?.replace(/\.\w+$/, "") || "";
+}
+
+/**
+ * Build a `transformSectionConventions` closure bound to the given
+ * resolved sets. This is the preferred entry point — the caller (usually
+ * `phase-transform`) loads config once and passes the sets in.
+ */
+export function createSectionConventionsTransform(
+	sets: SectionConventionSets,
+) {
+	return (
+		content: string,
+		sectionMeta: SectionMeta | undefined,
+	): TransformResult => transformWithSets(content, sectionMeta, sets);
+}
+
+/** Default-configured transform. Uses the baked-in defaults from `config.ts`. */
+const defaultSets = resolveSectionConventions(null);
+
+export function transformSectionConventions(
+	content: string,
+	sectionMeta: SectionMeta | undefined,
+): TransformResult {
+	return transformWithSets(content, sectionMeta, defaultSets);
+}
+
+function transformWithSets(
+	content: string,
+	sectionMeta: SectionMeta | undefined,
+	sets: SectionConventionSets,
+): TransformResult {
+	if (!sectionMeta) {
+		return { content, changed: false, notes: [] };
+	}
+
+	const notes: string[] = [];
+	let result = content;
+	let changed = false;
+	const basename = getSectionBasename(sectionMeta.path);
+
+	// 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;
+		}
+		// Header in golden does NOT have layout=true; only footer+theme do
+		if (
+			(sectionMeta.isFooter || sectionMeta.isTheme) &&
+			!result.includes("export const layout")
+		) {
+			result += "export const layout = true;\n";
+			notes.push("Added: export const layout = true");
+			changed = true;
+		}
+	}
+
+	// Known eager+sync sections (non-layout)
+	if (sets.eagerSync.has(basename)) {
+		if (!result.includes("export const eager")) {
+			result += "\nexport const eager = true;\n";
+			notes.push(`Added: export const eager = true (${basename})`);
+			changed = true;
+		}
+		if (!result.includes("export const sync")) {
+			result += "export const sync = true;\n";
+			notes.push(`Added: export const sync = true (${basename})`);
+			changed = true;
+		}
+	}
+
+	// Known sync-only sections
+	if (sets.sync.has(basename) && !result.includes("export const sync")) {
+		result += "\nexport const sync = true;\n";
+		notes.push(`Added: export const sync = true (${basename})`);
+		changed = true;
+	}
+
+	// Listing cache sections
+	if (
+		sets.listingCache.has(basename) &&
+		!result.includes("export const cache")
+	) {
+		result += '\nexport const cache = "listing";\n';
+		notes.push(`Added: export const cache = "listing" (${basename})`);
+		changed = true;
+	}
+
+	// Static cache sections
+	if (
+		sets.staticCache.has(basename) &&
+		!result.includes("export const cache")
+	) {
+		result += '\nexport const cache = "static";\n';
+		notes.push(`Added: export const cache = "static" (${basename})`);
+		changed = true;
+	}
+
+	// Generic: listing sections not already matched above
+	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;
+	}
+
+	// Sections that render nested Section children need sync so they're in
+	// the syncComponents registry (SectionRenderer resolves the string key).
+	const hasNestedSections =
+		/children:\s*Section\b/.test(result) ||
+		/fallback:\s*Section\b/.test(result);
+	if (hasNestedSections && !result.includes("export const sync")) {
+		result += "\nexport const sync = true;\n";
+		notes.push(
+			"Added: export const sync = true (renders nested Section children)",
+		);
+		changed = true;
+	}
+
+	// Re-export sections that wrap PDP/nested content need sync too.
+	// Detect: file is a re-export AND the target component renders nested Sections
+	const isReExport = /^export\s+\{[^}]*default[^}]*\}\s+from\s+/.test(
+		result.trim(),
+	);
+	if (
+		isReExport &&
+		(basename === "MountedPDP" || basename === "NotFoundChallenge")
+	) {
+		if (!result.includes("export const sync")) {
+			result += "\nexport const sync = true;\n";
+			notes.push(`Added: export const sync = true (re-export: ${basename})`);
+			changed = true;
+		}
+	}
+
+	// Don't add LoadingFallback re-exports to thin section files —
+	// we can't guarantee the target component exports it.
+	// Instead, if it's a listing section, a generic skeleton will be added below.
+
+	// 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.includes("LoadingFallback")
+	) {
+		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 };
+}