@techrox/page-studio-renderer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 techrox
+
+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,53 @@
+# @techrox/page-studio-renderer
+
+Server-safe renderer for `@techrox/page-studio` Puck output.
+
+Use this on public pages to display whatever your admin saved in the editor. Renders to clean HTML in SSR, so search engines + users see the content immediately — no hydration flash.
+
+```bash
+pnpm add @techrox/page-studio-renderer @techrox/page-studio-blocks
+pnpm add @puckeditor/core                          # peer
+```
+
+## Usage
+
+Next.js App Router (server component):
+
+```jsx
+import { PageStudioRender } from '@techrox/page-studio-renderer';
+import { fetchPage } from '@/lib/cms';
+
+export default async function HomePage() {
+  const data = await fetchPage('page.home');  // your CMS read
+  return (
+    <PageStudioRender
+      data={data}
+      studio={{ /* same shape as the editor */ }}
+      fallback={<StaticDefault />}
+    />
+  );
+}
+```
+
+If `data` is empty or missing, `fallback` is rendered instead — so the public site can always ship a sensible default when the CMS has no override yet.
+
+## Props
+
+| Prop | Type | Notes |
+|---|---|---|
+| `data` | `PuckData \| null` | The JSON your editor saved. Empty `content` arrays render the fallback. |
+| `config` | `PuckConfig` | Optional override; default uses `createPuckConfig()`. |
+| `fallback` | `ReactNode` | Rendered when `data` is missing/empty. Defaults to `null`. |
+| `studio` | `StudioValue` | Forwarded to `<PageStudioProvider>` — same shape as the editor's `studio` prop. |
+
+The renderer **must** see the same `studio` value as the editor so blocks see consistent service catalogues, Link components, and site metadata across edit + view.
+
+## What this package wraps
+
+`<Render>` from `@puckeditor/core`, plus `<PageStudioProvider>` from `@techrox/page-studio-blocks`. That's it.
+
+You could write the same five lines yourself; this package exists so server-only consumers don't have to add the editor as an indirect dependency.
+
+## License
+
+MIT.

package/dist/index.cjs

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  PageStudioProvider: () => import_page_studio_blocks2.PageStudioProvider,
+  PageStudioRender: () => PageStudioRender
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PageStudioRender.jsx
+var import_core = require("@puckeditor/core");
+var import_page_studio_blocks = require("@techrox/page-studio-blocks");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PageStudioRender({
+  data,
+  config,
+  fallback = null,
+  studio
+}) {
+  if (!data || !Array.isArray(data.content) || data.content.length === 0) {
+    return fallback;
+  }
+  const resolved = config || (0, import_page_studio_blocks.createPuckConfig)();
+  const populated = (0, import_page_studio_blocks.applyConfigDefaults)(data, resolved);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_page_studio_blocks.PageStudioProvider, { value: studio, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Render, { config: resolved, data: populated }) });
+}
+
+// src/index.js
+var import_page_studio_blocks2 = require("@techrox/page-studio-blocks");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageStudioProvider,
+  PageStudioRender
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js","../src/PageStudioRender.jsx"],"sourcesContent":["export { PageStudioRender } from './PageStudioRender.jsx';\n// Re-exported for convenience so renderer-only consumers don't need to add\n// the blocks package as a direct import to wrap their tree with context.\nexport { PageStudioProvider } from '@techrox/page-studio-blocks';\n","// Server-safe renderer for Puck output. Designed to be dropped into a\n// Next.js/Remix/Astro server component so the block HTML lands in the SSR\n// response — no client-side render flash.\n//\n// `data` is the Puck JSON saved by the editor (typically stored on the\n// page row in your CMS). If `data` is missing or empty we render the\n// `fallback` so the host can still ship a static page when the CMS has\n// no override yet.\n\nimport { Render } from '@puckeditor/core';\nimport {\n  applyConfigDefaults,\n  createPuckConfig,\n  PageStudioProvider,\n} from '@techrox/page-studio-blocks';\n\nexport function PageStudioRender({\n  data,\n  config,\n  fallback = null,\n  studio,\n}) {\n  if (!data || !Array.isArray(data.content) || data.content.length === 0) {\n    return fallback;\n  }\n  const resolved = config || createPuckConfig();\n  const populated = applyConfigDefaults(data, resolved);\n  // Blocks read site/services/Link/etc. from StudioContext at render time.\n  // Wrapping here means the renderer works the same whether the host is\n  // server-rendered or hydrating on the client.\n  return (\n    <PageStudioProvider value={studio}>\n      <Render config={resolved} data={populated} />\n    </PageStudioProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACSA,kBAAuB;AACvB,gCAIO;AAkBD;AAhBC,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAAG;AACD,MAAI,CAAC,QAAQ,CAAC,MAAM,QAAQ,KAAK,OAAO,KAAK,KAAK,QAAQ,WAAW,GAAG;AACtE,WAAO;AAAA,EACT;AACA,QAAM,WAAW,cAAU,4CAAiB;AAC5C,QAAM,gBAAY,+CAAoB,MAAM,QAAQ;AAIpD,SACE,4CAAC,gDAAmB,OAAO,QACzB,sDAAC,sBAAO,QAAQ,UAAU,MAAM,WAAW,GAC7C;AAEJ;;;ADhCA,IAAAA,6BAAmC;","names":["import_page_studio_blocks"]}

