@decocms/blocks-cli 7.0.0

package/scripts/migrate/templates/setup.ts

@@ -0,0 +1,148 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext } from "../types";
+
+function discoverFonts(ctx: MigrationContext): string[] {
+  // Check public/fonts (post-move)
+  const fontsDir = path.join(ctx.sourceDir, "public", "fonts");
+  if (fs.existsSync(fontsDir)) return scanFontDir(fontsDir);
+
+  // Check static/fonts (pre-move)
+  const staticFonts = path.join(ctx.sourceDir, "static", "fonts");
+  if (fs.existsSync(staticFonts)) return scanFontDir(staticFonts);
+
+  // Check static-*/fonts/ (multi-brand sites like casaevideo)
+  try {
+    const entries = fs.readdirSync(ctx.sourceDir, { withFileTypes: true });
+    for (const e of entries) {
+      if (e.isDirectory() && e.name.startsWith("static-")) {
+        const brandFonts = path.join(ctx.sourceDir, e.name, "fonts");
+        if (fs.existsSync(brandFonts)) return scanFontDir(brandFonts);
+      }
+    }
+  } catch { /* ignore */ }
+
+  return [];
+}
+
+function scanFontDir(dir: string): string[] {
+  try {
+    const allFonts = fs.readdirSync(dir)
+      .filter((f) => /\.(woff2?|ttf|otf|eot)$/i.test(f));
+
+    // Only preload the most critical fonts (Regular + Bold of the primary family).
+    // All fonts are still available via @font-face in CSS — this just controls
+    // which ones get <link rel="preload"> for faster rendering.
+    const critical = allFonts.filter((f) =>
+      /[-_](Regular|Bold)\.(woff2?|ttf|otf)$/i.test(f) &&
+      !/Italic/i.test(f)
+    );
+
+    // If we found critical weights, use those; otherwise take first 2
+    const toPreload = critical.length > 0
+      ? critical.slice(0, 4) // max 4 preloads
+      : allFonts.slice(0, 2);
+
+    return toPreload.map((f) => `/fonts/${f}`);
+  } catch {
+    return [];
+  }
+}
+
+function hasMatchers(ctx: MigrationContext): boolean {
+  const matchersDir = path.join(ctx.sourceDir, "matchers");
+  if (fs.existsSync(matchersDir)) return true;
+  const srcMatchers = path.join(ctx.sourceDir, "src", "matchers");
+  return fs.existsSync(srcMatchers);
+}
+
+export function generateSetup(ctx: MigrationContext): string {
+  const isVtex = ctx.platform === "vtex";
+  const siteName = ctx.siteName;
+  const fonts = discoverFonts(ctx);
+  const hasLocationMatcher = hasMatchers(ctx);
+
+  // Build productionOrigins from known domain patterns
+  const origins: string[] = [];
+  // Check if source has productionOrigins in existing setup files
+  const possibleDomains = [
+    `www.${siteName}.com.br`,
+    `${siteName}.com.br`,
+  ];
+  for (const domain of possibleDomains) {
+    origins.push(`"https://${domain}"`);
+  }
+
+  const fontEntries = fonts.length > 0
+    ? fonts.map((f) => `"${f}"`).join(", ")
+    : "";
+
+  return `/**
+ * Site setup — orchestrator that wires framework, commerce, and sections.
+ *
+ * Actual logic lives in focused modules:
+ *   setup/commerce-loaders.ts  — COMMERCE_LOADERS map (VTEX + site data fetchers)
+ *   setup/section-loaders.ts   — registerSectionLoaders (per-section prop enrichment)
+ *
+ * Section metadata (eager, sync, layout, cache, LoadingFallback) is declared
+ * in each section file and auto-extracted by generate-sections.ts.
+ */
+
+import "./cache-config";
+
+import {
+  registerCommerceLoaders,
+  applySectionConventions,
+} from "@decocms/start/cms";
+import { createSiteSetup } from "@decocms/start/setup";
+import { setInvokeLoaders } from "@decocms/start/admin";${isVtex ? `
+import { createInstrumentedFetch } from "@decocms/start/sdk/instrumentedFetch";
+import { initVtexFromBlocks, setVtexFetch } from "@decocms/apps/vtex";` : ""}${hasLocationMatcher ? `
+import { registerLocationMatcher } from "./matchers/location";` : ""}
+import { blocks as generatedBlocks } from "./server/cms/blocks.gen";
+import { sectionMeta, syncComponents, loadingFallbacks } from "./server/cms/sections.gen";
+import { PreviewProviders } from "@decocms/start/hooks";
+// @ts-ignore Vite ?url import
+import appCss from "./styles/app.css?url";
+
+import { COMMERCE_LOADERS } from "./setup/commerce-loaders";
+import "./setup/section-loaders";
+
+// -- Framework setup --
+createSiteSetup({
+  sections: import.meta.glob("./sections/**/*.tsx") as Record<string, () => Promise<any>>,
+  blocks: generatedBlocks,
+  meta: () => import("./server/admin/meta.gen.json").then((m) => m.default),
+  css: appCss,
+  fonts: [${fontEntries}],
+  productionOrigins: [
+    ${origins.join(",\n    ")},
+  ],
+  previewWrapper: PreviewProviders,${hasLocationMatcher ? `
+  customMatchers: [registerLocationMatcher],` : ""}${isVtex ? `
+  initPlatform: (blocks) => initVtexFromBlocks(blocks),` : ""}
+  onResolveError: (error, resolveType, context) => {
+    console.error(\`[CMS-DEBUG] \${context} "\${resolveType}" failed:\`, error);
+  },
+  onDanglingReference: (resolveType) => {
+    console.warn(\`[CMS-DEBUG] Dangling reference: \${resolveType}\`);
+    return null;
+  },
+});
+${isVtex ? `
+// -- VTEX wiring --
+setVtexFetch(createInstrumentedFetch("vtex"));
+` : ""}
+// -- Convention-driven section registration --
+applySectionConventions({
+  meta: sectionMeta,
+  syncComponents,
+  loadingFallbacks,
+  sectionGlob: import.meta.glob("./sections/**/*.tsx") as Record<string, () => Promise<any>>,
+});
+
+// -- Commerce + invoke --
+registerCommerceLoaders(COMMERCE_LOADERS);
+setInvokeLoaders(() => COMMERCE_LOADERS);
+`;
+}

