@cmssy/react 9.2.0 → 9.4.0

package/dist/index.d.ts

@@ -24,13 +24,14 @@ interface CmssyServerPageProps {
     auth?: CmssyBlockAuthContext;
     /** Workspace identity, exposed via context.workspace. Resolved by createCmssyPage. */
     workspace?: CmssyBlockWorkspace;
+    editMode?: boolean;
 }
 /**
  * Async React Server Component (Next.js App Router / RSC). It runs each block's
  * loader server-side before rendering, so it must be rendered in a server
  * component tree (as `createCmssyPage` does) - not in a client component.
  */
-declare function CmssyServerPage({ page, blocks, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, forms, auth, workspace, }: CmssyServerPageProps): Promise<react_jsx_runtime.JSX.Element | null>;
+declare function CmssyServerPage({ page, blocks, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, forms, auth, workspace, editMode, }: CmssyServerPageProps): Promise<react_jsx_runtime.JSX.Element | null>;
 
 interface ResolveBlockDataOptions {
     page: CmssyPageData | null;
@@ -68,13 +69,14 @@ interface CmssyServerLayoutProps {
      * Without it the SDK has to guess, and its guess is "en".
      */
     config?: CmssyClientConfig;
+    editMode?: boolean;
 }
 /**
  * Async React Server Component. Like CmssyServerPage it runs each block's
  * loader server-side before rendering, so a header block can list categories
  * the same way a page block can. Must be rendered in a server component tree.
  */
-declare function CmssyServerLayout({ groups, blocks, position, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, }: CmssyServerLayoutProps): Promise<react_jsx_runtime.JSX.Element | null>;
+declare function CmssyServerLayout({ groups, blocks, position, locale: localeProp, defaultLocale: defaultLocaleProp, enabledLocales: enabledLocalesProp, config, editMode, }: CmssyServerLayoutProps): Promise<react_jsx_runtime.JSX.Element | null>;
 
 interface CmssyBlockProps {
     block: RawBlock;
@@ -85,11 +87,12 @@ interface CmssyBlockProps {
     patchedStyle?: Record<string, unknown>;
     patchedAdvanced?: Record<string, unknown>;
     editable?: boolean;
+    editMode?: boolean;
     layoutPosition?: string;
     context?: CmssyBlockContext;
     data?: unknown;
 }
-declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, patchedStyle, patchedAdvanced, editable, layoutPosition, context, data, }: CmssyBlockProps): react_jsx_runtime.JSX.Element;
+declare function CmssyBlock({ block, locale, defaultLocale, blockMap, patchedContent, patchedStyle, patchedAdvanced, editable, editMode, layoutPosition, context, data, }: CmssyBlockProps): react_jsx_runtime.JSX.Element | null;
 
 interface UnknownBlockProps {
     type: string;

package/dist/index.js

@@ -1,7 +1,8 @@
 import { buildBlockContext, getBlockContentForLanguage, asBucket, resolveSiteLocales } from '@cmssy/core';
 export { CmssyRequestError, DEFAULT_CMSSY_API_URL, FORM_QUERY, MODEL_DEFINITIONS_QUERY, MODEL_RECORDS_QUERY, PROTOCOL_VERSION, SITE_CONFIG_QUERY, SUBMIT_FORM_MUTATION, buildBlockContext, buildLocaleSwitchHref, collectFormIds, createCmssyClient, fetchLayouts, fetchPage, fetchPageById, fetchPageMeta, fetchPages, fetchSiteConfig, fields, getBlockContentForLanguage, graphqlRequest, isProtocolCompatible, localizeHref, localizeHtmlLinks, normalizeOrigin, normalizeSlug, parseEditorMessage, postToEditor, resolveApiUrl, resolveForms, resolvePublicUrl, resolveSiteLocales, resolveWorkspaceId, splitLocaleFromPath } from '@cmssy/core';
 import { createElement } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { BlockErrorBoundary } from '@cmssy/react/block-error-boundary';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 export { evaluateFieldConditionGroup } from '@cmssy/types';
 
 // src/index.ts
@@ -47,41 +48,155 @@ function blocksToMeta(blocks, defaults = {}) {
   }
   return out;
 }
