@picked/svelte 0.0.1-dev.1784003142683 → 0.0.1-dev.1784270162396

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.
@@ -0,0 +1,52 @@
1
+ <script lang="ts">
2
+ /**
3
+ * @file Renders a resolved html-asset field into a shadow root and re-executes its
4
+ * Picked-tagged scripts. On the server the markup is emitted as a declarative shadow DOM
5
+ * template, a parser-only feature the browser attaches as a real shadow root while parsing
6
+ * the response, so content is present from first paint. On the client, the first commit
7
+ * adopts that parser-attached root and only rehydrates its scripts; a client-only mount or a
8
+ * later content change attaches and writes the shadow root imperatively instead.
9
+ */
10
+ import {
11
+ isHtmlAssetValue,
12
+ rehydrateScripts,
13
+ supportsShadowRoot,
14
+ supportsWindow,
15
+ } from '@picked/client'
16
+
17
+ interface Props {
18
+ /** The resolved html-asset field value (for example `content.body`). */
19
+ html: unknown
20
+ }
21
+
22
+ const { html }: Props = $props()
23
+
24
+ const value = $derived(isHtmlAssetValue(html) ? html : null)
25
+ const markup = $derived(value?.content ?? '')
26
+ const serverMarkup = $derived(
27
+ supportsWindow() ? '' : `<template shadowrootmode="open">${markup}</template>`,
28
+ )
29
+
30
+ let host = $state<HTMLDivElement>()
31
+ let seeded = false
32
+
33
+ $effect(() => {
34
+ if (!supportsShadowRoot() || !host) return
35
+
36
+ const existingShadow = host.shadowRoot
37
+ const isFirstRun = !seeded
38
+ seeded = true
39
+
40
+ if (existingShadow && isFirstRun) {
41
+ if (markup) void rehydrateScripts(existingShadow)
42
+ return
43
+ }
44
+
45
+ const shadow = existingShadow ?? host.attachShadow({ mode: 'open' })
46
+ shadow.innerHTML = markup
47
+ if (markup) void rehydrateScripts(shadow)
48
+ })
49
+ </script>
50
+
51
+ <!-- eslint-disable-next-line svelte/no-at-html-tags -- markup is a trusted, Picked-transformed html-asset field, not arbitrary user input -->
52
+ <div bind:this={host}>{@html serverMarkup}</div>
@@ -1,25 +1,13 @@
1
1
  import { Picked, ExperienceInstance } from '@picked/client';
2
2
  /**
3
- * Retrieves the Picked Client for the Experience Instance.
3
+ * Retrieves the Picked Client for the Experience Instance
4
4
  *
5
- * @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality.
6
- * @example
7
- * const client = getPicked()
5
+ * @returns The Picked client instance that provides access to experiences, steps, and other Picked functionality
8
6
  */
9
7
  export declare function getPicked(): Picked;
10
8
  /**
11
- * Retrieves the Experience Store for the current Experience Instance.
9
+ * Retrieves the Experience Store for the current Experience Instance
12
10
  *
13
- * The returned instance exposes `restart` and `isResumableStore` for SDK-native
14
- * resume/restart flows: call `instance.restart()` to clear this instance's history and
15
- * the experience's owned responses, and subscribe to `instance.isResumableStore` (via the
16
- * `$` prefix) to render a "continue / start over" prompt once the user has progressed past
17
- * the first step (it stays `false` on the first step, even with a saved answer).
18
- *
19
- * @returns The Experience store instance that provides access to experience configuration and state.
20
- * @example
21
- * const experience = getExperience()
22
- * const canResume = experience.isResumableStore
23
- * // in markup: {#if $canResume}…{/if}
11
+ * @returns The Experience store instance that provides access to experience configuration and state
24
12
  */
25
13
  export declare function getExperience(): ExperienceInstance;
package/dist/index.d.ts CHANGED
@@ -6,3 +6,4 @@ export type { ComponentWithProps } from './component';
6
6
  export { LazyImage } from './components';
7
7
  export { setPickedContext } from './experience/set-picked-context';
8
8
  export { default as ExperienceSlot } from './experience/ExperienceSlot.svelte';
9
+ export { default as HtmlRender } from './experience/HtmlRender.svelte';
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{adaptSvelteComponent as e,isValidAdaptedComponent as t}from"./component.js";import{LazyImage as n}from"./components/index.js";import{setPickedContext as r}from"./experience/set-picked-context.js";import i from"./experience/ExperienceSlot.svelte";export{i as ExperienceSlot,n as LazyImage,e as adaptSvelteComponent,t as isValidAdaptedComponent,r as setPickedContext};
1
+ import{adaptSvelteComponent as e,isValidAdaptedComponent as t}from"./component.js";import{LazyImage as n}from"./components/index.js";import{setPickedContext as r}from"./experience/set-picked-context.js";import i from"./experience/ExperienceSlot.svelte";import a from"./experience/HtmlRender.svelte";export{i as ExperienceSlot,a as HtmlRender,n as LazyImage,e as adaptSvelteComponent,t as isValidAdaptedComponent,r as setPickedContext};
@@ -1,14 +1,12 @@
1
1
  <script lang="ts">
2
- /** @file Devtools table that lists history entries for the current Picked client. */
3
2
  import type { HistoryEntry } from '@picked/client'
4
- import { Card, DataTable, EmptyState, Stack } from '../../ui'
5
3
  import HistoryEntryListItem from './HistoryEntryListItem.svelte'
4
+ import { Card, DataTable, EmptyState, Stack } from '../../ui'
6
5
 
7
6
  export let historyEntries: HistoryEntry[]
8
7
 
9
8
  const columns = [
10
9
  { key: 'id', header: 'ID' },
11
- { key: 'instanceId', header: 'Instance ID' },
12
10
  { key: 'experienceId', header: 'Experience ID' },
13
11
  { key: 'nodeId', header: 'Node ID' },
14
12
  { key: 'nodeType', header: 'Node Type' },
@@ -12,7 +12,6 @@
12
12
 
13
13
  <tr>
14
14
  <td>{historyEntry.id}</td>
15
- <td>{historyEntry.instanceId}</td>
16
15
  <td>{experienceName}</td>
17
16
  <td>{historyEntry.node.id}</td>
18
17
  <td>{historyEntry.node.type}</td>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@picked/svelte",
3
- "version": "0.0.1-dev.1784003142683",
3
+ "version": "0.0.1-dev.1784270162396",
4
4
  "dependencies": {
5
5
  "d3": "^7.9.0"
6
6
  },
@@ -106,7 +106,7 @@
106
106
  },
107
107
  "module": "./dist/index.js",
108
108
  "peerDependencies": {
109
- "@picked/client": "0.0.1-dev.1784003142683",
109
+ "@picked/client": "0.0.1-dev.1784270162396",
110
110
  "effector": "^23.3.0",
111
111
  "svelte": "^5.46.4"
112
112
  },