@genetik/renderer-react 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eugene Michasiw
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @genetik/renderer-react
+
+React binding for **@genetik/renderer**: renders resolved content with a map of block type → React component. Consumes flat content and a schema from @genetik/content and @genetik/schema.
+
+## Installation
+
+```bash
+pnpm add @genetik/renderer-react
+```
+
+Peer dependency: `react` (>=18.0.0).
+
+## Usage
+
+- **renderContent(content, schema, componentMap)** — Resolves content with the schema and renders the root. Returns a React node or null if the entry is missing.
+- **renderNode(node, componentMap)** — Renders a single resolved node (and its slots recursively). Unknown block types render as null.
+
+Block components receive **BlockProps**: `config` (block config) and `slots` (record of slot name → `ReactNode[]`).
+
+See the [docs](/docs/packages/renderer-react) for API and examples.

package/dist/index.cjs

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let react = require("react");
+let _genetik_renderer = require("@genetik/renderer");
+
+//#region src/render.tsx
+/**
+* Resolves content with the schema and renders the root with the component map.
+* Content may be a GenetikContent object or a JSON string (parsing is done by resolve).
+* Returns null if content is invalid, the entry node is missing, or cannot be resolved.
+*/
+function renderContent(content, schema, componentMap) {
+	const root = (0, _genetik_renderer.resolve)(content, schema);
+	if (!root) return null;
+	return renderNode(root, componentMap);
+}
+/**
+* Renders a resolved node tree with the given component map. Unknown block types
+* are skipped (render as null).
+*/
+function renderNode(node, componentMap) {
+	const Component = componentMap[node.block];
+	if (!Component) return null;
+	const slots = {};
+	for (const [slotName, children] of Object.entries(node.slots)) slots[slotName] = children.map((child) => (0, react.createElement)(react.Fragment, { key: child.id }, renderNode(child, componentMap)));
+	return (0, react.createElement)(Component, {
+		config: node.config,
+		slots
+	});
+}
+
+//#endregion
+exports.renderContent = renderContent;
+exports.renderNode = renderNode;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Fragment"],"sources":["../src/render.tsx"],"sourcesContent":["import { createElement, Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { resolve } from \"@genetik/renderer\";\nimport type { GenetikContent } from \"@genetik/content\";\nimport type { GenetikSchema } from \"@genetik/schema\";\nimport type { ResolvedNode } from \"@genetik/renderer\";\nimport type { BlockProps, ComponentMap } from \"./types.js\";\n\n/**\n * Resolves content with the schema and renders the root with the component map.\n * Content may be a GenetikContent object or a JSON string (parsing is done by resolve).\n * Returns null if content is invalid, the entry node is missing, or cannot be resolved.\n */\nexport function renderContent(\n  content: GenetikContent | string,\n  schema: GenetikSchema,\n  componentMap: ComponentMap,\n): ReactNode {\n  const root = resolve(content, schema);\n  if (!root) return null;\n  return renderNode(root, componentMap);\n}\n\n/**\n * Renders a resolved node tree with the given component map. Unknown block types\n * are skipped (render as null).\n */\nexport function renderNode(\n  node: ResolvedNode,\n  componentMap: ComponentMap,\n): ReactNode {\n  const Component = componentMap[node.block];\n  if (!Component) return null;\n\n  const slots: Record<string, ReactNode[]> = {};\n  for (const [slotName, children] of Object.entries(node.slots)) {\n    slots[slotName] = children.map((child) =>\n      createElement(Fragment, { key: child.id }, renderNode(child, componentMap)),\n    );\n  }\n\n  return createElement(Component, {\n    config: node.config,\n    slots,\n  } as BlockProps);\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAgB,cACd,SACA,QACA,cACW;CACX,MAAM,sCAAe,SAAS,OAAO;AACrC,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO,WAAW,MAAM,aAAa;;;;;;AAOvC,SAAgB,WACd,MACA,cACW;CACX,MAAM,YAAY,aAAa,KAAK;AACpC,KAAI,CAAC,UAAW,QAAO;CAEvB,MAAM,QAAqC,EAAE;AAC7C,MAAK,MAAM,CAAC,UAAU,aAAa,OAAO,QAAQ,KAAK,MAAM,CAC3D,OAAM,YAAY,SAAS,KAAK,mCAChBA,gBAAU,EAAE,KAAK,MAAM,IAAI,EAAE,WAAW,OAAO,aAAa,CAAC,CAC5E;AAGH,iCAAqB,WAAW;EAC9B,QAAQ,KAAK;EACb;EACD,CAAe"}

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+import { ComponentType, ReactNode } from "react";
+import { GenetikContent } from "@genetik/content";
+import { GenetikSchema } from "@genetik/schema";
+import { ResolvedNode } from "@genetik/renderer";
+
+//#region src/types.d.ts
+/**
+ * Props passed to every block component: config and resolved slot content.
+ * Each slot is an array of React nodes (already rendered children).
+ */
+interface BlockProps {
+  /** Block-specific config from content. */
+  config: Record<string, unknown>;
+  /** Rendered children by slot name. Each value is an array of ReactNode. */
+  slots: Record<string, ReactNode[]>;
+}
+/**
+ * Map from block type name to React component. Used by renderContent.
+ */
+type ComponentMap = Record<string, ComponentType<BlockProps>>;
+//#endregion
+//#region src/render.d.ts
+/**
+ * Resolves content with the schema and renders the root with the component map.
+ * Content may be a GenetikContent object or a JSON string (parsing is done by resolve).
+ * Returns null if content is invalid, the entry node is missing, or cannot be resolved.
+ */
+declare function renderContent(content: GenetikContent | string, schema: GenetikSchema, componentMap: ComponentMap): ReactNode;
+/**
+ * Renders a resolved node tree with the given component map. Unknown block types
+ * are skipped (render as null).
+ */
+declare function renderNode(node: ResolvedNode, componentMap: ComponentMap): ReactNode;
+//#endregion
+export { type BlockProps, type ComponentMap, renderContent, renderNode };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/render.tsx"],"mappings":";;;;;;;;;;UAMiB,UAAA;EAAA;EAEf,MAAA,EAAQ,MAAA;;EAER,KAAA,EAAO,MAAA,SAAe,SAAA;AAAA;;;;KAMZ,YAAA,GAAe,MAAA,SAAe,aAAA,CAAc,UAAA;;;;AAVxD;;;;iBCOgB,aAAA,CACd,OAAA,EAAS,cAAA,WACT,MAAA,EAAQ,aAAA,EACR,YAAA,EAAc,YAAA,GACb,SAAA;;;;;iBAUa,UAAA,CACd,IAAA,EAAM,YAAA,EACN,YAAA,EAAc,YAAA,GACb,SAAA"}

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+import { ComponentType, ReactNode } from "react";
+import { ResolvedNode } from "@genetik/renderer";
+import { GenetikContent } from "@genetik/content";
+import { GenetikSchema } from "@genetik/schema";
+
+//#region src/types.d.ts
+/**
+ * Props passed to every block component: config and resolved slot content.
+ * Each slot is an array of React nodes (already rendered children).
+ */
+interface BlockProps {
+  /** Block-specific config from content. */
+  config: Record<string, unknown>;
+  /** Rendered children by slot name. Each value is an array of ReactNode. */
+  slots: Record<string, ReactNode[]>;
+}
+/**
+ * Map from block type name to React component. Used by renderContent.
+ */
+type ComponentMap = Record<string, ComponentType<BlockProps>>;
+//#endregion
+//#region src/render.d.ts
+/**
+ * Resolves content with the schema and renders the root with the component map.
+ * Content may be a GenetikContent object or a JSON string (parsing is done by resolve).
+ * Returns null if content is invalid, the entry node is missing, or cannot be resolved.
+ */
+declare function renderContent(content: GenetikContent | string, schema: GenetikSchema, componentMap: ComponentMap): ReactNode;
+/**
+ * Renders a resolved node tree with the given component map. Unknown block types
+ * are skipped (render as null).
+ */
+declare function renderNode(node: ResolvedNode, componentMap: ComponentMap): ReactNode;
+//#endregion
+export { type BlockProps, type ComponentMap, renderContent, renderNode };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/render.tsx"],"mappings":";;;;;;;;;;UAMiB,UAAA;EAAA;EAEf,MAAA,EAAQ,MAAA;;EAER,KAAA,EAAO,MAAA,SAAe,SAAA;AAAA;;;;KAMZ,YAAA,GAAe,MAAA,SAAe,aAAA,CAAc,UAAA;;;;AAVxD;;;;iBCOgB,aAAA,CACd,OAAA,EAAS,cAAA,WACT,MAAA,EAAQ,aAAA,EACR,YAAA,EAAc,YAAA,GACb,SAAA;;;;;iBAUa,UAAA,CACd,IAAA,EAAM,YAAA,EACN,YAAA,EAAc,YAAA,GACb,SAAA"}

