@poveste/plugin-svelte 0.5.2 → 0.6.0

package/dist/client/MountVariant.js

@@ -1 +1 @@
-import{afterUpdate as e,getContext as t}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as n from"svelte/internal/client";n.from_html(`<!> <!>`,1);function r(r,i){let a=n.sanitize_slots(i);n.push(i,!1);let o=n.prop(i,`source`,8,null),s=n.prop(i,`responsiveDisabled`,8,!1),c=n.prop(i,`autoPropsDisabled`,8,!1),l=n.prop(i,`setupApp`,8,null),u=n.prop(i,`implicit`,8,!1),d=t(`__pvtStory`),f=t(`__pvtIndex`),p=t(`__pvtSlots`),m=d.variants[f.value];f.value++;function h(){Object.assign(m,{slots:()=>({default:!0,controls:a.controls??p.controls}),source:o(),responsiveDisabled:s(),autoPropsDisabled:c(),setupApp:l(),configReady:!0}),!u()&&!d.meta?.hasVariantChildComponents&&(d.meta=d.meta||{},Object.assign(d.meta,{hasVariantChildComponents:!0}))}h(),e(()=>{h()}),n.init();var g=n.comment(),_=n.first_child(g);n.if(_,e=>{}),n.append(r,g),n.pop()}export{r as default};
+import{afterUpdate as e,getContext as t,onDestroy as n}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as r from"svelte/internal/client";r.from_html(`<!> <!>`,1);function i(i,a){let o=r.sanitize_slots(a);r.push(a,!1);let s=r.prop(a,`source`,8,null),c=r.prop(a,`responsiveDisabled`,8,!1),l=r.prop(a,`autoPropsDisabled`,8,!1),u=r.prop(a,`setupApp`,8,null),d=r.prop(a,`implicit`,8,!1),f=t(`__pvtStory`),p=t(`__pvtIndex`),m=t(`__pvtSlots`),h=t(`__pvtTargetVariantId`)??null,g=f.variants[p.value];p.value++;let _=!1;function v(){Object.assign(g,{slots:()=>({default:!0,controls:o.controls??m.controls}),source:s(),responsiveDisabled:c(),autoPropsDisabled:l(),setupApp:u(),configReady:!0}),!d()&&!f.meta?.hasVariantChildComponents&&(f.meta=f.meta||{},Object.assign(f.meta,{hasVariantChildComponents:!0}))}function y(){_||(_=!0,v())}if(h===null)y();else{let e=h.subscribe(e=>{(e===null||g?.id===e)&&y()});n(e)}e(()=>{_&&v()}),r.init();var b=r.comment(),x=r.first_child(b);r.if(x,e=>{}),r.append(i,b),r.pop()}export{i as default};

package/dist/client/MountVariant.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { afterUpdate, getContext } from 'svelte'
+  import { afterUpdate, getContext, onDestroy } from 'svelte'
 
   export let source = null
   export let responsiveDisabled = false
@@ -10,10 +10,19 @@
   const story = getContext('__pvtStory')
   const index = getContext('__pvtIndex')
   const storySlots = getContext('__pvtSlots')
+  // A store: a sandbox sets it to the one variant this realm serves and changes
+  // it when the realm is retargeted (#240). Null in the app realm, which keeps
+  // every variant's bookkeeping.
+  const targetVariantId = getContext('__pvtTargetVariantId') ?? null
 
   const variant = story.variants[index.value]
   index.value++
 
