@decocms/blocks-cli 7.0.0

package/scripts/migrate/templates/routes.ts

@@ -0,0 +1,237 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { MigrationContext } from "../types";
+
+function discoverFonts(ctx: MigrationContext): string[] {
+  const fontsDir = path.join(ctx.sourceDir, "public", "fonts");
+  if (!fs.existsSync(fontsDir)) {
+    const staticFonts = path.join(ctx.sourceDir, "static", "fonts");
+    if (!fs.existsSync(staticFonts)) return [];
+    return scanFontDir(staticFonts);
+  }
+  return scanFontDir(fontsDir);
+}
+
+function scanFontDir(dir: string): string[] {
+  try {
+    return fs.readdirSync(dir)
+      .filter((f) => /\.(woff2)$/i.test(f))
+      .map((f) => `/fonts/${f}`);
+  } catch {
+    return [];
+  }
+}
+
+export function generateRoutes(
+  ctx: MigrationContext,
+): Record<string, string> {
+  const siteName = ctx.siteName;
+  const siteTitle = siteName.charAt(0).toUpperCase() + siteName.slice(1);
+  const vtexAccount = ctx.vtexAccount || siteName;
+
+  return {
+    "src/routes/__root.tsx": generateRoot(ctx, siteTitle, vtexAccount),
+    "src/routes/index.tsx": generateIndex(ctx, siteTitle),
+    "src/routes/$.tsx": generateCatchAll(ctx, siteTitle),
+    "src/routes/deco/meta.ts": generateDecoMeta(),
+    "src/routes/deco/invoke.$.ts": generateDecoInvoke(),
+    "src/routes/deco/render.ts": generateDecoRender(),
+  };
+}
+
+function generateRoot(ctx: MigrationContext, siteTitle: string, vtexAccount: string): string {
+  const fonts = discoverFonts(ctx);
+  const isVtex = ctx.platform === "vtex";
+  const deployedSiteName = `${ctx.siteName}-tanstack`;
+
+  // Build preconnect list based on platform
+  const preconnects: string[] = [];
+  preconnects.push(`      { rel: "preconnect", href: "https://decoims.com", crossOrigin: "anonymous" as const },`);
+  if (isVtex) {
+    preconnects.push(`      { rel: "preconnect", href: "https://${vtexAccount}.vtexassets.com", crossOrigin: "anonymous" as const },`);
+  }
+
+  // Font preloads
+  const fontPreloads = fonts.map((f) =>
+    `      { rel: "preload", href: "${f}", as: "font", type: "font/woff2", crossOrigin: "anonymous" as const },`
+  );
+
+  // DNS prefetch for common third-party services
+  const dnsPrefetch: string[] = [];
+  if (isVtex) {
+    dnsPrefetch.push(`      { rel: "dns-prefetch", href: "https://sp.vtex.com" },`);
+  }
+
+  return `import { createRootRoute } from "@tanstack/react-router";
+import { DecoRootLayout } from "@decocms/start/hooks";
+// @ts-ignore Vite ?url import
+import appCss from "../styles/app.css?url";
+
+// MIGRATION TODO: customize description, OG image, and locale for ${siteTitle}.
+// The migration scaffold leaves a generic default so it never falls through;
+// CMS \`Site.seo\` overrides this once block resolution kicks in.
+const DEFAULT_DESCRIPTION = "${siteTitle}";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "${siteTitle}" },
+      { name: "description", content: DEFAULT_DESCRIPTION },
+      { property: "og:site_name", content: "${siteTitle}" },
+      { property: "og:locale", content: "pt_BR" },
+    ],
+    links: [
+${preconnects.join("\n")}
+${fontPreloads.join("\n")}
+      { rel: "stylesheet", href: appCss },
+      { rel: "icon", href: "/favicon.ico" },
+${dnsPrefetch.join("\n")}
+    ],
+  }),
+  component: RootLayout,
+});
+
+function RootLayout() {
+  return (
+    <DecoRootLayout
+      lang="pt-BR"
+      siteName="${deployedSiteName}"${isVtex ? `
+      account="${vtexAccount}"` : ""}
+    />
+  );
+}
+`;
+}
+
+function generateIndex(ctx: MigrationContext, siteTitle: string): string {
+  return `import { createFileRoute } from "@tanstack/react-router";
+import { cmsHomeRouteConfig, deferredSectionLoader } from "@decocms/start/routes";
+import { DecoPageRenderer } from "@decocms/start/hooks";
+
+// MIGRATION TODO: customize defaultTitle / defaultDescription / fallback
+// copy below for ${siteTitle}. CMS \`Site.seo\` overrides these once block
+// resolution kicks in, so leaving the migration scaffold defaults is safe
+// but visible in pre-block-resolution states.
+export const Route = createFileRoute("/")({
+  ...cmsHomeRouteConfig({
+    defaultTitle: "${siteTitle}",
+    defaultDescription: "${siteTitle}",
+    siteName: "${siteTitle}",
+  }),
+  component: HomePage,
+});
+
+function HomePage() {
+  const data = Route.useLoaderData() as Record<string, any> | null;
+
+  if (!data) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">${siteTitle}</h1>
+          <p className="text-sm text-base-content/40 mt-2">No CMS page registered for /</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <DecoPageRenderer
+      sections={data.resolvedSections ?? []}
+      deferredSections={data.deferredSections ?? []}
+      deferredPromises={data.deferredPromises}
+      pagePath={data.pagePath}
+      pageUrl={data.pageUrl}
+      loadDeferredSectionFn={deferredSectionLoader}
+    />
+  );
+}
+`;
+}
+
+function generateCatchAll(ctx: MigrationContext, siteTitle: string): string {
+  return `import { createFileRoute } from "@tanstack/react-router";
+import { cmsRouteConfig, deferredSectionLoader } from "@decocms/start/routes";
+import { DecoPageRenderer } from "@decocms/start/hooks";
+
+// MIGRATION TODO: customize defaultTitle / defaultDescription for ${siteTitle}
+// (CMS \`Site.seo\` overrides these per-page once block resolution kicks in).
+const routeConfig = cmsRouteConfig({
+  siteName: "${siteTitle}",
+  defaultTitle: "${siteTitle}",
+  defaultDescription: "${siteTitle}",
+  ignoreSearchParams: ["skuId"],
+});
+
+export const Route = createFileRoute("/$")({
+  ...routeConfig,
+  component: CmsPage,
+  notFoundComponent: NotFoundPage,
+});
+
+function CmsPage() {
+  const data = Route.useLoaderData() as Record<string, any> | null;
+  if (!data) return <NotFoundPage />;
+
+  return (
+    <DecoPageRenderer
+      sections={data.resolvedSections ?? []}
+      deferredSections={data.deferredSections ?? []}
+      deferredPromises={data.deferredPromises}
+      pagePath={data.pagePath}
+      pageUrl={data.pageUrl}
+      loadDeferredSectionFn={deferredSectionLoader}
+    />
+  );
+}
+
+function PendingPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <span className="loading loading-ring loading-xl" />
+    </div>
+  );
+}
+
+function NotFoundPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-base-content/20 mb-4">404</h1>
+        <h2 className="text-2xl font-bold mb-2">Page Not Found</h2>
+        <p className="text-base-content/60 mb-6">No CMS page block matches this URL.</p>
+        <a href="/" className="btn btn-primary">
+          Go Home
+        </a>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function generateDecoMeta(): string {
+  return `import { createFileRoute } from "@tanstack/react-router";
+import { decoMetaRoute } from "@decocms/start/routes";
+
+export const Route = createFileRoute("/deco/meta")(decoMetaRoute);
+`;
+}
+
+function generateDecoInvoke(): string {
+  return `import { createFileRoute } from "@tanstack/react-router";
+import { decoInvokeRoute } from "@decocms/start/routes";
+
+export const Route = createFileRoute("/deco/invoke/$")(decoInvokeRoute);
+`;
+}
+
+function generateDecoRender(): string {
+  return `import { createFileRoute } from "@tanstack/react-router";
+import { decoRenderRoute } from "@decocms/start/routes";
+
+export const Route = createFileRoute("/deco/render")(decoRenderRoute);
+`;
+}

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

@@ -0,0 +1,59 @@
+import type { MigrationContext } from "../types";
+
+export function generateSdkFiles(ctx: MigrationContext): Record<string, string> {
+  const files: Record<string, string> = {};
+
+  files["src/sdk/deviceServer.ts"] = generateDeviceServer();
+  files["src/sdk/logger.ts"] = generateLogger();
+
+  return files;
+}
+
+function generateDeviceServer(): string {
+  return `import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeader } from "@tanstack/react-start/server";
+import { detectDevice } from "@decocms/start/sdk/useDevice";
+
+export const getDeviceFromServer = createServerFn({ method: "GET" }).handler(
+  async () => {
+    const ua = getRequestHeader("user-agent") ?? "";
+    return detectDevice(ua);
+  },
+);
+`;
+}
+
+function generateLogger(): string {
+  return `type LogLevel = "debug" | "info" | "warn" | "error";
+
+const LEVELS: Record<LogLevel, number> = { debug: 0, info: 1, warn: 2, error: 3 };
+let minLevel: LogLevel = "info";
+
+export function setLogLevel(level: LogLevel) {
+  minLevel = level;
+}
+
+function shouldLog(level: LogLevel): boolean {
+  return LEVELS[level] >= LEVELS[minLevel];
+}
+
+export function debug(...args: unknown[]) {
+  if (shouldLog("debug")) console.debug(...args);
+}
+
+export function info(...args: unknown[]) {
+  if (shouldLog("info")) console.info(...args);
+}
+
+export function warn(...args: unknown[]) {
+  if (shouldLog("warn")) console.warn(...args);
+}
+
+export function error(...args: unknown[]) {
+  if (shouldLog("error")) console.error(...args);
+}
+
+export const logger = { debug, info, warn, error, setLogLevel };
+export default logger;
+`;
+}