package/scripts/migrate/templates/tsconfig.ts

@@ -0,0 +1,21 @@
+export function generateTsconfig(): string {
+  const config = {
+    compilerOptions: {
+      jsx: "react-jsx",
+      moduleResolution: "bundler",
+      module: "ESNext",
+      target: "ES2022",
+      skipLibCheck: true,
+      strictNullChecks: true,
+      forceConsistentCasingInFileNames: true,
+      types: ["vite/client"],
+      baseUrl: ".",
+      paths: {
+        "~/*": ["./src/*"],
+      },
+    },
+    include: ["src/**/*", "vite.config.ts"],
+  };
+
+  return JSON.stringify(config, null, 2) + "\n";
+}

package/scripts/migrate/templates/types-gen.ts

@@ -0,0 +1,174 @@
+import type { MigrationContext } from "../types";
+
+export function generateTypeFiles(ctx: MigrationContext): Record<string, string> {
+  const files: Record<string, string> = {};
+
+  // src/types/widgets.ts is no longer generated — the framework owns these
+  // string aliases (`ImageWidget`, `HTMLWidget`, …) at
+  // `@decocms/start/types/widgets`, and `transforms/imports.ts` rewrites
+  // `apps/admin/widgets.ts` directly to that path. Schema generation
+  // works the same way: the generator matches by type *text*, not module
+  // identity (see scripts/generate-schema.ts:WIDGET_TYPE_FORMATS).
+
+  files["src/types/deco.ts"] = `export type SectionProps<T extends (...args: any[]) => any> = Awaited<
+  ReturnType<T>
+>;
+
+export type Resolved<T = any> = T;
+
+export type Section = any;
+
+export type Block = any;
+
+export type LoadingFallbackProps = {
+  height?: number;
+};
+
+export function asResolved<T>(value: T): T {
+  return value;
+}
+
+export function isDeferred(value: unknown): boolean {
+  return false;
+}
+
+export const context = {
+  isDeploy: false,
+  platform: "tanstack-start" as const,
+  site: "${ctx.siteName}",
+  siteId: 0,
+};
+
+export function redirect(_url: string, _status?: number): never {
+  throw new Error("redirect is not supported in TanStack Start -- use router navigation instead");
+}
+`;
+
+  files["src/types/commerce-app.ts"] = `export type AppContext = {
+  device: "mobile" | "desktop" | "tablet";
+};
+`;
+
+  // Compat shim for apps/website/loaders/extension.ts
+  files["src/types/website.ts"] = `export type ExtensionOf<T = any> = T;
+`;
+
+  if (ctx.platform === "vtex") {
+    const vtexAccount = ctx.vtexAccount || ctx.siteName;
+    files["src/types/vtex-app.ts"] = `export interface VtexConfig {
+  account: string;
+  publicUrl?: string;
+}
+
+export interface AppInvoke {
+  vtex: {
+    loaders: {
+      user: (props: Record<string, unknown>) => Promise<any>;
+      address: { list: (props: Record<string, unknown>) => Promise<any> };
+      payments: { userPayments: (props: Record<string, unknown>) => Promise<any> };
+      intelligentSearch: {
+        productList: (props: any) => Promise<any>;
+        productListingPage: (props: any) => Promise<any>;
+      };
+      [key: string]: any;
+    };
+    actions: {
+      payments: { delete: (props: { id: string }) => Promise<any> };
+      [key: string]: any;
+    };
+    [key: string]: any;
+  };
+  site: {
+    loaders: {
+      Wishlist: Record<string, (props: any) => Promise<any>>;
+      [key: string]: any;
+    };
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+export type AppContext = {
+  device: "mobile" | "desktop" | "tablet";
+  platform: "vtex";
+  account: string;
+  invoke: AppInvoke;
+  [key: string]: unknown;
+};
+
+export type LegacyAppContext = AppContext;
+`;
+
+    files["src/types/vtex-loaders.ts"] = `import type { Product, ProductListingPage } from "@decocms/apps/commerce/types";
+
+export interface ProductListProps {
+  page: ProductListingPage | null;
+}
+
+export interface ProductDetailsProps {
+  page: {
+    product: Product;
+    seo?: { title?: string; description?: string; canonical?: string };
+  } | null;
+}
+
+export interface SearchProps {
+  query?: string;
+  page?: number;
+  sort?: string;
+  filters?: Record<string, string>;
+}
+
+export type LabelledFuzzy = "disabled" | "automatic" | "always";
+
+export function mapLabelledFuzzyToFuzzy(fuzzy: LabelledFuzzy): string {
+  const mapping: Record<LabelledFuzzy, string> = { disabled: "0", automatic: "auto", always: "1" };
+  return mapping[fuzzy] ?? "0";
+}
+
+/** Props type compatible with intelligentSearch/productListingPage loader */
+export interface PLPProps {
+  query?: string;
+  page?: number;
+  count?: number;
+  sort?: string;
+  selectedFacets?: Array<{ key: string; value: string }>;
+  fuzzy?: LabelledFuzzy;
+  hideUnavailableItems?: boolean;
+  [key: string]: unknown;
+}
+`;
+
+    files["src/types/vtex-actions.ts"] = `export interface UserMutation {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  document?: string;
+  phone?: string;
+  gender?: string;
+  birthDate?: string;
+  corporateName?: string;
+  corporateDocument?: string;
+  stateRegistration?: string;
+  isCorporate?: boolean;
+}
+
+export interface AddressMutation {
+  addressName?: string;
+  addressType?: string;
+  postalCode?: string;
+  street?: string;
+  number?: string;
+  complement?: string;
+  neighborhood?: string;
+  city?: string;
+  state?: string;
+  country?: string;
+  receiverName?: string;
+  reference?: string;
+}
+`;
+  }
+
+  return files;
+}

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

@@ -0,0 +1,144 @@
+import type { MigrationContext } from "../types";
+
+export function generateUiComponents(_ctx: MigrationContext): Record<string, string> {
+  const files: Record<string, string> = {};
+
+  files["src/components/ui/Image.tsx"] = `export {
+  Image as default,
+  Image,
+  getOptimizedMediaUrl,
+  getSrcSet,
+  registerImageCdnDomain,
+  getImageCdnDomain,
+  FACTORS,
+  type ImageProps,
+  type FitOptions,
+} from "@decocms/apps/commerce/components/Image";
+`;
+
+  files["src/components/ui/Picture.tsx"] = `import type { ReactNode } from "react";
+import {
+  Image,
+  getSrcSet,
+  type FitOptions,
+  type ImageProps,
+} from "@decocms/apps/commerce/components/Image";
+
+export interface PictureSourceProps {
+  src: string;
+  width: number;
+  height?: number;
+  media: string;
+  fit?: FitOptions;
+  sizes?: string;
+}
+
+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,
+  width,
+  height,
+  fit = "cover",
+  preload,
+  children,
+  ...rest
+}: PictureProps & { children?: ReactNode }) {
+  return (
+    <picture>
+      {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>
+  );
+}
+`;
+
+  files["src/components/ui/Video.tsx"] = `interface Props {
+  src: string;
+  width?: number;
+  height?: number;
+  autoPlay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  controls?: boolean;
+  className?: string;
+  loading?: "lazy" | "eager";
+  poster?: string;
+}
+
+export default function Video({
+  src,
+  width,
+  height,
+  autoPlay = true,
+  muted = true,
+  loop = true,
+  playsInline = true,
+  controls = false,
+  className,
+  poster,
+}: Props) {
+  return (
+    <video
+      src={src}
+      width={width}
+      height={height}
+      autoPlay={autoPlay}
+      muted={muted}
+      loop={loop}
+      playsInline={playsInline}
+      controls={controls}
+      className={className}
+      poster={poster}
+    />
+  );
+}
+`;
+
+  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

@@ -0,0 +1,101 @@
+import type { MigrationContext } from "../types";
+
+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: VTEX_ORIGIN,
+        changeOrigin: true,
+        cookieDomainRewrite: { "*": "" },
+      },
+      "/checkout": {
+        target: VTEX_ORIGIN,
+        changeOrigin: 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";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import path from "path";
+
+const srcDir = path.resolve(__dirname, "src");
+${vtexConstants}
+export default defineConfig({
+  server: {
+    allowedHosts: [".decocdn.com"],${vtexProxy}
+  },
+  plugins: [
+    cloudflare({ viteEnvironment: { name: "ssr" } }),
+    tanstackStart({ server: { entry: "server" } }),
+    react({
+      babel: {
+        plugins: [
+          ["babel-plugin-react-compiler", { target: "19" }],
+        ],
+      },
+    }),
+    tailwindcss(),
+    decoVitePlugin(),
+  ],
+  build: {
+    sourcemap: "hidden",
+    rollupOptions: {
+      onLog(level, log, handler) {
+        if (
+          log.code === "PLUGIN_WARNING" &&
+          log.plugin === "vite:reporter" &&
+          log.message?.includes("dynamic import will not move module")
+        ) {
+          return;
+        }
+        handler(level, log);
+      },
+    },
+  },
+  define: {
+    "process.env.DECO_SITE_NAME": JSON.stringify(
+      process.env.DECO_SITE_NAME || "${ctx.siteName}"
+    ),
+  },
+  esbuild: {
+    jsx: "automatic",
+    jsxImportSource: "react",
+  },
+  resolve: {
+    dedupe: [
+      "@decocms/start",
+      "@decocms/apps",
+      "@tanstack/react-start",
+      "@tanstack/react-router",
+      "@tanstack/react-start-server",
+      "@tanstack/start-server-core",
+      "@tanstack/start-client-core",
+      "@tanstack/start-plugin-core",
+      "@tanstack/start-storage-context",
+      "react",
+      "react-dom",
+    ],
+    alias: {
+      "~": srcDir,
+    },
+  },
+});
+`;
+}