@commercetools-demo/puck-renderer 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react';
+import { PuckData, PuckConfig } from '@commercetools-demo/puck-types';
+
+interface PuckDataRendererProps {
+    /** The Puck Data to render (from the API or SSR props). */
+    data: PuckData;
+    /**
+     * The Puck Config that defines available components and their render functions.
+     * Must match the config used in the editor to ensure consistent output.
+     */
+    config: PuckConfig;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * SSR-friendly renderer — no data fetching, renders whatever Data you pass in.
+ * Wrap with PuckApiProvider only if you use it alongside API hooks.
+ */
+declare const PuckDataRenderer: React.FC<PuckDataRendererProps>;
+
+interface PuckRendererProps {
+    /**
+     * Whether to render a page or a content item. Defaults to 'page'.
+     * - 'page': use pageKey or slug to fetch
+     * - 'content': use contentKey or query (contentType) to fetch
+     */
+    type?: 'page' | 'content';
+    /**
+     * Service base URL. Can be omitted if a PuckApiProvider is already in the tree.
+     */
+    baseURL?: string;
+    /** CommerceTools project key. Can be omitted if provider is in tree. */
+    projectKey?: string;
+    /** Business unit key. Can be omitted if provider is in tree. */
+    businessUnitKey?: string;
+    /** [type=page] Fetch by page key. */
+    pageKey?: string;
+    /** [type=page] OR fetch by slug (URL path). */
+    slug?: string;
+    /** [type=content] Fetch by content key. */
+    contentKey?: string;
+    /** [type=content] OR fetch by contentType query string. */
+    query?: string;
+    /** 'published' (default) or 'preview' (draft || published). */
+    mode?: 'published' | 'preview';
+    /**
+     * Puck config — must match the config used in the editor.
+     */
+    config: PuckConfig;
+    /** Custom loading indicator. */
+    loadingComponent?: ReactElement;
+    /** Custom error display. */
+    errorComponent?: ReactElement;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const PuckRenderer: React.FC<PuckRendererProps>;
+
+export { PuckDataRenderer, type PuckDataRendererProps, PuckRenderer, type PuckRendererProps };

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react';
+import { PuckData, PuckConfig } from '@commercetools-demo/puck-types';
+
+interface PuckDataRendererProps {
+    /** The Puck Data to render (from the API or SSR props). */
+    data: PuckData;
+    /**
+     * The Puck Config that defines available components and their render functions.
+     * Must match the config used in the editor to ensure consistent output.
+     */
+    config: PuckConfig;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * SSR-friendly renderer — no data fetching, renders whatever Data you pass in.
+ * Wrap with PuckApiProvider only if you use it alongside API hooks.
+ */
+declare const PuckDataRenderer: React.FC<PuckDataRendererProps>;
+
+interface PuckRendererProps {
+    /**
+     * Whether to render a page or a content item. Defaults to 'page'.
+     * - 'page': use pageKey or slug to fetch
+     * - 'content': use contentKey or query (contentType) to fetch
+     */
+    type?: 'page' | 'content';
+    /**
+     * Service base URL. Can be omitted if a PuckApiProvider is already in the tree.
+     */
+    baseURL?: string;
+    /** CommerceTools project key. Can be omitted if provider is in tree. */
+    projectKey?: string;
+    /** Business unit key. Can be omitted if provider is in tree. */
+    businessUnitKey?: string;
+    /** [type=page] Fetch by page key. */
+    pageKey?: string;
+    /** [type=page] OR fetch by slug (URL path). */
+    slug?: string;
+    /** [type=content] Fetch by content key. */
+    contentKey?: string;
+    /** [type=content] OR fetch by contentType query string. */
+    query?: string;
+    /** 'published' (default) or 'preview' (draft || published). */
+    mode?: 'published' | 'preview';
+    /**
+     * Puck config — must match the config used in the editor.
+     */
+    config: PuckConfig;
+    /** Custom loading indicator. */
+    loadingComponent?: ReactElement;
+    /** Custom error display. */
+    errorComponent?: ReactElement;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const PuckRenderer: React.FC<PuckRendererProps>;
+
+export { PuckDataRenderer, type PuckDataRendererProps, PuckRenderer, type PuckRendererProps };

package/dist/index.js

@@ -0,0 +1,191 @@
+"use strict";
+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.ts
+var index_exports = {};
+__export(index_exports, {
+  PuckDataRenderer: () => PuckDataRenderer,
+  PuckRenderer: () => PuckRenderer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PuckDataRenderer.tsx
+var import_puck = require("@measured/puck");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PuckDataRenderer = ({
+  data,
+  config,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_puck.Render, { config, data }) });
+};
+
+// src/PuckRenderer.tsx
+var import_react = require("react");
+var import_puck_api = require("@commercetools-demo/puck-api");
+var import_puck_api2 = require("@commercetools-demo/puck-api");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PuckRendererInner = ({
+  type,
+  pageKey,
+  slug,
+  contentKey,
+  query,
+  mode,
+  config,
+  loadingComponent,
+  errorComponent,
+  className,
+  style
+}) => {
+  const { baseURL, projectKey, businessUnitKey } = (0, import_puck_api.usePuckApiContext)();
+  const [data, setData] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        if (type === "content") {
+          let puckData = null;
+          if (contentKey) {
+            const value = mode === "published" ? await (0, import_puck_api2.getPublishedPuckContentApi)(baseURL, projectKey, businessUnitKey, contentKey) : await (0, import_puck_api2.getPreviewPuckContentApi)(baseURL, projectKey, businessUnitKey, contentKey);
+            puckData = value.data;
+          } else if (query) {
+            const value = await (0, import_puck_api2.queryPuckContentApi)(baseURL, projectKey, businessUnitKey, query, mode);
+            puckData = value?.data ?? null;
+          }
+          if (!cancelled) {
+            if (puckData) {
+              setData(puckData);
+            } else {
+              setError("Content not found");
+            }
+          }
+        } else {
+          let pageValue = null;
+          if (pageKey) {
+            pageValue = mode === "published" ? await (0, import_puck_api2.getPublishedPuckPageApi)(baseURL, projectKey, businessUnitKey, pageKey) : await (0, import_puck_api2.getPreviewPuckPageApi)(baseURL, projectKey, businessUnitKey, pageKey);
+          } else if (slug) {
+            pageValue = await (0, import_puck_api2.queryPuckPageApi)(baseURL, projectKey, businessUnitKey, slug, mode);
+          }
+          if (!cancelled) {
+            if (pageValue) {
+              setData(pageValue.puckData);
+            } else {
+              setError("Page not found");
+            }
+          }
+        }
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [baseURL, projectKey, businessUnitKey, type, pageKey, slug, contentKey, query, mode]);
+  if (loading) {
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "64px",
+          color: "#6b7280"
+        },
+        children: "Loading\u2026"
+      }
+    );
+  }
+  if (error || !data) {
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          padding: "32px",
+          color: "#dc2626",
+          background: "#fef2f2",
+          borderRadius: "8px"
+        },
+        children: error ?? "Failed to load"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PuckDataRenderer, { data, config, className, style });
+};
+var PuckRenderer = ({
+  type = "page",
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  pageKey,
+  slug,
+  contentKey,
+  query,
+  mode = "published",
+  config,
+  loadingComponent,
+  errorComponent,
+  className,
+  style
+}) => {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    PuckRendererInner,
+    {
+      type,
+      pageKey,
+      slug,
+      contentKey,
+      query,
+      mode,
+      config,
+      loadingComponent,
+      errorComponent,
+      className,
+      style
+    }
+  );
+  if (baseURL && projectKey && businessUnitKey) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_puck_api.PuckApiProvider,
+      {
+        baseURL,
+        projectKey,
+        businessUnitKey,
+        children: inner
+      }
+    );
+  }
+  return inner;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PuckDataRenderer,
+  PuckRenderer
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/PuckDataRenderer.tsx","../src/PuckRenderer.tsx"],"sourcesContent":["export { PuckDataRenderer } from './PuckDataRenderer';\nexport type { PuckDataRendererProps } from './PuckDataRenderer';\n\nexport { PuckRenderer } from './PuckRenderer';\nexport type { PuckRendererProps } from './PuckRenderer';\n","import React from 'react';\nimport { Render } from '@measured/puck';\nimport type { Config, Data } from '@measured/puck';\nimport type { PuckData, PuckConfig } from '@commercetools-demo/puck-types';\n\nexport interface PuckDataRendererProps {\n  /** The Puck Data to render (from the API or SSR props). */\n  data: PuckData;\n  /**\n   * The Puck Config that defines available components and their render functions.\n   * Must match the config used in the editor to ensure consistent output.\n   */\n  config: PuckConfig;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * SSR-friendly renderer — no data fetching, renders whatever Data you pass in.\n * Wrap with PuckApiProvider only if you use it alongside API hooks.\n */\nexport const PuckDataRenderer: React.FC<PuckDataRendererProps> = ({\n  data,\n  config,\n  className,\n  style,\n}) => {\n  return (\n    <div className={className} style={style}>\n      <Render config={config as Config} data={data as Data} />\n    </div>\n  );\n};\n","import React, { useEffect, useState, type ReactElement } from 'react';\nimport { PuckApiProvider, usePuckApiContext } from '@commercetools-demo/puck-api';\nimport {\n  getPublishedPuckPageApi,\n  getPreviewPuckPageApi,\n  queryPuckPageApi,\n  getPublishedPuckContentApi,\n  getPreviewPuckContentApi,\n  queryPuckContentApi,\n} from '@commercetools-demo/puck-api';\nimport type { PuckConfig, PuckData } from '@commercetools-demo/puck-types';\nimport { PuckDataRenderer } from './PuckDataRenderer';\n\n// ---------------------------------------------------------------------------\n// Inner component (needs PuckApiContext)\n// ---------------------------------------------------------------------------\n\ninterface PuckRendererInnerProps {\n  type: 'page' | 'content';\n  pageKey?: string;\n  slug?: string;\n  contentKey?: string;\n  query?: string;\n  mode: 'published' | 'preview';\n  config: PuckConfig;\n  loadingComponent?: ReactElement;\n  errorComponent?: ReactElement;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst PuckRendererInner: React.FC<PuckRendererInnerProps> = ({\n  type,\n  pageKey,\n  slug,\n  contentKey,\n  query,\n  mode,\n  config,\n  loadingComponent,\n  errorComponent,\n  className,\n  style,\n}) => {\n  const { baseURL, projectKey, businessUnitKey } = usePuckApiContext();\n\n  const [data, setData] = useState<PuckData | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const fetchData = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        if (type === 'content') {\n          let puckData: PuckData | null = null;\n\n          if (contentKey) {\n            const value =\n              mode === 'published'\n                ? await getPublishedPuckContentApi(baseURL, projectKey, businessUnitKey, contentKey)\n                : await getPreviewPuckContentApi(baseURL, projectKey, businessUnitKey, contentKey);\n            puckData = value.data;\n          } else if (query) {\n            const value = await queryPuckContentApi(baseURL, projectKey, businessUnitKey, query, mode);\n            puckData = value?.data ?? null;\n          }\n\n          if (!cancelled) {\n            if (puckData) {\n              setData(puckData);\n            } else {\n              setError('Content not found');\n            }\n          }\n        } else {\n          // type === 'page'\n          let pageValue = null;\n\n          if (pageKey) {\n            pageValue =\n              mode === 'published'\n                ? await getPublishedPuckPageApi(baseURL, projectKey, businessUnitKey, pageKey)\n                : await getPreviewPuckPageApi(baseURL, projectKey, businessUnitKey, pageKey);\n          } else if (slug) {\n            pageValue = await queryPuckPageApi(baseURL, projectKey, businessUnitKey, slug, mode);\n          }\n\n          if (!cancelled) {\n            if (pageValue) {\n              setData(pageValue.puckData);\n            } else {\n              setError('Page not found');\n            }\n          }\n        }\n      } catch (err) {\n        if (!cancelled) setError((err as Error).message);\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    };\n\n    void fetchData();\n    return () => {\n      cancelled = true;\n    };\n  }, [baseURL, projectKey, businessUnitKey, type, pageKey, slug, contentKey, query, mode]);\n\n  if (loading) {\n    return (\n      loadingComponent ?? (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: '64px',\n            color: '#6b7280',\n          }}\n        >\n          Loading…\n        </div>\n      )\n    );\n  }\n\n  if (error || !data) {\n    return (\n      errorComponent ?? (\n        <div\n          style={{\n            padding: '32px',\n            color: '#dc2626',\n            background: '#fef2f2',\n            borderRadius: '8px',\n          }}\n        >\n          {error ?? 'Failed to load'}\n        </div>\n      )\n    );\n  }\n\n  return <PuckDataRenderer data={data} config={config} className={className} style={style} />;\n};\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PuckRendererProps {\n  /**\n   * Whether to render a page or a content item. Defaults to 'page'.\n   * - 'page': use pageKey or slug to fetch\n   * - 'content': use contentKey or query (contentType) to fetch\n   */\n  type?: 'page' | 'content';\n\n  /**\n   * Service base URL. Can be omitted if a PuckApiProvider is already in the tree.\n   */\n  baseURL?: string;\n  /** CommerceTools project key. Can be omitted if provider is in tree. */\n  projectKey?: string;\n  /** Business unit key. Can be omitted if provider is in tree. */\n  businessUnitKey?: string;\n\n  /** [type=page] Fetch by page key. */\n  pageKey?: string;\n  /** [type=page] OR fetch by slug (URL path). */\n  slug?: string;\n\n  /** [type=content] Fetch by content key. */\n  contentKey?: string;\n  /** [type=content] OR fetch by contentType query string. */\n  query?: string;\n\n  /** 'published' (default) or 'preview' (draft || published). */\n  mode?: 'published' | 'preview';\n\n  /**\n   * Puck config — must match the config used in the editor.\n   */\n  config: PuckConfig;\n\n  /** Custom loading indicator. */\n  loadingComponent?: ReactElement;\n  /** Custom error display. */\n  errorComponent?: ReactElement;\n\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const PuckRenderer: React.FC<PuckRendererProps> = ({\n  type = 'page',\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  pageKey,\n  slug,\n  contentKey,\n  query,\n  mode = 'published',\n  config,\n  loadingComponent,\n  errorComponent,\n  className,\n  style,\n}) => {\n  const inner = (\n    <PuckRendererInner\n      type={type}\n      pageKey={pageKey}\n      slug={slug}\n      contentKey={contentKey}\n      query={query}\n      mode={mode}\n      config={config}\n      loadingComponent={loadingComponent}\n      errorComponent={errorComponent}\n      className={className}\n      style={style}\n    />\n  );\n\n  if (baseURL && projectKey && businessUnitKey) {\n    return (\n      <PuckApiProvider\n        baseURL={baseURL}\n        projectKey={projectKey}\n        businessUnitKey={businessUnitKey}\n      >\n        {inner}\n      </PuckApiProvider>\n    );\n  }\n\n  return inner;\n};\n"],"mappings":"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","names":["import_puck_api","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,170 @@
+// src/PuckDataRenderer.tsx
+import { Render } from "@measured/puck";
+import { jsx } from "react/jsx-runtime";
+var PuckDataRenderer = ({
+  data,
+  config,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(Render, { config, data }) });
+};
+
+// src/PuckRenderer.tsx
+import { useEffect, useState } from "react";
+import { PuckApiProvider, usePuckApiContext } from "@commercetools-demo/puck-api";
+import {
+  getPublishedPuckPageApi,
+  getPreviewPuckPageApi,
+  queryPuckPageApi,
+  getPublishedPuckContentApi,
+  getPreviewPuckContentApi,
+  queryPuckContentApi
+} from "@commercetools-demo/puck-api";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PuckRendererInner = ({
+  type,
+  pageKey,
+  slug,
+  contentKey,
+  query,
+  mode,
+  config,
+  loadingComponent,
+  errorComponent,
+  className,
+  style
+}) => {
+  const { baseURL, projectKey, businessUnitKey } = usePuckApiContext();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        if (type === "content") {
+          let puckData = null;
+          if (contentKey) {
+            const value = mode === "published" ? await getPublishedPuckContentApi(baseURL, projectKey, businessUnitKey, contentKey) : await getPreviewPuckContentApi(baseURL, projectKey, businessUnitKey, contentKey);
+            puckData = value.data;
+          } else if (query) {
+            const value = await queryPuckContentApi(baseURL, projectKey, businessUnitKey, query, mode);
+            puckData = value?.data ?? null;
+          }
+          if (!cancelled) {
+            if (puckData) {
+              setData(puckData);
+            } else {
+              setError("Content not found");
+            }
+          }
+        } else {
+          let pageValue = null;
+          if (pageKey) {
+            pageValue = mode === "published" ? await getPublishedPuckPageApi(baseURL, projectKey, businessUnitKey, pageKey) : await getPreviewPuckPageApi(baseURL, projectKey, businessUnitKey, pageKey);
+          } else if (slug) {
+            pageValue = await queryPuckPageApi(baseURL, projectKey, businessUnitKey, slug, mode);
+          }
+          if (!cancelled) {
+            if (pageValue) {
+              setData(pageValue.puckData);
+            } else {
+              setError("Page not found");
+            }
+          }
+        }
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [baseURL, projectKey, businessUnitKey, type, pageKey, slug, contentKey, query, mode]);
+  if (loading) {
+    return loadingComponent ?? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "64px",
+          color: "#6b7280"
+        },
+        children: "Loading\u2026"
+      }
+    );
+  }
+  if (error || !data) {
+    return errorComponent ?? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          padding: "32px",
+          color: "#dc2626",
+          background: "#fef2f2",
+          borderRadius: "8px"
+        },
+        children: error ?? "Failed to load"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(PuckDataRenderer, { data, config, className, style });
+};
+var PuckRenderer = ({
+  type = "page",
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  pageKey,
+  slug,
+  contentKey,
+  query,
+  mode = "published",
+  config,
+  loadingComponent,
+  errorComponent,
+  className,
+  style
+}) => {
+  const inner = /* @__PURE__ */ jsx2(
+    PuckRendererInner,
+    {
+      type,
+      pageKey,
+      slug,
+      contentKey,
+      query,
+      mode,
+      config,
+      loadingComponent,
+      errorComponent,
+      className,
+      style
+    }
+  );
+  if (baseURL && projectKey && businessUnitKey) {
+    return /* @__PURE__ */ jsx2(
+      PuckApiProvider,
+      {
+        baseURL,
+        projectKey,
+        businessUnitKey,
+        children: inner
+      }
+    );
+  }
+  return inner;
+};
+export {
+  PuckDataRenderer,
+  PuckRenderer
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PuckDataRenderer.tsx","../src/PuckRenderer.tsx"],"sourcesContent":["import React from 'react';\nimport { Render } from '@measured/puck';\nimport type { Config, Data } from '@measured/puck';\nimport type { PuckData, PuckConfig } from '@commercetools-demo/puck-types';\n\nexport interface PuckDataRendererProps {\n  /** The Puck Data to render (from the API or SSR props). */\n  data: PuckData;\n  /**\n   * The Puck Config that defines available components and their render functions.\n   * Must match the config used in the editor to ensure consistent output.\n   */\n  config: PuckConfig;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * SSR-friendly renderer — no data fetching, renders whatever Data you pass in.\n * Wrap with PuckApiProvider only if you use it alongside API hooks.\n */\nexport const PuckDataRenderer: React.FC<PuckDataRendererProps> = ({\n  data,\n  config,\n  className,\n  style,\n}) => {\n  return (\n    <div className={className} style={style}>\n      <Render config={config as Config} data={data as Data} />\n    </div>\n  );\n};\n","import React, { useEffect, useState, type ReactElement } from 'react';\nimport { PuckApiProvider, usePuckApiContext } from '@commercetools-demo/puck-api';\nimport {\n  getPublishedPuckPageApi,\n  getPreviewPuckPageApi,\n  queryPuckPageApi,\n  getPublishedPuckContentApi,\n  getPreviewPuckContentApi,\n  queryPuckContentApi,\n} from '@commercetools-demo/puck-api';\nimport type { PuckConfig, PuckData } from '@commercetools-demo/puck-types';\nimport { PuckDataRenderer } from './PuckDataRenderer';\n\n// ---------------------------------------------------------------------------\n// Inner component (needs PuckApiContext)\n// ---------------------------------------------------------------------------\n\ninterface PuckRendererInnerProps {\n  type: 'page' | 'content';\n  pageKey?: string;\n  slug?: string;\n  contentKey?: string;\n  query?: string;\n  mode: 'published' | 'preview';\n  config: PuckConfig;\n  loadingComponent?: ReactElement;\n  errorComponent?: ReactElement;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst PuckRendererInner: React.FC<PuckRendererInnerProps> = ({\n  type,\n  pageKey,\n  slug,\n  contentKey,\n  query,\n  mode,\n  config,\n  loadingComponent,\n  errorComponent,\n  className,\n  style,\n}) => {\n  const { baseURL, projectKey, businessUnitKey } = usePuckApiContext();\n\n  const [data, setData] = useState<PuckData | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const fetchData = async () => {\n      setLoading(true);\n      setError(null);\n\n      try {\n        if (type === 'content') {\n          let puckData: PuckData | null = null;\n\n          if (contentKey) {\n            const value =\n              mode === 'published'\n                ? await getPublishedPuckContentApi(baseURL, projectKey, businessUnitKey, contentKey)\n                : await getPreviewPuckContentApi(baseURL, projectKey, businessUnitKey, contentKey);\n            puckData = value.data;\n          } else if (query) {\n            const value = await queryPuckContentApi(baseURL, projectKey, businessUnitKey, query, mode);\n            puckData = value?.data ?? null;\n          }\n\n          if (!cancelled) {\n            if (puckData) {\n              setData(puckData);\n            } else {\n              setError('Content not found');\n            }\n          }\n        } else {\n          // type === 'page'\n          let pageValue = null;\n\n          if (pageKey) {\n            pageValue =\n              mode === 'published'\n                ? await getPublishedPuckPageApi(baseURL, projectKey, businessUnitKey, pageKey)\n                : await getPreviewPuckPageApi(baseURL, projectKey, businessUnitKey, pageKey);\n          } else if (slug) {\n            pageValue = await queryPuckPageApi(baseURL, projectKey, businessUnitKey, slug, mode);\n          }\n\n          if (!cancelled) {\n            if (pageValue) {\n              setData(pageValue.puckData);\n            } else {\n              setError('Page not found');\n            }\n          }\n        }\n      } catch (err) {\n        if (!cancelled) setError((err as Error).message);\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    };\n\n    void fetchData();\n    return () => {\n      cancelled = true;\n    };\n  }, [baseURL, projectKey, businessUnitKey, type, pageKey, slug, contentKey, query, mode]);\n\n  if (loading) {\n    return (\n      loadingComponent ?? (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: '64px',\n            color: '#6b7280',\n          }}\n        >\n          Loading…\n        </div>\n      )\n    );\n  }\n\n  if (error || !data) {\n    return (\n      errorComponent ?? (\n        <div\n          style={{\n            padding: '32px',\n            color: '#dc2626',\n            background: '#fef2f2',\n            borderRadius: '8px',\n          }}\n        >\n          {error ?? 'Failed to load'}\n        </div>\n      )\n    );\n  }\n\n  return <PuckDataRenderer data={data} config={config} className={className} style={style} />;\n};\n\n// ---------------------------------------------------------------------------\n// Public component\n// ---------------------------------------------------------------------------\n\nexport interface PuckRendererProps {\n  /**\n   * Whether to render a page or a content item. Defaults to 'page'.\n   * - 'page': use pageKey or slug to fetch\n   * - 'content': use contentKey or query (contentType) to fetch\n   */\n  type?: 'page' | 'content';\n\n  /**\n   * Service base URL. Can be omitted if a PuckApiProvider is already in the tree.\n   */\n  baseURL?: string;\n  /** CommerceTools project key. Can be omitted if provider is in tree. */\n  projectKey?: string;\n  /** Business unit key. Can be omitted if provider is in tree. */\n  businessUnitKey?: string;\n\n  /** [type=page] Fetch by page key. */\n  pageKey?: string;\n  /** [type=page] OR fetch by slug (URL path). */\n  slug?: string;\n\n  /** [type=content] Fetch by content key. */\n  contentKey?: string;\n  /** [type=content] OR fetch by contentType query string. */\n  query?: string;\n\n  /** 'published' (default) or 'preview' (draft || published). */\n  mode?: 'published' | 'preview';\n\n  /**\n   * Puck config — must match the config used in the editor.\n   */\n  config: PuckConfig;\n\n  /** Custom loading indicator. */\n  loadingComponent?: ReactElement;\n  /** Custom error display. */\n  errorComponent?: ReactElement;\n\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const PuckRenderer: React.FC<PuckRendererProps> = ({\n  type = 'page',\n  baseURL,\n  projectKey,\n  businessUnitKey,\n  pageKey,\n  slug,\n  contentKey,\n  query,\n  mode = 'published',\n  config,\n  loadingComponent,\n  errorComponent,\n  className,\n  style,\n}) => {\n  const inner = (\n    <PuckRendererInner\n      type={type}\n      pageKey={pageKey}\n      slug={slug}\n      contentKey={contentKey}\n      query={query}\n      mode={mode}\n      config={config}\n      loadingComponent={loadingComponent}\n      errorComponent={errorComponent}\n      className={className}\n      style={style}\n    />\n  );\n\n  if (baseURL && projectKey && businessUnitKey) {\n    return (\n      <PuckApiProvider\n        baseURL={baseURL}\n        projectKey={projectKey}\n        businessUnitKey={businessUnitKey}\n      >\n        {inner}\n      </PuckApiProvider>\n    );\n  }\n\n  return inner;\n};\n"],"mappings":"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","names":["jsx"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@commercetools-demo/puck-renderer",
+  "version": "0.1.0",
+  "description": "Lightweight Puck page renderer for storefronts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@commercetools-demo/puck-api": "^0.1.0",
+    "@commercetools-demo/puck-types": "^0.1.0",
+    "@measured/puck": "^0.18.2"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.2"
+  }
+}