+
+// src/components/block-error.ts
+var BLOCK_ERROR_KEY = "__cmssyBlockError";
+var SOURCES = [
+  "loader",
+  "render",
+  "unregistered"
+];
+function blockErrorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function unregisteredBlockError(type) {
+  return {
+    source: "unregistered",
+    message: `Block type "${type}" is not registered in this site's blocks array.`
+  };
+}
+function markBlockError(error) {
+  return { [BLOCK_ERROR_KEY]: error };
+}
+function readBlockError(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const marked = value[BLOCK_ERROR_KEY];
+  if (typeof marked !== "object" || marked === null) return void 0;
+  const { message, source } = marked;
+  if (typeof message !== "string") return void 0;
+  if (!SOURCES.includes(source)) return void 0;
+  return { message, source };
+}
+var SOURCE_LABELS = {
+  loader: "loader failed",
+  render: "render failed",
+  unregistered: "type not registered"
+};
+var cardStyle = {
+  boxSizing: "border-box",
+  margin: "8px 0",
+  padding: "12px 16px",
+  border: "1px dashed #ef4444",
+  borderRadius: "8px",
+  background: "rgba(239, 68, 68, 0.08)",
+  color: "#ef4444",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSize: "13px",
+  lineHeight: 1.5,
+  textAlign: "left"
+};
+var headingStyle = {
+  fontWeight: 700,
+  marginBottom: "4px"
+};
+var metaStyle = {
+  opacity: 0.8,
+  marginBottom: "4px"
+};
+var messageStyle = {
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere"
+};
+function BlockErrorCard({
+  blockType,
+  blockId,
+  error
+}) {
+  return /* @__PURE__ */ jsxs("div", { role: "alert", "data-cmssy-block-error": error.source, style: cardStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: headingStyle, children: [
+      'Block "',
+      blockType,
+      '" - ',
+      SOURCE_LABELS[error.source]
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: metaStyle, children: [
+      "id: ",
+      blockId
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: messageStyle, children: error.message })
+  ] });
+}
 var WARN_CAP = 256;
 var warned = /* @__PURE__ */ new Set();
 function UnknownBlock({ type }) {
   if (typeof window !== "undefined" && !warned.has(type)) {
     if (warned.size >= WARN_CAP) warned.clear();
     warned.add(type);
-    console.warn(`[cmssy] no component registered for block type "${type}"`);
+    console.error(`[cmssy] no component registered for block type "${type}"`);
   }
   return /* @__PURE__ */ jsx("div", { "data-cmssy-unknown-block": type });
 }
 function renderResolvedBlock(block, map, locale, defaultLocale, options = {}) {
-  const { context, data, resolvedContent, enabledLocales } = options;
+  const { context, data, resolvedContent, enabledLocales, error, editMode } = options;
   const Component = Object.hasOwn(map, block.type) ? map[block.type] : void 0;
-  const content = resolvedContent ?? getBlockContentForLanguage(
-    block.content,
-    locale,
-    defaultLocale,
-    enabledLocales?.length ? enabledLocales : void 0
-  );
-  return /* @__PURE__ */ jsx(
+  const wrap = (children, hidden = false) => /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? createElement(Component, {
-        content,
-        style: asBucket(block.style),
-        advanced: asBucket(block.advanced),
-        context,
-        data
-      }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
+      style: hidden ? { display: "none" } : void 0,
+      children
     },
     block.id
   );
+  if (!Component) {
+    return editMode ? wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: unregisteredBlockError(block.type)
+        }
+      )
+    ) : wrap(/* @__PURE__ */ jsx(UnknownBlock, { type: block.type }), true);
+  }
+  if (error) {
+    if (!editMode) return null;
+    return wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error
+        }
+      )
+    );
+  }
+  const content = resolvedContent ?? getBlockContentForLanguage(
+    block.content,
+    locale,
+    defaultLocale,
+    enabledLocales?.length ? enabledLocales : void 0
+  );
+  return wrap(
+    /* @__PURE__ */ jsx(
+      BlockErrorBoundary,
+      {
+        blockType: block.type,
+        blockId: block.id,
+        editMode,
+        children: createElement(Component, {
+          content,
+          style: asBucket(block.style),
+          advanced: asBucket(block.advanced),
+          context,
+          data
+        })
+      }
+    )
+  );
 }
 async function resolveBlocks(blocks, loaderMap, locale, defaultLocale, context, enabledLocales) {
   return Promise.all(
@@ -94,19 +209,21 @@ async function resolveBlocks(blocks, loaderMap, locale, defaultLocale, context,
       );
       const loader = loaderMap[block.type];
       let data;
+      let error;
       if (loader) {
         try {
           data = await loader({ content, context });
         } catch (err) {
           if (typeof console !== "undefined") {
-            console.warn(
+            console.error(
               `[cmssy] loader for block "${block.type}" (${block.id}) failed`,
               err
             );
           }
+          error = { message: blockErrorMessage(err), source: "loader" };
         }
       }
-      return { content, data };
+      return { content, data, error };
     })
   );
 }
@@ -147,7 +264,8 @@ async function CmssyServerPage({
   config,
   forms,
   auth,
-  workspace
+  workspace,
+  editMode
 }) {
   if (!page) return null;
   const { locale, defaultLocale, enabledLocales } = await resolveRenderLocale({
@@ -179,10 +297,25 @@ async function CmssyServerPage({
       context,
       data: resolved[i]?.data,
       resolvedContent: resolved[i]?.content,
-      enabledLocales
+      enabledLocales,
+      error: resolved[i]?.error,
+      editMode
     })
   ) });
 }
