@contentful/experiences-react 0.5.8 → 0.6.0
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 +34 -0
- package/README.md +1 -1
- package/dist/client-renderer.d.ts +13 -3
- package/dist/client-renderer.js +29 -24
- package/dist/client-renderer.js.map +1 -1
- package/dist/context.d.ts +2 -2
- package/dist/context.js.map +1 -1
- package/dist/debug-experience.d.ts +12 -0
- package/dist/debug-experience.js +77 -0
- package/dist/debug-experience.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/missing-component.js +11 -4
- package/dist/missing-component.js.map +1 -1
- package/dist/server-renderer.d.ts +14 -4
- package/dist/server-renderer.js +29 -24
- package/dist/server-renderer.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,37 @@
|
|
|
1
|
+
## 0.6.0 (2026-08-05)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- ⚠️ replace isPreview with top-level debug mode [AIS-243] ([#98](https://github.com/contentful/experiences/pull/98))
|
|
6
|
+
|
|
7
|
+
### ⚠️ Breaking Changes
|
|
8
|
+
|
|
9
|
+
- replace isPreview with top-level debug mode [AIS-243] ([#98](https://github.com/contentful/experiences/pull/98))
|
|
10
|
+
`isPreview` is removed from the render context and the nested
|
|
11
|
+
`context` option is gone. Pass `metadata` and `debug` as top-level options on
|
|
12
|
+
`fetchExperience`/`resolveExperience` and as props on the renderers.
|
|
13
|
+
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
|
14
|
+
* refactor: derive metadata once in sveltekit apps
|
|
15
|
+
Extract a single `metadata` object in the loaders and thread it through
|
|
16
|
+
both fetchExperience and the renderer, instead of duplicating the
|
|
17
|
+
`{ slug }` literal in +page.svelte. Addresses PR review feedback.
|
|
18
|
+
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
|
19
|
+
* refactor: mount DebugExperience above the tree and aggregate resolveData timing
|
|
20
|
+
Move the auto-mounted <DebugExperience> panel above the rendered tree in
|
|
21
|
+
both React and Svelte renderers (client + server) so the debug dump is
|
|
22
|
+
visible without scrolling past the experience. Update the doc comments
|
|
23
|
+
and README to match.
|
|
24
|
+
Replace per-node resolveData timing lines with a single aggregate span
|
|
25
|
+
over the whole fan-out — keeps the timing signal without emitting a log
|
|
26
|
+
line per node, which gets noisy on large trees.
|
|
27
|
+
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
|
28
|
+
|
|
29
|
+
### 🧱 Updated Dependencies
|
|
30
|
+
|
|
31
|
+
- Updated client to 0.2.0
|
|
32
|
+
- Updated design to 0.6.0
|
|
33
|
+
- Updated core to 0.6.0
|
|
34
|
+
|
|
1
35
|
## 0.5.8 (2026-08-04)
|
|
2
36
|
|
|
3
37
|
### 🧱 Updated Dependencies
|
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ useActiveViewport; // Hook used inside ClientExperienceRenderer (you'll rarely n
|
|
|
52
52
|
```ts
|
|
53
53
|
useDesignValues<T>(); // Resolved design values for the current node (viewport-cascaded + token-resolved)
|
|
54
54
|
toCss(design, options?); // Turns a design record into CSSProperties, keeping only real CSS keys
|
|
55
|
-
useExperience(); // RenderContext:
|
|
55
|
+
useExperience(); // RenderContext: debug, metadata, viewports, activeViewport
|
|
56
56
|
useContentfulComponent(); // Raw payload for the enclosing node (or null)
|
|
57
57
|
useContentfulTemplate(); // Same, for the page-level template
|
|
58
58
|
type ToCssOptions;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { PortableRenderPlan
|
|
2
|
+
import { PortableRenderPlan } from '@contentful/experiences-sdk-core';
|
|
3
3
|
import { RenderUnknown } from './nodes-renderer.js';
|
|
4
4
|
import { Config } from './types.js';
|
|
5
5
|
import './missing-component.js';
|
|
@@ -9,9 +9,19 @@ interface ClientExperienceRendererProps {
|
|
|
9
9
|
config: Config;
|
|
10
10
|
/** Initial viewport seed; should match what the server-rendered output used. */
|
|
11
11
|
initialViewportId?: string;
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Arbitrary per-render metadata, readable by descendants via
|
|
14
|
+
* `useExperience()` and by resolvers via `ctx.experience.metadata`.
|
|
15
|
+
*/
|
|
16
|
+
metadata?: Record<string, unknown>;
|
|
17
|
+
/**
|
|
18
|
+
* Observability switch. When on: renders the visible missing-component box,
|
|
19
|
+
* turns the default `renderUnknown` fallback into the debug component, and
|
|
20
|
+
* auto-mounts `<DebugExperience>` after the tree.
|
|
21
|
+
*/
|
|
22
|
+
debug?: boolean;
|
|
13
23
|
renderUnknown?: RenderUnknown;
|
|
14
24
|
}
|
|
15
|
-
declare function ClientExperienceRenderer({ experience, config, initialViewportId,
|
|
25
|
+
declare function ClientExperienceRenderer({ experience, config, initialViewportId, metadata, debug, renderUnknown, }: ClientExperienceRendererProps): ReactNode;
|
|
16
26
|
|
|
17
27
|
export { ClientExperienceRenderer, type ClientExperienceRendererProps };
|
package/dist/client-renderer.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { DebugExperience } from "./debug-experience";
|
|
3
4
|
import { ExperienceProvider } from "./context";
|
|
4
5
|
import { MissingComponent } from "./missing-component";
|
|
5
6
|
import { NodesRenderer, WrapWithTemplate } from "./nodes-renderer";
|
|
6
7
|
import { useActiveViewport } from "./use-active-viewport";
|
|
7
8
|
const DEFAULT_CONTEXT = {
|
|
8
|
-
|
|
9
|
+
debug: false,
|
|
9
10
|
metadata: {},
|
|
10
11
|
viewports: []
|
|
11
12
|
};
|
|
@@ -19,7 +20,8 @@ function ClientExperienceRenderer({
|
|
|
19
20
|
experience,
|
|
20
21
|
config,
|
|
21
22
|
initialViewportId,
|
|
22
|
-
|
|
23
|
+
metadata,
|
|
24
|
+
debug = false,
|
|
23
25
|
renderUnknown = MissingComponent
|
|
24
26
|
}) {
|
|
25
27
|
if (!experience) return null;
|
|
@@ -28,31 +30,34 @@ function ClientExperienceRenderer({
|
|
|
28
30
|
const activeViewport = { ...experience.viewports[activeViewportIndex] ?? FALLBACK_VIEWPORT };
|
|
29
31
|
const renderContext = {
|
|
30
32
|
...DEFAULT_CONTEXT,
|
|
31
|
-
|
|
32
|
-
metadata: { ...DEFAULT_CONTEXT.metadata, ...
|
|
33
|
+
debug,
|
|
34
|
+
metadata: { ...DEFAULT_CONTEXT.metadata, ...metadata ?? {} },
|
|
33
35
|
viewports: contextViewports,
|
|
34
36
|
activeViewport,
|
|
35
37
|
activeViewportIndex
|
|
36
38
|
};
|
|
37
|
-
return /* @__PURE__ */
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
39
|
+
return /* @__PURE__ */ jsxs(ExperienceProvider, { value: renderContext, children: [
|
|
40
|
+
debug ? /* @__PURE__ */ jsx(DebugExperience, { experience }) : null,
|
|
41
|
+
/* @__PURE__ */ jsx(
|
|
42
|
+
WrapWithTemplate,
|
|
43
|
+
{
|
|
44
|
+
template: experience.template,
|
|
45
|
+
config,
|
|
46
|
+
viewports: experience.viewports,
|
|
47
|
+
activeViewportIndex,
|
|
48
|
+
children: /* @__PURE__ */ jsx(
|
|
49
|
+
NodesRenderer,
|
|
50
|
+
{
|
|
51
|
+
nodes: experience.nodes,
|
|
52
|
+
config,
|
|
53
|
+
viewports: experience.viewports,
|
|
54
|
+
activeViewportIndex,
|
|
55
|
+
renderUnknown
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
] });
|
|
56
61
|
}
|
|
57
62
|
export {
|
|
58
63
|
ClientExperienceRenderer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/client-renderer.tsx"],"sourcesContent":["/*\n * Client Experience renderer. First paint matches the server renderer; after\n * hydration `useActiveViewport` takes over via `matchMedia`. Server-safe: the\n * hook returns the seeded index and registers no listeners when there's no\n * window, so SSR output matches `<ServerExperienceRenderer>`.\n */\n\n'use client';\n\nimport type { ReactNode } from 'react';\n\nimport type {\n ExperienceContext,\n PortableRenderPlan,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\n\nimport { ExperienceProvider } from './context';\nimport { MissingComponent } from './missing-component';\nimport { NodesRenderer, WrapWithTemplate, type RenderUnknown } from './nodes-renderer';\nimport type { Config, RenderContext } from './types';\nimport { useActiveViewport } from './use-active-viewport';\n\nconst DEFAULT_CONTEXT: ExperienceContext = {\n
|
|
1
|
+
{"version":3,"sources":["../src/client-renderer.tsx"],"sourcesContent":["/*\n * Client Experience renderer. First paint matches the server renderer; after\n * hydration `useActiveViewport` takes over via `matchMedia`. Server-safe: the\n * hook returns the seeded index and registers no listeners when there's no\n * window, so SSR output matches `<ServerExperienceRenderer>`.\n */\n\n'use client';\n\nimport type { ReactNode } from 'react';\n\nimport type {\n ExperienceContext,\n PortableRenderPlan,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\n\nimport { DebugExperience } from './debug-experience';\nimport { ExperienceProvider } from './context';\nimport { MissingComponent } from './missing-component';\nimport { NodesRenderer, WrapWithTemplate, type RenderUnknown } from './nodes-renderer';\nimport type { Config, RenderContext } from './types';\nimport { useActiveViewport } from './use-active-viewport';\n\nconst DEFAULT_CONTEXT: ExperienceContext = {\n debug: false,\n metadata: {},\n viewports: [],\n};\n\nconst FALLBACK_VIEWPORT: ViewportDef = {\n id: '_',\n query: '*',\n displayName: 'Default',\n previewSize: '100%',\n};\n\nexport interface ClientExperienceRendererProps {\n experience: PortableRenderPlan | null | undefined;\n config: Config;\n /** Initial viewport seed; should match what the server-rendered output used. */\n initialViewportId?: string;\n /**\n * Arbitrary per-render metadata, readable by descendants via\n * `useExperience()` and by resolvers via `ctx.experience.metadata`.\n */\n metadata?: Record<string, unknown>;\n /**\n * Observability switch. When on: renders the visible missing-component box,\n * turns the default `renderUnknown` fallback into the debug component, and\n * auto-mounts `<DebugExperience>` after the tree.\n */\n debug?: boolean;\n renderUnknown?: RenderUnknown;\n}\n\nexport function ClientExperienceRenderer({\n experience,\n config,\n initialViewportId,\n metadata,\n debug = false,\n renderUnknown = MissingComponent,\n}: ClientExperienceRendererProps): ReactNode {\n if (!experience) return null;\n const { activeViewportIndex } = useActiveViewport(experience.viewports, initialViewportId);\n // Copy so the context shares no object identity with the plan arrays — see\n // the note in `server-renderer.tsx`.\n const contextViewports = experience.viewports.map((v) => ({ ...v }));\n const activeViewport = { ...(experience.viewports[activeViewportIndex] ?? FALLBACK_VIEWPORT) };\n\n const renderContext: RenderContext = {\n ...DEFAULT_CONTEXT,\n debug,\n metadata: { ...DEFAULT_CONTEXT.metadata, ...(metadata ?? {}) },\n viewports: contextViewports,\n activeViewport,\n activeViewportIndex,\n };\n\n return (\n <ExperienceProvider value={renderContext}>\n {debug ? <DebugExperience experience={experience} /> : null}\n <WrapWithTemplate\n template={experience.template}\n config={config}\n viewports={experience.viewports}\n activeViewportIndex={activeViewportIndex}\n >\n <NodesRenderer\n nodes={experience.nodes}\n config={config}\n viewports={experience.viewports}\n activeViewportIndex={activeViewportIndex}\n renderUnknown={renderUnknown}\n />\n </WrapWithTemplate>\n </ExperienceProvider>\n );\n}\n"],"mappings":";AAiFI,SACW,KADX;AAhEJ,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,eAAe,wBAA4C;AAEpE,SAAS,yBAAyB;AAElC,MAAM,kBAAqC;AAAA,EACzC,OAAO;AAAA,EACP,UAAU,CAAC;AAAA,EACX,WAAW,CAAC;AACd;AAEA,MAAM,oBAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACf;AAqBO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,gBAAgB;AAClB,GAA6C;AAC3C,MAAI,CAAC,WAAY,QAAO;AACxB,QAAM,EAAE,oBAAoB,IAAI,kBAAkB,WAAW,WAAW,iBAAiB;AAGzF,QAAM,mBAAmB,WAAW,UAAU,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;AACnE,QAAM,iBAAiB,EAAE,GAAI,WAAW,UAAU,mBAAmB,KAAK,kBAAmB;AAE7F,QAAM,gBAA+B;AAAA,IACnC,GAAG;AAAA,IACH;AAAA,IACA,UAAU,EAAE,GAAG,gBAAgB,UAAU,GAAI,YAAY,CAAC,EAAG;AAAA,IAC7D,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF;AAEA,SACE,qBAAC,sBAAmB,OAAO,eACxB;AAAA,YAAQ,oBAAC,mBAAgB,YAAwB,IAAK;AAAA,IACvD;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,WAAW;AAAA,QACrB;AAAA,QACA,WAAW,WAAW;AAAA,QACtB;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,WAAW;AAAA,YAClB;AAAA,YACA,WAAW,WAAW;AAAA,YACtB;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
|
package/dist/context.d.ts
CHANGED
|
@@ -20,8 +20,8 @@ declare function ResolvedDesignProvider({ value, children, }: {
|
|
|
20
20
|
}): ReactNode;
|
|
21
21
|
/**
|
|
22
22
|
* Read the current Experience runtime context — viewports, the active
|
|
23
|
-
* viewport,
|
|
24
|
-
* any Experience renderer subtree.
|
|
23
|
+
* viewport, the `debug` flag, and free-form metadata. Throws when called
|
|
24
|
+
* outside any Experience renderer subtree.
|
|
25
25
|
*/
|
|
26
26
|
declare function useExperience(): RenderContext;
|
|
27
27
|
/**
|
package/dist/context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/context.tsx"],"sourcesContent":["/*\n * React context providers + hooks that expose runtime context and the raw\n * Contentful payload to descendants of a rendered Experience. Customer\n * components receive only their declared props via the renderer; anything\n * that needs the Experience runtime context or the underlying payload calls\n * the hook explicitly at the top of its component body.\n */\n\n'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\n\nimport type { ContentfulComponent, ContentfulTemplate, RenderContext } from './types';\n\nconst ExperienceContext = createContext<RenderContext | null>(null);\nconst ContentfulComponentContext = createContext<ContentfulComponent | null>(null);\nconst ContentfulTemplateContext = createContext<ContentfulTemplate | null>(null);\n// Plain data only (never the Config or its functions) so it crosses RSC cleanly.\nconst ResolvedDesignContext = createContext<Record<string, unknown> | null>(null);\n\n// Wrapped as real client-component functions, not re-exported `Context.Provider`\n// objects — the server renderer imports these across the RSC boundary and\n// Next.js requires a function reference there (\"Element type is invalid\" otherwise).\n\nexport function ExperienceProvider({\n value,\n children,\n}: {\n value: RenderContext;\n children: ReactNode;\n}): ReactNode {\n return <ExperienceContext.Provider value={value}>{children}</ExperienceContext.Provider>;\n}\n\nexport function ContentfulComponentProvider({\n value,\n children,\n}: {\n value: ContentfulComponent;\n children: ReactNode;\n}): ReactNode {\n return (\n <ContentfulComponentContext.Provider value={value}>\n {children}\n </ContentfulComponentContext.Provider>\n );\n}\n\nexport function ContentfulTemplateProvider({\n value,\n children,\n}: {\n value: ContentfulTemplate;\n children: ReactNode;\n}): ReactNode {\n return (\n <ContentfulTemplateContext.Provider value={value}>\n {children}\n </ContentfulTemplateContext.Provider>\n );\n}\n\nexport function ResolvedDesignProvider({\n value,\n children,\n}: {\n value: Record<string, unknown>;\n children: ReactNode;\n}): ReactNode {\n return <ResolvedDesignContext.Provider value={value}>{children}</ResolvedDesignContext.Provider>;\n}\n\n/**\n * Read the current Experience runtime context — viewports, the active\n * viewport,
|
|
1
|
+
{"version":3,"sources":["../src/context.tsx"],"sourcesContent":["/*\n * React context providers + hooks that expose runtime context and the raw\n * Contentful payload to descendants of a rendered Experience. Customer\n * components receive only their declared props via the renderer; anything\n * that needs the Experience runtime context or the underlying payload calls\n * the hook explicitly at the top of its component body.\n */\n\n'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\n\nimport type { ContentfulComponent, ContentfulTemplate, RenderContext } from './types';\n\nconst ExperienceContext = createContext<RenderContext | null>(null);\nconst ContentfulComponentContext = createContext<ContentfulComponent | null>(null);\nconst ContentfulTemplateContext = createContext<ContentfulTemplate | null>(null);\n// Plain data only (never the Config or its functions) so it crosses RSC cleanly.\nconst ResolvedDesignContext = createContext<Record<string, unknown> | null>(null);\n\n// Wrapped as real client-component functions, not re-exported `Context.Provider`\n// objects — the server renderer imports these across the RSC boundary and\n// Next.js requires a function reference there (\"Element type is invalid\" otherwise).\n\nexport function ExperienceProvider({\n value,\n children,\n}: {\n value: RenderContext;\n children: ReactNode;\n}): ReactNode {\n return <ExperienceContext.Provider value={value}>{children}</ExperienceContext.Provider>;\n}\n\nexport function ContentfulComponentProvider({\n value,\n children,\n}: {\n value: ContentfulComponent;\n children: ReactNode;\n}): ReactNode {\n return (\n <ContentfulComponentContext.Provider value={value}>\n {children}\n </ContentfulComponentContext.Provider>\n );\n}\n\nexport function ContentfulTemplateProvider({\n value,\n children,\n}: {\n value: ContentfulTemplate;\n children: ReactNode;\n}): ReactNode {\n return (\n <ContentfulTemplateContext.Provider value={value}>\n {children}\n </ContentfulTemplateContext.Provider>\n );\n}\n\nexport function ResolvedDesignProvider({\n value,\n children,\n}: {\n value: Record<string, unknown>;\n children: ReactNode;\n}): ReactNode {\n return <ResolvedDesignContext.Provider value={value}>{children}</ResolvedDesignContext.Provider>;\n}\n\n/**\n * Read the current Experience runtime context — viewports, the active\n * viewport, the `debug` flag, and free-form metadata. Throws when called\n * outside any Experience renderer subtree.\n */\nexport function useExperience(): RenderContext {\n const ctx = useContext(ExperienceContext);\n if (ctx === null) {\n throw new Error(\n 'useExperience() must be called inside a <ServerExperienceRenderer> or <ClientExperienceRenderer> subtree.'\n );\n }\n return ctx;\n}\n\n/**\n * Read the raw Contentful payload for the nearest enclosing Experience node.\n * Returns `null` outside any rendered node (e.g. from a template's chrome\n * that wraps the nodes but isn't itself a node).\n */\nexport function useContentfulComponent(): ContentfulComponent | null {\n return useContext(ContentfulComponentContext);\n}\n\n/**\n * Read the raw Contentful payload for the page-level template, if one is in\n * scope. Returns `null` outside a template's render tree.\n */\nexport function useContentfulTemplate(): ContentfulTemplate | null {\n return useContext(ContentfulTemplateContext);\n}\n\n/**\n * Read the design values the renderer already resolved for the enclosing\n * node or template — viewport-cascaded and token-resolved, the same bag that\n * feeds the component's props. Returns `null` outside a rendered node/\n * template, which `useDesignValues` treats as \"nothing to read.\"\n */\nexport function useResolvedDesign(): Record<string, unknown> | null {\n return useContext(ResolvedDesignContext);\n}\n"],"mappings":";AA+BS;AArBT,SAAS,eAAe,kBAAkC;AAI1D,MAAM,oBAAoB,cAAoC,IAAI;AAClE,MAAM,6BAA6B,cAA0C,IAAI;AACjF,MAAM,4BAA4B,cAAyC,IAAI;AAE/E,MAAM,wBAAwB,cAA8C,IAAI;AAMzE,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGc;AACZ,SAAO,oBAAC,kBAAkB,UAAlB,EAA2B,OAAe,UAAS;AAC7D;AAEO,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AACF,GAGc;AACZ,SACE,oBAAC,2BAA2B,UAA3B,EAAoC,OAClC,UACH;AAEJ;AAEO,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AACF,GAGc;AACZ,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OACjC,UACH;AAEJ;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGc;AACZ,SAAO,oBAAC,sBAAsB,UAAtB,EAA+B,OAAe,UAAS;AACjE;AAOO,SAAS,gBAA+B;AAC7C,QAAM,MAAM,WAAW,iBAAiB;AACxC,MAAI,QAAQ,MAAM;AAChB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAOO,SAAS,yBAAqD;AACnE,SAAO,WAAW,0BAA0B;AAC9C;AAMO,SAAS,wBAAmD;AACjE,SAAO,WAAW,yBAAyB;AAC7C;AAQO,SAAS,oBAAoD;AAClE,SAAO,WAAW,qBAAqB;AACzC;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { PortableRenderPlan } from '@contentful/experiences-sdk-core';
|
|
3
|
+
|
|
4
|
+
interface DebugExperienceProps {
|
|
5
|
+
/** The resolved plan to inspect (what a renderer receives as `experience`). */
|
|
6
|
+
experience: PortableRenderPlan;
|
|
7
|
+
/** Start expanded. Defaults to collapsed to stay out of the way. */
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare function DebugExperience({ experience, defaultOpen, }: DebugExperienceProps): ReactNode;
|
|
11
|
+
|
|
12
|
+
export { DebugExperience, type DebugExperienceProps };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
function DebugExperience({
|
|
3
|
+
experience,
|
|
4
|
+
defaultOpen = false
|
|
5
|
+
}) {
|
|
6
|
+
const nodeCount = experience.nodes.length;
|
|
7
|
+
const summary = `Experience debug \u2014 ${nodeCount} top-level node${nodeCount === 1 ? "" : "s"}${experience.template ? `, template: ${experience.template.templateId}` : ""}`;
|
|
8
|
+
return /* @__PURE__ */ jsxs(
|
|
9
|
+
"details",
|
|
10
|
+
{
|
|
11
|
+
open: defaultOpen,
|
|
12
|
+
"data-experiences-debug": true,
|
|
13
|
+
style: {
|
|
14
|
+
margin: "1rem 0",
|
|
15
|
+
border: "1px solid #6b7280",
|
|
16
|
+
borderRadius: "6px",
|
|
17
|
+
background: "#0b1021",
|
|
18
|
+
color: "#e2e8f0",
|
|
19
|
+
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
20
|
+
fontSize: "0.75rem",
|
|
21
|
+
overflow: "hidden"
|
|
22
|
+
},
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ jsx(
|
|
25
|
+
"summary",
|
|
26
|
+
{
|
|
27
|
+
style: {
|
|
28
|
+
cursor: "pointer",
|
|
29
|
+
padding: "0.5rem 0.75rem",
|
|
30
|
+
background: "#111827",
|
|
31
|
+
userSelect: "none"
|
|
32
|
+
},
|
|
33
|
+
children: summary
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ jsx(
|
|
37
|
+
"pre",
|
|
38
|
+
{
|
|
39
|
+
style: {
|
|
40
|
+
margin: 0,
|
|
41
|
+
padding: "0.75rem",
|
|
42
|
+
overflow: "auto",
|
|
43
|
+
maxHeight: "32rem",
|
|
44
|
+
whiteSpace: "pre-wrap",
|
|
45
|
+
wordBreak: "break-word"
|
|
46
|
+
},
|
|
47
|
+
children: safeStringify(experience)
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
function safeStringify(value) {
|
|
55
|
+
const seen = /* @__PURE__ */ new WeakSet();
|
|
56
|
+
try {
|
|
57
|
+
return JSON.stringify(
|
|
58
|
+
value,
|
|
59
|
+
(_key, val) => {
|
|
60
|
+
if (typeof val === "object" && val !== null) {
|
|
61
|
+
if (seen.has(val)) return "[Circular]";
|
|
62
|
+
seen.add(val);
|
|
63
|
+
}
|
|
64
|
+
if (typeof val === "function") return `[Function ${val.name || "anonymous"}]`;
|
|
65
|
+
if (typeof val === "undefined") return "[undefined]";
|
|
66
|
+
return val;
|
|
67
|
+
},
|
|
68
|
+
2
|
|
69
|
+
);
|
|
70
|
+
} catch (err) {
|
|
71
|
+
return `[DebugExperience: could not serialize plan \u2014 ${err.message}]`;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
export {
|
|
75
|
+
DebugExperience
|
|
76
|
+
};
|
|
77
|
+
//# sourceMappingURL=debug-experience.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/debug-experience.tsx"],"sourcesContent":["/*\n * First-party debug panel. Renders the resolved Experience plan as pretty\n * JSON so a customer can see exactly what the SDK interpreted from the payload\n * — node tree, registrations, resolved props, viewports.\n *\n * Two ways to use it:\n * - Auto-mounted by the renderers when `debug` is on (above the tree).\n * - Mounted manually anywhere: `<DebugExperience experience={plan} />`.\n *\n * v1 is just the JSON dump wrapped in a native <details> so it collapses\n * without any client JS (safe in server components). Room to grow into a\n * node-tree explorer, viewport indicator, and resolveData timing panel — kept\n * deliberately small for now.\n *\n * No React hooks here on purpose: it must render in both server and client\n * renderer subtrees.\n */\n\nimport type { ReactNode } from 'react';\n\nimport type { PortableRenderPlan } from '@contentful/experiences-sdk-core';\n\nexport interface DebugExperienceProps {\n /** The resolved plan to inspect (what a renderer receives as `experience`). */\n experience: PortableRenderPlan;\n /** Start expanded. Defaults to collapsed to stay out of the way. */\n defaultOpen?: boolean;\n}\n\nexport function DebugExperience({\n experience,\n defaultOpen = false,\n}: DebugExperienceProps): ReactNode {\n const nodeCount = experience.nodes.length;\n const summary = `Experience debug — ${nodeCount} top-level node${nodeCount === 1 ? '' : 's'}${\n experience.template ? `, template: ${experience.template.templateId}` : ''\n }`;\n\n return (\n <details\n open={defaultOpen}\n data-experiences-debug\n style={{\n margin: '1rem 0',\n border: '1px solid #6b7280',\n borderRadius: '6px',\n background: '#0b1021',\n color: '#e2e8f0',\n fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n fontSize: '0.75rem',\n overflow: 'hidden',\n }}\n >\n <summary\n style={{\n cursor: 'pointer',\n padding: '0.5rem 0.75rem',\n background: '#111827',\n userSelect: 'none',\n }}\n >\n {summary}\n </summary>\n <pre\n style={{\n margin: 0,\n padding: '0.75rem',\n overflow: 'auto',\n maxHeight: '32rem',\n whiteSpace: 'pre-wrap',\n wordBreak: 'break-word',\n }}\n >\n {safeStringify(experience)}\n </pre>\n </details>\n );\n}\n\n/**\n * JSON.stringify with a circular-reference guard. A resolved plan is plain\n * data, but a customer's `resolveData` could stash a non-serializable value on\n * `props.resolved` — degrade to a placeholder rather than throwing inside a\n * debug panel.\n */\nfunction safeStringify(value: unknown): string {\n const seen = new WeakSet<object>();\n try {\n return JSON.stringify(\n value,\n (_key, val) => {\n if (typeof val === 'object' && val !== null) {\n if (seen.has(val)) return '[Circular]';\n seen.add(val);\n }\n if (typeof val === 'function') return `[Function ${val.name || 'anonymous'}]`;\n if (typeof val === 'undefined') return '[undefined]';\n return val;\n },\n 2\n );\n } catch (err) {\n return `[DebugExperience: could not serialize plan — ${(err as Error).message}]`;\n }\n}\n"],"mappings":"AAuCI,SAcE,KAdF;AAVG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,cAAc;AAChB,GAAoC;AAClC,QAAM,YAAY,WAAW,MAAM;AACnC,QAAM,UAAU,2BAAsB,SAAS,kBAAkB,cAAc,IAAI,KAAK,GAAG,GACzF,WAAW,WAAW,eAAe,WAAW,SAAS,UAAU,KAAK,EAC1E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,0BAAsB;AAAA,MACtB,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,YAAY;AAAA,YACd;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,UAAU;AAAA,cACV,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,WAAW;AAAA,YACb;AAAA,YAEC,wBAAc,UAAU;AAAA;AAAA,QAC3B;AAAA;AAAA;AAAA,EACF;AAEJ;AAQA,SAAS,cAAc,OAAwB;AAC7C,QAAM,OAAO,oBAAI,QAAgB;AACjC,MAAI;AACF,WAAO,KAAK;AAAA,MACV;AAAA,MACA,CAAC,MAAM,QAAQ;AACb,YAAI,OAAO,QAAQ,YAAY,QAAQ,MAAM;AAC3C,cAAI,KAAK,IAAI,GAAG,EAAG,QAAO;AAC1B,eAAK,IAAI,GAAG;AAAA,QACd;AACA,YAAI,OAAO,QAAQ,WAAY,QAAO,aAAa,IAAI,QAAQ,WAAW;AAC1E,YAAI,OAAO,QAAQ,YAAa,QAAO;AACvC,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,EACF,SAAS,KAAK;AACZ,WAAO,qDAAiD,IAAc,OAAO;AAAA,EAC/E;AACF;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { ClientExperienceRenderer, ClientExperienceRendererProps, ClientExperienceRenderer as ExperienceRenderer, ClientExperienceRendererProps as ExperienceRendererProps } from './client-renderer.js';
|
|
2
2
|
export { ServerExperienceRenderer, ServerExperienceRendererProps } from './server-renderer.js';
|
|
3
3
|
export { MissingComponent, MissingComponentProps } from './missing-component.js';
|
|
4
|
+
export { DebugExperience, DebugExperienceProps } from './debug-experience.js';
|
|
4
5
|
export { UseActiveViewportResult, useActiveViewport } from './use-active-viewport.js';
|
|
5
6
|
export { RenderUnknown } from './nodes-renderer.js';
|
|
6
7
|
export { useContentfulComponent, useContentfulTemplate, useExperience } from './context.js';
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
} from "./client-renderer";
|
|
5
5
|
import { ServerExperienceRenderer } from "./server-renderer";
|
|
6
6
|
import { MissingComponent } from "./missing-component";
|
|
7
|
+
import { DebugExperience } from "./debug-experience";
|
|
7
8
|
import { useActiveViewport } from "./use-active-viewport";
|
|
8
9
|
import { useExperience, useContentfulComponent, useContentfulTemplate } from "./context";
|
|
9
10
|
import { useDesignValues } from "./use-design-values";
|
|
@@ -39,6 +40,7 @@ export {
|
|
|
39
40
|
ContentfulViewDelivery,
|
|
40
41
|
ContentfulViewDeliveryClient,
|
|
41
42
|
DELIVERY_HOST,
|
|
43
|
+
DebugExperience,
|
|
42
44
|
ClientExperienceRenderer as ExperienceRenderer,
|
|
43
45
|
MissingComponent,
|
|
44
46
|
NotFoundError,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/*\n * Public API surface for `@contentful/experiences-react`.\n *\n * Customers add ONLY this package to their app's dependencies. Everything\n * needed to render an Experience — types, the resolver, viewport utilities,\n * the renderer components, the authoring helpers — is re-exported from here.\n * The internal `@contentful/experiences-sdk-core` and\n * `@contentful/experiences-design` packages are workspace-only implementation\n * details; they are not part of the public API.\n *\n * `ExperienceRenderer` is an alias for `ClientExperienceRenderer`; SSR\n * consumers explicitly import `ServerExperienceRenderer`.\n */\n\n// ─── Renderers ─────────────────────────────────────────────────────────────\nexport {\n ClientExperienceRenderer as ExperienceRenderer,\n ClientExperienceRenderer,\n} from './client-renderer';\nexport type { ClientExperienceRendererProps as ExperienceRendererProps } from './client-renderer';\nexport type { ClientExperienceRendererProps } from './client-renderer';\n\nexport { ServerExperienceRenderer } from './server-renderer';\nexport type { ServerExperienceRendererProps } from './server-renderer';\n\nexport { MissingComponent } from './missing-component';\nexport type { MissingComponentProps } from './missing-component';\n\nexport { useActiveViewport } from './use-active-viewport';\nexport type { UseActiveViewportResult } from './use-active-viewport';\n\nexport type { RenderUnknown } from './nodes-renderer';\n\n// ─── Runtime context hooks ───────────────────────────────────────────────\nexport { useExperience, useContentfulComponent, useContentfulTemplate } from './context';\nexport { useDesignValues } from './use-design-values';\nexport { toCss } from './design-utils';\nexport type { ToCssOptions } from './design-utils';\n\n// ─── Authoring helpers + Config types ─────────────────────────────────────\nexport {\n defineComponent,\n defineTemplate,\n normalizeComponentRegistration,\n normalizeTemplateRegistration,\n} from './types';\nexport type {\n ComponentConfig,\n Components,\n Config,\n ContentfulComponent,\n ContentfulTemplate,\n Registration,\n RenderContext,\n ResolveToken,\n TemplateConfig,\n TemplateRegistration,\n Templates,\n} from './types';\n\n// ─── Resolver (re-exported from render-core) ──────────────────────────────\nexport { resolveExperience } from '@contentful/experiences-sdk-core';\nexport type { ResolverConfig, ResolveExperienceOptions } from '@contentful/experiences-sdk-core';\n\n// ─── Core IR + payload types (re-exported from render-core) ───────────────\nexport type {\n ComponentTypeNode,\n ComponentTypeRef,\n DesignPropValue,\n DesignToken,\n ExperienceContext,\n ExperienceNode,\n ExperiencePayload,\n ExperienceSys,\n ManualDesignValue,\n PortableRegistration,\n PortableRenderNode,\n PortableRenderPlan,\n PortableTemplate,\n ResolveContext,\n TemplateNode,\n TemplateRef,\n ValuesByViewport,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\n\n// ─── Design utilities (re-exported from design) ───────────────────────────\nexport {\n CSS_PROPERTIES,\n getValueForViewport,\n getViewportIndex,\n isCssProperty,\n resolveDesignProperties,\n toCssKey,\n toCssMediaQuery,\n} from '@contentful/experiences-design';\n\n// ─── Delivery client + fetchExperience ────────────────────────────────────\nexport {\n ContentfulViewDelivery,\n ContentfulViewDeliveryClient,\n DELIVERY_HOST,\n NotFoundError,\n PREVIEW_HOST,\n createClient,\n fetchExperience,\n} from '@contentful/experiences-client';\nexport type {\n ClientOptions,\n CreateClientOptions,\n ExperienceOptions,\n ResolveOptions,\n} from '@contentful/experiences-client';\n"],"mappings":"AAeA;AAAA,EAC8B;AAAA,EAC5B,4BAAAA;AAAA,OACK;AAIP,SAAS,gCAAgC;AAGzC,SAAS,wBAAwB;AAGjC,SAAS,yBAAyB;AAMlC,SAAS,eAAe,wBAAwB,6BAA6B;AAC7E,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAItB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,yBAAyB;AA0BlC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["ClientExperienceRenderer"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/*\n * Public API surface for `@contentful/experiences-react`.\n *\n * Customers add ONLY this package to their app's dependencies. Everything\n * needed to render an Experience — types, the resolver, viewport utilities,\n * the renderer components, the authoring helpers — is re-exported from here.\n * The internal `@contentful/experiences-sdk-core` and\n * `@contentful/experiences-design` packages are workspace-only implementation\n * details; they are not part of the public API.\n *\n * `ExperienceRenderer` is an alias for `ClientExperienceRenderer`; SSR\n * consumers explicitly import `ServerExperienceRenderer`.\n */\n\n// ─── Renderers ─────────────────────────────────────────────────────────────\nexport {\n ClientExperienceRenderer as ExperienceRenderer,\n ClientExperienceRenderer,\n} from './client-renderer';\nexport type { ClientExperienceRendererProps as ExperienceRendererProps } from './client-renderer';\nexport type { ClientExperienceRendererProps } from './client-renderer';\n\nexport { ServerExperienceRenderer } from './server-renderer';\nexport type { ServerExperienceRendererProps } from './server-renderer';\n\nexport { MissingComponent } from './missing-component';\nexport type { MissingComponentProps } from './missing-component';\n\nexport { DebugExperience } from './debug-experience';\nexport type { DebugExperienceProps } from './debug-experience';\n\nexport { useActiveViewport } from './use-active-viewport';\nexport type { UseActiveViewportResult } from './use-active-viewport';\n\nexport type { RenderUnknown } from './nodes-renderer';\n\n// ─── Runtime context hooks ───────────────────────────────────────────────\nexport { useExperience, useContentfulComponent, useContentfulTemplate } from './context';\nexport { useDesignValues } from './use-design-values';\nexport { toCss } from './design-utils';\nexport type { ToCssOptions } from './design-utils';\n\n// ─── Authoring helpers + Config types ─────────────────────────────────────\nexport {\n defineComponent,\n defineTemplate,\n normalizeComponentRegistration,\n normalizeTemplateRegistration,\n} from './types';\nexport type {\n ComponentConfig,\n Components,\n Config,\n ContentfulComponent,\n ContentfulTemplate,\n Registration,\n RenderContext,\n ResolveToken,\n TemplateConfig,\n TemplateRegistration,\n Templates,\n} from './types';\n\n// ─── Resolver (re-exported from render-core) ──────────────────────────────\nexport { resolveExperience } from '@contentful/experiences-sdk-core';\nexport type { ResolverConfig, ResolveExperienceOptions } from '@contentful/experiences-sdk-core';\n\n// ─── Core IR + payload types (re-exported from render-core) ───────────────\nexport type {\n ComponentTypeNode,\n ComponentTypeRef,\n DesignPropValue,\n DesignToken,\n ExperienceContext,\n ExperienceNode,\n ExperiencePayload,\n ExperienceSys,\n ManualDesignValue,\n PortableRegistration,\n PortableRenderNode,\n PortableRenderPlan,\n PortableTemplate,\n ResolveContext,\n TemplateNode,\n TemplateRef,\n ValuesByViewport,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\n\n// ─── Design utilities (re-exported from design) ───────────────────────────\nexport {\n CSS_PROPERTIES,\n getValueForViewport,\n getViewportIndex,\n isCssProperty,\n resolveDesignProperties,\n toCssKey,\n toCssMediaQuery,\n} from '@contentful/experiences-design';\n\n// ─── Delivery client + fetchExperience ────────────────────────────────────\nexport {\n ContentfulViewDelivery,\n ContentfulViewDeliveryClient,\n DELIVERY_HOST,\n NotFoundError,\n PREVIEW_HOST,\n createClient,\n fetchExperience,\n} from '@contentful/experiences-client';\nexport type {\n ClientOptions,\n CreateClientOptions,\n ExperienceOptions,\n ResolveOptions,\n} from '@contentful/experiences-client';\n"],"mappings":"AAeA;AAAA,EAC8B;AAAA,EAC5B,4BAAAA;AAAA,OACK;AAIP,SAAS,gCAAgC;AAGzC,SAAS,wBAAwB;AAGjC,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAMlC,SAAS,eAAe,wBAAwB,6BAA6B;AAC7E,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAItB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBP,SAAS,yBAAyB;AA0BlC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":["ClientExperienceRenderer"]}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useExperience } from "./context";
|
|
4
4
|
function MissingComponent({ componentTypeId, nodeId }) {
|
|
5
|
-
const {
|
|
5
|
+
const { debug } = useExperience();
|
|
6
6
|
if (typeof console !== "undefined") {
|
|
7
7
|
const idLabel = nodeId ? ` (nodeId: ${nodeId})` : "";
|
|
8
8
|
console.warn(
|
|
9
9
|
`[@contentful/experiences] No component registered for type "${componentTypeId}"${idLabel}.`
|
|
10
10
|
);
|
|
11
11
|
}
|
|
12
|
-
if (!
|
|
12
|
+
if (!debug) return null;
|
|
13
13
|
return /* @__PURE__ */ jsxs(
|
|
14
14
|
"div",
|
|
15
15
|
{
|
|
@@ -17,7 +17,9 @@ function MissingComponent({ componentTypeId, nodeId }) {
|
|
|
17
17
|
border: "2px solid red",
|
|
18
18
|
padding: "1rem",
|
|
19
19
|
color: "red",
|
|
20
|
-
background: "#fff"
|
|
20
|
+
background: "#fff",
|
|
21
|
+
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
22
|
+
fontSize: "0.8125rem"
|
|
21
23
|
},
|
|
22
24
|
"data-experiences-missing": componentTypeId,
|
|
23
25
|
children: [
|
|
@@ -26,7 +28,12 @@ function MissingComponent({ componentTypeId, nodeId }) {
|
|
|
26
28
|
componentTypeId,
|
|
27
29
|
"\u2019"
|
|
28
30
|
] }),
|
|
29
|
-
/* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ jsxs("p", { style: { margin: "0.5rem 0" }, children: [
|
|
32
|
+
"This component is referenced by the Experience payload but is not registered in the Config. Register it under this key in your ",
|
|
33
|
+
/* @__PURE__ */ jsx("code", { children: "components" }),
|
|
34
|
+
" map:"
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ jsx("pre", { style: { margin: 0, whiteSpace: "pre-wrap" }, children: JSON.stringify({ componentTypeId, nodeId: nodeId ?? null }, null, 2) })
|
|
30
37
|
]
|
|
31
38
|
}
|
|
32
39
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/missing-component.tsx"],"sourcesContent":["/*\n * Default fallback rendered when an instance references a component type\n * not present in the Config.\n *\n * Behavior: a visible
|
|
1
|
+
{"version":3,"sources":["../src/missing-component.tsx"],"sourcesContent":["/*\n * Default fallback rendered when an instance references a component type\n * not present in the Config.\n *\n * Behavior: a visible debug box when `debug` is on, silent null otherwise.\n * The console.warn fires either way so the miss is never fully silent.\n * Customers can override per-render via <ExperienceRenderer renderUnknown=...>.\n */\n'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { useExperience } from './context';\n\nexport interface MissingComponentProps {\n componentTypeId: string;\n /** Optional — only present when the payload supplied an id for this node. */\n nodeId?: string;\n}\n\nexport function MissingComponent({ componentTypeId, nodeId }: MissingComponentProps): ReactNode {\n const { debug } = useExperience();\n if (typeof console !== 'undefined') {\n const idLabel = nodeId ? ` (nodeId: ${nodeId})` : '';\n console.warn(\n `[@contentful/experiences] No component registered for type \"${componentTypeId}\"${idLabel}.`\n );\n }\n if (!debug) return null;\n // In debug mode the fallback is richer than a bare red box: it surfaces the\n // exact registration the customer needs to add (componentTypeId) and the\n // node id so a miss in a large tree is locatable.\n return (\n <div\n style={{\n border: '2px solid red',\n padding: '1rem',\n color: 'red',\n background: '#fff',\n fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n fontSize: '0.8125rem',\n }}\n data-experiences-missing={componentTypeId}\n >\n <strong>Missing component ‘{componentTypeId}’</strong>\n <p style={{ margin: '0.5rem 0' }}>\n This component is referenced by the Experience payload but is not registered in the Config.\n Register it under this key in your <code>components</code> map:\n </p>\n <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>\n {JSON.stringify({ componentTypeId, nodeId: nodeId ?? null }, null, 2)}\n </pre>\n </div>\n );\n}\n"],"mappings":";AA4CM,SAGqC,KAHrC;AAhCN,SAAS,qBAAqB;AAQvB,SAAS,iBAAiB,EAAE,iBAAiB,OAAO,GAAqC;AAC9F,QAAM,EAAE,MAAM,IAAI,cAAc;AAChC,MAAI,OAAO,YAAY,aAAa;AAClC,UAAM,UAAU,SAAS,aAAa,MAAM,MAAM;AAClD,YAAQ;AAAA,MACN,+DAA+D,eAAe,IAAI,OAAO;AAAA,IAC3F;AAAA,EACF;AACA,MAAI,CAAC,MAAO,QAAO;AAInB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MACA,4BAA0B;AAAA,MAE1B;AAAA,6BAAC,YAAO;AAAA;AAAA,UAA0B;AAAA,UAAgB;AAAA,WAAO;AAAA,QACzD,qBAAC,OAAE,OAAO,EAAE,QAAQ,WAAW,GAAG;AAAA;AAAA,UAEG,oBAAC,UAAK,wBAAU;AAAA,UAAO;AAAA,WAC5D;AAAA,QACA,oBAAC,SAAI,OAAO,EAAE,QAAQ,GAAG,YAAY,WAAW,GAC7C,eAAK,UAAU,EAAE,iBAAiB,QAAQ,UAAU,KAAK,GAAG,MAAM,CAAC,GACtE;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { PortableRenderPlan
|
|
2
|
+
import { PortableRenderPlan } from '@contentful/experiences-sdk-core';
|
|
3
3
|
import { RenderUnknown } from './nodes-renderer.js';
|
|
4
4
|
import { Config } from './types.js';
|
|
5
5
|
import './missing-component.js';
|
|
@@ -9,11 +9,21 @@ interface ServerExperienceRendererProps {
|
|
|
9
9
|
config: Config;
|
|
10
10
|
/** Initial viewport seed (e.g. derived from User-Agent). Defaults to viewport[0]. */
|
|
11
11
|
initialViewportId?: string;
|
|
12
|
-
/**
|
|
13
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Arbitrary per-render metadata, readable by descendants via
|
|
14
|
+
* `useExperience()` and by resolvers via `ctx.experience.metadata`.
|
|
15
|
+
*/
|
|
16
|
+
metadata?: Record<string, unknown>;
|
|
17
|
+
/**
|
|
18
|
+
* Observability switch. When on: renders the visible missing-component box,
|
|
19
|
+
* turns the default `renderUnknown` fallback into the debug component, and
|
|
20
|
+
* auto-mounts `<DebugExperience>` (the resolved-plan JSON panel) after the
|
|
21
|
+
* tree. Pair with `debug` on `fetchExperience` for end-to-end logging.
|
|
22
|
+
*/
|
|
23
|
+
debug?: boolean;
|
|
14
24
|
/** Override the fallback rendered for unregistered component types. */
|
|
15
25
|
renderUnknown?: RenderUnknown;
|
|
16
26
|
}
|
|
17
|
-
declare function ServerExperienceRenderer({ experience, config, initialViewportId,
|
|
27
|
+
declare function ServerExperienceRenderer({ experience, config, initialViewportId, metadata, debug, renderUnknown, }: ServerExperienceRendererProps): ReactNode;
|
|
18
28
|
|
|
19
29
|
export { ServerExperienceRenderer, type ServerExperienceRendererProps };
|
package/dist/server-renderer.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { getViewportIndex } from "@contentful/experiences-design";
|
|
3
|
+
import { DebugExperience } from "./debug-experience";
|
|
3
4
|
import { ExperienceProvider } from "./context";
|
|
4
5
|
import { MissingComponent } from "./missing-component";
|
|
5
6
|
import { NodesRenderer, WrapWithTemplate } from "./nodes-renderer";
|
|
6
7
|
const DEFAULT_CONTEXT = {
|
|
7
|
-
|
|
8
|
+
debug: false,
|
|
8
9
|
metadata: {},
|
|
9
10
|
viewports: []
|
|
10
11
|
};
|
|
@@ -18,7 +19,8 @@ function ServerExperienceRenderer({
|
|
|
18
19
|
experience,
|
|
19
20
|
config,
|
|
20
21
|
initialViewportId,
|
|
21
|
-
|
|
22
|
+
metadata,
|
|
23
|
+
debug = false,
|
|
22
24
|
renderUnknown = MissingComponent
|
|
23
25
|
}) {
|
|
24
26
|
if (!experience) return null;
|
|
@@ -27,31 +29,34 @@ function ServerExperienceRenderer({
|
|
|
27
29
|
const activeViewport = { ...experience.viewports[activeViewportIndex] ?? FALLBACK_VIEWPORT };
|
|
28
30
|
const renderContext = {
|
|
29
31
|
...DEFAULT_CONTEXT,
|
|
30
|
-
|
|
31
|
-
metadata: { ...DEFAULT_CONTEXT.metadata, ...
|
|
32
|
+
debug,
|
|
33
|
+
metadata: { ...DEFAULT_CONTEXT.metadata, ...metadata ?? {} },
|
|
32
34
|
viewports: contextViewports,
|
|
33
35
|
activeViewport,
|
|
34
36
|
activeViewportIndex
|
|
35
37
|
};
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
38
|
+
return /* @__PURE__ */ jsxs(ExperienceProvider, { value: renderContext, children: [
|
|
39
|
+
debug ? /* @__PURE__ */ jsx(DebugExperience, { experience }) : null,
|
|
40
|
+
/* @__PURE__ */ jsx(
|
|
41
|
+
WrapWithTemplate,
|
|
42
|
+
{
|
|
43
|
+
template: experience.template,
|
|
44
|
+
config,
|
|
45
|
+
viewports: experience.viewports,
|
|
46
|
+
activeViewportIndex,
|
|
47
|
+
children: /* @__PURE__ */ jsx(
|
|
48
|
+
NodesRenderer,
|
|
49
|
+
{
|
|
50
|
+
nodes: experience.nodes,
|
|
51
|
+
config,
|
|
52
|
+
viewports: experience.viewports,
|
|
53
|
+
activeViewportIndex,
|
|
54
|
+
renderUnknown
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
] });
|
|
55
60
|
}
|
|
56
61
|
export {
|
|
57
62
|
ServerExperienceRenderer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/server-renderer.tsx"],"sourcesContent":["/*\n * Server-safe Experience renderer. Resolves the active viewport once from\n * `initialViewportId` and renders without any reactive subscription.\n */\n\nimport type { ReactNode } from 'react';\n\nimport type {\n ExperienceContext,\n PortableRenderPlan,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\nimport { getViewportIndex } from '@contentful/experiences-design';\n\nimport { ExperienceProvider } from './context';\nimport { MissingComponent } from './missing-component';\nimport { NodesRenderer, WrapWithTemplate, type RenderUnknown } from './nodes-renderer';\nimport type { Config, RenderContext } from './types';\n\nconst DEFAULT_CONTEXT: ExperienceContext = {\n
|
|
1
|
+
{"version":3,"sources":["../src/server-renderer.tsx"],"sourcesContent":["/*\n * Server-safe Experience renderer. Resolves the active viewport once from\n * `initialViewportId` and renders without any reactive subscription.\n */\n\nimport type { ReactNode } from 'react';\n\nimport type {\n ExperienceContext,\n PortableRenderPlan,\n ViewportDef,\n} from '@contentful/experiences-sdk-core';\nimport { getViewportIndex } from '@contentful/experiences-design';\n\nimport { DebugExperience } from './debug-experience';\nimport { ExperienceProvider } from './context';\nimport { MissingComponent } from './missing-component';\nimport { NodesRenderer, WrapWithTemplate, type RenderUnknown } from './nodes-renderer';\nimport type { Config, RenderContext } from './types';\n\nconst DEFAULT_CONTEXT: ExperienceContext = {\n debug: false,\n metadata: {},\n viewports: [],\n};\n\n// Keeps `activeViewport` non-null when a payload declares no viewports.\nconst FALLBACK_VIEWPORT: ViewportDef = {\n id: '_',\n query: '*',\n displayName: 'Default',\n previewSize: '100%',\n};\n\nexport interface ServerExperienceRendererProps {\n experience: PortableRenderPlan | null | undefined;\n config: Config;\n /** Initial viewport seed (e.g. derived from User-Agent). Defaults to viewport[0]. */\n initialViewportId?: string;\n /**\n * Arbitrary per-render metadata, readable by descendants via\n * `useExperience()` and by resolvers via `ctx.experience.metadata`.\n */\n metadata?: Record<string, unknown>;\n /**\n * Observability switch. When on: renders the visible missing-component box,\n * turns the default `renderUnknown` fallback into the debug component, and\n * auto-mounts `<DebugExperience>` (the resolved-plan JSON panel) after the\n * tree. Pair with `debug` on `fetchExperience` for end-to-end logging.\n */\n debug?: boolean;\n /** Override the fallback rendered for unregistered component types. */\n renderUnknown?: RenderUnknown;\n}\n\nexport function ServerExperienceRenderer({\n experience,\n config,\n initialViewportId,\n metadata,\n debug = false,\n renderUnknown = MissingComponent,\n}: ServerExperienceRendererProps): ReactNode {\n if (!experience) return null;\n\n const activeViewportIndex = getViewportIndex(experience.viewports, initialViewportId);\n\n // Copy viewports/activeViewport so the context (serialized + frozen by RSC)\n // shares no object identity with the plan arrays the renderers read below —\n // a shared reference makes Flight back-patch into frozen props and throw.\n const contextViewports = experience.viewports.map((v) => ({ ...v }));\n const activeViewport = { ...(experience.viewports[activeViewportIndex] ?? FALLBACK_VIEWPORT) };\n\n const renderContext: RenderContext = {\n ...DEFAULT_CONTEXT,\n debug,\n metadata: { ...DEFAULT_CONTEXT.metadata, ...(metadata ?? {}) },\n viewports: contextViewports,\n activeViewport,\n activeViewportIndex,\n };\n\n return (\n <ExperienceProvider value={renderContext}>\n {debug ? <DebugExperience experience={experience} /> : null}\n <WrapWithTemplate\n template={experience.template}\n config={config}\n viewports={experience.viewports}\n activeViewportIndex={activeViewportIndex}\n >\n <NodesRenderer\n nodes={experience.nodes}\n config={config}\n viewports={experience.viewports}\n activeViewportIndex={activeViewportIndex}\n renderUnknown={renderUnknown}\n />\n </WrapWithTemplate>\n </ExperienceProvider>\n );\n}\n"],"mappings":"AAmFI,SACW,KADX;AAvEJ,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,eAAe,wBAA4C;AAGpE,MAAM,kBAAqC;AAAA,EACzC,OAAO;AAAA,EACP,UAAU,CAAC;AAAA,EACX,WAAW,CAAC;AACd;AAGA,MAAM,oBAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACf;AAuBO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,gBAAgB;AAClB,GAA6C;AAC3C,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,sBAAsB,iBAAiB,WAAW,WAAW,iBAAiB;AAKpF,QAAM,mBAAmB,WAAW,UAAU,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;AACnE,QAAM,iBAAiB,EAAE,GAAI,WAAW,UAAU,mBAAmB,KAAK,kBAAmB;AAE7F,QAAM,gBAA+B;AAAA,IACnC,GAAG;AAAA,IACH;AAAA,IACA,UAAU,EAAE,GAAG,gBAAgB,UAAU,GAAI,YAAY,CAAC,EAAG;AAAA,IAC7D,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF;AAEA,SACE,qBAAC,sBAAmB,OAAO,eACxB;AAAA,YAAQ,oBAAC,mBAAgB,YAAwB,IAAK;AAAA,IACvD;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,WAAW;AAAA,QACrB;AAAA,QACA,WAAW,WAAW;AAAA,QACtB;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,WAAW;AAAA,YAClB;AAAA,YACA,WAAW,WAAW;AAAA,YACtB;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "React adapter for Contentful Experiences — Server and Client renderers over a PortableRenderPlan",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"directory": "packages/adapter-react"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@contentful/experiences-client": "0.
|
|
34
|
-
"@contentful/experiences-sdk-core": "0.
|
|
35
|
-
"@contentful/experiences-design": "0.
|
|
33
|
+
"@contentful/experiences-client": "0.2.0",
|
|
34
|
+
"@contentful/experiences-sdk-core": "0.6.0",
|
|
35
|
+
"@contentful/experiences-design": "0.6.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "^18.0.0 || ^19.0.0",
|