@styleflow.app/flowpress-astro-core 0.2.0-beta.13 → 0.2.0-beta.14

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.2.0-beta.14
+
+- Added a recursive project block-renderer registry to
+  `GutenbergRenderer.astro`, including imported `sf/template` and resolved
+  query-item descendants.
+
 ## 0.2.0-beta.13
 
 - Kept number spinners static on their final values when

package/README.md

@@ -9,7 +9,7 @@ The package must not import from an application or project plugin.
 ## Install
 
 ```bash
-pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.13
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.14
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -44,6 +44,32 @@ visible characters. The exported
 from rendered CMS blocks so consumers can generate Tailwind
 `@source inline()` directives before compiling their frontend CSS.
 
+Projects can add renderers for project-owned Gutenberg blocks without copying
+or patching the core renderer. Pass a `FlowpressBlockRenderers` map keyed by the
+full block name; the registry is propagated through every recursive rendering
+path, including imported `sf/template` content and resolved query-item
+templates.
+
+```astro
+---
+import GutenbergRenderer from "@styleflow.app/flowpress-astro-core/GutenbergRenderer.astro";
+import type {
+  FlowpressBlockRenderers
+} from "@styleflow.app/flowpress-astro-core";
+import ProjectTimelineBlock from "./ProjectTimelineBlock.astro";
+
+const blockRenderers = {
+  "sf/timeline": ProjectTimelineBlock
+} satisfies FlowpressBlockRenderers;
+---
+
+<GutenbergRenderer blocks={blocks} blockRenderers={blockRenderers} />
+```
+
+Each custom renderer receives the original `block` and optional StyleFlow
+`contract`. Its default slot contains recursively rendered child blocks, so a
+container override can place `<slot />` where its children belong.
+
 `sf/number-spinner` renders prefix, target number and suffix with independent
 semantic tags and StyleFlow text coordinates. Its numeric value counts from
 zero only when it enters the viewport. The final target remains available to

package/dist/astro/GutenbergRenderer.astro

@@ -1,5 +1,6 @@
 ---
 import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlockRenderers } from "../block-renderers.js";
 import type { StyleflowContract } from "../styleflow.js";
 import type { FlowpressBlock } from "../types.js";
 import ColumnBlock from "./blocks/ColumnBlock.astro";
@@ -20,9 +21,10 @@ import {
 interface Props {
   blocks: FlowpressBlock[];
   contract?: StyleflowContract;
+  blockRenderers?: FlowpressBlockRenderers;
 }
 
-const { blocks, contract } = Astro.props;
+const { blocks, contract, blockRenderers = {} } = Astro.props;
 
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
@@ -47,11 +49,28 @@ function youtubeEmbedUrl(value: unknown): string | null {
   const children = block.innerBlocks ?? [];
   const semantic = semanticProps(block.attributes, contract);
   const htmlAttributes = blockHtmlAttributes(block.attributes);
+  const CustomBlockRenderer = blockRenderers[block.name];
+
+  if (CustomBlockRenderer) {
+    return (
+      <CustomBlockRenderer block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </CustomBlockRenderer>
+    );
+  }
 
   if (name === "hero") {
     return (
       <HeroBlock block={block} contract={contract}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
       </HeroBlock>
     );
   }
@@ -59,7 +78,11 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "grid") {
     return (
       <GridBlock block={block} contract={contract}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
       </GridBlock>
     );
   }
@@ -67,7 +90,11 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "column") {
     return (
       <ColumnBlock block={block} contract={contract}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
       </ColumnBlock>
     );
   }
@@ -88,7 +115,11 @@ function youtubeEmbedUrl(value: unknown): string | null {
   ].includes(name)) {
     return (
       <TextBlock block={block} contract={contract} hasChildren={children.length > 0}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
       </TextBlock>
     );
   }
@@ -216,7 +247,11 @@ function youtubeEmbedUrl(value: unknown): string | null {
         {items.map((item, index) => (
           <S as="li">
             {resolvedBlocks[index]?.length ? (
-              <Astro.self blocks={resolvedBlocks[index]} contract={contract} />
+              <Astro.self
+                blocks={resolvedBlocks[index]}
+                contract={contract}
+                blockRenderers={blockRenderers}
+              />
             ) : (
               <ListItemFallback item={item} />
             )}
@@ -229,10 +264,18 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "template") {
     return Object.keys(htmlAttributes).length > 0 ? (
       <div {...htmlAttributes}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
       </div>
     ) : (
-      <Astro.self blocks={children} contract={contract} />
+      <Astro.self
+        blocks={children}
+        contract={contract}
+        blockRenderers={blockRenderers}
+      />
     );
   }
 
@@ -245,7 +288,11 @@ function youtubeEmbedUrl(value: unknown): string | null {
       <S as="div" {...semantic} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
-          <Astro.self blocks={children} contract={contract} />
+          <Astro.self
+            blocks={children}
+            contract={contract}
+            blockRenderers={blockRenderers}
+          />
         </details>
       </S>
     );
@@ -296,7 +343,13 @@ function youtubeEmbedUrl(value: unknown): string | null {
     <S as={layoutTag} {...semantic} {...htmlAttributes}>
       {block.innerHtml && children.length === 0
         ? <S as="div" set:html={block.innerHtml} />
-        : <Astro.self blocks={children} contract={contract} />}
+        : (
+          <Astro.self
+            blocks={children}
+            contract={contract}
+            blockRenderers={blockRenderers}
+          />
+        )}
     </S>
   );
 })}

package/dist/block-renderers.d.ts

@@ -0,0 +1,10 @@
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+import type { StyleflowContract } from "./styleflow.js";
+import type { FlowpressBlock } from "./types.js";
+export interface FlowpressBlockRendererProps {
+    block: FlowpressBlock;
+    contract?: StyleflowContract;
+}
+export type FlowpressBlockRenderer = AstroComponentFactory;
+export type FlowpressBlockRenderers = Readonly<Record<string, FlowpressBlockRenderer>>;
+//# sourceMappingURL=block-renderers.d.ts.map

package/dist/block-renderers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-renderers.d.ts","sourceRoot":"","sources":["../src/block-renderers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAC5C,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CACvC,CAAC"}

package/dist/block-renderers.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=block-renderers.js.map

package/dist/block-renderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-renderers.js","sourceRoot":"","sources":["../src/block-renderers.ts"],"names":[],"mappings":"","sourcesContent":["import type { AstroComponentFactory } from \"astro/runtime/server/index.js\";\nimport type { StyleflowContract } from \"./styleflow.js\";\nimport type { FlowpressBlock } from \"./types.js\";\n\nexport interface FlowpressBlockRendererProps {\n  block: FlowpressBlock;\n  contract?: StyleflowContract;\n}\n\nexport type FlowpressBlockRenderer = AstroComponentFactory;\n\nexport type FlowpressBlockRenderers = Readonly<\n  Record<string, FlowpressBlockRenderer>\n>;\n"]}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./client.js";
+export * from "./block-renderers.js";
 export * from "./env.js";
 export * from "./number-spinner.js";
 export * from "./styleflow.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./client.js";
+export * from "./block-renderers.js";
 export * from "./env.js";
 export * from "./number-spinner.js";
 export * from "./styleflow.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./client.js\";\nexport * from \"./env.js\";\nexport * from \"./number-spinner.js\";\nexport * from \"./styleflow.js\";\nexport * from \"./style-classes.js\";\nexport * from \"./template-hierarchy.js\";\nexport * from \"./types.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./client.js\";\nexport * from \"./block-renderers.js\";\nexport * from \"./env.js\";\nexport * from \"./number-spinner.js\";\nexport * from \"./styleflow.js\";\nexport * from \"./style-classes.js\";\nexport * from \"./template-hierarchy.js\";\nexport * from \"./types.js\";\n"]}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/astro.d.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/number-spinner.ts","../src/style-classes.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts","../src/astro/blocks/helpers.ts"],"version":"5.9.3"}
+{"root":["../src/astro.d.ts","../src/block-renderers.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/number-spinner.ts","../src/style-classes.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts","../src/astro/blocks/helpers.ts"],"version":"5.9.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleflow.app/flowpress-astro-core",
-  "version": "0.2.0-beta.13",
+  "version": "0.2.0-beta.14",
   "description": "Project-agnostic WordPress routing, templates, SEO and GraphQL runtime for FlowPress Astro apps.",
   "type": "module",
   "private": false,
@@ -36,7 +36,8 @@
   "scripts": {
     "build": "tsc -b && node ./scripts/copy-astro.mjs",
     "typecheck": "tsc -b --pretty false && node ./scripts/copy-astro.mjs && astro check",
-    "test": "vitest run",
+    "test": "vitest run && npm run test:renderer",
+    "test:renderer": "node ./scripts/test-custom-renderer.mjs",
     "release:check": "npm run typecheck && npm test && npm pack --dry-run",
     "release:publish:next": "npm publish --access public --tag next",
     "release:publish:latest": "npm publish --access public --tag latest",