+function collectBlockData(blocks, resolved, isPreview) {
+  const data = {};
+  blocks.forEach((block, index) => {
+    const entry = resolved[index];
+    if (!entry) return;
+    if (entry.error && isPreview) {
+      data[block.id] = markBlockError(entry.error);
+    } else if (entry.data !== void 0) {
+      data[block.id] = entry.data;
+    }
+  });
+  return data;
+}
 async function resolveBlockData({
   page,
   blocks,
@@ -209,12 +342,7 @@ async function resolveBlockData({
     context,
     enabledLocales
   );
-  const data = {};
-  page.blocks.forEach((block, index) => {
-    const value = resolved[index]?.data;
-    if (value !== void 0) data[block.id] = value;
-  });
-  return data;
+  return collectBlockData(page.blocks, resolved, isPreview);
 }
 async function resolveLayoutBlockData({
   groups,
@@ -245,12 +373,7 @@ async function resolveLayoutBlockData({
     context,
     enabledLocales
   );
-  const data = {};
-  layoutBlocks.forEach((block, index) => {
-    const value = resolved[index]?.data;
-    if (value !== void 0) data[block.id] = value;
-  });
-  return data;
+  return collectBlockData(layoutBlocks, resolved, isPreview);
 }
 async function CmssyServerLayout({
   groups,
@@ -259,7 +382,8 @@ async function CmssyServerLayout({
   locale: localeProp,
   defaultLocale: defaultLocaleProp,
   enabledLocales: enabledLocalesProp,
-  config
+  config,
+  editMode
 }) {
   const { locale, defaultLocale, enabledLocales } = await resolveRenderLocale({
     locale: localeProp,
@@ -286,7 +410,9 @@ async function CmssyServerLayout({
       context,
       data: resolved[i]?.data,
       resolvedContent: resolved[i]?.content,
-      enabledLocales
+      enabledLocales,
+      error: resolved[i]?.error,
+      editMode
     })
   ) });
 }
@@ -299,32 +425,71 @@ function CmssyBlock({
   patchedStyle,
   patchedAdvanced,
   editable,
+  editMode,
   layoutPosition,
   context,
   data
 }) {
+  const inEditMode = editMode ?? editable ?? false;
   const Component = Object.hasOwn(blockMap, block.type) ? blockMap[block.type] : void 0;
-  const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
-  const content = patchedContent ? { ...base, ...patchedContent } : base;
-  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
-  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
-  return /* @__PURE__ */ jsx(
+  const blockError = readBlockError(data);
+  const wrap = (children, hidden = false) => /* @__PURE__ */ jsx(
     "div",
     {
       "data-block-id": block.id,
       "data-block-type": block.type,
       "data-layout-position": layoutPosition,
       draggable: editable || void 0,
-      style: Component ? void 0 : { display: "none" },
-      children: Component ? createElement(Component, {
-        content,
-        style,
-        advanced,
-        context,
-        data
-      }) : /* @__PURE__ */ jsx(UnknownBlock, { type: block.type })
+      style: hidden ? { display: "none" } : void 0,
+      children
     }
   );
+  if (!Component) {
+    return inEditMode ? wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: unregisteredBlockError(block.type)
+        }
+      )
+    ) : wrap(/* @__PURE__ */ jsx(UnknownBlock, { type: block.type }), true);
+  }
+  if (blockError) {
+    if (!inEditMode) return null;
+    return wrap(
+      /* @__PURE__ */ jsx(
+        BlockErrorCard,
+        {
+          blockType: block.type,
+          blockId: block.id,
+          error: blockError
+        }
+      )
+    );
+  }
+  const base = getBlockContentForLanguage(block.content, locale, defaultLocale);
+  const content = patchedContent ? { ...base, ...patchedContent } : base;
+  const style = patchedStyle ? { ...asBucket(block.style), ...patchedStyle } : asBucket(block.style);
+  const advanced = patchedAdvanced ? { ...asBucket(block.advanced), ...patchedAdvanced } : asBucket(block.advanced);
+  return wrap(
+    /* @__PURE__ */ jsx(
+      BlockErrorBoundary,
+      {
+        blockType: block.type,
+        blockId: block.id,
+        editMode: inEditMode,
+        children: createElement(Component, {
+          content,
+          style,
+          advanced,
+          context,
+          data
+        })
+      }
+    )
+  );
 }
 
 export { CmssyBlock, CmssyServerLayout, CmssyServerPage, UnknownBlock, blocksToMeta, blocksToSchemas, buildBlockMap, defineBlock, resolveBlockData, resolveLayoutBlockData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "9.2.0",
+  "version": "9.4.0",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",
@@ -32,6 +32,11 @@
       "types": "./dist/client.d.ts",
       "import": "./dist/client.js",
       "require": "./dist/client.cjs"
+    },
+    "./block-error-boundary": {
+      "types": "./dist/block-error-boundary.d.ts",
+      "import": "./dist/block-error-boundary.js",
+      "require": "./dist/block-error-boundary.cjs"
     }
   },
   "main": "./dist/index.cjs",
@@ -57,7 +62,7 @@
   },
   "dependencies": {
     "@cmssy/types": "0.28.0",
-    "@cmssy/core": "9.2.0"
+    "@cmssy/core": "9.4.0"
   },
   "scripts": {
     "build": "tsup",