@dotcms/react 1.2.5-next.7 → 1.2.6-next.1

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.d.ts

@@ -3,6 +3,7 @@ import { CustomRenderer } from '../DotCMSBlockEditorRenderer';
 interface BlockEditorBlockProps {
     content: BlockEditorNode[] | undefined;
     customRenderers?: CustomRenderer;
+    isDevMode?: boolean;
 }
 /**
  * Renders a block editor item based on the provided content and custom renderers.
@@ -11,5 +12,5 @@ interface BlockEditorBlockProps {
  * @param customRenderers - Optional custom renderers for specific node types.
  * @returns The rendered block editor item.
  */
-export declare const BlockEditorBlock: ({ content, customRenderers }: BlockEditorBlockProps) => import("react/jsx-runtime").JSX.Element[] | null;
+export declare const BlockEditorBlock: ({ content, customRenderers, isDevMode }: BlockEditorBlockProps) => import("react/jsx-runtime").JSX.Element[] | null;
 export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/DotContent.d.ts

@@ -3,6 +3,7 @@ import { CustomRenderer } from '../../DotCMSBlockEditorRenderer';
 interface DotContentProps {
     customRenderers?: CustomRenderer;
     node: BlockEditorNode;
+    isDevMode?: boolean;
 }
 /**
  * Renders a DotContent component.
@@ -10,5 +11,5 @@ interface DotContentProps {
  * @param {DotContentProps} props - The props for the DotContent component.
  * @returns {JSX.Element} The rendered DotContent component.
  */
-export declare const DotContent: ({ customRenderers, node }: DotContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DotContent: ({ customRenderers, node, isDevMode }: DotContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
 export interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet = DotCMSBasicContentlet> {
     page: DotCMSPageAsset;
@@ -5,6 +6,23 @@ export interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet
         [key: string]: React.ComponentType<TContentlet> | React.ComponentType<any>;
     };
     mode?: DotCMSPageRendererMode;
+    /**
+     * Pre-rendered server component nodes keyed by contentlet identifier.
+     * Use this to render Next.js async server components within the layout.
+     * Build this map using the `buildSlots` helper.
+     *
+     * @example
+     * ```tsx
+     * import { buildSlots } from '@dotcms/react';
+     *
+     * const slots = buildSlots(pageContent.pageAsset.containers, {
+     *   BlogList: BlogListContainer,
+     * });
+     *
+     * <DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
+     * ```
+     */
+    slots?: Record<string, ReactNode>;
 }
 /**
  * DotCMSLayoutBody component renders the layout body for a DotCMS page.
@@ -18,8 +36,9 @@ export interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet
  * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
  * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - mapping of custom components for content rendering.
  * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
+ * @param {Record<string, ReactNode>} [props.slots] - Pre-rendered server component nodes keyed by contentlet identifier.
  *
  * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
  *
  */
-export declare const DotCMSLayoutBody: ({ page, components, mode }: DotCMSLayoutBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotCMSLayoutBody: ({ page, components, mode, slots }: DotCMSLayoutBodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/next/components/DotCMSLayoutBody/DotCMSPageProvider.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
+interface DotCMSPageProviderProps {
+    page: DotCMSPageAsset;
+    components: Record<string, React.ComponentType<any>>;
+    mode: DotCMSPageRendererMode;
+    slots: Record<string, ReactNode>;
+    children: ReactNode;
+}
+/**
+ * @internal
+ *
+ * Client boundary that provides the DotCMS page context to the layout tree.
+ * Keeping this separate from DotCMSLayoutBody allows the layout to remain
+ * a server component while only the context provider runs on the client.
+ */
+export declare function DotCMSPageProvider({ page, components, mode, slots, children }: DotCMSPageProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/contexts/DotCMSPageContext.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
 /**
  * @internal
@@ -7,11 +8,13 @@ import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '
  * @property {DotCMSPageAsset} pageAsset - The DotCMS page asset
  * @property {RendererMode} mode - The renderer mode
  * @property {Record<string, React.ComponentType<DotCMSContentlet>>} userComponents - The user components
+ * @property {Record<string, ReactNode>} slots - Pre-rendered server component nodes keyed by contentlet identifier
  */
 export interface DotCMSPageContextProps {
     pageAsset: DotCMSPageAsset;
     mode: DotCMSPageRendererMode;
     userComponents: Record<string, React.ComponentType<DotCMSBasicContentlet>>;
+    slots?: Record<string, ReactNode>;
 }
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.

package/src/lib/next/utils/buildSlots.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { DotCMSPageAssetContainers } from '@dotcms/types';
+/**
+ * Builds a slots map of pre-rendered server component nodes keyed by contentlet identifier.
+ *
+ * Use this in Next.js server components to render async server components
+ * (e.g., components that fetch data) within a DotCMS page layout. Pass the
+ * resulting map to `DotCMSLayoutBody` via the `slots` prop.
+ *
+ * @public
+ * @param containers - The containers map from `pageAsset.containers`
+ * @param serverComponents - A map of content type names to async server components
+ * @returns A record mapping contentlet identifiers to pre-rendered ReactNodes
+ *
+ * @example
+ * ```tsx
+ * const slots = buildSlots(pageContent.pageAsset.containers, {
+ *   BlogList: BlogListContainer,
+ * });
+ *
+ * <DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
+ * ```
+ */
+export declare function buildSlots(containers: DotCMSPageAssetContainers, serverComponents: Record<string, React.ComponentType<any>>): Record<string, ReactNode>;