@contentful/experiences-svelte 0.3.7 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 0.4.0 (2026-08-05)
+
+### 🚀 Features
+
+- ⚠️  replace isPreview with top-level debug mode [AIS-243] ([#98](https://github.com/contentful/experiences/pull/98))
+
+### ⚠️  Breaking Changes
+
+- replace isPreview with top-level debug mode [AIS-243]  ([#98](https://github.com/contentful/experiences/pull/98))
+  `isPreview` is removed from the render context and the nested
+  `context` option is gone. Pass `metadata` and `debug` as top-level options on
+  `fetchExperience`/`resolveExperience` and as props on the renderers.
+  Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
+  * refactor: derive metadata once in sveltekit apps
+  Extract a single `metadata` object in the loaders and thread it through
+  both fetchExperience and the renderer, instead of duplicating the
+  `{ slug }` literal in +page.svelte. Addresses PR review feedback.
+  Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
+  * refactor: mount DebugExperience above the tree and aggregate resolveData timing
+  Move the auto-mounted <DebugExperience> panel above the rendered tree in
+  both React and Svelte renderers (client + server) so the debug dump is
+  visible without scrolling past the experience. Update the doc comments
+  and README to match.
+  Replace per-node resolveData timing lines with a single aggregate span
+  over the whole fan-out — keeps the timing signal without emitting a log
+  line per node, which gets noisy on large trees.
+  Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
+
+### 🧱 Updated Dependencies
+
+- Updated client to 0.2.0
+- Updated design to 0.6.0
+- Updated core to 0.6.0
+
+## 0.3.8 (2026-08-04)
+
+### 🧱 Updated Dependencies
+
+- Updated client to 0.1.8
+- Updated design to 0.5.6
+- Updated core to 0.5.6
+
 ## 0.3.7 (2026-08-03)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -44,7 +44,7 @@ useActiveViewport; // Rune-backed reactive object; you'll rarely need it directl
 ```ts
 getDesignValues<T>(); // Resolved design values for the current node; read in a $derived to stay reactive
 toCss(design, options?); // Turns a design record into a plain style object, keeping only real CSS keys
-getExperience(); // RenderContext: isPreview, metadata, viewports, activeViewport
+getExperience(); // RenderContext: debug, metadata, viewports, activeViewport
 getContentfulComponent(); // Raw payload for the enclosing node (or undefined)
 getContentfulTemplate(); // Same, for the page-level template
 type ToCssOptions;

package/dist/ClientExperienceRenderer.svelte

@@ -11,6 +11,7 @@
 <script lang="ts">
   import type { ExperienceContext, ViewportDef } from '@contentful/experiences-sdk-core';
 
+  import DebugExperience from './DebugExperience.svelte';
   import MissingComponent from './MissingComponent.svelte';
   import NodesRenderer from './NodesRenderer.svelte';
   import WrapWithTemplate from './WrapWithTemplate.svelte';
@@ -20,7 +21,7 @@
   import { useActiveViewport } from './use-active-viewport.svelte.js';
 
   const DEFAULT_CONTEXT: ExperienceContext = {
-    isPreview: false,
+    debug: false,
     metadata: {},
     viewports: [],
   };
@@ -36,7 +37,8 @@
     experience,
     config,
     initialViewportId,
-    context,
+    metadata,
+    debug = false,
     renderUnknown = MissingComponent,
   }: ClientExperienceRendererProps = $props();
 
@@ -47,8 +49,8 @@
   // reactive across viewport changes. The fields update in an $effect below.
   const liveContext = $state<RenderContext>({
     ...DEFAULT_CONTEXT,
-    ...context,
-    metadata: { ...DEFAULT_CONTEXT.metadata, ...(context?.metadata ?? {}) },
+    debug,
+    metadata: { ...DEFAULT_CONTEXT.metadata, ...(metadata ?? {}) },
     viewports: experience?.viewports ?? [],
     activeViewport: experience?.viewports[0] ?? FALLBACK_VIEWPORT,
     activeViewportIndex: 0,
@@ -62,12 +64,15 @@
     liveContext.viewports = experience.viewports;
     liveContext.activeViewport = experience.viewports[idx] ?? FALLBACK_VIEWPORT;
     liveContext.activeViewportIndex = idx;
-    liveContext.isPreview = context?.isPreview ?? false;
-    liveContext.metadata = { ...DEFAULT_CONTEXT.metadata, ...(context?.metadata ?? {}) };
+    liveContext.debug = debug;
+    liveContext.metadata = { ...DEFAULT_CONTEXT.metadata, ...(metadata ?? {}) };
   });
 </script>
 
 {#if experience}
+  {#if debug}
+    <DebugExperience {experience} />
+  {/if}
   <WrapWithTemplate template={experience.template} {config} experience={liveContext}>
     {#snippet children()}
       <NodesRenderer

package/dist/ClientExperienceRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClientExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ClientExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAmFA,QAAA,MAAM,wBAAwB,kGAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"ClientExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ClientExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAyFA,QAAA,MAAM,wBAAwB,kGAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/DebugExperience.svelte

@@ -0,0 +1,65 @@
+<!--
+ * First-party debug panel. Renders the resolved Experience plan as pretty
+ * JSON so a customer can see exactly what the SDK interpreted from the payload
+ * — node tree, registrations, resolved props, viewports.
+ *
+ * Two ways to use it:
+ *  - Auto-mounted by the renderers when `debug` is on (above the tree).
+ *  - Mounted manually anywhere: `<DebugExperience experience={plan} />`.
+ *
+ * v1 is just the JSON dump wrapped in a native <details> so it collapses
+ * without any extra JS. Room to grow into a node-tree explorer, viewport
+ * indicator, and resolveData timing panel — kept deliberately small for now.
+-->
+<script lang="ts">
+  import type { DebugExperienceProps } from './component-props.js';
+
+  let { experience, defaultOpen = false }: DebugExperienceProps = $props();
+
+  const nodeCount = $derived(experience.nodes.length);
+  const summary = $derived(
+    `Experience debug — ${nodeCount} top-level node${nodeCount === 1 ? '' : 's'}${
+      experience.template ? `, template: ${experience.template.templateId}` : ''
+    }`
+  );
+
+  // JSON.stringify with a circular-reference guard: a customer's resolveData
+  // could stash a non-serializable value on props.resolved — degrade to a
+  // placeholder rather than throwing inside a debug panel.
+  function safeStringify(value: unknown): string {
+    const seen = new WeakSet<object>();
+    try {
+      return JSON.stringify(
+        value,
+        (_key, val) => {
+          if (typeof val === 'object' && val !== null) {
+            if (seen.has(val)) return '[Circular]';
+            seen.add(val);
+          }
+          if (typeof val === 'function') return `[Function ${val.name || 'anonymous'}]`;
+          if (typeof val === 'undefined') return '[undefined]';
+          return val;
+        },
+        2
+      );
+    } catch (err) {
+      return `[DebugExperience: could not serialize plan — ${(err as Error).message}]`;
+    }
+  }
+
+  const json = $derived(safeStringify(experience));
+</script>
+
+<details
+  open={defaultOpen}
+  data-experiences-debug
+  style="margin: 1rem 0; border: 1px solid #6b7280; border-radius: 6px; background: #0b1021; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; overflow: hidden;"
+>
+  <summary
+    style="cursor: pointer; padding: 0.5rem 0.75rem; background: #111827; user-select: none;"
+  >
+    {summary}
+  </summary>
+  <pre
+    style="margin: 0; padding: 0.75rem; overflow: auto; max-height: 32rem; white-space: pre-wrap; word-break: break-word;">{json}</pre>
+</details>

package/dist/DebugExperience.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DebugExperienceProps } from './component-props.js';
+declare const DebugExperience: import("svelte").Component<DebugExperienceProps, {}, "">;
+type DebugExperience = ReturnType<typeof DebugExperience>;
+export default DebugExperience;
+//# sourceMappingURL=DebugExperience.svelte.d.ts.map

package/dist/DebugExperience.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugExperience.svelte.d.ts","sourceRoot":"","sources":["../src/DebugExperience.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAmDjE,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/DebugExperience.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DebugExperience.test.d.ts.map

package/dist/DebugExperience.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugExperience.test.d.ts","sourceRoot":"","sources":["../src/DebugExperience.test.ts"],"names":[],"mappings":""}

package/dist/DebugExperience.test.js

@@ -0,0 +1,59 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import DebugExperience from './DebugExperience.svelte';
+const emptyPlan = { nodes: [], viewports: [] };
+function node(componentTypeId, content = {}) {
+    return {
+        registration: { componentTypeId },
+        props: { content, design: {} },
+        slots: {},
+    };
+}
+describe('DebugExperience.svelte', () => {
+    it('renders a collapsible details panel with the debug marker, collapsed by default', () => {
+        const { container } = render(DebugExperience, { props: { experience: emptyPlan } });
+        const details = container.querySelector('details[data-experiences-debug]');
+        expect(details).not.toBeNull();
+        expect(details.open).toBe(false);
+    });
+    it('expands on first paint when defaultOpen is set', () => {
+        const { container } = render(DebugExperience, {
+            props: { experience: emptyPlan, defaultOpen: true },
+        });
+        expect(container.querySelector('details').open).toBe(true);
+    });
+    it('summarizes the node count, pluralizing correctly', () => {
+        const { container: zero } = render(DebugExperience, { props: { experience: emptyPlan } });
+        expect(zero.innerHTML).toContain('Experience debug — 0 top-level nodes');
+        const one = { viewports: [], nodes: [node('button')] };
+        const { container } = render(DebugExperience, { props: { experience: one } });
+        expect(container.innerHTML).toContain('Experience debug — 1 top-level node');
+    });
+    it('names the template in the summary when present', () => {
+        const plan = {
+            viewports: [],
+            nodes: [],
+            template: { templateId: 'page', props: { content: {}, design: {} } },
+        };
+        const { container } = render(DebugExperience, { props: { experience: plan } });
+        expect(container.innerHTML).toContain('template: page');
+    });
+    it('dumps the plan as pretty JSON', () => {
+        const plan = {
+            viewports: [],
+            nodes: [node('button', { label: 'Go' })],
+        };
+        const { container } = render(DebugExperience, { props: { experience: plan } });
+        expect(container.innerHTML).toContain('componentTypeId');
+        expect(container.innerHTML).toContain('button');
+        expect(container.innerHTML).toContain('Go');
+    });
+    it('degrades a circular reference to a placeholder instead of throwing', () => {
+        const n = node('button');
+        n.props.resolved = { self: n.props };
+        const plan = { viewports: [], nodes: [n] };
+        expect(() => render(DebugExperience, { props: { experience: plan } })).not.toThrow();
+        const { container } = render(DebugExperience, { props: { experience: plan } });
+        expect(container.innerHTML).toContain('[Circular]');
+    });
+});

package/dist/MissingComponent.svelte

@@ -2,7 +2,8 @@
  * Default fallback rendered when an instance references a component type
  * not present in the Config.
  *
- * Behavior: a visible red error box in preview, silent null in production.
+ * Behavior: a visible debug box when `debug` is on, silent null otherwise.
+ * The console.warn fires either way so the miss is never fully silent.
  * Customers can override per-render via <ServerExperienceRenderer renderUnknown=... />.
 -->
 <script lang="ts">
@@ -22,14 +23,20 @@
   });
 </script>
 
-{#if experience.isPreview}
+{#if experience.debug}
   <div
-    style="border: 2px solid red; padding: 1rem; color: red; background: #fff;"
+    style="border: 2px solid red; padding: 1rem; color: red; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem;"
     data-experiences-missing={componentTypeId}
   >
     <strong>Missing component &lsquo;{componentTypeId}&rsquo;</strong>
-    <p>
+    <p style="margin: 0.5rem 0;">
       This component is referenced by the Experience payload but is not registered in the Config.
+      Register it under this key in your <code>components</code> map:
     </p>
+    <pre style="margin: 0; white-space: pre-wrap;">{JSON.stringify(
+        { componentTypeId, nodeId: nodeId ?? null },
+        null,
+        2
+      )}</pre>
   </div>
 {/if}

package/dist/MissingComponent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MissingComponent.svelte.d.ts","sourceRoot":"","sources":["../src/MissingComponent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAgClE,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MissingComponent.svelte.d.ts","sourceRoot":"","sources":["../src/MissingComponent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAsClE,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ServerExperienceRenderer.svelte

@@ -11,6 +11,7 @@
   import type { ExperienceContext, ViewportDef } from '@contentful/experiences-sdk-core';
   import { getViewportIndex } from '@contentful/experiences-design';
 
+  import DebugExperience from './DebugExperience.svelte';
   import MissingComponent from './MissingComponent.svelte';
   import NodesRenderer from './NodesRenderer.svelte';
   import WrapWithTemplate from './WrapWithTemplate.svelte';
@@ -19,7 +20,7 @@
   import type { RenderContext } from './types.js';
 
   const DEFAULT_CONTEXT: ExperienceContext = {
-    isPreview: false,
+    debug: false,
     metadata: {},
     viewports: [],
   };
@@ -35,7 +36,8 @@
     experience,
     config,
     initialViewportId,
-    context,
+    metadata,
+    debug = false,
     renderUnknown = MissingComponent,
   }: ServerExperienceRendererProps = $props();
 
@@ -44,8 +46,8 @@
     const idx = experience ? getViewportIndex(experience.viewports, initialViewportId) : 0;
     return {
       ...DEFAULT_CONTEXT,
-      ...context,
-      metadata: { ...DEFAULT_CONTEXT.metadata, ...(context?.metadata ?? {}) },
+      debug,
+      metadata: { ...DEFAULT_CONTEXT.metadata, ...(metadata ?? {}) },
       viewports,
       activeViewport: experience?.viewports[idx] ?? FALLBACK_VIEWPORT,
       activeViewportIndex: idx,
@@ -57,6 +59,9 @@
 </script>
 
 {#if experience}
+  {#if debug}
+    <DebugExperience {experience} />
+  {/if}
   <WrapWithTemplate template={experience.template} {config} experience={renderContext}>
     {#snippet children()}
       <NodesRenderer

package/dist/ServerExperienceRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ServerExperienceRenderer.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAgE1E,QAAA,MAAM,wBAAwB,mEAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"ServerExperienceRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ServerExperienceRenderer.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAqE1E,QAAA,MAAM,wBAAwB,mEAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/component-props.d.ts

@@ -1,11 +1,21 @@
 import type { Component } from 'svelte';
-import type { ExperienceContext, PortableRenderPlan } from '@contentful/experiences-sdk-core';
+import type { PortableRenderPlan } from '@contentful/experiences-sdk-core';
 import type { Config } from './types.js';
 export interface ServerExperienceRendererProps {
     experience: PortableRenderPlan | null | undefined;
     config: Config;
     initialViewportId?: string;
-    context?: Partial<ExperienceContext>;
+    /**
+     * Arbitrary per-render metadata, readable by descendants via
+     * `getExperience()` and by resolvers via `ctx.experience.metadata`.
+     */
+    metadata?: Record<string, unknown>;
+    /**
+     * Observability switch. When on: renders the visible missing-component box,
+     * turns the default `renderUnknown` fallback into the debug component, and
+     * auto-mounts `<DebugExperience>` after the tree.
+     */
+    debug?: boolean;
     renderUnknown?: RenderUnknown;
 }
 export type ClientExperienceRendererProps = ServerExperienceRendererProps;
@@ -15,4 +25,10 @@ export interface MissingComponentProps {
     nodeId?: string;
 }
 export type RenderUnknown = Component<MissingComponentProps>;
+export interface DebugExperienceProps {
+    /** The resolved plan to inspect (what a renderer receives as `experience`). */
+    experience: PortableRenderPlan;
+    /** Start expanded. Defaults to collapsed to stay out of the way. */
+    defaultOpen?: boolean;
+}
 //# sourceMappingURL=component-props.d.ts.map

package/dist/component-props.d.ts.map

@@ -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,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAE9F,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,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,MAAM,MAAM,6BAA6B,GAAG,6BAA6B,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC"}
+{"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;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,MAAM,MAAM,6BAA6B,GAAG,6BAA6B,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAE7D,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,UAAU,EAAE,kBAAkB,CAAC;IAC/B,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as ClientExperienceRenderer } from './ClientExperienceRenderer.
 export { default as ExperienceRenderer } from './ClientExperienceRenderer.svelte';
 export { default as ServerExperienceRenderer } from './ServerExperienceRenderer.svelte';
 export { default as MissingComponent } from './MissingComponent.svelte';
+export { default as DebugExperience } from './DebugExperience.svelte';
 export { default as NodesRenderer } from './NodesRenderer.svelte';
 export { useActiveViewport } from './use-active-viewport.svelte.js';
 export type { UseActiveViewportResult } from './use-active-viewport.svelte.js';
@@ -9,7 +10,7 @@ export { getExperience, getContentfulComponent, getContentfulTemplate } from './
 export { getDesignValues } from './get-design-values.js';
 export { toCss } from './design-utils.js';
 export type { ToCssOptions } from './design-utils.js';
-export type { ClientExperienceRendererProps, ClientExperienceRendererProps as ExperienceRendererProps, MissingComponentProps, RenderUnknown, ServerExperienceRendererProps, } from './component-props.js';
+export type { ClientExperienceRendererProps, ClientExperienceRendererProps as ExperienceRendererProps, DebugExperienceProps, MissingComponentProps, RenderUnknown, ServerExperienceRendererProps, } from './component-props.js';
 export { defineComponent, defineTemplate, normalizeComponentRegistration, normalizeTemplateRegistration, } from './types.js';
 export type { ComponentConfig, Components, Config, ContentfulComponent, ContentfulTemplate, Registration, RenderContext, ResolveToken, TemplateConfig, TemplateRegistration, Templates, } from './types.js';
 export { resolveExperience } from '@contentful/experiences-sdk-core';

package/dist/index.d.ts.map

@@ -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;AAIxE,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,EAAE,aAAa,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC5F,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,qBAAqB,EACrB,aAAa,EACb,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,cAAc,EACd,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,eAAe,EACf,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGjG,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,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,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,eAAe,GAChB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,GACf,MAAM,gCAAgC,CAAC"}
+{"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,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAItE,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,EAAE,aAAa,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC5F,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,oBAAoB,EACpB,qBAAqB,EACrB,aAAa,EACb,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,cAAc,EACd,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,eAAe,EACf,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGjG,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,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,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,eAAe,GAChB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,GACf,MAAM,gCAAgC,CAAC"}

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as ClientExperienceRenderer } from './ClientExperienceRenderer.
 export { default as ExperienceRenderer } from './ClientExperienceRenderer.svelte';
 export { default as ServerExperienceRenderer } from './ServerExperienceRenderer.svelte';
 export { default as MissingComponent } from './MissingComponent.svelte';
+export { default as DebugExperience } from './DebugExperience.svelte';
 // Exposed so advanced customers can render non-`children` slots manually:
 // e.g. `<NodesRenderer nodes={contentful.slots.header as PortableRenderNode[]} ... />`.
 export { default as NodesRenderer } from './NodesRenderer.svelte';

package/dist/server-renderer.test.js

@@ -146,7 +146,7 @@ describe('ServerExperienceRenderer', () => {
         expect(ctx.activeViewportIndex).toBe(2);
         expect(ctx.activeViewport).toBe(VIEWPORTS[2]);
     });
-    it('renders missing-component fallback in preview mode', () => {
+    it('renders missing-component fallback in debug mode', () => {
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
         const justContainer = {
             components: { 'contentful-container': ContainerFixture },
@@ -171,20 +171,41 @@ describe('ServerExperienceRenderer', () => {
                 },
             ],
         };
-        const { container: previewContainer } = render(ServerExperienceRenderer, {
+        const { container: debugContainer } = render(ServerExperienceRenderer, {
             props: {
                 experience: planWithMissing,
                 config: justContainer,
-                context: { isPreview: true },
+                debug: true,
             },
         });
-        expect(previewContainer.innerHTML).toContain('data-experiences-missing="NotRegistered"');
+        expect(debugContainer.innerHTML).toContain('data-experiences-missing="NotRegistered"');
         const { container: prodContainer } = render(ServerExperienceRenderer, {
             props: { experience: planWithMissing, config: justContainer },
         });
         expect(prodContainer.innerHTML).not.toContain('data-experiences-missing');
         warn.mockRestore();
     });
+    it('auto-mounts DebugExperience only when debug is on', async () => {
+        const captureConfig = { components: { capture: CapturingComponent } };
+        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'c' })] }, captureConfig);
+        const { container: off } = render(ServerExperienceRenderer, {
+            props: { experience: plan, config: captureConfig },
+        });
+        expect(off.innerHTML).not.toContain('data-experiences-debug');
+        const { container: on } = render(ServerExperienceRenderer, {
+            props: { experience: plan, config: captureConfig, debug: true },
+        });
+        expect(on.innerHTML).toContain('data-experiences-debug');
+        expect(on.innerHTML).toContain('Experience debug');
+    });
+    it('threads top-level metadata into getExperience()', async () => {
+        const captureConfig = { components: { capture: CapturingComponent } };
+        const plan = await resolveExperience({ viewports: VIEWPORTS, nodes: [componentNode('capture', { id: 'c' })] }, captureConfig);
+        render(ServerExperienceRenderer, {
+            props: { experience: plan, config: captureConfig, metadata: { slug: 'home' } },
+        });
+        expect(captureSink[0].experience.metadata).toEqual({ slug: 'home' });
+    });
     it('merges defaults beneath content (content wins)', async () => {
         const itemConfig = {
             components: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-svelte",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "Svelte adapter for Contentful Experiences — Server and Client renderers over a PortableRenderPlan",
   "license": "MIT",
   "type": "module",
@@ -35,9 +35,9 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@contentful/experiences-client": "0.1.7",
-    "@contentful/experiences-sdk-core": "0.5.5",
-    "@contentful/experiences-design": "0.5.5"
+    "@contentful/experiences-client": "0.2.0",
+    "@contentful/experiences-sdk-core": "0.6.0",
+    "@contentful/experiences-design": "0.6.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.7"
@@ -49,7 +49,7 @@
     "@testing-library/svelte": "^5.4.2",
     "jsdom": "^29.1.1",
     "publint": "^0.3.22",
-    "svelte": "^5.55.7",
+    "svelte": "^5.56.8",
     "svelte-check": "^4.7.2"
   }
 }