package/dist/index.js

@@ -0,0 +1,29 @@
+// src/PageStudioRender.jsx
+import { Render } from "@puckeditor/core";
+import {
+  applyConfigDefaults,
+  createPuckConfig,
+  PageStudioProvider
+} from "@techrox/page-studio-blocks";
+import { jsx } from "react/jsx-runtime";
+function PageStudioRender({
+  data,
+  config,
+  fallback = null,
+  studio
+}) {
+  if (!data || !Array.isArray(data.content) || data.content.length === 0) {
+    return fallback;
+  }
+  const resolved = config || createPuckConfig();
+  const populated = applyConfigDefaults(data, resolved);
+  return /* @__PURE__ */ jsx(PageStudioProvider, { value: studio, children: /* @__PURE__ */ jsx(Render, { config: resolved, data: populated }) });
+}
+
+// src/index.js
+import { PageStudioProvider as PageStudioProvider2 } from "@techrox/page-studio-blocks";
+export {
+  PageStudioProvider2 as PageStudioProvider,
+  PageStudioRender
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PageStudioRender.jsx","../src/index.js"],"sourcesContent":["// Server-safe renderer for Puck output. Designed to be dropped into a\n// Next.js/Remix/Astro server component so the block HTML lands in the SSR\n// response — no client-side render flash.\n//\n// `data` is the Puck JSON saved by the editor (typically stored on the\n// page row in your CMS). If `data` is missing or empty we render the\n// `fallback` so the host can still ship a static page when the CMS has\n// no override yet.\n\nimport { Render } from '@puckeditor/core';\nimport {\n  applyConfigDefaults,\n  createPuckConfig,\n  PageStudioProvider,\n} from '@techrox/page-studio-blocks';\n\nexport function PageStudioRender({\n  data,\n  config,\n  fallback = null,\n  studio,\n}) {\n  if (!data || !Array.isArray(data.content) || data.content.length === 0) {\n    return fallback;\n  }\n  const resolved = config || createPuckConfig();\n  const populated = applyConfigDefaults(data, resolved);\n  // Blocks read site/services/Link/etc. from StudioContext at render time.\n  // Wrapping here means the renderer works the same whether the host is\n  // server-rendered or hydrating on the client.\n  return (\n    <PageStudioProvider value={studio}>\n      <Render config={resolved} data={populated} />\n    </PageStudioProvider>\n  );\n}\n","export { PageStudioRender } from './PageStudioRender.jsx';\n// Re-exported for convenience so renderer-only consumers don't need to add\n// the blocks package as a direct import to wrap their tree with context.\nexport { PageStudioProvider } from '@techrox/page-studio-blocks';\n"],"mappings":";AASA,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkBD;AAhBC,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAAG;AACD,MAAI,CAAC,QAAQ,CAAC,MAAM,QAAQ,KAAK,OAAO,KAAK,KAAK,QAAQ,WAAW,GAAG;AACtE,WAAO;AAAA,EACT;AACA,QAAM,WAAW,UAAU,iBAAiB;AAC5C,QAAM,YAAY,oBAAoB,MAAM,QAAQ;AAIpD,SACE,oBAAC,sBAAmB,OAAO,QACzB,8BAAC,UAAO,QAAQ,UAAU,MAAM,WAAW,GAC7C;AAEJ;;;AChCA,SAAS,sBAAAA,2BAA0B;","names":["PageStudioProvider"]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@techrox/page-studio-renderer",
+  "version": "1.0.0",
+  "description": "SSR-safe React renderer for displaying saved Puck JSON from @techrox/page-studio on a public page. Small footprint, no editor dependencies.",
+  "license": "MIT",
+  "author": "techrox",
+  "homepage": "https://github.com/techrox/page-studio#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/techrox/page-studio.git",
+    "directory": "packages/renderer"
+  },
+  "bugs": {
+    "url": "https://github.com/techrox/page-studio/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@puckeditor/core": ">=0.21",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@techrox/page-studio-blocks": "1.0.0"
+  },
+  "devDependencies": {
+    "@puckeditor/core": "^0.21.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@techrox/page-studio-blocks": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "renderer",
+    "ssr",
+    "page-renderer",
+    "puck",
+    "puckeditor",
+    "cms",
+    "react",
+    "headless",
+    "page-studio"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}