@decocms/start 1.2.6 → 1.2.7

package/scripts/migrate/templates/server-entry.ts

@@ -27,40 +27,19 @@ export default createStartHandler(defaultStreamHandler);
 }
 
 function generateWorkerEntry(ctx: MigrationContext): string {
+  const isVtex = ctx.platform === "vtex";
+
+  if (isVtex) {
+    return generateVtexWorkerEntry(ctx);
+  }
+
   const isCommerce = ctx.platform !== "custom";
-  const proxyImport = isCommerce
-    ? `\n// Uncomment to enable checkout/API proxy for ${ctx.platform}:
-// import { shouldProxyTo${ctx.platform === "vtex" ? "Vtex" : capitalize(ctx.platform)}, proxyTo${ctx.platform === "vtex" ? "Vtex" : capitalize(ctx.platform)} } from "@decocms/apps/${ctx.platform}/utils/proxy";\n`
-    : "";
-
-  const proxyOption = isCommerce
-    ? `
-  // Uncomment to enable checkout/API proxy for ${ctx.platform}:
-  // proxyHandler: (request, url) => {
-  //   if (shouldProxyTo${ctx.platform === "vtex" ? "Vtex" : capitalize(ctx.platform)}(url.pathname)) {
-  //     return proxyTo${ctx.platform === "vtex" ? "Vtex" : capitalize(ctx.platform)}(request);
-  //   }
-  //   return null;
-  // },`
-    : "";
-
-  const segmentOption = ctx.platform === "vtex"
-    ? `
-  // Uncomment for per-sales-channel/region cache segmentation:
-  // buildSegment: (request) => {
-  //   const ua = request.headers.get("user-agent") ?? "";
-  //   return {
-  //     device: /mobile|android|iphone/i.test(ua) ? "mobile" : "desktop",
-  //     // loggedIn: true bypasses cache automatically
-  //   };
-  // },`
-    : "";
+  const platformLabel = isCommerce ? ctx.platform : null;
 
   return `/**
  * Cloudflare Worker entry point.
  *
  * Wraps TanStack Start with admin protocol handlers and edge caching.
- * For commerce sites, uncomment proxyHandler and buildSegment options.
  */
 import "./setup";
 import handler, { createServerEntry } from "@tanstack/react-start/server-entry";
@@ -72,7 +51,10 @@ import {
   handleRender,
   corsHeaders,
 } from "@decocms/start/admin";
-${proxyImport}
+${isCommerce ? `
+// TODO: Uncomment and wire proxy for ${platformLabel}
+// import { shouldProxyTo${capitalize(platformLabel!)}, proxyTo${capitalize(platformLabel!)} } from "@decocms/apps/${platformLabel}/utils/proxy";
+` : ""}
 const serverEntry = createServerEntry({ fetch: handler.fetch });
 
 export default createDecoWorkerEntry(serverEntry, {
@@ -82,52 +64,142 @@ export default createDecoWorkerEntry(serverEntry, {
     handleDecofileReload,
     handleRender,
     corsHeaders,
-  },${proxyOption}${segmentOption}
+  },
 });
 `;
 }
 
-function generateRouter(): string {
-  return `import { createRouter as createTanStackRouter } from "@tanstack/react-router";
-import type { SearchSerializer, SearchParser } from "@tanstack/react-router";
-import { routeTree } from "./routeTree.gen";
+function generateVtexWorkerEntry(ctx: MigrationContext): string {
+  return `/**
+ * Cloudflare Worker entry point — VTEX storefront.
+ *
+ * Handles admin protocol, VTEX checkout proxy, CSP,
+ * segment building, and edge caching.
+ *
+ * MANUAL REVIEW: Add site-specific CSP domains (analytics, CDN, tag managers).
+ */
 import "./setup";
+import handler, { createServerEntry } from "@tanstack/react-start/server-entry";
+import { createDecoWorkerEntry } from "@decocms/start/sdk/workerEntry";
+import { detectDevice } from "@decocms/start/sdk/useDevice";
+import {
+  handleMeta,
+  handleDecofileRead,
+  handleDecofileReload,
+  handleRender,
+  corsHeaders,
+} from "@decocms/start/admin";
+import { extractVtexContext } from "@decocms/apps/vtex/middleware";
+import {
+  shouldProxyToVtex,
+  createVtexCheckoutProxy,
+} from "@decocms/apps/vtex/utils/proxy";
+import { getVtexConfig } from "@decocms/apps/vtex";
 
-const parseSearch: SearchParser = (searchStr) => {
-  const str = searchStr.startsWith("?") ? searchStr.slice(1) : searchStr;
-  if (!str) return {};
-  const params = new URLSearchParams(str);
-  const result: Record<string, string | string[]> = {};
-  for (const key of new Set(params.keys())) {
-    const values = params.getAll(key);
-    result[key] = values.length === 1 ? values[0] : values;
-  }
-  return result;
-};
+const serverEntry = createServerEntry({ fetch: handler.fetch });
+
+const CSP_DIRECTIVES = [
+  "script-src 'self' 'unsafe-inline' 'unsafe-eval' *.vtex.com.br *.vteximg.com.br *.vtexassets.com",
+  "img-src 'self' data: blob: *.vteximg.com.br *.vtexassets.com *.vtexcommercestable.com.br",
+  "connect-src 'self' *.vtex.com.br *.vtexcommercestable.com.br *.vtexassets.com",
+  "frame-src 'self' *.vtex.com.br",
+  "style-src 'self' 'unsafe-inline' fonts.googleapis.com",
+  "font-src 'self' fonts.gstatic.com data:",
+  // TODO: Add site-specific domains (analytics, CDN, tag managers)
+];
+
+const { account } = getVtexConfig();
+
+const vtexProxy = createVtexCheckoutProxy({
+  account,
+  checkoutOrigin: \`\${account}.vtexcommercestable.com.br\`,
+  // TODO: Set your secure checkout origin if different from default
+  // checkoutOrigin: "secure.yourdomain.com.br",
+});
+
+const decoWorker = createDecoWorkerEntry(serverEntry, {
+  admin: {
+    handleMeta,
+    handleDecofileRead,
+    handleDecofileReload,
+    handleRender,
+    corsHeaders,
+  },
+
+  csp: CSP_DIRECTIVES,
+
+  buildSegment: (request) => {
+    const vtx = extractVtexContext(request);
+    const device = detectDevice(request.headers.get("user-agent") ?? "");
 
-const stringifySearch: SearchSerializer = (search) => {
-  const params = new URLSearchParams();
-  for (const [key, value] of Object.entries(search)) {
-    if (value === undefined || value === null || value === "") continue;
-    if (Array.isArray(value)) {
-      for (const v of value) params.append(key, String(v));
-    } else {
-      params.append(key, String(value));
+    return {
+      device,
+      ...(vtx.isLoggedIn ? { loggedIn: true } : {}),
+      ...(vtx.salesChannel !== "1" ? { salesChannel: vtx.salesChannel } : {}),
+      ...(vtx.regionId ? { regionId: vtx.regionId } : {}),
+    };
+  },
+
+  proxyHandler: async (request, url) => {
+    const { pathname } = url;
+
+    // CMS-managed routes — don't proxy
+    if (pathname === "/login" || pathname === "/logout") return null;
+
+    // VTEX checkout and API proxy
+    if (shouldProxyToVtex(pathname)) {
+      return vtexProxy(request, url);
     }
-  }
-  const str = params.toString();
-  return str ? \`?\${str}\` : "";
-};
+
+    return null;
+  },
+});
+
+export default decoWorker;
+
+// ─── A/B Testing + Redirects (uncomment when ready) ─────────────────
+// import { withABTesting } from "@decocms/start/sdk/abTesting";
+// import { loadBlocks } from "@decocms/start/cms";
+// import { loadRedirects, matchRedirect } from "@decocms/start/sdk/redirects";
+//
+// const cmsRedirects = loadRedirects(loadBlocks());
+//
+// export default withABTesting(decoWorker, {
+//   kvBinding: "AB_TESTING",
+//   preHandler: (request) => {
+//     const url = new URL(request.url);
+//     const redirect = matchRedirect(url.pathname, cmsRedirects);
+//     if (redirect) {
+//       return new Response(null, {
+//         status: redirect.type === "temporary" ? 307 : 301,
+//         headers: { Location: redirect.to },
+//       });
+//     }
+//     return null;
+//   },
+//   shouldBypassAB: (_request, url) => shouldProxyToVtex(url.pathname),
+// });
+`;
+}
+
+function generateRouter(): string {
+  return `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createDecoRouter } from "@decocms/start/sdk/router";
+import { routeTree } from "./routeTree.gen";
+import "./setup";
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: 30_000 } },
+});
 
 export function getRouter() {
-  const router = createTanStackRouter({
+  return createDecoRouter({
     routeTree,
-    scrollRestoration: true,
-    defaultPreload: "intent",
-    parseSearch,
-    stringifySearch,
+    context: { queryClient },
+    Wrap: ({ children }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    ),
   });
-  return router;
 }
 
 declare module "@tanstack/react-router" {
@@ -140,15 +212,50 @@ declare module "@tanstack/react-router" {
 
 function generateRuntime(): string {
   return `/**
- * Runtime invoke proxy — turns nested property access into typed RPC calls.
+ * Runtime invoke proxy.
  *
+ * Turns nested property access into a typed RPC call to /deco/invoke.
+ * Converts dot-notation paths to slash-separated keys:
  *   invoke.vtex.loaders.productList(props)
  *   → POST /deco/invoke/vtex/loaders/productList
+ *
+ * The .ts suffix variant is also tried if the primary key isn't found
+ * (registered loaders may have ".ts" extensions in their keys).
  */
-import { createAppInvoke } from "@decocms/start/sdk/invoke";
+function createNestedInvokeProxy(path: string[] = []): any {
+  return new Proxy(
+    Object.assign(async (props: any) => {
+      const key = path.join("/");
+      for (const k of [key, \`\${key}.ts\`]) {
+        const response = await fetch(\`/deco/invoke/\${k}\`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(props ?? {}),
+        });
+        if (response.status === 404) continue;
+        if (!response.ok) {
+          throw new Error(\`invoke(\${k}) failed: \${response.status}\`);
+        }
+        return response.json();
+      }
+      throw new Error(\`invoke(\${key}) failed: handler not found\`);
+    }, {}),
+    {
+      get(_target: any, prop: string) {
+        if (prop === "then" || prop === "catch" || prop === "finally") {
+          return undefined;
+        }
+        return createNestedInvokeProxy([...path, prop]);
+      },
+    },
+  );
+}
+
+export const invoke = createNestedInvokeProxy() as any;
 
-export const invoke = createAppInvoke();
-export const Runtime = { invoke };
+export const Runtime = {
+  invoke,
+};
 `;
 }
 

package/scripts/migrate/templates/setup.ts

@@ -1,69 +1,78 @@
 import type { MigrationContext } from "../types.ts";
 
 export function generateSetup(ctx: MigrationContext): string {
-  // Detect layout sections (Header, Footer, Theme) from source files
-  const layoutSections: string[] = [];
-  for (const f of ctx.files) {
-    if (f.category !== "section" || f.action === "delete") continue;
-    const name = f.path.replace(/^sections\//, "").replace(/\.tsx$/, "");
-    const lower = name.toLowerCase();
-    if (lower.includes("header") || lower.includes("footer") || lower.includes("theme")) {
-      layoutSections.push(`site/sections/${name}.tsx`);
-    }
-  }
-  // Also check islands that became sections
-  for (const f of ctx.files) {
-    if (f.category !== "island") continue;
-    const name = f.path.replace(/^islands\//, "").replace(/\.tsx$/, "");
-    const lower = name.toLowerCase();
-    if (lower.includes("header") || lower.includes("footer") || lower.includes("theme")) {
-      layoutSections.push(`site/sections/${name}.tsx`);
-    }
-  }
+  const isVtex = ctx.platform === "vtex";
+  const siteName = ctx.siteName;
 
-  const layoutRegistration = layoutSections.length > 0
-    ? `\n// -- Layout Sections (cached across navigations) --
-registerLayoutSections([
-${layoutSections.map((s) => `  "${s}",`).join("\n")}
-]);\n`
-    : "";
-
-  const layoutImport = layoutSections.length > 0
-    ? "\n  registerLayoutSections," : "";
+  const productionOrigins = [
+    `"https://www.${siteName}.com.br"`,
+    `"https://${siteName}.com.br"`,
+  ];
 
   return `/**
- * Site setup — registers all sections, loaders and matchers with the CMS.
+ * Site setup — orchestrator that wires framework, commerce, and sections.
+ *
+ * Actual logic lives in focused modules:
+ *   setup/commerce-loaders.ts  — COMMERCE_LOADERS map (data fetchers)
+ *   setup/section-loaders.ts   — registerSectionLoaders (per-section prop enrichment)
  *
- * This file is imported by router.tsx and worker-entry.ts at startup.
- * It uses import.meta.glob to lazily discover all section components.
+ * Section metadata (eager, sync, layout, cache, LoadingFallback) is declared
+ * in each section file and auto-extracted by generate-sections.ts.
  */
-import { blocks as generatedBlocks } from "./server/cms/blocks.gen";
+
+import "./cache-config";
+
 import {
-  registerSections,${layoutImport}
-  setBlocks,
+  registerCommerceLoaders,
+  applySectionConventions,
 } from "@decocms/start/cms";
-import { registerBuiltinMatchers } from "@decocms/start/matchers/builtins";
-import { autoconfigApps } from "@decocms/start/apps/autoconfig";
+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";` : ""}
+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";
 
-// -- CMS Blocks --
-// The Vite plugin intercepts the blocks.gen import and injects .deco/blocks/ data.
-if (typeof document === "undefined") {
-  setBlocks(generatedBlocks);
-  // Auto-configure apps from CMS blocks — registers invoke handlers,
-  // app state, and middleware (cookie forwarding, etc.)
-  autoconfigApps(generatedBlocks);
-}
+import { COMMERCE_LOADERS } from "./setup/commerce-loaders";
+import "./setup/section-loaders";
 
-// -- Section Registry --
-// CMS blocks reference sections as "site/sections/X.tsx", so we remap the glob keys.
-const sectionGlob = import.meta.glob("./sections/**/*.tsx") as Record<string, () => Promise<any>>;
-const sections: Record<string, () => Promise<any>> = {};
-for (const [path, loader] of Object.entries(sectionGlob)) {
-  sections["site/" + path.slice(2)] = loader;
-}
-registerSections(sections);
-${layoutRegistration}
-// -- Matchers --
-registerBuiltinMatchers();
+// -- 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: [],
+  productionOrigins: [
+    ${productionOrigins.join(",\n    ")},
+  ],
+  previewWrapper: PreviewProviders,${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/types-gen.ts

@@ -0,0 +1,119 @@
+import type { MigrationContext } from "../types.ts";
+
+export function generateTypeFiles(ctx: MigrationContext): Record<string, string> {
+  const files: Record<string, string> = {};
+
+  files["src/types/widgets.ts"] = `export type ImageWidget = string;
+export type HTMLWidget = string;
+export type VideoWidget = string;
+export type TextWidget = string;
+export type RichText = string;
+export type Secret = string;
+export type Color = string;
+export type ButtonWidget = string;
+`;
+
+  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") {
+    files["src/types/vtex-app.ts"] = `export interface VtexConfig {
+  account: string;
+  publicUrl?: string;
+}
+`;
+
+    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>;
+}
+`;
+
+    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,113 @@
+import type { MigrationContext } from "../types.ts";
+
+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 {
+  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 Picture({
+  sources,
+  src,
+  width,
+  height,
+  fit = "cover",
+  preload,
+  ...rest
+}: PictureProps) {
+  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} />
+    </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}
+    />
+  );
+}
+`;
+
+  return files;
+}

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

@@ -1,6 +1,23 @@
 import type { MigrationContext } from "../types.ts";
 
 export function generateViteConfig(ctx: MigrationContext): string {
+  const isVtex = ctx.platform === "vtex";
+
+  const vtexProxy = isVtex ? `
+    // VTEX API proxy for local development
+    proxy: {
+      "/api/": {
+        target: "https://\${process.env.VTEX_ACCOUNT || "${ctx.siteName}"}.vtexcommercestable.com.br",
+        changeOrigin: true,
+        secure: true,
+      },
+      "/checkout/": {
+        target: "https://\${process.env.VTEX_ACCOUNT || "${ctx.siteName}"}.vtexcommercestable.com.br",
+        changeOrigin: true,
+        secure: true,
+      },
+    },` : "";
+
   return `import { cloudflare } from "@cloudflare/vite-plugin";
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import { decoVitePlugin } from "@decocms/start/vite";
@@ -13,7 +30,7 @@ const srcDir = path.resolve(__dirname, "src");
 
 export default defineConfig({
   server: {
-    allowedHosts: [".decocdn.com"],
+    allowedHosts: [".decocdn.com"],${vtexProxy}
   },
   plugins: [
     cloudflare({ viteEnvironment: { name: "ssr" } }),