@contentful/experiences-svelte 0.5.12 → 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 +8 -0
- package/README.md +2 -2
- package/dist/ClientExperienceRenderer.svelte +22 -7
- package/dist/ClientExperienceRenderer.svelte.d.ts.map +1 -1
- package/dist/DebugExperience.test.js +14 -0
- package/dist/ServerExperienceRenderer.svelte +17 -5
- package/dist/ServerExperienceRenderer.svelte.d.ts.map +1 -1
- package/dist/component-props.d.ts +2 -5
- package/dist/component-props.d.ts.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/server-renderer.test.js +52 -0
- package/dist/types.d.ts +3 -17
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ useActiveViewport; // Rune-backed reactive object; you'll rarely need it directl
|
|
|
42
42
|
### Styling + runtime context (helpers)
|
|
43
43
|
|
|
44
44
|
```ts
|
|
45
|
-
getDesignValues<T>(); //
|
|
45
|
+
getDesignValues<T>(); // Escape hatch: the same resolved design record that auto-fills props; read in a $derived to stay reactive
|
|
46
46
|
toCss(design, options?); // Turns a design record into a plain style object, keeping only real CSS keys
|
|
47
47
|
getExperience(); // RenderContext: debug, metadata, viewports, activeViewport
|
|
48
48
|
getContentfulComponent(); // Raw payload for the enclosing node (or undefined)
|
|
@@ -50,7 +50,7 @@ getContentfulExperienceTemplate(); // Same, for an enclosing coded Experience Te
|
|
|
50
50
|
type ToCssOptions;
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
Resolved design values (viewport-cascaded + token-resolved server-side) are **auto-filled onto your component's props** by key, alongside content. Styling
|
|
53
|
+
Resolved design values (viewport-cascaded + token-resolved server-side) are **auto-filled onto your component's props** by key, alongside content. Styling from `$props()` is the one recommended path. `getDesignValues()` exposes the same record (read it in a `$derived` to stay reactive) as an escape hatch. Reach for it only for a nested child that isn't itself a registered component, or for design needed outside the render path (an effect, an imperative measurement) — see [Styling components](../../README.md#styling-components). Token resolution is configured with `resolveToken` on your `Config` (`type ResolveToken`).
|
|
54
54
|
|
|
55
55
|
### Re-exported types and utilities
|
|
56
56
|
|
|
@@ -38,11 +38,14 @@
|
|
|
38
38
|
config,
|
|
39
39
|
initialViewportId,
|
|
40
40
|
metadata,
|
|
41
|
-
debug
|
|
41
|
+
debug,
|
|
42
42
|
renderUnknown = MissingComponent,
|
|
43
43
|
renderError = ComponentError,
|
|
44
44
|
}: ClientExperienceRendererProps = $props();
|
|
45
45
|
|
|
46
|
+
// `??`, not `||`, so an explicit `debug={false}` overrides a debug-on plan.
|
|
47
|
+
const resolvedDebug = $derived(debug ?? experience?.debug ?? false);
|
|
48
|
+
|
|
46
49
|
// Render-time diagnostics, `$state`-backed so a component that throws well
|
|
47
50
|
// after first paint (a later re-render, an event handler) still makes
|
|
48
51
|
// `<DebugExperience>` re-render with the new diagnostic — a mutated plain
|
|
@@ -68,14 +71,22 @@
|
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
const viewports = $derived(experience?.viewports ?? []);
|
|
71
|
-
|
|
74
|
+
// Seed from the plan so first paint matches the server renderer.
|
|
75
|
+
const seedViewportId = $derived(
|
|
76
|
+
initialViewportId ?? experience?.viewports[experience.fallbackViewportIndex]?.id
|
|
77
|
+
);
|
|
78
|
+
const tracker = useActiveViewport(viewports, seedViewportId);
|
|
72
79
|
|
|
73
80
|
// A $state-backed mirror so descendants reading getExperience() stay
|
|
74
81
|
// reactive across viewport changes. The fields update in an $effect below.
|
|
75
82
|
const liveContext = $state<RenderContext>({
|
|
76
83
|
...DEFAULT_CONTEXT,
|
|
77
|
-
debug,
|
|
78
|
-
metadata: {
|
|
84
|
+
debug: debug ?? experience?.debug ?? false,
|
|
85
|
+
metadata: {
|
|
86
|
+
...DEFAULT_CONTEXT.metadata,
|
|
87
|
+
...(experience?.metadata ?? {}),
|
|
88
|
+
...(metadata ?? {}),
|
|
89
|
+
},
|
|
79
90
|
viewports: experience?.viewports ?? [],
|
|
80
91
|
activeViewport: experience?.viewports[0] ?? FALLBACK_VIEWPORT,
|
|
81
92
|
activeViewportIndex: 0,
|
|
@@ -91,8 +102,12 @@
|
|
|
91
102
|
liveContext.activeViewport = experience.viewports[idx] ?? FALLBACK_VIEWPORT;
|
|
92
103
|
liveContext.activeViewportIndex = idx;
|
|
93
104
|
liveContext.fallbackViewportIndex = experience.fallbackViewportIndex;
|
|
94
|
-
liveContext.debug =
|
|
95
|
-
liveContext.metadata = {
|
|
105
|
+
liveContext.debug = resolvedDebug;
|
|
106
|
+
liveContext.metadata = {
|
|
107
|
+
...DEFAULT_CONTEXT.metadata,
|
|
108
|
+
...experience.metadata,
|
|
109
|
+
...(metadata ?? {}),
|
|
110
|
+
};
|
|
96
111
|
});
|
|
97
112
|
</script>
|
|
98
113
|
|
|
@@ -105,7 +120,7 @@
|
|
|
105
120
|
{renderError}
|
|
106
121
|
{onDiagnostic}
|
|
107
122
|
/>
|
|
108
|
-
{#if
|
|
123
|
+
{#if resolvedDebug}
|
|
109
124
|
<DebugExperience
|
|
110
125
|
{experience}
|
|
111
126
|
errors={[...(experience.diagnostics ?? []), ...renderDiagnostics]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClientExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ClientExperienceRenderer.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ClientExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ClientExperienceRenderer.svelte.ts"],"names":[],"mappings":"AA+HA,QAAA,MAAM,wBAAwB,kGAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
|
|
@@ -5,6 +5,8 @@ const emptyPlan = {
|
|
|
5
5
|
nodes: [],
|
|
6
6
|
viewports: [],
|
|
7
7
|
fallbackViewportIndex: 0,
|
|
8
|
+
metadata: {},
|
|
9
|
+
debug: false,
|
|
8
10
|
diagnostics: [],
|
|
9
11
|
};
|
|
10
12
|
function node(id, content = {}) {
|
|
@@ -41,6 +43,8 @@ describe('DebugExperience.svelte', () => {
|
|
|
41
43
|
viewports: [],
|
|
42
44
|
nodes: [node('button')],
|
|
43
45
|
fallbackViewportIndex: 0,
|
|
46
|
+
metadata: {},
|
|
47
|
+
debug: false,
|
|
44
48
|
diagnostics: [],
|
|
45
49
|
};
|
|
46
50
|
const { container } = render(DebugExperience, { props: { experience: one } });
|
|
@@ -51,6 +55,8 @@ describe('DebugExperience.svelte', () => {
|
|
|
51
55
|
viewports: [],
|
|
52
56
|
nodes: [templateNode('page')],
|
|
53
57
|
fallbackViewportIndex: 0,
|
|
58
|
+
metadata: {},
|
|
59
|
+
debug: false,
|
|
54
60
|
diagnostics: [],
|
|
55
61
|
};
|
|
56
62
|
const { container } = render(DebugExperience, { props: { experience: plan } });
|
|
@@ -61,6 +67,8 @@ describe('DebugExperience.svelte', () => {
|
|
|
61
67
|
viewports: [],
|
|
62
68
|
nodes: [node('button'), node('text')],
|
|
63
69
|
fallbackViewportIndex: 0,
|
|
70
|
+
metadata: {},
|
|
71
|
+
debug: false,
|
|
64
72
|
diagnostics: [],
|
|
65
73
|
};
|
|
66
74
|
const { container } = render(DebugExperience, { props: { experience: plan } });
|
|
@@ -72,6 +80,8 @@ describe('DebugExperience.svelte', () => {
|
|
|
72
80
|
viewports: [],
|
|
73
81
|
nodes: [node('button', { label: 'Go' })],
|
|
74
82
|
fallbackViewportIndex: 0,
|
|
83
|
+
metadata: {},
|
|
84
|
+
debug: false,
|
|
75
85
|
diagnostics: [],
|
|
76
86
|
};
|
|
77
87
|
const { container } = render(DebugExperience, { props: { experience: plan } });
|
|
@@ -86,6 +96,8 @@ describe('DebugExperience.svelte', () => {
|
|
|
86
96
|
viewports: [],
|
|
87
97
|
nodes: [n],
|
|
88
98
|
fallbackViewportIndex: 0,
|
|
99
|
+
metadata: {},
|
|
100
|
+
debug: false,
|
|
89
101
|
diagnostics: [],
|
|
90
102
|
};
|
|
91
103
|
expect(() => render(DebugExperience, { props: { experience: plan } })).not.toThrow();
|
|
@@ -108,6 +120,8 @@ describe('DebugExperience.svelte', () => {
|
|
|
108
120
|
viewports: [],
|
|
109
121
|
nodes: [n],
|
|
110
122
|
fallbackViewportIndex: 0,
|
|
123
|
+
metadata: {},
|
|
124
|
+
debug: false,
|
|
111
125
|
diagnostics: [],
|
|
112
126
|
};
|
|
113
127
|
expect(() => render(DebugExperience, { props: { experience: plan } })).not.toThrow();
|
|
@@ -37,18 +37,30 @@
|
|
|
37
37
|
config,
|
|
38
38
|
initialViewportId,
|
|
39
39
|
metadata,
|
|
40
|
-
debug
|
|
40
|
+
debug,
|
|
41
41
|
renderUnknown = MissingComponent,
|
|
42
42
|
renderError = ComponentError,
|
|
43
43
|
}: ServerExperienceRendererProps = $props();
|
|
44
44
|
|
|
45
|
+
// `??`, not `||`, so an explicit `debug={false}` overrides a debug-on plan.
|
|
46
|
+
const resolvedDebug = $derived(debug ?? experience?.debug ?? false);
|
|
47
|
+
|
|
45
48
|
function buildContext(): RenderContext {
|
|
46
49
|
const viewports = experience?.viewports ?? [];
|
|
47
|
-
|
|
50
|
+
// Default to the pre-resolved viewport so first paint needs no recompute.
|
|
51
|
+
const idx = !experience
|
|
52
|
+
? 0
|
|
53
|
+
: initialViewportId === undefined
|
|
54
|
+
? experience.fallbackViewportIndex
|
|
55
|
+
: getViewportIndex(experience.viewports, initialViewportId);
|
|
48
56
|
return {
|
|
49
57
|
...DEFAULT_CONTEXT,
|
|
50
|
-
debug,
|
|
51
|
-
metadata: {
|
|
58
|
+
debug: resolvedDebug,
|
|
59
|
+
metadata: {
|
|
60
|
+
...DEFAULT_CONTEXT.metadata,
|
|
61
|
+
...(experience?.metadata ?? {}),
|
|
62
|
+
...(metadata ?? {}),
|
|
63
|
+
},
|
|
52
64
|
viewports,
|
|
53
65
|
activeViewport: experience?.viewports[idx] ?? FALLBACK_VIEWPORT,
|
|
54
66
|
activeViewportIndex: idx,
|
|
@@ -80,7 +92,7 @@
|
|
|
80
92
|
{renderError}
|
|
81
93
|
{onDiagnostic}
|
|
82
94
|
/>
|
|
83
|
-
{#if
|
|
95
|
+
{#if resolvedDebug}
|
|
84
96
|
<DebugExperience
|
|
85
97
|
{experience}
|
|
86
98
|
errors={[...(experience.diagnostics ?? []), ...renderDiagnostics]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ServerExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ServerExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"ServerExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ServerExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AA0F1E,QAAA,MAAM,wBAAwB,mEAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
|
|
@@ -5,15 +5,12 @@ export interface ServerExperienceRendererProps {
|
|
|
5
5
|
experience: PortableRenderPlan | null | undefined;
|
|
6
6
|
config: Config;
|
|
7
7
|
initialViewportId?: string;
|
|
8
|
-
/**
|
|
9
|
-
* Arbitrary per-render metadata, readable by descendants via
|
|
10
|
-
* `getExperience()` and by resolvers via `ctx.experience.metadata`.
|
|
11
|
-
*/
|
|
8
|
+
/** Shallow-merges over the plan's `metadata`. Only needed to override it. */
|
|
12
9
|
metadata?: Record<string, unknown>;
|
|
13
10
|
/**
|
|
14
11
|
* Observability switch. When on: renders the visible missing-component box,
|
|
15
12
|
* turns the default `renderUnknown` fallback into the debug component, and
|
|
16
|
-
* auto-mounts `<DebugExperience>` after the tree.
|
|
13
|
+
* auto-mounts `<DebugExperience>` after the tree. Defaults to the plan's `debug`.
|
|
17
14
|
*/
|
|
18
15
|
debug?: boolean;
|
|
19
16
|
renderUnknown?: RenderUnknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-props.d.ts","sourceRoot":"","sources":["../src/component-props.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B
|
|
1
|
+
{"version":3,"file":"component-props.d.ts","sourceRoot":"","sources":["../src/component-props.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yEAAyE;IACzE,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,MAAM,6BAA6B,GAAG,6BAA6B,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAE7D,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAC;AAEzD;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAExD,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,UAAU,EAAE,kBAAkB,CAAC;IAC/B,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB"}
|
package/dist/index.d.ts
CHANGED
|
@@ -16,8 +16,8 @@ export { defineComponent, defineExperienceTemplate, normalizeComponentRegistrati
|
|
|
16
16
|
export type { ComponentConfig, Components, Config, ContentfulComponent, ContentfulExperienceTemplate, ExperienceTemplateConfig, ExperienceTemplateRegistration, ExperienceTemplates, Registration, RenderContext, ResolveToken, } from './types.js';
|
|
17
17
|
export { resolveExperience } from '@contentful/experiences-sdk-core';
|
|
18
18
|
export type { ResolverConfig, ResolveExperienceOptions } from '@contentful/experiences-sdk-core';
|
|
19
|
-
export type { ComponentNode, ComponentRef, DesignPropValue, DesignToken, ExperienceContext, ExperienceNode, ExperiencePayload, ExperienceSys, ExperienceTemplateNode, ExperienceTemplateRef, ManualDesignValue, PortableRegistration, PortableRenderNode, PortableRenderPlan, ResolveContext, ValuesByViewport, ViewportDef, } from '@contentful/experiences-sdk-core';
|
|
19
|
+
export type { ComponentNode, ComponentRef, DesignPropValue, DesignToken, ExperienceContext, ExperienceNode, ExperiencePayload, ExperienceSourceMap, ExperienceSys, ExperienceTemplateNode, ExperienceTemplateRef, ManualDesignValue, PortableRegistration, PortableRenderNode, PortableRenderPlan, ResolveContext, ValuesByViewport, ViewportDef, } from '@contentful/experiences-sdk-core';
|
|
20
20
|
export { CSS_PROPERTIES, getValueForViewport, getViewportIndex, isCssProperty, resolveDesignProperties, toCssKey, toCssMediaQuery, } from '@contentful/experiences-design';
|
|
21
|
-
export { ContentfulViewDelivery, ContentfulViewDeliveryClient, DELIVERY_HOST, ExperienceFetchError, NotFoundError, PREVIEW_HOST, createClient, fetchExperience, } from '@contentful/experiences-client';
|
|
22
|
-
export type { ClientOptions, CreateClientOptions, ExperienceOptions, ResolveOptions, } from '@contentful/experiences-client';
|
|
21
|
+
export { ContentfulViewDelivery, ContentfulViewDeliveryClient, DELIVERY_HOST, ExperienceFetchError, NotFoundError, PREVIEW_HOST, createClient, fetchExperience, readSourceMap, toExperiencePayload, } from '@contentful/experiences-client';
|
|
22
|
+
export type { ClientOptions, CreateClientOptions, ExperienceOptions, ExperienceResponse, ResolveOptions, } from '@contentful/experiences-client';
|
|
23
23
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG/E,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,+BAA+B,GAChC,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,YAAY,EACV,6BAA6B,EAC7B,6BAA6B,IAAI,uBAAuB,EACxD,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,wBAAwB,EACxB,8BAA8B,EAC9B,uCAAuC,GACxC,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,eAAe,EACf,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,4BAA4B,EAC5B,wBAAwB,EACxB,8BAA8B,EAC9B,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGjG,YAAY,EACV,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,WAAW,GACZ,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,QAAQ,EACR,eAAe,GAChB,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EACL,sBAAsB,EACtB,4BAA4B,EAC5B,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG/E,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,+BAA+B,GAChC,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,YAAY,EACV,6BAA6B,EAC7B,6BAA6B,IAAI,uBAAuB,EACxD,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,wBAAwB,EACxB,8BAA8B,EAC9B,uCAAuC,GACxC,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,eAAe,EACf,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,4BAA4B,EAC5B,wBAAwB,EACxB,8BAA8B,EAC9B,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGjG,YAAY,EACV,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,WAAW,GACZ,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,QAAQ,EACR,eAAe,GAChB,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EACL,sBAAsB,EACtB,4BAA4B,EAC5B,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,aAAa,EACb,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,MAAM,gCAAgC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -34,4 +34,4 @@ export { resolveExperience } from '@contentful/experiences-sdk-core';
|
|
|
34
34
|
// ─── Design utilities (re-exported from design) ───────────────────────────
|
|
35
35
|
export { CSS_PROPERTIES, getValueForViewport, getViewportIndex, isCssProperty, resolveDesignProperties, toCssKey, toCssMediaQuery, } from '@contentful/experiences-design';
|
|
36
36
|
// ─── Delivery client + fetchExperience ────────────────────────────────────
|
|
37
|
-
export { ContentfulViewDelivery, ContentfulViewDeliveryClient, DELIVERY_HOST, ExperienceFetchError, NotFoundError, PREVIEW_HOST, createClient, fetchExperience, } from '@contentful/experiences-client';
|
|
37
|
+
export { ContentfulViewDelivery, ContentfulViewDeliveryClient, DELIVERY_HOST, ExperienceFetchError, NotFoundError, PREVIEW_HOST, createClient, fetchExperience, readSourceMap, toExperiencePayload, } from '@contentful/experiences-client';
|
|
@@ -187,6 +187,9 @@ describe('ServerExperienceRenderer', () => {
|
|
|
187
187
|
const planWithMissing = {
|
|
188
188
|
viewports: VIEWPORTS,
|
|
189
189
|
fallbackViewportIndex: 0,
|
|
190
|
+
metadata: {},
|
|
191
|
+
debug: false,
|
|
192
|
+
diagnostics: [],
|
|
190
193
|
nodes: [
|
|
191
194
|
{
|
|
192
195
|
nodeId: 'root',
|
|
@@ -299,6 +302,9 @@ describe('ServerExperienceRenderer', () => {
|
|
|
299
302
|
const planWithResolved = {
|
|
300
303
|
viewports: VIEWPORTS,
|
|
301
304
|
fallbackViewportIndex: 0,
|
|
305
|
+
metadata: {},
|
|
306
|
+
debug: false,
|
|
307
|
+
diagnostics: [],
|
|
302
308
|
nodes: [
|
|
303
309
|
{
|
|
304
310
|
nodeId: 'r',
|
|
@@ -792,3 +798,49 @@ describe('toCss (Svelte)', () => {
|
|
|
792
798
|
expect(toCss({ backgroundColor: '#4f39f6', padding: '10px' }, { exclude: ['padding'] })).toEqual({ backgroundColor: '#4f39f6' });
|
|
793
799
|
});
|
|
794
800
|
});
|
|
801
|
+
describe('ServerExperienceRenderer — render context carried on the plan', () => {
|
|
802
|
+
beforeEach(() => {
|
|
803
|
+
captureSink.splice(0);
|
|
804
|
+
});
|
|
805
|
+
const captureConfig = { components: { capture: CapturingComponent } };
|
|
806
|
+
const buildPlan = (opts) => resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'c' })] }, captureConfig, opts);
|
|
807
|
+
it('reads metadata off the plan without it being passed to the renderer', async () => {
|
|
808
|
+
const plan = await buildPlan({ metadata: { slug: 'home', locale: 'en-US' } });
|
|
809
|
+
render(ServerExperienceRenderer, { props: { experience: plan, config: captureConfig } });
|
|
810
|
+
expect(captureSink[0].experience.metadata).toEqual({ slug: 'home', locale: 'en-US' });
|
|
811
|
+
});
|
|
812
|
+
it('reads debug off the plan without it being passed to the renderer', async () => {
|
|
813
|
+
const plan = await buildPlan({ debug: true });
|
|
814
|
+
render(ServerExperienceRenderer, { props: { experience: plan, config: captureConfig } });
|
|
815
|
+
expect(captureSink[0].experience.debug).toBe(true);
|
|
816
|
+
});
|
|
817
|
+
it('shallow-merges the metadata prop over the plan value', async () => {
|
|
818
|
+
const plan = await buildPlan({ metadata: { slug: 'home', locale: 'en-US' } });
|
|
819
|
+
render(ServerExperienceRenderer, {
|
|
820
|
+
props: {
|
|
821
|
+
experience: plan,
|
|
822
|
+
config: captureConfig,
|
|
823
|
+
metadata: { locale: 'de-DE', extra: true },
|
|
824
|
+
},
|
|
825
|
+
});
|
|
826
|
+
expect(captureSink[0].experience.metadata).toEqual({
|
|
827
|
+
slug: 'home',
|
|
828
|
+
locale: 'de-DE',
|
|
829
|
+
extra: true,
|
|
830
|
+
});
|
|
831
|
+
});
|
|
832
|
+
it('lets an explicit debug={false} override a plan fetched with debug on', async () => {
|
|
833
|
+
const plan = await buildPlan({ debug: true });
|
|
834
|
+
render(ServerExperienceRenderer, {
|
|
835
|
+
props: { experience: plan, config: captureConfig, debug: false },
|
|
836
|
+
});
|
|
837
|
+
expect(captureSink[0].experience.debug).toBe(false);
|
|
838
|
+
});
|
|
839
|
+
it('renders the debug panel from the plan alone', async () => {
|
|
840
|
+
const plan = await buildPlan({ debug: true });
|
|
841
|
+
const { container } = render(ServerExperienceRenderer, {
|
|
842
|
+
props: { experience: plan, config: captureConfig },
|
|
843
|
+
});
|
|
844
|
+
expect(container.innerHTML).toContain('Experience debug');
|
|
845
|
+
});
|
|
846
|
+
});
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Component } from 'svelte';
|
|
2
|
-
import type { DesignPropValue,
|
|
2
|
+
import type { DesignPropValue, RenderContext, ResolveContext, ResolveToken } from '@contentful/experiences-sdk-core';
|
|
3
3
|
export type { ResolveContext, ResolveToken };
|
|
4
4
|
/**
|
|
5
5
|
* The full Contentful-side payload for a single component instance, exposed
|
|
@@ -39,22 +39,8 @@ export interface ContentfulExperienceTemplate {
|
|
|
39
39
|
design: Record<string, DesignPropValue>;
|
|
40
40
|
resolved?: Record<string, unknown>;
|
|
41
41
|
}
|
|
42
|
-
/**
|
|
43
|
-
|
|
44
|
-
* the active viewport — a render-time value that resolvers cannot see.
|
|
45
|
-
* Exposed via `getExperience()`.
|
|
46
|
-
*/
|
|
47
|
-
export interface RenderContext extends ExperienceContext {
|
|
48
|
-
activeViewport: ViewportDef;
|
|
49
|
-
activeViewportIndex: number;
|
|
50
|
-
/**
|
|
51
|
-
* Viewport index the server pre-resolved design against (from
|
|
52
|
-
* `PortableRenderPlan.fallbackViewportIndex`). Renderers use `props.design`
|
|
53
|
-
* as-is when `activeViewportIndex` matches, and recompute otherwise. Always a
|
|
54
|
-
* number — the plan field is required, so the match is a real comparison.
|
|
55
|
-
*/
|
|
56
|
-
fallbackViewportIndex: number;
|
|
57
|
-
}
|
|
42
|
+
/** Render-time experience context, read with `getExperience()`. Declared in core so all adapters share one shape. */
|
|
43
|
+
export type { RenderContext };
|
|
58
44
|
/**
|
|
59
45
|
* Customer-supplied configuration for a single component type. The `component`
|
|
60
46
|
* receives the merged props (design + content + resolveData + one `Snippet[]`
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EACV,eAAe,EACf,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Svelte adapter for Contentful Experiences — Server and Client renderers over a PortableRenderPlan",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@contentful/experiences-client": "0.
|
|
39
|
-
"@contentful/experiences-sdk-core": "0.
|
|
40
|
-
"@contentful/experiences-design": "0.
|
|
38
|
+
"@contentful/experiences-client": "0.4.0",
|
|
39
|
+
"@contentful/experiences-sdk-core": "0.8.0",
|
|
40
|
+
"@contentful/experiences-design": "0.8.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"svelte": "^5.55.7"
|