@contentful/experiences-svelte 0.6.2 → 0.6.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.6.3 (2026-09-11)
+
+### 🚀 Features
+
+- **live-preview:** expose preview status helper [SPA-5289] ([#170](https://github.com/contentful/experiences/pull/170))
+- **live-preview:** add framework adapters [SPA-5161] ([#165](https://github.com/contentful/experiences/pull/165))
+
+### 🧱 Updated Dependencies
+
+- Updated live-preview to 0.1.1
+- Updated client to 0.4.3
+- Updated design to 0.8.3
+- Updated core to 0.8.3
+
 ## 0.6.2 (2026-09-10)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -8,7 +8,7 @@ The Svelte adapter for the Contentful Experiences SDK. You bring your own Svelte
 npm install @contentful/experiences-svelte
 ```
 
-This is the **only SDK package you install**. It re-exports everything you need from `@contentful/experiences-sdk-core` and `@contentful/experiences-design`. The other packages are workspace-internal.
+This is the only rendering SDK package you install. It re-exports everything you need from `@contentful/experiences-sdk-core`, `@contentful/experiences-design`, and `@contentful/experiences-client`. The optional `@contentful/experiences-live-preview` package is also customer-facing and provides the framework-neutral live-preview client.
 
 The public API mirrors `@contentful/experiences-react` 1:1 in shape; only the rendering primitives change (Svelte 5 `Component`s, Snippets instead of `children: ReactNode`, and `getDesignValues()` instead of `useDesignValues()`).
 
@@ -29,6 +29,54 @@ defineExperienceTemplate<Props>(config); // Same shape, for coded Experience Tem
 resolveExperience(payload, config, opts?); // Async; walks payload, runs resolveData, returns a PortableRenderPlan
 ```
 
+### Live preview
+
+Use `useLivePreview` when the app should subscribe to Preview Session updates,
+resolve each payload, and render the resulting plan from `data`:
+
+```svelte
+<script lang="ts">
+  const livePreview = useLivePreview(() => ({
+    previewSessionOptions,
+    initialPayload,
+    initialPlan,
+    resolveOptions: { config: experienceConfig },
+  }));
+</script>
+
+<ClientExperienceRenderer experience={livePreview.data} config={experienceConfig} />
+```
+
+For separate access to the raw payload and rendered plan, use
+`useLivePreviewExperience` and `useExperiencePlan`:
+
+```svelte
+<script lang="ts">
+  const livePreview = useLivePreviewExperience(() => ({
+    previewSessionOptions: {
+      spaceId,
+      environmentId,
+      previewToken,
+      sessionId,
+    },
+    initialPayload,
+  }));
+
+  const plan = useExperiencePlan(() => ({
+    payload: livePreview.data,
+    initialPlan,
+    resolveOptions: { config: experienceConfig },
+  }));
+</script>
+
+<ClientExperienceRenderer experience={plan.data} config={experienceConfig} />
+```
+
+`useLivePreviewExperience` returns the latest raw Experience payload.
+`initialPayload` seeds the first value. `useExperiencePlan` turns that payload
+into the `PortableRenderPlan` consumed by the renderer and keeps the current rendered
+experience while an update is being resolved.
+
 ### Renderers
 
 ```ts

package/dist/index.d.ts

@@ -7,6 +7,13 @@ 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';
+export { useLivePreviewExperience } from './use-live-preview-experience.svelte.js';
+export type { UseLivePreviewExperienceOptions, UseLivePreviewExperienceResult, } from './use-live-preview-experience.svelte.js';
+export { useLivePreview } from './use-live-preview.svelte.js';
+export type { UseLivePreviewOptions, UseLivePreviewResult } from './use-live-preview.svelte.js';
+export { useExperiencePlan } from './use-experience-plan.svelte.js';
+export type { ExperiencePlanResolveOptions, UseExperiencePlanOptions, UseExperiencePlanResult, } from './use-experience-plan.svelte.js';
+export type { LivePreviewClient, PreviewSessionOptions, } from '@contentful/experiences-live-preview';
 export { getExperience, getContentfulComponent, getContentfulExperienceTemplate, } from './context.js';
 export { getDesignValues } from './get-design-values.js';
 export { toCss } from './design-utils.js';

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -23,6 +23,9 @@ export { default as DebugExperience } from './DebugExperience.svelte';
 // e.g. `<NodesRenderer nodes={contentful.slots.header as PortableRenderNode[]} ... />`.
 export { default as NodesRenderer } from './NodesRenderer.svelte';
 export { useActiveViewport } from './use-active-viewport.svelte.js';
+export { useLivePreviewExperience } from './use-live-preview-experience.svelte.js';
+export { useLivePreview } from './use-live-preview.svelte.js';
+export { useExperiencePlan } from './use-experience-plan.svelte.js';
 // ─── Runtime context helpers ─────────────────────────────────────────────
 export { getExperience, getContentfulComponent, getContentfulExperienceTemplate, } from './context.js';
 export { getDesignValues } from './get-design-values.js';

package/dist/test-fixtures/ExperiencePlanProbe.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { UseExperiencePlanOptions } from '../use-experience-plan.svelte.js';
+  import { useExperiencePlan } from '../use-experience-plan.svelte.js';
+
+  let { options }: { options: UseExperiencePlanOptions } = $props();
+  const resolved = useExperiencePlan(() => options);
+</script>
+
+<output>{resolved.data?.nodes[0]?.props.content.title ?? ''}</output>

package/dist/test-fixtures/ExperiencePlanProbe.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UseExperiencePlanOptions } from '../use-experience-plan.svelte.js';
+type $$ComponentProps = {
+    options: UseExperiencePlanOptions;
+};
+declare const ExperiencePlanProbe: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExperiencePlanProbe = ReturnType<typeof ExperiencePlanProbe>;
+export default ExperiencePlanProbe;
+//# sourceMappingURL=ExperiencePlanProbe.svelte.d.ts.map

package/dist/test-fixtures/ExperiencePlanProbe.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperiencePlanProbe.svelte.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/ExperiencePlanProbe.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAGhF,KAAK,gBAAgB,GAAI;IAAE,OAAO,EAAE,wBAAwB,CAAA;CAAE,CAAC;AAahE,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/test-fixtures/LivePreviewExperienceProbe.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { UseLivePreviewExperienceOptions } from '../use-live-preview-experience.svelte.js';
+  import { useLivePreviewExperience } from '../use-live-preview-experience.svelte.js';
+
+  let { options }: { options: UseLivePreviewExperienceOptions } = $props();
+  const livePreview = useLivePreviewExperience(() => options);
+</script>
+
+<output>{livePreview.data?.nodes[0]?.contentProperties?.title ?? ''}</output>

package/dist/test-fixtures/LivePreviewExperienceProbe.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UseLivePreviewExperienceOptions } from '../use-live-preview-experience.svelte.js';
+type $$ComponentProps = {
+    options: UseLivePreviewExperienceOptions;
+};
+declare const LivePreviewExperienceProbe: import("svelte").Component<$$ComponentProps, {}, "">;
+type LivePreviewExperienceProbe = ReturnType<typeof LivePreviewExperienceProbe>;
+export default LivePreviewExperienceProbe;
+//# sourceMappingURL=LivePreviewExperienceProbe.svelte.d.ts.map

package/dist/test-fixtures/LivePreviewExperienceProbe.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreviewExperienceProbe.svelte.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/LivePreviewExperienceProbe.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAC;AAG/F,KAAK,gBAAgB,GAAI;IAAE,OAAO,EAAE,+BAA+B,CAAA;CAAE,CAAC;AAavE,QAAA,MAAM,0BAA0B,sDAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/test-fixtures/LivePreviewPlanProbe.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { UseLivePreviewOptions } from '../use-live-preview.svelte.js';
+  import { useLivePreview } from '../use-live-preview.svelte.js';
+
+  let { options }: { options: UseLivePreviewOptions } = $props();
+  const livePreview = useLivePreview(() => options);
+</script>
+
+<output>{livePreview.data?.nodes[0]?.props.content.title ?? ''}</output>

package/dist/test-fixtures/LivePreviewPlanProbe.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UseLivePreviewOptions } from '../use-live-preview.svelte.js';
+type $$ComponentProps = {
+    options: UseLivePreviewOptions;
+};
+declare const LivePreviewPlanProbe: import("svelte").Component<$$ComponentProps, {}, "">;
+type LivePreviewPlanProbe = ReturnType<typeof LivePreviewPlanProbe>;
+export default LivePreviewPlanProbe;
+//# sourceMappingURL=LivePreviewPlanProbe.svelte.d.ts.map

package/dist/test-fixtures/LivePreviewPlanProbe.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreviewPlanProbe.svelte.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/LivePreviewPlanProbe.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAG1E,KAAK,gBAAgB,GAAI;IAAE,OAAO,EAAE,qBAAqB,CAAA;CAAE,CAAC;AAa7D,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/use-experience-plan.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ExperiencePayload, PortableRenderPlan, ResolveExperienceOptions, ResolverConfig } from '@contentful/experiences-sdk-core';
+export interface ExperiencePlanResolveOptions extends ResolveExperienceOptions {
+    config: ResolverConfig;
+}
+export interface UseExperiencePlanOptions {
+    payload: ExperiencePayload | undefined;
+    initialPlan?: PortableRenderPlan;
+    resolveOptions: ExperiencePlanResolveOptions;
+}
+export interface UseExperiencePlanResult {
+    readonly data: PortableRenderPlan | undefined;
+}
+export declare function useExperiencePlan(getOptions: () => UseExperiencePlanOptions): UseExperiencePlanResult;
+//# sourceMappingURL=use-experience-plan.svelte.d.ts.map

package/dist/use-experience-plan.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-experience-plan.svelte.d.ts","sourceRoot":"","sources":["../src/use-experience-plan.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,cAAc,EACf,MAAM,kCAAkC,CAAC;AAE1C,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC5E,MAAM,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACvC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,4BAA4B,CAAC;CAC9C;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,IAAI,EAAE,kBAAkB,GAAG,SAAS,CAAC;CAC/C;AAED,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,MAAM,wBAAwB,GACzC,uBAAuB,CA+BzB"}

package/dist/use-experience-plan.svelte.js

@@ -0,0 +1,28 @@
+import { resolveExperience } from '@contentful/experiences-sdk-core';
+export function useExperiencePlan(getOptions) {
+    let plan = $state(getOptions().initialPlan);
+    $effect(() => {
+        const { payload, resolveOptions } = getOptions();
+        if (payload === undefined)
+            return;
+        let isCurrent = true;
+        const { config, ...resolveExperienceOptions } = resolveOptions;
+        void resolveExperience(payload, config, resolveExperienceOptions)
+            .then((nextPlan) => {
+            if (isCurrent && nextPlan.diagnostics.length === 0) {
+                plan = nextPlan;
+            }
+        })
+            .catch(() => {
+            // Keep the last usable experience when resolving an update fails.
+        });
+        return () => {
+            isCurrent = false;
+        };
+    });
+    return {
+        get data() {
+            return plan;
+        },
+    };
+}

package/dist/use-experience-plan.test.d.ts

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

package/dist/use-experience-plan.test.d.ts.map

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

package/dist/use-experience-plan.test.js

@@ -0,0 +1,80 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import ExperiencePlanProbe from './test-fixtures/ExperiencePlanProbe.svelte';
+const payload = (title) => ({
+    nodes: [
+        {
+            component: {
+                sys: {
+                    type: 'ResourceLink',
+                    linkType: 'Contentful:Component',
+                    urn: 'crn:contentful:::experience:components/hero',
+                },
+            },
+            contentProperties: { title },
+            designProperties: {},
+            slots: {},
+        },
+    ],
+    sys: { type: 'Experience' },
+    viewports: [
+        {
+            displayName: 'Default',
+            id: 'default',
+            previewSize: '1024px',
+            query: '*',
+        },
+    ],
+});
+const initialPlan = {
+    fallbackViewportIndex: 0,
+    nodes: [
+        {
+            nodeId: 'initial',
+            registration: { kind: 'component', id: 'hero' },
+            props: { content: { title: 'initial' }, design: {}, designRaw: {} },
+            slots: {},
+        },
+    ],
+    viewports: payload('initial').viewports,
+    metadata: {},
+    debug: false,
+    diagnostics: [],
+};
+const resolveOptions = {
+    config: { components: {} },
+};
+describe('useExperiencePlan', () => {
+    it('resolves raw data into an experience', async () => {
+        const view = render(ExperiencePlanProbe, {
+            props: {
+                options: {
+                    payload: payload('updated'),
+                    initialPlan,
+                    resolveOptions,
+                },
+            },
+        });
+        await vi.waitFor(() => expect(view.container.textContent).toBe('updated'));
+    });
+    it('keeps the initial experience when resolving raw data fails', async () => {
+        const view = render(ExperiencePlanProbe, {
+            props: {
+                options: {
+                    payload: payload('failed'),
+                    initialPlan,
+                    resolveOptions: {
+                        config: {
+                            components: {
+                                hero: {
+                                    resolveData: () => Promise.reject(new Error('resolver failed')),
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        });
+        await vi.waitFor(() => expect(view.container.textContent).toBe('initial'));
+    });
+});

package/dist/use-live-preview-experience.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type PreviewSessionOptions } from '@contentful/experiences-live-preview';
+import type { ExperiencePayload } from '@contentful/experiences-sdk-core';
+export type UseLivePreviewExperienceOptions = {
+    previewSessionOptions?: PreviewSessionOptions;
+    initialPayload?: ExperiencePayload;
+};
+export interface UseLivePreviewExperienceResult {
+    readonly data: ExperiencePayload | undefined;
+}
+export declare function useLivePreviewExperience(getOptions: () => UseLivePreviewExperienceOptions): UseLivePreviewExperienceResult;
+//# sourceMappingURL=use-live-preview-experience.svelte.d.ts.map

package/dist/use-live-preview-experience.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-preview-experience.svelte.d.ts","sourceRoot":"","sources":["../src/use-live-preview-experience.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE1E,MAAM,MAAM,+BAA+B,GAAG;IAC5C,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,cAAc,CAAC,EAAE,iBAAiB,CAAC;CACpC,CAAC;AAEF,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAAC;CAC9C;AAED,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,MAAM,+BAA+B,GAChD,8BAA8B,CA+BhC"}

package/dist/use-live-preview-experience.svelte.js

@@ -0,0 +1,28 @@
+import { createLivePreviewClient, sendPreviewStatus, } from '@contentful/experiences-live-preview';
+export function useLivePreviewExperience(getOptions) {
+    const initialPayload = getOptions().initialPayload;
+    let data = $state(initialPayload);
+    $effect(() => {
+        const { previewSessionOptions } = getOptions();
+        data = initialPayload;
+        if (previewSessionOptions === undefined) {
+            sendPreviewStatus('static');
+            return;
+        }
+        const client = createLivePreviewClient(previewSessionOptions, initialPayload);
+        const unsubscribeStatus = client.subscribeStatus(sendPreviewStatus);
+        data = client.getSnapshot();
+        const unsubscribe = client.subscribe(() => {
+            data = client.getSnapshot();
+        });
+        return () => {
+            unsubscribeStatus();
+            unsubscribe();
+        };
+    });
+    return {
+        get data() {
+            return data;
+        },
+    };
+}

package/dist/use-live-preview-experience.test.d.ts

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

package/dist/use-live-preview-experience.test.d.ts.map

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

package/dist/use-live-preview-experience.test.js

@@ -0,0 +1,137 @@
+import { render } from '@testing-library/svelte';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import LivePreviewExperienceProbe from './test-fixtures/LivePreviewExperienceProbe.svelte';
+class FakeWebSocket {
+    static instances = [];
+    url;
+    close = vi.fn();
+    onopen = null;
+    onclose = null;
+    onmessage = null;
+    constructor(url) {
+        this.url = url;
+        FakeWebSocket.instances.push(this);
+    }
+    emitOpen() {
+        this.onopen?.({ type: 'open' });
+    }
+    emitClose(event) {
+        this.onclose?.(event);
+    }
+    emitMessage(data) {
+        this.onmessage?.({ data });
+    }
+}
+const payload = (title) => ({
+    nodes: [
+        {
+            component: {
+                sys: {
+                    type: 'ResourceLink',
+                    linkType: 'Contentful:Component',
+                    urn: 'crn:contentful:::experience:components/hero',
+                },
+            },
+            contentProperties: { title },
+            designProperties: {},
+            slots: {},
+        },
+    ],
+    sys: { type: 'Experience' },
+    viewports: [
+        {
+            displayName: 'Default',
+            id: 'default',
+            previewSize: '1024px',
+            query: '*',
+        },
+    ],
+});
+const previewSessionOptions = {
+    environmentId: 'environment-id',
+    previewToken: 'preview-token',
+    sessionHost: 'wss://preview-session.example.test',
+    sessionId: 'session-id',
+    spaceId: 'space-id',
+};
+const options = (overrides = {}) => ({
+    previewSessionOptions,
+    ...overrides,
+});
+describe('useLivePreviewExperience', () => {
+    beforeEach(() => {
+        FakeWebSocket.instances = [];
+        vi.stubGlobal('WebSocket', FakeWebSocket);
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+    it('returns initial raw data and updates from the Preview Session', async () => {
+        const initialPayload = payload('initial');
+        const view = render(LivePreviewExperienceProbe, {
+            props: { options: options({ initialPayload }) },
+        });
+        expect(view.container.textContent).toBe('initial');
+        expect(FakeWebSocket.instances).toHaveLength(1);
+        FakeWebSocket.instances[0]?.emitMessage(JSON.stringify({ type: 'next', data: payload('updated') }));
+        await vi.waitFor(() => expect(view.container.textContent).toBe('updated'));
+    });
+    it('does not connect when a session credential is missing', () => {
+        const postMessage = vi.spyOn(window.parent, 'postMessage').mockImplementation(() => undefined);
+        const view = render(LivePreviewExperienceProbe, {
+            props: {
+                options: options({
+                    initialPayload: payload('initial'),
+                    previewSessionOptions: { ...previewSessionOptions, sessionId: undefined },
+                }),
+            },
+        });
+        expect(view.container.textContent).toBe('initial');
+        expect(FakeWebSocket.instances).toHaveLength(0);
+        expect(postMessage).toHaveBeenCalledWith({
+            source: 'experiences/live-preview',
+            type: 'status',
+            status: 'static',
+        }, '*');
+    });
+    it('sends live status after the session socket opens', async () => {
+        const postMessage = vi.spyOn(window.parent, 'postMessage').mockImplementation(() => undefined);
+        render(LivePreviewExperienceProbe, { props: { options: options() } });
+        expect(postMessage).not.toHaveBeenCalled();
+        FakeWebSocket.instances[0]?.emitOpen();
+        await vi.waitFor(() => expect(postMessage).toHaveBeenCalledWith({
+            source: 'experiences/live-preview',
+            type: 'status',
+            status: 'live',
+        }, '*'));
+    });
+    it('does not send static status while the session socket reconnects', async () => {
+        vi.useFakeTimers();
+        const postMessage = vi.spyOn(window.parent, 'postMessage').mockImplementation(() => undefined);
+        render(LivePreviewExperienceProbe, { props: { options: options() } });
+        FakeWebSocket.instances[0]?.emitOpen();
+        FakeWebSocket.instances[0]?.emitClose({ code: 1006, reason: 'network' });
+        vi.advanceTimersByTime(100);
+        FakeWebSocket.instances[1]?.emitOpen();
+        expect(postMessage).toHaveBeenCalledTimes(1);
+        expect(postMessage).toHaveBeenLastCalledWith({
+            source: 'experiences/live-preview',
+            type: 'status',
+            status: 'live',
+        }, '*');
+    });
+    it('sends static status without Preview Session options', () => {
+        const postMessage = vi.spyOn(window.parent, 'postMessage').mockImplementation(() => undefined);
+        render(LivePreviewExperienceProbe, {
+            props: { options: { initialPayload: payload('initial') } },
+        });
+        expect(FakeWebSocket.instances).toHaveLength(0);
+        expect(postMessage).toHaveBeenCalledWith({
+            source: 'experiences/live-preview',
+            type: 'status',
+            status: 'static',
+        }, '*');
+    });
+});

package/dist/use-live-preview.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ExperiencePayload, PortableRenderPlan } from '@contentful/experiences-sdk-core';
+import type { PreviewSessionOptions } from '@contentful/experiences-live-preview';
+import { type ExperiencePlanResolveOptions } from './use-experience-plan.svelte.js';
+export interface UseLivePreviewOptions {
+    previewSessionOptions?: PreviewSessionOptions;
+    initialPayload?: ExperiencePayload;
+    initialPlan?: PortableRenderPlan;
+    resolveOptions: ExperiencePlanResolveOptions;
+}
+export interface UseLivePreviewResult {
+    readonly data: PortableRenderPlan | undefined;
+}
+export declare function useLivePreview(getOptions: () => UseLivePreviewOptions): UseLivePreviewResult;
+//# sourceMappingURL=use-live-preview.svelte.d.ts.map

package/dist/use-live-preview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-preview.svelte.d.ts","sourceRoot":"","sources":["../src/use-live-preview.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC9F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,iCAAiC,CAAC;AAGzC,MAAM,WAAW,qBAAqB;IACpC,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,cAAc,EAAE,4BAA4B,CAAC;CAC9C;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,kBAAkB,GAAG,SAAS,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,qBAAqB,GAAG,oBAAoB,CAU5F"}

package/dist/use-live-preview.svelte.js

@@ -0,0 +1,12 @@
+import { useExperiencePlan, } from './use-experience-plan.svelte.js';
+import { useLivePreviewExperience } from './use-live-preview-experience.svelte.js';
+export function useLivePreview(getOptions) {
+    const livePreview = useLivePreviewExperience(() => {
+        const { previewSessionOptions, initialPayload } = getOptions();
+        return { previewSessionOptions, initialPayload };
+    });
+    return useExperiencePlan(() => {
+        const { initialPlan, resolveOptions } = getOptions();
+        return { payload: livePreview.data, initialPlan, resolveOptions };
+    });
+}

package/dist/use-live-preview.test.d.ts

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

package/dist/use-live-preview.test.d.ts.map

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

package/dist/use-live-preview.test.js

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import LivePreviewPlanProbe from './test-fixtures/LivePreviewPlanProbe.svelte';
+const payload = {
+    nodes: [],
+    sys: { type: 'Experience' },
+    viewports: [{ displayName: 'Default', id: 'default', previewSize: '1024px', query: '*' }],
+};
+const initialPlan = {
+    fallbackViewportIndex: 0,
+    nodes: [
+        {
+            nodeId: 'initial',
+            registration: { kind: 'component', id: 'hero' },
+            props: { content: { title: 'initial' }, design: {}, designRaw: {} },
+            slots: {},
+        },
+    ],
+    viewports: payload.viewports,
+    metadata: {},
+    debug: false,
+    diagnostics: [],
+};
+describe('useLivePreview', () => {
+    it('returns the initial plan when no Preview Session is configured', () => {
+        const options = {
+            initialPlan,
+            resolveOptions: { config: { components: {} } },
+        };
+        const view = render(LivePreviewPlanProbe, { props: { options } });
+        expect(view.container.textContent).toBe('initial');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-svelte",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Svelte adapter for Contentful Experiences — Server and Client renderers over a PortableRenderPlan",
   "license": "MIT",
   "type": "module",
@@ -35,9 +35,10 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@contentful/experiences-client": "0.4.2",
-    "@contentful/experiences-sdk-core": "0.8.2",
-    "@contentful/experiences-design": "0.8.2"
+    "@contentful/experiences-client": "0.4.3",
+    "@contentful/experiences-sdk-core": "0.8.3",
+    "@contentful/experiences-design": "0.8.3",
+    "@contentful/experiences-live-preview": "0.1.1"
   },
   "peerDependencies": {
     "svelte": "^5.55.7"