@picked/svelte 0.0.66 → 0.0.67

package/dist/experience/HtmlRender.svelte

@@ -1,6 +1,18 @@
 <script lang="ts">
-  /** @file Renders a resolved html-asset field into a shadow root and re-executes its Picked-tagged scripts. */
-  import { isHtmlAssetValue, rehydrateScripts, supportsShadowRoot } from '@picked/client'
+  /**
+   * @file Renders a resolved html-asset field into a shadow root and re-executes its
+   * Picked-tagged scripts. On the server the markup is emitted as a declarative shadow DOM
+   * template, a parser-only feature the browser attaches as a real shadow root while parsing
+   * the response, so content is present from first paint. On the client, the first commit
+   * adopts that parser-attached root and only rehydrates its scripts; a client-only mount or a
+   * later content change attaches and writes the shadow root imperatively instead.
+   */
+  import {
+    isHtmlAssetValue,
+    rehydrateScripts,
+    supportsShadowRoot,
+    supportsWindow,
+  } from '@picked/client'
 
   interface Props {
     /** The resolved html-asset field value (for example `content.body`). */
@@ -11,16 +23,30 @@
 
   const value = $derived(isHtmlAssetValue(html) ? html : null)
   const markup = $derived(value?.content ?? '')
+  const serverMarkup = $derived(
+    supportsWindow() ? '' : `<template shadowrootmode="open">${markup}</template>`,
+  )
 
   let host = $state<HTMLDivElement>()
+  let seeded = false
 
   $effect(() => {
     if (!supportsShadowRoot() || !host) return
 
-    const shadow = host.shadowRoot ?? host.attachShadow({ mode: 'open' })
+    const existingShadow = host.shadowRoot
+    const isFirstRun = !seeded
+    seeded = true
+
+    if (existingShadow && isFirstRun) {
+      if (markup) void rehydrateScripts(existingShadow)
+      return
+    }
+
+    const shadow = existingShadow ?? host.attachShadow({ mode: 'open' })
     shadow.innerHTML = markup
     if (markup) void rehydrateScripts(shadow)
   })
 </script>
 
-<div bind:this={host}></div>
+<!-- eslint-disable-next-line svelte/no-at-html-tags -- markup is a trusted, Picked-transformed html-asset field, not arbitrary user input -->
+<div bind:this={host}>{@html serverMarkup}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -106,7 +106,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.66",
+    "@picked/client": "0.0.67",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },