@decocms/start 0.41.0 → 0.42.1

package/README.md

@@ -79,13 +79,19 @@ The skill handles compatibility checking, import rewrites, config generation, se
 ### Or run the script manually
 
 ```bash
-# From a new TanStack Start project with @decocms/start installed:
-npx tsx node_modules/@decocms/start/scripts/migrate.ts --source /path/to/fresh-site
-
-# Preview first without writing:
-npx tsx node_modules/@decocms/start/scripts/migrate.ts --source /path/to/fresh-site --dry-run --verbose
+# From your Fresh site directory (nothing to install beforehand):
+npx -p @decocms/start deco-migrate
 ```
 
+**Options:**
+
+| Flag | Description |
+|------|-------------|
+| `--source <dir>` | Source directory (default: current directory) |
+| `--dry-run` | Preview changes without writing files |
+| `--verbose` | Show detailed output |
+| `--help`, `-h` | Show help message |
+
 The script runs 7 phases automatically:
 
 1. **Analyze** — scan source, detect Preact/Fresh/Deco patterns

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@decocms/start",
-  "version": "0.41.0",
+  "version": "0.42.1",
   "type": "module",
   "description": "Deco framework for TanStack Start - CMS bridge, admin protocol, hooks, schema generation",
   "main": "./src/index.ts",