+  // A sandbox mounts the story to serve one variant. The others still get an
+  // instance — that is the story's `{#each}` — but their slot/config sync and
+  // the afterUpdate re-run are work for a variant this realm never renders (#197).
+  let isTarget = false
+
   function updateVariant() {
     Object.assign(variant, {
       slots: () => ({
@@ -34,10 +43,28 @@
       })
     }
   }
-  updateVariant()
 
-  afterUpdate(() => {
+  function becomeTarget() {
+    if (isTarget) return
+    isTarget = true
     updateVariant()
+  }
+
+  if (targetVariantId === null) {
+    becomeTarget()
+  }
+  else {
+    // Subscribed rather than `$`-read: the subscriber runs as the store is
+    // set, so the variant has registered before the render pass that follows
+    // the retarget mounts it.
+    const unsubscribe = targetVariantId.subscribe((id) => {
+      if (id === null || variant?.id === id) becomeTarget()
+    })
+    onDestroy(unsubscribe)
+  }
+
+  afterUpdate(() => {
+    if (isTarget) updateVariant()
   })
 </script>
 

package/dist/client/RenderVariant.js

@@ -1 +1 @@
-import{watch as e}from"@poveste/vendors/vue";import{getContext as t,onDestroy as n}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as r from"svelte/internal/client";var i=r.from_html(`<!> <!>`,1);function a(a,o){let s=r.sanitize_slots(o);r.push(o,!1);let c=t(`__pvtStory`),l=r.mutable_source(t(`__pvtVariant`)),u=t(`__pvtSlot`),d=t(`__pvtIndex`),f=c.variants[d.value];d.value++;let p=r.get(l).id===f.id,m=r.prop(o,`source`,8,null),h=r.prop(o,`initState`,8,null);h()&&p&&!r.get(l).__pvtStateSeeded&&(r.mutate(l,r.get(l).__pvtStateSeeded=!0),r.mutate(l,r.get(l).state={...r.get(l).state,...h()()})),!h()&&p&&u===`controls`&&s.controls&&!r.get(l).__pvtStateWarned&&(r.mutate(l,r.get(l).__pvtStateWarned=!0),console.error([`[poveste] Variant "${f?.title??f?.id}" has a controls slot but no \`initState\`.`,`Controls will render and appear to work, but their edits cannot reach the story:`,`the story is mounted separately for each slot, so a component-local variable is not shared.`,"Pass `initState` and read state from the snippet —",`https://poveste.dev/guide/migration-from-histoire.html#svelte-story-state-moves-to-initstate`].join(` `)));let g=r.mutable_source(r.get(l)?.state),_=e(()=>r.get(l)?.state,()=>{r.set(g,r.get(l)?.state)},{deep:!0});n(_),r.legacy_pre_effect(()=>(r.deep_read_state(m()),r.get(g),r.get(l)),()=>{let e=typeof m()==`function`?m()(r.get(g)):m();e!=null&&Object.assign(r.get(l),{source:e})}),r.legacy_pre_effect_reset(),r.init();var v=r.comment(),y=r.first_child(v),b=e=>{var t=i(),n=r.first_child(t),a=e=>{var t=r.comment(),n=r.first_child(t);r.slot(n,o,`default`,{get state(){return r.get(g)}},null),r.append(e,t)};r.if(n,e=>{u==="default"&&e(a)});var s=r.sibling(n,2),c=e=>{var t=r.comment(),n=r.first_child(t);r.slot(n,o,`controls`,{get state(){return r.get(g)}},null),r.append(e,t)};r.if(s,e=>{u===`controls`&&e(c)}),r.append(e,t)};r.if(y,e=>{p&&e(b)}),r.append(a,v),r.pop()}export{a as default};
+import{watch as e}from"@poveste/vendors/vue";import{getContext as t,onDestroy as n}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as r from"svelte/internal/client";var i=r.from_html(`<!> <!>`,1);function a(a,o){let s=r.sanitize_slots(o);r.push(o,!1);let c=t(`__pvtStory`),l=r.mutable_source(t(`__pvtVariant`)),u=t(`__pvtSlot`),d=t(`__pvtIndex`),f=c.variants[d.value];d.value++;let p=r.get(l).id===f.id,m=r.prop(o,`source`,8,null),h=r.prop(o,`initState`,8,null);h()&&p&&!r.get(l).__pvtStateSeeded&&(r.mutate(l,r.get(l).__pvtStateSeeded=!0),r.mutate(l,r.get(l).state={...r.get(l).state,...h()()})),!h()&&p&&u===`controls`&&s.controls&&!r.get(l).__pvtStateWarned&&(r.mutate(l,r.get(l).__pvtStateWarned=!0),console.error([`[poveste] Variant "${f?.title??f?.id}" has a controls slot but no \`initState\`.`,`Controls will render and appear to work, but their edits cannot reach the story:`,`the story is mounted separately for each slot, so a component-local variable is not shared.`,"Pass `initState` and read state from the snippet —",`https://poveste.dev/guide/migration-from-histoire.html#svelte-story-state-moves-to-initstate`].join(` `)));let g=r.mutable_source(r.get(l)?.state),_=()=>{};p&&(_=e(()=>r.get(l)?.state,()=>{r.set(g,r.get(l)?.state)},{deep:!0})),n(()=>_()),r.legacy_pre_effect(()=>(r.deep_read_state(m()),r.get(g),r.get(l)),()=>{if(p){let e=typeof m()==`function`?m()(r.get(g)):m();e!=null&&Object.assign(r.get(l),{source:e})}}),r.legacy_pre_effect_reset(),r.init();var v=r.comment(),y=r.first_child(v),b=e=>{var t=i(),n=r.first_child(t),a=e=>{var t=r.comment(),n=r.first_child(t);r.slot(n,o,`default`,{get state(){return r.get(g)}},null),r.append(e,t)};r.if(n,e=>{u==="default"&&e(a)});var s=r.sibling(n,2),c=e=>{var t=r.comment(),n=r.first_child(t);r.slot(n,o,`controls`,{get state(){return r.get(g)}},null),r.append(e,t)};r.if(s,e=>{u===`controls`&&e(c)}),r.append(e,t)};r.if(y,e=>{p&&e(b)}),r.append(a,v),r.pop()}export{a as default};

package/dist/client/RenderVariant.svelte

@@ -42,17 +42,28 @@
 
   let state = currentVariant?.state
 
-  const stopWatchingState = _watch(() => currentVariant?.state, () => {
-    state = currentVariant?.state
-  }, { deep: true })
+  // Only the variant that renders watches. The story's `{#each}` instantiates
+  // one of these per variant in every realm, and a deep Vue watcher per
+  // instance on the same state object was a thousand watchers to render one
+  // button (#197). The others render nothing, so they have nothing to update.
+  let stopWatchingState = () => {}
+  if (shouldRender) {
+    stopWatchingState = _watch(() => currentVariant?.state, () => {
+      state = currentVariant?.state
+    }, { deep: true })
+  }
 
-  onDestroy(stopWatchingState)
+  onDestroy(() => stopWatchingState())
 
   // `source` may be a function of the state. Story props are evaluated in the
   // component's script, where the slot's `state` is not in scope, so a string
   // literal cannot reflect what the controls are doing — which is most of the
   // point of the source panel (#81).
-  $: {
+  //
+  // Guarded by `shouldRender`: this is *this* variant's `source`, and it goes
+  // onto `currentVariant` — so an unguarded instance for another variant would
+  // overwrite the rendered variant's source with its own.
+  $: if (shouldRender) {
     const resolvedSource = typeof source === 'function' ? source(state) : source
     if (resolvedSource != null) {
       Object.assign(currentVariant, {

package/dist/client/mount.d.ts

@@ -5,6 +5,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: _PropType<Story>;
         required: true;
     };
+    targetVariantId: {
+        type: StringConstructor;
+        default: any;
+    };
 }>, {
     el: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -12,5 +16,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: _PropType<Story>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    targetVariantId: {
+        type: StringConstructor;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    targetVariantId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/client/mount.js

@@ -1 +1 @@
-import{callSetupFunctions as e,mountSvelteComponent as t}from"../util/svelte.js";import n from"./MountVariant.svelte";import r from"./MountStory.svelte";import i from"./Stub.svelte";import{components as a}from"@poveste/controls";import{defineComponent as o,h as s,onMounted as c,onUnmounted as l,ref as u,watch as d}from"@poveste/vendors/vue";import*as f from"virtual:$poveste-generated-global-setup";import*as p from"virtual:$poveste-setup";var m=o({name:`MountStory`,props:{story:{type:Object,required:!0}},setup(i){let a=u(),o,s,m=null;async function g(){s=document.createElement(`div`),a.value.appendChild(s);let c=await t(i.story.file.component,{target:s,props:{Hst:{Story:r,Variant:n,...h()}},context:new Map(Object.entries({__pvtStory:i.story}))},`client`);o=c.app,m=c.destroy;let l={app:o,story:i.story,variant:null};await e(f,p,l)}function _(){m?.(),m=null,s&&=(s.parentNode?.removeChild(s),null),o=null}return d(()=>i.story.id,async()=>{_(),await g()}),c(async()=>{await g()}),l(()=>{_()}),{el:a}},render(){return s(`div`,{ref:`el`})}});function h(){let e={};for(let t in a)e[t.substring(3)]=i;return e}export{m as default};
+import{callSetupFunctions as e,mountSvelteComponent as t}from"../util/svelte.js";import n from"./MountVariant.svelte";import r from"./MountStory.svelte";import i from"./Stub.svelte";import{components as a}from"@poveste/controls";import{defineComponent as o,h as s,onMounted as c,onUnmounted as l,ref as u,watch as d}from"@poveste/vendors/vue";import{writable as f}from"svelte/store";import*as p from"virtual:$poveste-generated-global-setup";import*as m from"virtual:$poveste-setup";var h=o({name:`MountStory`,props:{story:{type:Object,required:!0},targetVariantId:{type:String,default:null}},setup(i){let a=u(),o,s,h=null,_=f(i.targetVariantId);d(()=>i.targetVariantId,e=>{_.set(e)});async function v(){s=document.createElement(`div`),a.value.appendChild(s);let c=await t(i.story.file.component,{target:s,props:{Hst:{Story:r,Variant:n,...g()}},context:new Map(Object.entries({__pvtStory:i.story,__pvtTargetVariantId:_}))},`client`);o=c.app,h=c.destroy;let l={app:o,story:i.story,variant:null};await e(p,m,l)}function y(){h?.(),h=null,s&&=(s.parentNode?.removeChild(s),null),o=null}return d(()=>i.story.id,async()=>{y(),await v()}),c(async()=>{await v()}),l(()=>{y()}),{el:a}},render(){return s(`div`,{ref:`el`})}});function g(){let e={};for(let t in a)e[t.substring(3)]=i;return e}export{h as default};

package/dist/collect/index.js

@@ -1 +1 @@
-import{callSetupFunctions as e,mountSvelteComponent as t}from"../util/svelte.js";import n from"./Story.svelte";import r from"./Variant.svelte";import*as i from"virtual:$poveste-generated-global-setup";import*as a from"virtual:$poveste-setup";import{tick as o}from"svelte";async function s({file:s,el:c,storyData:l}){let{default:u}=await import(/* @vite-ignore */s.moduleId),d=await t(u,{target:c,props:{Hst:{Story:n,Variant:r}},context:new Map(Object.entries({__pvtAddStory(e){l.push(e)},__pvtStoryFile:s}))},`client`),f={app:d.app,story:null,variant:null};await e(i,a,f),await o(),l[0]?.variants.length||l[0].variants.push({id:`_default`,title:`default`}),d.destroy()}export{s as run};
+import{callSetupFunctions as e,mountSvelteComponent as t}from"../util/svelte.js";import n from"./Story.svelte";import r from"./Variant.svelte";import*as i from"virtual:$poveste-generated-global-setup";import*as a from"virtual:$poveste-setup";import{tick as o}from"svelte";async function s({file:s,el:c,storyData:l}){let{default:u}=await import(/* @vite-ignore */s.moduleId),d=await t(u,{target:c,props:{Hst:{Story:n,Variant:r}},context:new Map(Object.entries({__pvtAddStory(e){l.push(e)},__pvtStoryFile:s}))},`client`),f={app:d.app,story:null,variant:null};if(await e(i,a,f),await o(),!l[0]){d.destroy();return}l[0].variants.length||l[0].variants.push({id:`_default`,title:`default`}),d.destroy()}export{s as run};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/plugin-svelte",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Poveste plugin for Svelte 5 and SvelteKit support",
   "author": {
     "name": "Sorin Gitlan"
@@ -28,7 +28,7 @@
     "@sveltejs/kit": "^2.53.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "svelte": "^5.46.4",
-    "poveste": "^0.5.2"
+    "poveste": "^0.6.0"
   },
   "peerDependenciesMeta": {
     "@sveltejs/kit": {
@@ -40,9 +40,9 @@
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
     "pathe": "^1.1.2",
-    "@poveste/controls": "^0.5.2",
-    "@poveste/vendors": "^0.5.2",
-    "@poveste/shared": "^0.5.2"
+    "@poveste/controls": "^0.6.0",
+    "@poveste/shared": "^0.6.0",
+    "@poveste/vendors": "^0.6.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -54,7 +54,7 @@
     "svelte-preprocess": "^6.0.3",
     "typescript": "5.6.3",
     "vite": "^8.0.0",
-    "poveste": "0.5.2"
+    "poveste": "0.6.0"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",

package/src/client/MountVariant.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { afterUpdate, getContext } from 'svelte'
+  import { afterUpdate, getContext, onDestroy } from 'svelte'
 
   export let source = null
   export let responsiveDisabled = false
@@ -10,10 +10,19 @@
   const story = getContext('__pvtStory')
   const index = getContext('__pvtIndex')
   const storySlots = getContext('__pvtSlots')
+  // A store: a sandbox sets it to the one variant this realm serves and changes
+  // it when the realm is retargeted (#240). Null in the app realm, which keeps
+  // every variant's bookkeeping.
+  const targetVariantId = getContext('__pvtTargetVariantId') ?? null
 
   const variant = story.variants[index.value]
   index.value++
 
+  // A sandbox mounts the story to serve one variant. The others still get an
+  // instance — that is the story's `{#each}` — but their slot/config sync and
+  // the afterUpdate re-run are work for a variant this realm never renders (#197).
+  let isTarget = false
+
   function updateVariant() {
     Object.assign(variant, {
       slots: () => ({
@@ -34,10 +43,28 @@
       })
     }
   }
-  updateVariant()
 
-  afterUpdate(() => {
+  function becomeTarget() {
+    if (isTarget) return
+    isTarget = true
     updateVariant()
+  }
+
+  if (targetVariantId === null) {
+    becomeTarget()
+  }
+  else {
+    // Subscribed rather than `$`-read: the subscriber runs as the store is
+    // set, so the variant has registered before the render pass that follows
+    // the retarget mounts it.
+    const unsubscribe = targetVariantId.subscribe((id) => {
+      if (id === null || variant?.id === id) becomeTarget()
+    })
+    onDestroy(unsubscribe)
+  }
+
+  afterUpdate(() => {
+    if (isTarget) updateVariant()
   })
 </script>
 

package/src/client/RenderVariant.svelte

@@ -42,17 +42,28 @@
 
   let state = currentVariant?.state
 
-  const stopWatchingState = _watch(() => currentVariant?.state, () => {
-    state = currentVariant?.state
-  }, { deep: true })
+  // Only the variant that renders watches. The story's `{#each}` instantiates
+  // one of these per variant in every realm, and a deep Vue watcher per
+  // instance on the same state object was a thousand watchers to render one
+  // button (#197). The others render nothing, so they have nothing to update.
+  let stopWatchingState = () => {}
+  if (shouldRender) {
+    stopWatchingState = _watch(() => currentVariant?.state, () => {
+      state = currentVariant?.state
+    }, { deep: true })
+  }
 
-  onDestroy(stopWatchingState)
+  onDestroy(() => stopWatchingState())
 
   // `source` may be a function of the state. Story props are evaluated in the
   // component's script, where the slot's `state` is not in scope, so a string
   // literal cannot reflect what the controls are doing — which is most of the
   // point of the source panel (#81).
-  $: {
+  //
+  // Guarded by `shouldRender`: this is *this* variant's `source`, and it goes
+  // onto `currentVariant` — so an unguarded instance for another variant would
+  // overwrite the rendered variant's source with its own.
+  $: if (shouldRender) {
     const resolvedSource = typeof source === 'function' ? source(state) : source
     if (resolvedSource != null) {
       Object.assign(currentVariant, {

package/src/client/mount.ts

@@ -12,6 +12,7 @@ import {
   ref as _ref,
   watch as _watch,
 } from '@poveste/vendors/vue'
+import { writable } from 'svelte/store'
 // @ts-expect-error virtual module id
 import * as generatedSetup from 'virtual:$poveste-generated-global-setup'
 // @ts-expect-error virtual module id
@@ -32,6 +33,14 @@ export default _defineComponent({
       type: Object as _PropType<Story>,
       required: true,
     },
+
+    // Set by a sandbox: the one variant this realm serves. The story's `{#each}`
+    // still instantiates a MountVariant per variant — that is the user's
+    // template — but the others can skip their bookkeeping (#197).
+    targetVariantId: {
+      type: String,
+      default: null,
+    },
   },
 
   setup(props) {
@@ -40,6 +49,14 @@ export default _defineComponent({
     let target: HTMLDivElement
     let destroyApp: (() => void) | null = null
 
+    // A store rather than a value, so a retargeted realm (#240) can tell the
+    // variant it now serves to register without remounting the story — the
+    // context is fixed at mount, a store subscription is not.
+    const targetVariantId = writable<string | null>(props.targetVariantId)
+    _watch(() => props.targetVariantId, (id) => {
+      targetVariantId.set(id)
+    })
+
     async function mountStory() {
       target = document.createElement('div')
       el.value.appendChild(target)
@@ -55,6 +72,7 @@ export default _defineComponent({
         },
         context: new Map(Object.entries({
           __pvtStory: props.story,
+          __pvtTargetVariantId: targetVariantId,
         })),
       }, 'client')
       app = mountedApp.app

package/src/collect/index.ts

@@ -42,7 +42,19 @@ export async function run({ file, el, storyData }: ServerRunPayload) {
 
   await tick()
 
-  if (!storyData[0]?.variants.length) {
+  // A file with no `Hst.Story` in it collects nothing, which is a thing people
+  // write — a scratch file, a component that lost its story tag in a refactor.
+  // The optional chain below used to guard only the read: with no story the
+  // condition came out true and the body then dereferenced the same `undefined`,
+  // so the collector crashed the whole build instead of skipping one file. The
+  // Vue collector warns and carries on, and the shared warning downstream
+  // (`No story found for …`) is already written for exactly this.
+  if (!storyData[0]) {
+    mountedApp.destroy()
+    return
+  }
+
+  if (!storyData[0].variants.length) {
     storyData[0].variants.push({
       id: '_default',
       title: 'default',