@backmatter/next 0.0.12 → 0.0.13

package/dist/config.cjs

@@ -180,8 +180,40 @@ function detectSdk(root) {
   } catch {}
   return "@backmatter/core/node";
 }
+function renderCachedCmsClient() {
+  return [
+    "const raw = createBackmatter({ ...config, models });",
+    "",
+    "async function getDoc(locale: string, type: string, slug: string) {",
+    '  "use cache";',
+    '  cacheLife("hours");',
+    "  cacheTag(...contentCacheTags(locale, type, slug));",
+    "  return raw.getDoc(locale, type, slug);",
+    "}",
+    "",
+    "async function listDocs(filter?: { type?: string; locale?: string }) {",
+    '  "use cache";',
+    '  cacheLife("hours");',
+    "  cacheTag(...listCacheTags(filter?.type));",
+    "  return raw.listDocs(filter);",
+    "}",
+    "",
+    "/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */",
+    "export const cms = {",
+    "  ...raw,",
+    "  getDoc,",
+    "  listDocs,",
+    `  query: createQuery(models, { getDoc, listDocs }),`,
+    "};"
+  ];
+}
 function renderModelsBarrel(input) {
+  const nextHost = input.sdk === "@backmatter/next";
   const lines = [GENERATED_HEADER, `import { createBackmatter } from "${input.sdk}";`];
+  if (nextHost) {
+    lines.push('import { contentCacheTags, createQuery, listCacheTags } from "@backmatter/core";');
+    lines.push('import { cacheLife, cacheTag } from "next/cache";');
+  }
   if (input.configFile) {
     lines.push(`import config from "${importSpecifier(input.outDir, input.configFile)}";`);
   } else {
@@ -194,8 +226,12 @@ function renderModelsBarrel(input) {
   lines.push(`export const models = [${input.models.map((m) => m.importName).join(", ")}] as const;`);
   lines.push("export type Models = typeof models;");
   lines.push("");
-  lines.push("/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */");
-  lines.push("export const cms = createBackmatter({ ...config, models });");
+  if (nextHost) {
+    lines.push(...renderCachedCmsClient());
+  } else {
+    lines.push("/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */");
+    lines.push("export const cms = createBackmatter({ ...config, models });");
+  }
   return `${lines.join(`
 `)}
 `;
@@ -395,10 +431,14 @@ function withBackmatter(nextConfig = {}, options = {}) {
     return cfg.webpack ? cfg.webpack(config, context) : config;
   };
   const cacheComponents = cfg.cacheComponents ?? true;
+  const transpilePackages = [
+    ...new Set([...cfg.transpilePackages ?? [], "@backmatter/next", "@backmatter/core"])
+  ];
   return {
     ...nextConfig,
     cacheComponents,
     partialPrefetching: cfg.partialPrefetching ?? cacheComponents,
+    transpilePackages,
     turbopack,
     webpack
   };

package/dist/loader.cjs

@@ -174,8 +174,40 @@ function detectSdk(root) {
   } catch {}
   return "@backmatter/core/node";
 }
+function renderCachedCmsClient() {
+  return [
+    "const raw = createBackmatter({ ...config, models });",
+    "",
+    "async function getDoc(locale: string, type: string, slug: string) {",
+    '  "use cache";',
+    '  cacheLife("hours");',
+    "  cacheTag(...contentCacheTags(locale, type, slug));",
+    "  return raw.getDoc(locale, type, slug);",
+    "}",
+    "",
+    "async function listDocs(filter?: { type?: string; locale?: string }) {",
+    '  "use cache";',
+    '  cacheLife("hours");',
+    "  cacheTag(...listCacheTags(filter?.type));",
+    "  return raw.listDocs(filter);",
+    "}",
+    "",
+    "/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */",
+    "export const cms = {",
+    "  ...raw,",
+    "  getDoc,",
+    "  listDocs,",
+    `  query: createQuery(models, { getDoc, listDocs }),`,
+    "};"
+  ];
+}
 function renderModelsBarrel(input) {
+  const nextHost = input.sdk === "@backmatter/next";
   const lines = [GENERATED_HEADER, `import { createBackmatter } from "${input.sdk}";`];
+  if (nextHost) {
+    lines.push('import { contentCacheTags, createQuery, listCacheTags } from "@backmatter/core";');
+    lines.push('import { cacheLife, cacheTag } from "next/cache";');
+  }
   if (input.configFile) {
     lines.push(`import config from "${importSpecifier(input.outDir, input.configFile)}";`);
   } else {
@@ -188,8 +220,12 @@ function renderModelsBarrel(input) {
   lines.push(`export const models = [${input.models.map((m) => m.importName).join(", ")}] as const;`);
   lines.push("export type Models = typeof models;");
   lines.push("");
-  lines.push("/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */");
-  lines.push("export const cms = createBackmatter({ ...config, models });");
+  if (nextHost) {
+    lines.push(...renderCachedCmsClient());
+  } else {
+    lines.push("/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */");
+    lines.push("export const cms = createBackmatter({ ...config, models });");
+  }
   return `${lines.join(`
 `)}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/next",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Experimental Next.js adapter for Backmatter. APIs will break. Not ready for production.",
   "type": "module",
   "publishConfig": {
@@ -38,7 +38,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@backmatter/core": "^0.0.11",
+    "@backmatter/core": "^0.0.12",
     "@mdx-js/mdx": "^3.1.1",
     "remark-gfm": "^4.0.1"
   },

package/src/devbar-client.tsx

@@ -16,7 +16,7 @@ export type DevModeState =
   | { status: "hidden" }
   | {
       status: "ready";
-      user: CmsSessionUser;
+      user?: CmsSessionUser;
       mode: "preview" | "live";
       branch?: string;
       tree?: string;
@@ -26,28 +26,37 @@ export function devModeState(
   user: CmsSessionUser | null,
   session: { enabled: boolean; branch?: string; tree?: string },
 ): DevModeState {
-  if (!user) return { status: "hidden" };
+  if (!user && !session.enabled) return { status: "hidden" };
   const resolved = resolveDevMode(session);
   return {
     status: "ready",
-    user,
+    ...(user ? { user } : {}),
     ...resolved,
   };
 }
 
+export async function loadDevModeState(
+  apiUrl: string,
+  fetchUser: typeof fetchCmsSession = fetchCmsSession,
+  fetchSession: typeof fetchHostPreviewSession = fetchHostPreviewSession,
+): Promise<DevModeState> {
+  const trimmed = apiUrl.trim();
+  const [user, session] = await Promise.all([
+    trimmed ? fetchUser(trimmed) : Promise.resolve(null),
+    fetchSession(""),
+  ]);
+  return devModeState(user, session);
+}
+
 export function useDevMode(options: { apiUrl: string }): DevModeState {
   const [state, setState] = useState<DevModeState>({ status: "hidden" });
 
   useEffect(() => {
-    const apiUrl = options.apiUrl.trim();
-    if (!apiUrl) return;
     let cancelled = false;
-    void Promise.all([fetchCmsSession(apiUrl), fetchHostPreviewSession("")]).then(
-      ([user, session]) => {
-        if (cancelled) return;
-        setState(devModeState(user, session));
-      },
-    );
+    void loadDevModeState(options.apiUrl).then((next) => {
+      if (cancelled) return;
+      setState(next);
+    });
     return () => {
       cancelled = true;
     };

package/src/devbar.tsx

@@ -7,6 +7,7 @@ export {
   DevBarView,
   devModeState,
   exitHostPreview,
+  loadDevModeState,
   useDevMode,
   type CmsSessionUser,
   type DevModeState,

package/src/preview-route.ts

@@ -15,6 +15,7 @@ import type { BackmatterClient } from "@backmatter/core/node/create-backmatter";
 export type PreviewRouteDeps = {
   enableDraft?: () => void | Promise<void>;
   disableDraft?: () => void | Promise<void>;
+  isDraftEnabled?: () => boolean | Promise<boolean>;
   now?: () => number;
 };
 
@@ -45,6 +46,13 @@ async function nextDraft(enable: boolean): Promise<void> {
   else draft.disable();
 }
 
+async function nextDraftEnabled(): Promise<boolean> {
+  const mod = (await import("next/headers" as string)) as {
+    draftMode: () => Promise<{ isEnabled: boolean }>;
+  };
+  return (await mod.draftMode()).isEnabled;
+}
+
 function cookieFrom(req: Request): string | undefined {
   const header = req.headers.get("cookie");
   if (!header) return undefined;
@@ -75,11 +83,14 @@ export function createPreviewRoute(
 
     if (url.searchParams.get("session") === "1") {
       const checkout = secret ? await checkoutFrom(req, secret, url) : null;
-      if (!checkout) return Response.json({ mode: "live" });
-      return Response.json({
-        mode: "preview",
-        ...checkout,
-      });
+      if (checkout) {
+        return Response.json({
+          mode: "preview",
+          ...checkout,
+        });
+      }
+      const draftOn = await (deps.isDraftEnabled ?? nextDraftEnabled)();
+      return Response.json({ mode: draftOn ? "preview" : "live" });
     }
 
     if (url.searchParams.get("stream") === "1") {

package/src/routes.ts

@@ -44,6 +44,7 @@ export type CatchAllOptions = {
   preview?: {
     enabled: boolean;
     checkout?: { branch?: string; tree?: string };
+    error?: string;
     getDoc?: (ref: {
       locale: string;
       type: string;
@@ -87,6 +88,13 @@ type PreviewState =
   | { enabled: false }
   | { enabled: true; checkout: { branch?: string; tree?: string }; error?: string };
 
+/** Draft without a readable checkout stays on the published page. */
+export function previewReplacesPublished(
+  preview: PreviewState,
+): preview is Extract<PreviewState, { enabled: true }> {
+  return preview.enabled && preview.error !== "invalid_session";
+}
+
 type RouteHit = { locale: string; type: string; slug: string };
 
 async function checkoutQueryToken(
@@ -107,7 +115,11 @@ async function resolvePreviewState(
 ): Promise<PreviewState> {
   if (injected) {
     if (!injected.enabled) return { enabled: false };
-    return { enabled: true, checkout: injected.checkout ?? {} };
+    return {
+      enabled: true,
+      checkout: injected.checkout ?? {},
+      ...(injected.error ? { error: injected.error } : {}),
+    };
   }
   try {
     const mod = (await import("next/headers" as string)) as {
@@ -224,7 +236,7 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
     const hit = resolve(resolved[CATCH_ALL_PARAM]);
     if (!hit) return failFor();
     const preview = await resolvePreviewState(cms, options.preview, searchParams);
-    if (preview.enabled) return loadPreviewDoc(hit, preview);
+    if (previewReplacesPublished(preview)) return loadPreviewDoc(hit, preview);
     const doc = await cms.getDoc(hit.locale, hit.type, hit.slug);
     if (!doc) return failFor();
     return layoutDoc(doc, false);
@@ -259,7 +271,7 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
     const hit = resolve(resolved[CATCH_ALL_PARAM]);
     if (!hit) return null;
     const preview = await resolvePreviewState(cms, options.preview, searchParams);
-    if (!preview.enabled) return null;
+    if (!previewReplacesPublished(preview)) return null;
     return createElement(
       Fragment,
       null,