package/dist/index.mjs

@@ -0,0 +1,32 @@
+import { Fragment, createElement } from "react";
+import { resolve } from "@genetik/renderer";
+
+//#region src/render.tsx
+/**
+* Resolves content with the schema and renders the root with the component map.
+* Content may be a GenetikContent object or a JSON string (parsing is done by resolve).
+* Returns null if content is invalid, the entry node is missing, or cannot be resolved.
+*/
+function renderContent(content, schema, componentMap) {
+	const root = resolve(content, schema);
+	if (!root) return null;
+	return renderNode(root, componentMap);
+}
+/**
+* Renders a resolved node tree with the given component map. Unknown block types
+* are skipped (render as null).
+*/
+function renderNode(node, componentMap) {
+	const Component = componentMap[node.block];
+	if (!Component) return null;
+	const slots = {};
+	for (const [slotName, children] of Object.entries(node.slots)) slots[slotName] = children.map((child) => createElement(Fragment, { key: child.id }, renderNode(child, componentMap)));
+	return createElement(Component, {
+		config: node.config,
+		slots
+	});
+}
+
+//#endregion
+export { renderContent, renderNode };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/render.tsx"],"sourcesContent":["import { createElement, Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { resolve } from \"@genetik/renderer\";\nimport type { GenetikContent } from \"@genetik/content\";\nimport type { GenetikSchema } from \"@genetik/schema\";\nimport type { ResolvedNode } from \"@genetik/renderer\";\nimport type { BlockProps, ComponentMap } from \"./types.js\";\n\n/**\n * Resolves content with the schema and renders the root with the component map.\n * Content may be a GenetikContent object or a JSON string (parsing is done by resolve).\n * Returns null if content is invalid, the entry node is missing, or cannot be resolved.\n */\nexport function renderContent(\n  content: GenetikContent | string,\n  schema: GenetikSchema,\n  componentMap: ComponentMap,\n): ReactNode {\n  const root = resolve(content, schema);\n  if (!root) return null;\n  return renderNode(root, componentMap);\n}\n\n/**\n * Renders a resolved node tree with the given component map. Unknown block types\n * are skipped (render as null).\n */\nexport function renderNode(\n  node: ResolvedNode,\n  componentMap: ComponentMap,\n): ReactNode {\n  const Component = componentMap[node.block];\n  if (!Component) return null;\n\n  const slots: Record<string, ReactNode[]> = {};\n  for (const [slotName, children] of Object.entries(node.slots)) {\n    slots[slotName] = children.map((child) =>\n      createElement(Fragment, { key: child.id }, renderNode(child, componentMap)),\n    );\n  }\n\n  return createElement(Component, {\n    config: node.config,\n    slots,\n  } as BlockProps);\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,cACd,SACA,QACA,cACW;CACX,MAAM,OAAO,QAAQ,SAAS,OAAO;AACrC,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO,WAAW,MAAM,aAAa;;;;;;AAOvC,SAAgB,WACd,MACA,cACW;CACX,MAAM,YAAY,aAAa,KAAK;AACpC,KAAI,CAAC,UAAW,QAAO;CAEvB,MAAM,QAAqC,EAAE;AAC7C,MAAK,MAAM,CAAC,UAAU,aAAa,OAAO,QAAQ,KAAK,MAAM,CAC3D,OAAM,YAAY,SAAS,KAAK,UAC9B,cAAc,UAAU,EAAE,KAAK,MAAM,IAAI,EAAE,WAAW,OAAO,aAAa,CAAC,CAC5E;AAGH,QAAO,cAAc,WAAW;EAC9B,QAAQ,KAAK;EACb;EACD,CAAe"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@genetik/renderer-react",
+  "version": "0.0.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@genetik/content": "0.0.0",
+    "@genetik/schema": "0.0.0",
+    "@genetik/renderer": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "eslint": "^9.39.1",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsdown": "0.20.3",
+    "typescript": "5.9.2",
+    "vitest": "^2.1.8",
+    "@genetik/eslint-config": "0.0.0",
+    "@genetik/typescript-config": "0.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}