@backmatter/next 0.0.16 → 0.0.17

package/dist/config.cjs

@@ -84,6 +84,7 @@ var import_node_path2 = __toESM(require("node:path"));
 var DEFAULT_DIRS = {
   models: "models",
   blocks: "blocks",
+  richtext: "richtext",
   mdx: "mdx",
   layouts: "layouts",
   objects: "objects"
@@ -242,6 +243,7 @@ function renderModelsBarrel(input) {
 }
 function renderSyncBarrel(input) {
   const objects = input.objects ?? [];
+  const richtext = input.richtext ?? [];
   const lines = [GENERATED_HEADER, `import { createBackmatter } from "${input.sdk}";`];
   if (input.configFile) {
     lines.push(`import config from "${importSpecifier(input.outDir, input.configFile)}";`);
@@ -254,6 +256,9 @@ function renderSyncBarrel(input) {
   for (const b of input.blocks) {
     lines.push(`import ${b.name} from "${importSpecifier(input.outDir, b.file)}";`);
   }
+  for (const b of richtext) {
+    lines.push(`import richtext${b.name} from "${importSpecifier(input.outDir, b.file)}";`);
+  }
   for (const object of objects) {
     lines.push(`import ${object.importName} from "${importSpecifier(input.outDir, object.file)}";`);
   }
@@ -263,10 +268,12 @@ function renderSyncBarrel(input) {
   lines.push("");
   lines.push(`export const blocks = [${input.blocks.map((b) => b.name).join(", ")}] as const;`);
   lines.push("");
+  lines.push(`export const richtext = [${richtext.map((b) => `richtext${b.name}`).join(", ")}] as const;`);
+  lines.push("");
   lines.push(`export const objects = [${objects.map((o) => o.importName).join(", ")}] as const;`);
   lines.push("");
   lines.push("/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */");
-  lines.push("export const cms = createBackmatter({ ...config, models, blocks, objects, sync: true });");
+  lines.push("export const cms = createBackmatter({ ...config, models, blocks, richtext, objects, sync: true });");
   return `${lines.join(`
 `)}
 `;
@@ -284,6 +291,19 @@ function renderMdxBarrel(input) {
 `)}
 `;
 }
+function renderRichtextBarrel(input) {
+  const lines = [GENERATED_HEADER];
+  for (const b of input.richtext) {
+    lines.push(`import ${b.name} from "${importSpecifier(input.outDir, b.file)}";`);
+  }
+  lines.push("");
+  lines.push("/** In-content blocks: <Image /> in MDX resolves to richtext/Image.tsx. */");
+  const entries = input.richtext.map((b) => `${b.name}: ${b.name}.component`);
+  lines.push(`export const richtextComponents = ${entries.length ? `{ ${entries.join(", ")} }` : "{}"};`);
+  return `${lines.join(`
+`)}
+`;
+}
 function renderBlocksBarrel(input) {
   const lines = [GENERATED_HEADER, ""];
   lines.push('/** Composer loaders: JSON `{ type: "Hero" }` → dynamic import of blocks/Hero.tsx. */');
@@ -326,6 +346,7 @@ var REGISTRY_FILES = [
   "blocks.ts",
   "block-fallbacks.ts",
   "mdx.ts",
+  "richtext.ts",
   "layouts.ts",
   "sync.ts"
 ];
@@ -334,6 +355,7 @@ function generate(options) {
   const outDir = import_node_path2.default.resolve(root, options.outDir ?? DEFAULT_OUT_DIR);
   const models = listModelFiles(root, options.modelsDir ?? DEFAULT_DIRS.models);
   const { blocks, skipped: skippedBlocks } = listBlockFiles(root, options.blocksDir ?? DEFAULT_DIRS.blocks);
+  const { blocks: richtext, skipped: skippedRichtext } = listBlockFiles(root, options.richtextDir ?? DEFAULT_DIRS.richtext);
   const fallbacks = listBlockFallbackFiles(root, options.blocksDir ?? DEFAULT_DIRS.blocks);
   const { blocks: mdx, skipped: skippedMdx } = listMdxFiles(root, options.mdxDir ?? DEFAULT_DIRS.mdx);
   const layouts = listLayoutFiles(root, options.layoutsDir ?? DEFAULT_DIRS.layouts);
@@ -346,8 +368,9 @@ function generate(options) {
     "blocks.ts": renderBlocksBarrel({ outDir, blocks }),
     "block-fallbacks.ts": renderBlockFallbacksBarrel({ outDir, fallbacks }),
     "mdx.ts": renderMdxBarrel({ outDir, mdx }),
+    "richtext.ts": renderRichtextBarrel({ outDir, richtext }),
     "layouts.ts": renderLayoutsBarrel({ outDir, layouts }),
-    "sync.ts": renderSyncBarrel({ outDir, models, blocks, objects, configFile, sdk })
+    "sync.ts": renderSyncBarrel({ outDir, models, blocks, richtext, objects, configFile, sdk })
   };
   const outputs = REGISTRY_FILES.map((name) => {
     const file = import_node_path2.default.join(outDir, name);
@@ -365,10 +388,11 @@ function generate(options) {
     changed: outputs.filter((o) => o.changed).map((o) => o.rel),
     models,
     blocks,
+    richtext,
     mdx,
     layouts,
     objects,
-    skippedBlocks,
+    skippedBlocks: [...skippedBlocks, ...skippedRichtext],
     skippedMdx,
     configFile
   };
@@ -403,6 +427,7 @@ function resolveLoaderOptions(options = {}) {
     outDir: options.outDir ?? DEFAULT_OUT_DIR,
     modelsDir: options.modelsDir ?? DEFAULT_DIRS.models,
     blocksDir: options.blocksDir ?? DEFAULT_DIRS.blocks,
+    richtextDir: options.richtextDir ?? DEFAULT_DIRS.richtext,
     mdxDir: options.mdxDir ?? DEFAULT_DIRS.mdx,
     layoutsDir: options.layoutsDir ?? DEFAULT_DIRS.layouts,
     objectsDir: options.objectsDir ?? DEFAULT_DIRS.objects,
@@ -421,7 +446,7 @@ function registryMatchers(loaderOptions) {
   const escaped = rel.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   return {
     glob: `**/${rel}/*.ts`,
-    test: new RegExp(`(^|[\\\\/])${escaped.replace(/\//g, "[\\\\/]")}[\\\\/](index|blocks|block-fallbacks|mdx|layouts|sync)\\.ts$`)
+    test: new RegExp(`(^|[\\\\/])${escaped.replace(/\//g, "[\\\\/]")}[\\\\/](index|blocks|block-fallbacks|mdx|richtext|layouts|sync)\\.ts$`)
   };
 }
 function withBackmatter(nextConfig = {}, options = {}) {

package/dist/loader.cjs

@@ -78,6 +78,7 @@ var import_node_path2 = __toESM(require("node:path"));
 var DEFAULT_DIRS = {
   models: "models",
   blocks: "blocks",
+  richtext: "richtext",
   mdx: "mdx",
   layouts: "layouts",
   objects: "objects"
@@ -236,6 +237,7 @@ function renderModelsBarrel(input) {
 }
 function renderSyncBarrel(input) {
   const objects = input.objects ?? [];
+  const richtext = input.richtext ?? [];
   const lines = [GENERATED_HEADER, `import { createBackmatter } from "${input.sdk}";`];
   if (input.configFile) {
     lines.push(`import config from "${importSpecifier(input.outDir, input.configFile)}";`);
@@ -248,6 +250,9 @@ function renderSyncBarrel(input) {
   for (const b of input.blocks) {
     lines.push(`import ${b.name} from "${importSpecifier(input.outDir, b.file)}";`);
   }
+  for (const b of richtext) {
+    lines.push(`import richtext${b.name} from "${importSpecifier(input.outDir, b.file)}";`);
+  }
   for (const object of objects) {
     lines.push(`import ${object.importName} from "${importSpecifier(input.outDir, object.file)}";`);
   }
@@ -257,10 +262,12 @@ function renderSyncBarrel(input) {
   lines.push("");
   lines.push(`export const blocks = [${input.blocks.map((b) => b.name).join(", ")}] as const;`);
   lines.push("");
+  lines.push(`export const richtext = [${richtext.map((b) => `richtext${b.name}`).join(", ")}] as const;`);
+  lines.push("");
   lines.push(`export const objects = [${objects.map((o) => o.importName).join(", ")}] as const;`);
   lines.push("");
   lines.push("/** Typed content client: cms.query.{type}, cms.getDoc, cms.listDocs. */");
-  lines.push("export const cms = createBackmatter({ ...config, models, blocks, objects, sync: true });");
+  lines.push("export const cms = createBackmatter({ ...config, models, blocks, richtext, objects, sync: true });");
   return `${lines.join(`
 `)}
 `;
@@ -278,6 +285,19 @@ function renderMdxBarrel(input) {
 `)}
 `;
 }
+function renderRichtextBarrel(input) {
+  const lines = [GENERATED_HEADER];
+  for (const b of input.richtext) {
+    lines.push(`import ${b.name} from "${importSpecifier(input.outDir, b.file)}";`);
+  }
+  lines.push("");
+  lines.push("/** In-content blocks: <Image /> in MDX resolves to richtext/Image.tsx. */");
+  const entries = input.richtext.map((b) => `${b.name}: ${b.name}.component`);
+  lines.push(`export const richtextComponents = ${entries.length ? `{ ${entries.join(", ")} }` : "{}"};`);
+  return `${lines.join(`
+`)}
+`;
+}
 function renderBlocksBarrel(input) {
   const lines = [GENERATED_HEADER, ""];
   lines.push('/** Composer loaders: JSON `{ type: "Hero" }` → dynamic import of blocks/Hero.tsx. */');
@@ -320,6 +340,7 @@ var REGISTRY_FILES = [
   "blocks.ts",
   "block-fallbacks.ts",
   "mdx.ts",
+  "richtext.ts",
   "layouts.ts",
   "sync.ts"
 ];
@@ -328,6 +349,7 @@ function generate(options) {
   const outDir = import_node_path2.default.resolve(root, options.outDir ?? DEFAULT_OUT_DIR);
   const models = listModelFiles(root, options.modelsDir ?? DEFAULT_DIRS.models);
   const { blocks, skipped: skippedBlocks } = listBlockFiles(root, options.blocksDir ?? DEFAULT_DIRS.blocks);
+  const { blocks: richtext, skipped: skippedRichtext } = listBlockFiles(root, options.richtextDir ?? DEFAULT_DIRS.richtext);
   const fallbacks = listBlockFallbackFiles(root, options.blocksDir ?? DEFAULT_DIRS.blocks);
   const { blocks: mdx, skipped: skippedMdx } = listMdxFiles(root, options.mdxDir ?? DEFAULT_DIRS.mdx);
   const layouts = listLayoutFiles(root, options.layoutsDir ?? DEFAULT_DIRS.layouts);
@@ -340,8 +362,9 @@ function generate(options) {
     "blocks.ts": renderBlocksBarrel({ outDir, blocks }),
     "block-fallbacks.ts": renderBlockFallbacksBarrel({ outDir, fallbacks }),
     "mdx.ts": renderMdxBarrel({ outDir, mdx }),
+    "richtext.ts": renderRichtextBarrel({ outDir, richtext }),
     "layouts.ts": renderLayoutsBarrel({ outDir, layouts }),
-    "sync.ts": renderSyncBarrel({ outDir, models, blocks, objects, configFile, sdk })
+    "sync.ts": renderSyncBarrel({ outDir, models, blocks, richtext, objects, configFile, sdk })
   };
   const outputs = REGISTRY_FILES.map((name) => {
     const file = import_node_path2.default.join(outDir, name);
@@ -359,10 +382,11 @@ function generate(options) {
     changed: outputs.filter((o) => o.changed).map((o) => o.rel),
     models,
     blocks,
+    richtext,
     mdx,
     layouts,
     objects,
-    skippedBlocks,
+    skippedBlocks: [...skippedBlocks, ...skippedRichtext],
     skippedMdx,
     configFile
   };
@@ -374,11 +398,13 @@ function backmatterLoader(source) {
   const root = import_node_path3.default.resolve(options.root);
   const modelsDir = import_node_path3.default.resolve(root, options.modelsDir);
   const blocksDir = import_node_path3.default.resolve(root, options.blocksDir);
+  const richtextDir = import_node_path3.default.resolve(root, options.richtextDir);
   const mdxDir = import_node_path3.default.resolve(root, options.mdxDir);
   const layoutsDir = import_node_path3.default.resolve(root, options.layoutsDir);
   const objectsDir = import_node_path3.default.resolve(root, options.objectsDir);
   this.addContextDependency(modelsDir);
   this.addContextDependency(blocksDir);
+  this.addContextDependency(richtextDir);
   this.addContextDependency(mdxDir);
   this.addContextDependency(layoutsDir);
   this.addContextDependency(objectsDir);
@@ -388,6 +414,7 @@ function backmatterLoader(source) {
     outDir: options.outDir,
     modelsDir: options.modelsDir,
     blocksDir: options.blocksDir,
+    richtextDir: options.richtextDir,
     mdxDir: options.mdxDir,
     layoutsDir: options.layoutsDir,
     objectsDir: options.objectsDir,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/next",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "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.15",
+    "@backmatter/core": "^0.0.16",
     "@mdx-js/mdx": "^3.1.1",
     "remark-gfm": "^4.0.1"
   },

package/src/config.ts

@@ -5,7 +5,7 @@
 //    resolve `import { cms } from ".backmatter"`.
 // 2. Registers `@backmatter/next/loader` for the registry files with Turbopack
 //    (Next 16 default) and webpack (`next build --webpack`). The loader declares
-//    `models/`, `blocks/`, and `mdx/` as context dependencies, so the bundler's
+//    `models/`, `blocks/`, `richtext/`, and `mdx/` as context dependencies, so the bundler's
 //    own file watcher keeps the registry fresh — no polling, no second watcher process.
 import { existsSync } from "node:fs";
 import path from "node:path";
@@ -24,6 +24,7 @@ export type WithBackmatterOptions = {
   outDir?: string;
   modelsDir?: string;
   blocksDir?: string;
+  richtextDir?: string;
   mdxDir?: string;
   layoutsDir?: string;
   objectsDir?: string;
@@ -81,6 +82,7 @@ export function resolveLoaderOptions(options: WithBackmatterOptions = {}): Backm
     outDir: options.outDir ?? DEFAULT_OUT_DIR,
     modelsDir: options.modelsDir ?? DEFAULT_DIRS.models,
     blocksDir: options.blocksDir ?? DEFAULT_DIRS.blocks,
+    richtextDir: options.richtextDir ?? DEFAULT_DIRS.richtext,
     mdxDir: options.mdxDir ?? DEFAULT_DIRS.mdx,
     layoutsDir: options.layoutsDir ?? DEFAULT_DIRS.layouts,
     objectsDir: options.objectsDir ?? DEFAULT_DIRS.objects,
@@ -106,7 +108,7 @@ export function registryMatchers(loaderOptions: BackmatterLoaderOptions): { glob
   const escaped = rel.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   return {
     glob: `**/${rel}/*.ts`,
-    test: new RegExp(`(^|[\\\\/])${escaped.replace(/\//g, "[\\\\/]")}[\\\\/](index|blocks|block-fallbacks|mdx|layouts|sync)\\.ts$`),
+    test: new RegExp(`(^|[\\\\/])${escaped.replace(/\//g, "[\\\\/]")}[\\\\/](index|blocks|block-fallbacks|mdx|richtext|layouts|sync)\\.ts$`),
   };
 }
 

package/src/loader.ts

@@ -1,10 +1,10 @@
 // packages/next/src/loader.ts
-// Bundler loader for `.backmatter/index.ts`, `.backmatter/blocks.ts`, `.backmatter/mdx.ts`,
-// and `.backmatter/layouts.ts`.
+// Bundler loader for `.backmatter/index.ts`, `.backmatter/blocks.ts`,
+// `.backmatter/mdx.ts`, `.backmatter/richtext.ts`, and `.backmatter/layouts.ts`.
 //
 // This is the Tailwind-JIT mechanism: instead of running our own watcher we
 // tell the bundler that these modules depend on the `models/`, `blocks/`,
-// `mdx/`, and `layouts/` directories. webpack and Turbopack already watch the filesystem;
+// `richtext/`, `mdx/`, and `layouts/` directories. webpack and Turbopack already watch the filesystem;
 // when a file is added, removed or renamed there they invalidate the module,
 // re-run this loader, and we regenerate the barrel from a fresh `readdir`.
 import path from "node:path";
@@ -15,6 +15,7 @@ export type BackmatterLoaderOptions = {
   outDir: string;
   modelsDir: string;
   blocksDir: string;
+  richtextDir: string;
   mdxDir: string;
   layoutsDir: string;
   objectsDir: string;
@@ -35,12 +36,14 @@ export default function backmatterLoader(this: BackmatterLoaderContext, source:
   const root = path.resolve(options.root);
   const modelsDir = path.resolve(root, options.modelsDir);
   const blocksDir = path.resolve(root, options.blocksDir);
+  const richtextDir = path.resolve(root, options.richtextDir);
   const mdxDir = path.resolve(root, options.mdxDir);
   const layoutsDir = path.resolve(root, options.layoutsDir);
   const objectsDir = path.resolve(root, options.objectsDir);
 
   this.addContextDependency(modelsDir);
   this.addContextDependency(blocksDir);
+  this.addContextDependency(richtextDir);
   this.addContextDependency(mdxDir);
   this.addContextDependency(layoutsDir);
   this.addContextDependency(objectsDir);
@@ -51,6 +54,7 @@ export default function backmatterLoader(this: BackmatterLoaderContext, source:
     outDir: options.outDir,
     modelsDir: options.modelsDir,
     blocksDir: options.blocksDir,
+    richtextDir: options.richtextDir,
     mdxDir: options.mdxDir,
     layoutsDir: options.layoutsDir,
     objectsDir: options.objectsDir,

package/src/routes.ts

@@ -63,7 +63,7 @@ export type CatchAllRoute = {
   Page: (props: {
     params: Promise<CatchAllParams>;
     searchParams?: Promise<CatchAllSearchParams>;
-  }) => Promise<ReactNode>;
+  }) => ReactNode;
   CmsRoute: (props: {
     params: Promise<CatchAllParams> | CatchAllParams;
     searchParams?: Promise<CatchAllSearchParams> | CatchAllSearchParams;
@@ -248,7 +248,7 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
     params: Promise<CatchAllParams> | CatchAllParams;
     searchParams?: Promise<CatchAllSearchParams> | CatchAllSearchParams;
   }) => {
-    const resolved = await cachedRouteParams(params);
+    const resolved = await params;
     const hit = resolve(resolved[CATCH_ALL_PARAM]);
     if (!hit) return failFor();
     const doc = await cms.getDoc(hit.locale, hit.type, hit.slug);
@@ -267,7 +267,7 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
     params: Promise<CatchAllParams> | CatchAllParams;
     searchParams?: Promise<CatchAllSearchParams> | CatchAllSearchParams;
   }) => {
-    const resolved = await cachedRouteParams(params);
+    const resolved = await params;
     const hit = resolve(resolved[CATCH_ALL_PARAM]);
     if (!hit) return null;
     const preview = await resolvePreviewState(cms, options.preview, searchParams);
@@ -284,11 +284,15 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
     );
   };
 
-  const Page: CatchAllRoute["Page"] = async (props) =>
+  const Page: CatchAllRoute["Page"] = (props) =>
     createElement(
       Fragment,
       null,
-      await PublishedRoute(props),
+      createElement(
+        Suspense,
+        { fallback: createElement("div", { "aria-busy": "true", style: { minHeight: "100vh" } }) },
+        createElement(PublishedRoute, props),
+      ),
       createElement(Suspense, { fallback: null }, createElement(PreviewBranch, props)),
     );