@decocms/start 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "type": "module",
   "description": "Deco framework for TanStack Start - CMS bridge, admin protocol, hooks, schema generation",
   "main": "./src/index.ts",

package/src/cms/sectionLoaders.test.ts

@@ -0,0 +1,144 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  registerCacheableSections,
+  registerLayoutSections,
+  registerSectionLoader,
+  runSingleSectionLoader,
+} from "./sectionLoaders";
+import type { ResolvedSection } from "./resolve";
+
+const G = globalThis as any;
+
+beforeEach(() => {
+  G.__deco.sectionLoaderRegistry.clear();
+  G.__deco.layoutSections.clear();
+  G.__deco.cacheableSections.clear();
+});
+
+const makeSection = (
+  component: string,
+  props: Record<string, unknown> = {},
+): ResolvedSection => ({
+  component,
+  props,
+  key: component,
+  index: 0,
+});
+
+describe("runSingleSectionLoader — page context injection", () => {
+  it("injects __pageUrl and __pagePath into loader props", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/SearchBanner.tsx", loader);
+
+    const section = makeSection("site/sections/SearchBanner.tsx", { foo: "bar" });
+    const request = new Request("https://store.com/lingerie?q=preto");
+
+    await runSingleSectionLoader(section, request);
+
+    expect(loader).toHaveBeenCalledTimes(1);
+    const [calledProps, calledReq] = loader.mock.calls[0];
+    expect(calledProps).toMatchObject({
+      foo: "bar",
+      __pageUrl: "https://store.com/lingerie?q=preto",
+      __pagePath: "/lingerie",
+    });
+    expect(calledReq).toBe(request);
+  });
+
+  it("preserves existing __pageUrl / __pagePath from props (site workaround compat)", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Custom.tsx", loader);
+
+    const section = makeSection("site/sections/Custom.tsx", {
+      __pageUrl: "https://override.example/page",
+      __pagePath: "/override",
+    });
+    const request = new Request("https://store.com/real-path");
+
+    await runSingleSectionLoader(section, request);
+
+    const [calledProps] = loader.mock.calls[0];
+    expect(calledProps.__pageUrl).toBe("https://override.example/page");
+    expect(calledProps.__pagePath).toBe("/override");
+  });
+
+  it("does not throw when request.url is invalid", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/X.tsx", loader);
+
+    const section = makeSection("site/sections/X.tsx", { foo: 1 });
+    const badReq = { url: "not a url" } as unknown as Request;
+
+    await expect(runSingleSectionLoader(section, badReq)).resolves.toBeDefined();
+    expect(loader).toHaveBeenCalled();
+  });
+
+  it("returns section unchanged when no loader is registered", async () => {
+    const section = makeSection("site/sections/NoLoader.tsx", { foo: 1 });
+    const result = await runSingleSectionLoader(
+      section,
+      new Request("https://store.com/"),
+    );
+    expect(result).toBe(section);
+  });
+});
+
+describe("runSingleSectionLoader — cache keying", () => {
+  it("cacheable sections share a cache entry across different page URLs", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => ({
+      ...props,
+      enriched: true,
+    }));
+    registerSectionLoader("site/sections/Shelf.tsx", loader);
+    registerCacheableSections({ "site/sections/Shelf.tsx": { maxAge: 60_000 } });
+
+    const section = makeSection("site/sections/Shelf.tsx", { title: "Best" });
+
+    await runSingleSectionLoader(section, new Request("https://store.com/page-a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/page-b"));
+    await runSingleSectionLoader(section, new Request("https://store.com/page-c"));
+
+    // Without URL-agnostic cache keys, this would be 3.
+    expect(loader).toHaveBeenCalledTimes(1);
+  });
+
+  it("layout sections cache by component name and reuse across pages", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Header.tsx", loader);
+    registerLayoutSections(["site/sections/Header.tsx"]);
+
+    const section = makeSection("site/sections/Header.tsx", { variant: "default" });
+
+    await runSingleSectionLoader(section, new Request("https://store.com/a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/b"));
+
+    expect(loader).toHaveBeenCalledTimes(1);
+  });
+
+  it("regular (non-cached) sections re-run on every request", async () => {
+    const loader = vi.fn(async (props: Record<string, unknown>) => props);
+    registerSectionLoader("site/sections/Reg.tsx", loader);
+
+    const section = makeSection("site/sections/Reg.tsx", {});
+    await runSingleSectionLoader(section, new Request("https://store.com/a"));
+    await runSingleSectionLoader(section, new Request("https://store.com/b"));
+
+    expect(loader).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe("runSingleSectionLoader — error handling", () => {
+  it("falls back to original section when loader throws", async () => {
+    const loader = vi.fn(async () => {
+      throw new Error("boom");
+    });
+    registerSectionLoader("site/sections/Boom.tsx", loader);
+
+    const section = makeSection("site/sections/Boom.tsx", { x: 1 });
+    const result = await runSingleSectionLoader(
+      section,
+      new Request("https://store.com/"),
+    );
+    expect(result).toEqual(section);
+  });
+});

package/src/cms/sectionLoaders.ts

@@ -269,6 +269,47 @@ export async function runSectionLoaders(
   return Promise.all(sections.map((section) => runSingleSectionLoader(section, request)));
 }
 
+/**
+ * Inject the active request's URL and path into section props so site
+ * loaders can read `props.__pageUrl` / `props.__pagePath` without having
+ * to derive them from `req.url` themselves.
+ *
+ * The framework already injects these for commerce loaders (resolve.ts),
+ * but section loaders (e.g. category SearchBanner, breadcrumb-aware FAQs)
+ * also need to know the active page. Without this, callers had to wrap
+ * `loader(...)` themselves in a custom `delegateAfter`-style helper —
+ * forgetting it produced silent rendering bugs (empty banners, default
+ * fallbacks).
+ *
+ * Existing values in `props` win — sites that already pre-populated
+ * `__pageUrl` (e.g. via a custom mixin) keep their value untouched.
+ *
+ * Note: this runs only at the point we hand props to the user's loader.
+ * The cacheable-section cache key hashes the *original* props (URL-agnostic),
+ * so sections registered via `registerCacheableSections` keep sharing a
+ * single cache entry across pages.
+ */
+function injectPageContext(
+  props: Record<string, unknown>,
+  request: Request,
+): Record<string, unknown> {
+  let url: URL;
+  try {
+    url = new URL(request.url);
+  } catch {
+    return props;
+  }
+  const enriched = { ...props } as Record<string, unknown>;
+  if (enriched.__pageUrl === undefined) enriched.__pageUrl = request.url;
+  if (enriched.__pagePath === undefined) enriched.__pagePath = url.pathname;
+  return enriched;
+}
+
+/** Wrap a loader so it receives __pageUrl/__pagePath in its props. */
+function withPageContext(loader: SectionLoaderFn): SectionLoaderFn {
+  return (props, req) => loader(injectPageContext(props, req), req);
+}
+
 /**
  * Run a single section's registered loader.
  * Used by both `runSectionLoaders` (batch) and `loadDeferredSection` (individual).
@@ -285,9 +326,15 @@ export async function runSingleSectionLoader(
   const loader = loaderRegistry.get(section.component);
   if (!loader) return section;
 
+  // Wrap the loader so __pageUrl/__pagePath are injected at the call site.
+  // Cache keys (component name for layout, component+propsHash for cacheable)
+  // are computed from the *original* section.props — keeping cache entries
+  // URL-agnostic and shared across pages.
+  const wrapped = withPageContext(loader);
+
   if (layoutSections.has(section.component)) {
     try {
-      return await resolveLayoutSection(section, loader, request);
+      return await resolveLayoutSection(section, wrapped, request);
     } catch (error) {
       console.error(`[SectionLoader] Error in layout "${section.component}":`, error);
       return section;
@@ -297,7 +344,7 @@ export async function runSingleSectionLoader(
   const cacheConfig = cacheableSections.get(section.component);
   if (cacheConfig) {
     try {
-      return await runCacheableSectionLoader(section, loader, request, cacheConfig);
+      return await runCacheableSectionLoader(section, wrapped, request, cacheConfig);
     } catch (error) {
       console.error(`[SectionLoader] Error in cacheable "${section.component}":`, error);
       return section;
@@ -305,7 +352,10 @@ export async function runSingleSectionLoader(
   }
 
   try {
-    const enrichedProps = await loader(section.props as Record<string, unknown>, request);
+    const enrichedProps = await wrapped(
+      section.props as Record<string, unknown>,
+      request,
+    );
     return { ...section, props: enrichedProps };
   } catch (error) {
     console.error(`[SectionLoader] Error in "${section.component}":`, error);

package/src/vite/plugin.js

@@ -122,19 +122,29 @@ export function decoVitePlugin() {
       if (siteName) {
         const envName = process.env.DECO_ENV_NAME || "dev";
 
+        // Daemon files are .ts and live inside node_modules. Node's
+        // experimental strip-types refuses to transpile node_modules, so
+        // a plain dynamic `import()` blows up under `vite dev`. Use tsx's
+        // ad-hoc loader (`tsImport`) — scoped to this import, doesn't
+        // register a global hook.
+        const loadDaemon = (specifier) =>
+          import("tsx/esm/api").then(({ tsImport }) => tsImport(specifier, import.meta.url));
+
         // Add daemon middleware (x-daemon-api interception + auth + volumes + SSE + admin routes)
-        import("../daemon/middleware.ts").then(({ createDaemonMiddleware }) => {
-          server.middlewares.use(createDaemonMiddleware({ site: siteName, server }));
-        }).catch((err) => {
-          console.warn("[deco] Failed to load daemon middleware:", err.message);
-        });
+        loadDaemon("../daemon/middleware.ts")
+          .then(({ createDaemonMiddleware }) => {
+            server.middlewares.use(createDaemonMiddleware({ site: siteName, server }));
+          })
+          .catch((err) => {
+            console.warn("[deco] Failed to load daemon middleware:", err.message);
+          });
 
         // Start tunnel after HTTP server is listening (so we know the real port)
         server.httpServer?.once("listening", async () => {
           const addr = server.httpServer?.address();
           const port = typeof addr === "object" && addr ? addr.port : 5173;
           try {
-            const { startTunnel } = await import("../daemon/tunnel.ts");
+            const { startTunnel } = await loadDaemon("../daemon/tunnel.ts");
             const tunnel = await startTunnel({
               site: siteName,
               env: envName,