@dotcms/react 1.2.5 → 1.2.6-next.1

package/README.md

@@ -210,24 +210,39 @@ All components and hooks should be imported from `@dotcms/react`:
 | ------------ | ------------------------ | -------- | -------------- | ---------------------------------------------- |
 | `page`       | `DotCMSPageAsset`        | ✅       | -              | The page asset containing the layout to render |
 | `components` | `DotCMSPageComponent`    | ✅       | `{}`           | [Map of content type → React component](#component-mapping)          |
-| `mode`       | `DotCMSPageRendererMode` | ❌       | `'production'` | [Rendering mode ('production' or 'development')](#layout-body-modes) |
+| `mode`       | `DotCMSPageRendererMode` | ❌       | `’production’` | [Rendering mode (‘production’ or ‘development’)](#layout-body-modes) |
+| `slots`      | `Record<string, ReactNode>` | ❌    | `{}`           | Pre-rendered server component nodes keyed by contentlet identifier. See [`buildSlots`](#buildslots). |
 
-#### Client-Side Only Component
+#### Next.js App Router
 
-> ⚠️ **Important: This is a client-side React component.**
-> `DotCMSLayoutBody` uses React features like `useContext`, `useEffect`, and `useState`.
-> If you're using a framework that supports Server-Side Rendering (like **Next.js**, **Gatsby**, or **Astro**), you **must** mark the parent component with `"use client"` or follow your framework’s guidelines for using client-side components.
->
-> 👉 [Learn more: Next.js – Client Components](https://nextjs.org/docs/getting-started/react-essentials#client-components)
+`DotCMSLayoutBody` requires a `"use client"` parent because `components` is a map of React component functions, which React cannot serialize across the server→client boundary. The recommended pattern is to fetch data in the server page and pass the plain result to a client wrapper:
+
+```tsx
+// page.tsx — server component, fetches data only
+export default async function Page() {
+    const pageContent = await getDotCMSPage(path);
+    return <PageView pageContent={pageContent} />;
+}
+```
+
+```tsx
+// PageView.tsx — "use client", owns components and renders layout
+‘use client’;
+
+export function PageView({ pageContent }) {
+    const { pageAsset } = useEditableDotCMSPage(pageContent);
+    return <DotCMSLayoutBody page={pageAsset} components={pageComponents} />;
+}
+```
 
 #### Usage
 
 ```tsx
-import type { DotCMSPageAsset } from '@dotcms/types';
-import { DotCMSLayoutBody } from '@dotcms/react';
+import type { DotCMSPageAsset } from ‘@dotcms/types’;
+import { DotCMSLayoutBody } from ‘@dotcms/react’;
 
-import { MyBlogCard } from './MyBlogCard';
-import { DotCMSProductComponent } from './DotCMSProductComponent';
+import { MyBlogCard } from ‘./MyBlogCard’;
+import { DotCMSProductComponent } from ‘./DotCMSProductComponent’;
 
 const COMPONENTS_MAP = {
     Blog: MyBlogCard,
@@ -239,6 +254,23 @@ const MyPage = ({ pageAsset }: DotCMSPageResponse) => {
 };
 ```
 
+#### buildSlots
+
+Use `buildSlots` when you have Next.js async server components that need to fetch their own data. Since async server components can’t be called from inside a client component tree, pre-render them on the server and pass the result into the layout via `slots`:
+
+```tsx
+import { buildSlots, DotCMSLayoutBody } from ‘@dotcms/react’;
+
+// BlogListContainer is an async server component that fetches its own data
+const slots = buildSlots(pageContent.pageAsset.containers, {
+    BlogList: BlogListContainer,
+});
+
+<DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
+```
+
+The layout renders the pre-rendered slot node for a contentlet if one exists, otherwise falls back to the matching entry in `components`.
+
 #### Layout Body Modes
 
 -   `production`: Performance-optimized mode that only renders content with explicitly mapped components, leaving unmapped content empty.
@@ -313,12 +345,13 @@ export default MyBannerComponent;
 
 `DotCMSBlockEditorRenderer` is a component for rendering [Block Editor](https://dev.dotcms.com/docs/block-editor) content from dotCMS with support for custom block renderers.
 
-| Input             | Type                 | Required | Description                                                                                                |
-| ----------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
-| `blocks`          | `BlockEditorContent` | ✅       | The [Block Editor](https://dev.dotcms.com/docs/block-editor) content to render                             |
-| `customRenderers` | `CustomRenderers`    | ❌       | Custom rendering functions for specific [block types](https://dev.dotcms.com/docs/block-editor#BlockTypes) |
-| `className`       | `string`             | ❌       | CSS class to apply to the container                                                                        |
-| `style`           | `CSSProperties`      | ❌       | Inline styles for the container                                                                            |
+| Input             | Type                 | Required | Default | Description                                                                                                |
+| ----------------- | -------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| `blocks`          | `BlockEditorContent` | ✅       | -       | The [Block Editor](https://dev.dotcms.com/docs/block-editor) content to render                             |
+| `customRenderers` | `CustomRenderers`    | ❌       | -       | Custom rendering functions for specific [block types](https://dev.dotcms.com/docs/block-editor#BlockTypes) |
+| `className`       | `string`             | ❌       | -       | CSS class to apply to the container                                                                        |
+| `style`           | `CSSProperties`      | ❌       | -       | Inline styles for the container                                                                            |
+| `isDevMode`       | `boolean`            | ❌       | `false` | When `true`, shows a visible error message if the `blocks` data is invalid. When `false` (default), invalid blocks render nothing silently. |
 
 #### Usage
 
@@ -344,6 +377,27 @@ const DetailPage = ({ contentlet }: { contentlet: DotCMSBasicContentlet }) => {
 };
 ```
 
+#### Next.js Server Components
+
+`DotCMSBlockEditorRenderer` can be used directly in a Next.js server component — it has no hooks or browser dependencies:
+
+```tsx
+// app/article/page.tsx — server component
+import { DotCMSBlockEditorRenderer } from '@dotcms/react';
+
+export default async function ArticlePage() {
+    const { pageAsset } = await getDotCMSPage('/article');
+    const blocks = pageAsset.containers['...'].contentlets[0].blockEditorContent;
+
+    return (
+        <DotCMSBlockEditorRenderer
+            blocks={blocks}
+            isDevMode={process.env.NODE_ENV === 'development'}
+        />
+    );
+}
+```
+
 #### Recommendations
 
 -   Should not be used with [`DotCMSEditableText`](#dotcmseditabletext)

package/_virtual/_commonjsHelpers.esm.js

@@ -0,0 +1,3 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+export { commonjsGlobal };

package/_virtual/_style-inject.esm.js

@@ -0,0 +1,30 @@
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default, styleInject };

package/_virtual/make-built-in.esm.js

@@ -0,0 +1,3 @@
+var makeBuiltIn = {exports: {}};
+
+export { makeBuiltIn as __module };

package/_virtual/new-promise-capability.esm.js

@@ -0,0 +1,3 @@
+var newPromiseCapability = {};
+
+export { newPromiseCapability as __exports };

package/_virtual/object-define-properties.esm.js

@@ -0,0 +1,3 @@
+var objectDefineProperties = {};
+
+export { objectDefineProperties as __exports };

package/_virtual/object-define-property.esm.js

@@ -0,0 +1,3 @@
+var objectDefineProperty = {};
+
+export { objectDefineProperty as __exports };

package/_virtual/object-get-own-property-descriptor.esm.js

@@ -0,0 +1,3 @@
+var objectGetOwnPropertyDescriptor = {};
+
+export { objectGetOwnPropertyDescriptor as __exports };

package/_virtual/object-get-own-property-names.esm.js

@@ -0,0 +1,3 @@
+var objectGetOwnPropertyNames = {};
+
+export { objectGetOwnPropertyNames as __exports };

package/_virtual/object-get-own-property-symbols.esm.js

@@ -0,0 +1,3 @@
+var objectGetOwnPropertySymbols = {};
+
+export { objectGetOwnPropertySymbols as __exports };

package/_virtual/object-property-is-enumerable.esm.js

@@ -0,0 +1,3 @@
+var objectPropertyIsEnumerable = {};
+
+export { objectPropertyIsEnumerable as __exports };

package/_virtual/shared-store.esm.js

@@ -0,0 +1,3 @@
+var sharedStore = {exports: {}};
+
+export { sharedStore as __module };