@picked/react 0.0.1-dev.1785287094311 → 0.0.1-dev.1785305085063

package/dist/experience/HtmlRender.d.ts

@@ -13,6 +13,15 @@ interface HtmlRenderProps {
  * client-only mount or a later content change attaches and writes the shadow root imperatively
  * instead. A non-matching value or a `null` content renders nothing.
  *
+ * Inside a Picked live-preview session the update path changes: content arrives at typing speed, so
+ * after the first render the shadow root is **morphed** rather than rewritten, and page scripts are
+ * **frozen** — nothing re-executes. The two are one behaviour and must never be separated. Freezing
+ * is what stops a customer's analytics and third-party pixels firing once per keystroke from the
+ * dashboard; morphing is what keeps the page alive without them, since a wholesale rewrite would
+ * detach every listener with nothing left to re-bind it. Markup inserted during a preview morph has
+ * its scripts neutralised, so a newly-added section renders but has no behaviour until the next full
+ * load — reported to the embedder so the editor can say so.
+ *
  * @param {HtmlRenderProps} props - The component props.
  * @returns {React.JSX.Element} The shadow-root host element.
  * @example

package/dist/experience/HtmlRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlRender.d.ts","sourceRoot":"","sources":["../../src/experience/HtmlRender.tsx"],"names":[],"mappings":"AAAA,8GAA8G;AAC9G,OAAO,KAA4B,MAAM,OAAO,CAAA;AAQhD,UAAU,eAAe;IACvB,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgChE;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"HtmlRender.d.ts","sourceRoot":"","sources":["../../src/experience/HtmlRender.tsx"],"names":[],"mappings":"AAAA,8GAA8G;AAC9G,OAAO,KAA4B,MAAM,OAAO,CAAA;AAWhD,UAAU,eAAe;IACvB,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuChE;AAED,eAAe,UAAU,CAAA"}

package/dist/experience/HtmlRender.js

@@ -1 +1 @@
-import{useEffect as e,useRef as t}from"react";import{isHtmlAssetValue as n,rehydrateScripts as r,supportsShadowRoot as i,supportsWindow as a}from"@picked/client";import{jsx as o}from"react/jsx-runtime";function s({html:s}){let c=(n(s)?s:null)?.content??``,l=t(null),u=t(!1);return e(()=>{let e=l.current;if(!i()||!e)return;let t=e.shadowRoot,n=!u.current;if(u.current=!0,t&&n){c&&r(t);return}let a=t??e.attachShadow({mode:`open`});a.innerHTML=c,c&&r(a)},[c]),a()?o(`div`,{ref:l,suppressHydrationWarning:!0}):o(`div`,{ref:l,suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:`<template shadowrootmode="open">${c}</template>`}})}export{s as default};
+import{morphInto as e}from"./morph.js";import{useEffect as t,useRef as n}from"react";import{isHtmlAssetValue as r,isPreviewSession as i,rehydrateScripts as a,reportInertScriptSubtrees as o,supportsShadowRoot as s,supportsWindow as c}from"@picked/client";import{jsx as l}from"react/jsx-runtime";function u({html:u}){let d=(r(u)?u:null)?.content??``,f=n(null),p=n(!1);return t(()=>{let t=f.current;if(!s()||!t)return;let n=t.shadowRoot,r=!p.current;if(p.current=!0,n&&r){d&&a(n);return}let c=n??t.attachShadow({mode:`open`});if(!r&&i()){let{inertScriptSubtrees:t}=e(c,d);o(t);return}c.innerHTML=d,d&&a(c)},[d]),c()?l(`div`,{ref:f,suppressHydrationWarning:!0}):l(`div`,{ref:f,suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:`<template shadowrootmode="open">${d}</template>`}})}export{u as default};

package/dist/experience/morph.d.ts

@@ -0,0 +1,26 @@
+/** Outcome of a morph pass. Returned by {@link morphInto}. */
+interface MorphResult {
+    /**
+     * How many inserted subtrees contained at least one `<script>`. Those scripts are neutralised
+     * before insertion, so the markup renders but has no behaviour until the next full load. The
+     * dashboard surfaces this count so an author who adds a section understands why its carousel is
+     * inert, instead of filing it as a bug.
+     */
+    inertScriptSubtrees: number;
+}
+/**
+ * Morphs a root's children to match `markup`, preserving every node the new markup did not change.
+ *
+ * Scripts are never executed: existing ones are left untouched (mutating a script's text does not
+ * re-run it) and inserted ones are neutralised before they reach the document. The returned count
+ * reports how many inserted subtrees were affected, so the editor can say so.
+ *
+ * @param {ParentNode & Node} root - The live root — typically a shadow root — to update.
+ * @param {string} markup - The desired markup.
+ * @returns {MorphResult} How many inserted subtrees had their scripts neutralised.
+ * @example
+ * const { inertScriptSubtrees } = morphInto(shadowRoot, '<h1>Hello</h1>')
+ */
+export declare function morphInto(root: ParentNode & Node, markup: string): MorphResult;
+export {};
+//# sourceMappingURL=morph.d.ts.map

package/dist/experience/morph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph.d.ts","sourceRoot":"","sources":["../../src/experience/morph.ts"],"names":[],"mappings":"AAmBA,8DAA8D;AAC9D,UAAU,WAAW;IACnB;;;;;OAKG;IACH,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAuHD;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,CAO9E"}

package/dist/experience/morph.js

@@ -0,0 +1 @@
+import{PICKED_SCRIPT_TYPE as e}from"@picked/client";var t=`data-picked-hydrated`;function n(t){let n=t.querySelectorAll(`script`),r=t.tagName===`SCRIPT`;if(n.length===0&&!r)return!1;r&&t.setAttribute(`type`,e);for(let t of Array.from(n))t.setAttribute(`type`,e);return!0}function r(e,t,r){let i=t.importNode(e,!0);return i instanceof Element&&n(i)&&(r.inertScriptSubtrees+=1),i}function i(e,n){for(let t of Array.from(n.attributes))e.getAttribute(t.name)!==t.value&&e.setAttribute(t.name,t.value);for(let r of Array.from(e.attributes))r.name!==t&&(n.hasAttribute(r.name)||e.removeAttribute(r.name))}function a(e,t){return e.nodeType===t.nodeType&&e.nodeName===t.nodeName}function o(e,t,n,s){let c=Array.from(e.childNodes),l=Array.from(t.childNodes);for(let[t,u]of l.entries()){let l=c[t];if(!l){e.appendChild(r(u,n,s));continue}if(!a(l,u)){e.replaceChild(r(u,n,s),l);continue}if(l instanceof Element&&u instanceof Element){i(l,u),o(l,u,n,s);continue}l.nodeValue!==u.nodeValue&&(l.nodeValue=u.nodeValue)}for(let e of c.slice(l.length))e.remove()}function s(e,t){let n={inertScriptSubtrees:0},r=e.ownerDocument??globalThis.document,i=r.createElement(`template`);return i.innerHTML=t,o(e,i.content,r,n),n}export{s as morphInto};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/react",
-  "version": "0.0.1-dev.1785287094311",
+  "version": "0.0.1-dev.1785305085063",
   "devDependencies": {
     "@picked/client": "workspace:*",
     "@repo/eslint-config": "workspace:*",
@@ -85,7 +85,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1785287094311",
+    "@picked/client": "0.0.1-dev.1785305085063",
     "effector": "^23.3.0",
     "react": "19.2.2",
     "react-dom": "19.2.2"