+  "bin": {
+    "deco-migrate": "./scripts/migrate.ts"
+  },
   "exports": {
     ".": "./src/index.ts",
     "./cms": "./src/cms/index.ts",
@@ -80,6 +83,9 @@
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
+  "dependencies": {
+    "tsx": "^4.19.0"
+  },
   "peerDependencies": {
     "@tanstack/react-start": ">=1.0.0",
     "@tanstack/store": ">=0.7.0",

package/scripts/migrate/templates/routes.ts

@@ -172,8 +172,7 @@ ${gtmScript}
 
 function generateIndex(siteTitle: string): string {
   return `import { createFileRoute } from "@tanstack/react-router";
-import { cmsHomeRouteConfig, deferredSectionLoader } from "@decocms/start/routes";
-import { DecoPageRenderer } from "@decocms/start/hooks";
+import { cmsHomeRouteConfig, CmsPage, NotFoundPage } from "@decocms/start/routes";
 
 export const Route = createFileRoute("/")({
   ...cmsHomeRouteConfig({
@@ -185,26 +184,15 @@ export const Route = createFileRoute("/")({
 
 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">Nenhuma pagina CMS encontrada para /</p>
-        </div>
-      </div>
-    );
-  }
+  if (!data) return <NotFoundPage />;
 
   return (
-    <DecoPageRenderer
+    <CmsPage
       sections={data.resolvedSections ?? []}
       deferredSections={data.deferredSections ?? []}
       deferredPromises={data.deferredPromises}
       pagePath={data.pagePath}
       pageUrl={data.pageUrl}
-      loadDeferredSectionFn={deferredSectionLoader}
     />
   );
 }
@@ -213,8 +201,7 @@ function HomePage() {
 
 function generateCatchAll(siteTitle: string): string {
   return `import { createFileRoute } from "@tanstack/react-router";
-import { cmsRouteConfig, deferredSectionLoader } from "@decocms/start/routes";
-import { DecoPageRenderer } from "@decocms/start/hooks";
+import { cmsRouteConfig, CmsPage, NotFoundPage } from "@decocms/start/routes";
 
 const routeConfig = cmsRouteConfig({
   siteName: "${siteTitle}",
@@ -223,38 +210,25 @@ const routeConfig = cmsRouteConfig({
 
 export const Route = createFileRoute("/$")({
   ...routeConfig,
-  component: CmsPage,
+  component: CatchAllPage,
   notFoundComponent: NotFoundPage,
   staleTime: 30_000,
 });
 
-function CmsPage() {
+function CatchAllPage() {
   const data = Route.useLoaderData() as Record<string, any> | null;
   if (!data) return <NotFoundPage />;
 
   return (
-    <DecoPageRenderer
+    <CmsPage
       sections={data.resolvedSections ?? []}
       deferredSections={data.deferredSections ?? []}
       deferredPromises={data.deferredPromises}
       pagePath={data.pagePath}
       pageUrl={data.pageUrl}
-      loadDeferredSectionFn={deferredSectionLoader}
     />
   );
 }
-
-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">Pagina nao encontrada</h2>
-        <a href="/" className="btn btn-primary">Voltar para Home</a>
-      </div>
-    </div>
-  );
-}
 `;
 }
 

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

@@ -1,5 +1,9 @@
 import type { MigrationContext } from "../types.ts";
 
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
 export function generateServerEntry(
   ctx: MigrationContext,
 ): Record<string, string> {
@@ -22,13 +26,41 @@ export default createStartHandler(defaultStreamHandler);
 `;
 }
 
-function generateWorkerEntry(_ctx: MigrationContext): string {
+function generateWorkerEntry(ctx: MigrationContext): string {
+  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
+  //   };
+  // },`
+    : "";
+
   return `/**
  * Cloudflare Worker entry point.
  *
- * For a simple site without VTEX proxy or A/B testing, this is a thin wrapper
- * around the TanStack Start handler. Add proxy logic, security headers, or
- * A/B testing as needed.
+ * 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";
@@ -40,7 +72,7 @@ import {
   handleRender,
   corsHeaders,
 } from "@decocms/start/admin";
-
+${proxyImport}
 const serverEntry = createServerEntry({ fetch: handler.fetch });
 
 export default createDecoWorkerEntry(serverEntry, {
@@ -50,7 +82,7 @@ export default createDecoWorkerEntry(serverEntry, {
     handleDecofileReload,
     handleRender,
     corsHeaders,
-  },
+  },${proxyOption}${segmentOption}
 });
 `;
 }
@@ -113,36 +145,9 @@ function generateRuntime(): string {
  *   invoke.vtex.loaders.productList(props)
  *   → POST /deco/invoke/vtex/loaders/productList
  */
-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]);
-      },
-    },
-  );
-}
+import { createAppInvoke } from "@decocms/start/sdk/invoke";
 
-export const invoke = createNestedInvokeProxy() as any;
+export const invoke = createAppInvoke();
 export const Runtime = { invoke };
 `;
 }

package/scripts/migrate/templates/setup.ts

@@ -34,7 +34,7 @@ ${layoutSections.map((s) => `  "${s}",`).join("\n")}
   return `/**
  * Site setup — registers all sections, loaders and matchers with the CMS.
  *
- * This file is imported by router.tsx at startup.
+ * This file is imported by router.tsx and worker-entry.ts at startup.
  * It uses import.meta.glob to lazily discover all section components.
  */
 import { blocks as generatedBlocks } from "./server/cms/blocks.gen";
@@ -49,7 +49,8 @@ import { autoconfigApps } from "@decocms/start/apps/autoconfig";
 // The Vite plugin intercepts the blocks.gen import and injects .deco/blocks/ data.
 if (typeof document === "undefined") {
   setBlocks(generatedBlocks);
-  // Auto-configure apps (Resend, etc.) from CMS blocks
+  // Auto-configure apps from CMS blocks — registers invoke handlers,
+  // app state, and middleware (cookie forwarding, etc.)
   autoconfigApps(generatedBlocks);
 }
 

package/scripts/migrate.ts

@@ -5,8 +5,8 @@
  * Converts a Deco storefront from the old Fresh/Deno stack to the new TanStack Start stack.
  * Part of the @decocms/start framework — run from a site's root directory.
  *
- * Usage (from site root):
- *   npx tsx node_modules/@decocms/start/scripts/migrate.ts [options]
+ * Usage (from your Fresh site directory):
+ *   npx -p @decocms/start deco-migrate [options]
  *
  * Options:
  *   --source <dir>    Source directory (default: current directory)
@@ -71,7 +71,7 @@ function showHelp() {
   @decocms/start — Migration Script: Fresh/Deno → TanStack Start
 
   Usage:
-    npx tsx node_modules/@decocms/start/scripts/migrate.ts [options]
+    npx -p @decocms/start deco-migrate [options]
 
   Options:
     --source <dir>    Source directory (default: .)
@@ -80,9 +80,9 @@ function showHelp() {
     --help, -h        Show this help message
 
   Examples:
-    npx tsx node_modules/@decocms/start/scripts/migrate.ts --dry-run --verbose
-    npx tsx node_modules/@decocms/start/scripts/migrate.ts --source ./my-site
-    npx tsx node_modules/@decocms/start/scripts/migrate.ts
+    npx -p @decocms/start deco-migrate --dry-run --verbose
+    npx -p @decocms/start deco-migrate --source ./my-site
+    npx -p @decocms/start deco-migrate
   `);
 }
 

package/src/sdk/workerEntry.ts

@@ -37,6 +37,7 @@ import { cleanPathForCacheKey } from "./urlUtils";
 import { isMobileUA } from "./useDevice";
 import { getRenderShellConfig } from "../admin/setup";
 import { RequestContext } from "./requestContext";
+import { getAppMiddleware } from "./setupApps";
 import type { MatcherContext } from "../cms/resolve";
 import { resolveDecoPage } from "../cms/resolve";
 import { runSectionLoaders } from "../cms/sectionLoaders";
@@ -661,6 +662,22 @@ export function createDecoWorkerEntry(
       // in the call stack (loaders, invoke handlers, vtexFetchWithCookies)
       // can access the request and write response headers.
       return RequestContext.run(request, async () => {
+      // Run app middleware (injects app state into RequestContext.bag,
+      // runs registered middleware like VTEX cookie forwarding).
+      const appMw = getAppMiddleware();
+      if (appMw) {
+        return appMw(request, () => handleRequest(request, env, ctx));
+      }
+      return handleRequest(request, env, ctx);
+      });
+    },
+  };
+
+  async function handleRequest(
+    request: Request,
+    env: Record<string, unknown>,
+    ctx: WorkerExecutionContext,
+  ): Promise<Response> {
       const url = new URL(request.url);
 
       // Admin routes (/_meta, /.decofile, /live/previews) — always handled first
@@ -921,7 +938,5 @@ export function createDecoWorkerEntry(
       // the stream in Workers runtime, causing Error 1101.
       storeInCache(origin);
       return dressResponse(origin, "MISS");
-      }); // end RequestContext.run()
-    },
-  };
+  }
 }