@contentful/experiences-react 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +25 -0
- package/dist/nodes-renderer.js +6 -5
- package/dist/nodes-renderer.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -134,6 +134,31 @@ const experience = await fetchExperience(
|
|
|
134
134
|
return <ServerExperienceRenderer experience={experience} config={experienceConfig} />;
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
+
### Slot children
|
|
138
|
+
|
|
139
|
+
A component's slot children arrive as an **array of pre-rendered nodes** (`ReactNode[]`), keyed by the renderer — not a single wrapping node. Drop the array straight into JSX for the common "just render them" case (React renders keyed arrays), or `map` / `filter` over it to wrap, reorder, or drop children individually.
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
// components/Section.tsx
|
|
143
|
+
import type { ReactNode } from 'react';
|
|
144
|
+
|
|
145
|
+
export function Section({ children }: { children?: ReactNode[] }) {
|
|
146
|
+
// Common case — render them all:
|
|
147
|
+
return <div>{children}</div>;
|
|
148
|
+
|
|
149
|
+
// Or take control of each child:
|
|
150
|
+
// return (
|
|
151
|
+
// <div>
|
|
152
|
+
// {children?.map((child, i) => (
|
|
153
|
+
// <div className="cell" key={i}>{child}</div>
|
|
154
|
+
// ))}
|
|
155
|
+
// </div>
|
|
156
|
+
// );
|
|
157
|
+
}
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
The default slot is named `children`. Any **additional named slots** are merged into props under their slot name too, each as its own `ReactNode[]` — so a component with a `header` slot just declares `header?: ReactNode[]` and renders it the same way.
|
|
161
|
+
|
|
137
162
|
For the full getting-started walkthrough, the merge-precedence rules, viewport handling, and design rationale, see the [root README](../../README.md) and [`AGENTS.md`](../../AGENTS.md).
|
|
138
163
|
|
|
139
164
|
---
|
package/dist/nodes-renderer.js
CHANGED
|
@@ -45,16 +45,17 @@ function NodeRenderer({
|
|
|
45
45
|
const componentConfig = normalizeComponentRegistration(entry);
|
|
46
46
|
const slotProps = {};
|
|
47
47
|
for (const [slotName, children] of Object.entries(node.slots)) {
|
|
48
|
-
slotProps[slotName] = /* @__PURE__ */ jsx(
|
|
49
|
-
|
|
48
|
+
slotProps[slotName] = children.map((child, index) => /* @__PURE__ */ jsx(
|
|
49
|
+
NodeRenderer,
|
|
50
50
|
{
|
|
51
|
-
|
|
51
|
+
node: child,
|
|
52
52
|
config,
|
|
53
53
|
viewports,
|
|
54
54
|
activeViewportIndex,
|
|
55
55
|
renderUnknown
|
|
56
|
-
}
|
|
57
|
-
|
|
56
|
+
},
|
|
57
|
+
child.nodeId ?? index
|
|
58
|
+
));
|
|
58
59
|
}
|
|
59
60
|
const resolvedDesign = resolveDesignProperties(node.props.design, viewports, activeViewportIndex);
|
|
60
61
|
const { props: tokenResolvedDesign, unresolved } = applyTokenResolver(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/nodes-renderer.tsx"],"sourcesContent":["/*\n * Recursive renderer over PortableRenderNodes. Customer components receive the\n * merged prop bag (defaults + content + resolveData + slots); design values\n * are read via `useDesignValues()`, not injected as props.\n */\n\nimport { Fragment, createElement, type ReactNode } from 'react';\n\nimport type {\n PortableExperienceTemplate,\n PortableRenderNode,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\nimport { applyTokenResolver, resolveDesignProperties } from '@contentful/experiences-design';\n\nimport {\n ContentfulComponentProvider,\n ContentfulExperienceTemplateProvider,\n ResolvedDesignProvider,\n} from './context';\nimport type { MissingComponentProps } from './missing-component';\nimport {\n normalizeComponentRegistration,\n normalizeExperienceTemplateRegistration,\n type ContentfulComponent,\n type ContentfulExperienceTemplate,\n type Config,\n} from './types';\n\nexport type RenderUnknown = (props: MissingComponentProps) => ReactNode;\n\n// Internal renderers take `viewports` + `activeViewportIndex`, not the whole\n// RenderContext object — the context is published once via ExperienceProvider,\n// and re-threading it as an element prop makes React's RSC serializer back-patch\n// a shared reference into frozen props (\"Cannot assign to read only property\").\nexport interface NodesRendererProps {\n nodes: PortableRenderNode[];\n config: Config;\n viewports: ViewportDef[];\n activeViewportIndex: number;\n renderUnknown: RenderUnknown;\n}\n\nexport function NodesRenderer({\n nodes,\n config,\n viewports,\n activeViewportIndex,\n renderUnknown,\n}: NodesRendererProps): ReactNode {\n if (!nodes.length) return null;\n return (\n <Fragment>\n {nodes.map((node, index) => (\n <NodeRenderer\n key={node.nodeId ?? index}\n node={node}\n config={config}\n viewports={viewports}\n activeViewportIndex={activeViewportIndex}\n renderUnknown={renderUnknown}\n />\n ))}\n </Fragment>\n );\n}\n\ninterface NodeRendererProps {\n node: PortableRenderNode;\n config: Config;\n viewports: ViewportDef[];\n activeViewportIndex: number;\n renderUnknown: RenderUnknown;\n}\n\nfunction NodeRenderer({\n node,\n config,\n viewports,\n activeViewportIndex,\n renderUnknown,\n}: NodeRendererProps): ReactNode {\n const { componentId } = node.registration;\n const entry = config.components[componentId];\n if (!entry) {\n return createElement(renderUnknown, { componentId, nodeId: node.nodeId });\n }\n const componentConfig = normalizeComponentRegistration(entry);\n\n // Pre-render slot
|
|
1
|
+
{"version":3,"sources":["../src/nodes-renderer.tsx"],"sourcesContent":["/*\n * Recursive renderer over PortableRenderNodes. Customer components receive the\n * merged prop bag (defaults + content + resolveData + slots); design values\n * are read via `useDesignValues()`, not injected as props.\n */\n\nimport { Fragment, createElement, type ReactNode } from 'react';\n\nimport type {\n PortableExperienceTemplate,\n PortableRenderNode,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\nimport { applyTokenResolver, resolveDesignProperties } from '@contentful/experiences-design';\n\nimport {\n ContentfulComponentProvider,\n ContentfulExperienceTemplateProvider,\n ResolvedDesignProvider,\n} from './context';\nimport type { MissingComponentProps } from './missing-component';\nimport {\n normalizeComponentRegistration,\n normalizeExperienceTemplateRegistration,\n type ContentfulComponent,\n type ContentfulExperienceTemplate,\n type Config,\n} from './types';\n\nexport type RenderUnknown = (props: MissingComponentProps) => ReactNode;\n\n// Internal renderers take `viewports` + `activeViewportIndex`, not the whole\n// RenderContext object — the context is published once via ExperienceProvider,\n// and re-threading it as an element prop makes React's RSC serializer back-patch\n// a shared reference into frozen props (\"Cannot assign to read only property\").\nexport interface NodesRendererProps {\n nodes: PortableRenderNode[];\n config: Config;\n viewports: ViewportDef[];\n activeViewportIndex: number;\n renderUnknown: RenderUnknown;\n}\n\nexport function NodesRenderer({\n nodes,\n config,\n viewports,\n activeViewportIndex,\n renderUnknown,\n}: NodesRendererProps): ReactNode {\n if (!nodes.length) return null;\n return (\n <Fragment>\n {nodes.map((node, index) => (\n <NodeRenderer\n key={node.nodeId ?? index}\n node={node}\n config={config}\n viewports={viewports}\n activeViewportIndex={activeViewportIndex}\n renderUnknown={renderUnknown}\n />\n ))}\n </Fragment>\n );\n}\n\ninterface NodeRendererProps {\n node: PortableRenderNode;\n config: Config;\n viewports: ViewportDef[];\n activeViewportIndex: number;\n renderUnknown: RenderUnknown;\n}\n\nfunction NodeRenderer({\n node,\n config,\n viewports,\n activeViewportIndex,\n renderUnknown,\n}: NodeRendererProps): ReactNode {\n const { componentId } = node.registration;\n const entry = config.components[componentId];\n if (!entry) {\n return createElement(renderUnknown, { componentId, nodeId: node.nodeId });\n }\n const componentConfig = normalizeComponentRegistration(entry);\n\n // Pre-render each slot's children as an *array* of ReactNodes (one keyed\n // element per child), not a single wrapping node. A component can drop the\n // array straight into JSX for the common \"just render them\" case (React\n // renders keyed arrays), or map/filter/wrap the children individually.\n const slotProps: Record<string, ReactNode[]> = {};\n for (const [slotName, children] of Object.entries(node.slots)) {\n slotProps[slotName] = children.map((child, index) => (\n <NodeRenderer\n key={child.nodeId ?? index}\n node={child}\n config={config}\n viewports={viewports}\n activeViewportIndex={activeViewportIndex}\n renderUnknown={renderUnknown}\n />\n ));\n }\n\n // Cascade design to the active viewport, then resolve DesignToken envelopes.\n // Published on context for useDesignValues() — never spread onto props.\n const resolvedDesign = resolveDesignProperties(node.props.design, viewports, activeViewportIndex);\n const { props: tokenResolvedDesign, unresolved } = applyTokenResolver(\n resolvedDesign,\n config.resolveToken\n );\n if (unresolved.length && typeof console !== 'undefined') {\n console.warn(\n `[@contentful/experiences-react] resolveToken returned undefined for token id(s) on \"${componentId}\": ${unresolved.join(', ')}. useDesignValues() will omit those keys.`\n );\n }\n\n const contentful: ContentfulComponent = {\n componentId,\n nodeId: node.nodeId,\n content: node.props.content,\n design: node.props.design,\n resolved: node.props.resolved,\n };\n\n // Merge precedence (last wins): defaults < content < resolveData < slots.\n const composed = {\n ...componentConfig.defaults,\n ...node.props.content,\n ...node.props.resolved,\n ...slotProps,\n };\n\n return (\n <ContentfulComponentProvider value={contentful}>\n <ResolvedDesignProvider value={tokenResolvedDesign}>\n {createElement(componentConfig.component, composed)}\n </ResolvedDesignProvider>\n </ContentfulComponentProvider>\n );\n}\n\nexport interface WrapWithExperienceTemplateProps {\n experienceTemplate: PortableExperienceTemplate | undefined;\n config: Config;\n viewports: ViewportDef[];\n activeViewportIndex: number;\n children: ReactNode;\n}\n\n/**\n * Wraps the rendered nodes with the page-level Experience Template. If the\n * template is referenced but unregistered, warns once and renders children\n * unwrapped.\n */\nexport function WrapWithExperienceTemplate({\n experienceTemplate,\n config,\n viewports,\n activeViewportIndex,\n children,\n}: WrapWithExperienceTemplateProps): ReactNode {\n if (!experienceTemplate) return <Fragment>{children}</Fragment>;\n const entry = config.experienceTemplates?.[experienceTemplate.experienceTemplateId];\n if (!entry) {\n if (typeof console !== 'undefined') {\n console.warn(\n `[@contentful/experiences-react] No experience template registered for id \"${experienceTemplate.experienceTemplateId}\". Rendering nodes without the experience template wrapper.`\n );\n }\n return <Fragment>{children}</Fragment>;\n }\n const experienceTemplateConfig = normalizeExperienceTemplateRegistration(entry);\n\n const resolvedDesign = resolveDesignProperties(\n experienceTemplate.props.design,\n viewports,\n activeViewportIndex\n );\n\n const { props: tokenResolvedDesign, unresolved } = applyTokenResolver(\n resolvedDesign,\n config.resolveToken\n );\n if (unresolved.length && typeof console !== 'undefined') {\n console.warn(\n `[@contentful/experiences-react] resolveToken returned undefined for token id(s) on experience template \"${experienceTemplate.experienceTemplateId}\": ${unresolved.join(', ')}. useDesignValues() will omit those keys.`\n );\n }\n\n const contentful: ContentfulExperienceTemplate = {\n experienceTemplateId: experienceTemplate.experienceTemplateId,\n content: experienceTemplate.props.content,\n design: experienceTemplate.props.design,\n resolved: experienceTemplate.props.resolved,\n };\n\n const composed = {\n ...experienceTemplateConfig.defaults,\n ...experienceTemplate.props.content,\n ...experienceTemplate.props.resolved,\n children,\n };\n\n return (\n <ContentfulExperienceTemplateProvider value={contentful}>\n <ResolvedDesignProvider value={tokenResolvedDesign}>\n {createElement(experienceTemplateConfig.component, composed)}\n </ResolvedDesignProvider>\n </ContentfulExperienceTemplateProvider>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED