@poveste/plugin-svelte 0.2.1 → 0.3.0

package/dist/client/MountStory.js

@@ -1 +1 @@
-import e from"./MountVariant.svelte";import{getContext as t,setContext as n}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as r from"svelte/internal/client";import{omitInheritStoryProps as i}from"@poveste/shared";function a(a,o){let s=r.sanitize_slots(o),c=r.legacy_rest_props(o,[`children`,`$$slots`,`$$events`,`$$legacy`]),l=r.legacy_rest_props(c,[]);r.push(o,!1);let u=r.mutable_source(),d=t(`__pvtStory`);n(`__pvtIndex`,{value:0}),n(`__pvtSlots`,s),r.legacy_pre_effect(()=>i,()=>{r.set(u,Object.keys(d).filter(e=>!i.includes(e)).reduce((e,t)=>(e[t]=d[t],e),{}))}),r.legacy_pre_effect_reset(),r.init();var f=r.comment(),p=r.first_child(f),m=t=>{e(t,r.spread_props(()=>r.get(u),()=>l,{implicit:!0,children:(e,t)=>{var n=r.comment(),i=r.first_child(n);r.slot(i,o,`default`,{},null),r.append(e,n)},$$slots:{default:!0,controls:(e,t)=>{var n=r.comment(),i=r.first_child(n);r.slot(i,o,`controls`,{},null),r.append(e,n)}}}))},h=e=>{var t=r.comment(),n=r.first_child(t);r.slot(n,o,`default`,{},null),r.append(e,t)};r.if(p,e=>{r.untrack(()=>d.variants.length===1&&d.variants[0].id===`_default`)?e(m):e(h,-1)}),r.append(a,f),r.pop()}export{a as default};
+import e from"./MountVariant.svelte";import{getContext as t,setContext as n}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as r from"svelte/internal/client";import{omitInheritStoryProps as i}from"@poveste/shared";function a(a,o){let s=r.sanitize_slots(o),c=r.legacy_rest_props(o,[`children`,`$$slots`,`$$events`,`$$legacy`]),l=r.legacy_rest_props(c,[]);r.push(o,!1);let u=t(`__pvtStory`);n(`__pvtIndex`,{value:0}),n(`__pvtSlots`,s);let d=Object.keys(u).filter(e=>!i.includes(e)).reduce((e,t)=>(e[t]=u[t],e),{});r.init();var f=r.comment(),p=r.first_child(f),m=t=>{e(t,r.spread_props(()=>d,()=>l,{implicit:!0,children:(e,t)=>{var n=r.comment(),i=r.first_child(n);r.slot(i,o,`default`,{},null),r.append(e,n)},$$slots:{default:!0,controls:(e,t)=>{var n=r.comment(),i=r.first_child(n);r.slot(i,o,`controls`,{},null),r.append(e,n)}}}))},h=e=>{var t=r.comment(),n=r.first_child(t);r.slot(n,o,`default`,{},null),r.append(e,t)};r.if(p,e=>{r.untrack(()=>u.variants.length===1&&u.variants[0].id===`_default`)?e(m):e(h,-1)}),r.append(a,f),r.pop()}export{a as default};

package/dist/client/MountStory.svelte

@@ -1,17 +1,20 @@
 <script>
-import { omitInheritStoryProps } from '@poveste/shared'
-import { getContext, setContext } from 'svelte'
-import MountVariant from './MountVariant.svelte'
+  import { omitInheritStoryProps } from '@poveste/shared'
+  import { getContext, setContext } from 'svelte'
+  import MountVariant from './MountVariant.svelte'
 
-const story = getContext('__pvtStory')
-let index = { value: 0 }
-setContext('__pvtIndex', index)
-setContext('__pvtSlots', $$slots)
+  const story = getContext('__pvtStory')
+  const index = { value: 0 }
+  setContext('__pvtIndex', index)
+  setContext('__pvtSlots', $$slots)
 
-$: inheritedFromStory = Object.keys(story).filter(key => !omitInheritStoryProps.includes(key)).reduce((acc, key) => {
-  acc[key] = story[key]
-  return acc
-}, {})
+  // Not `$:`: Svelte invalidates a reactive statement when a variable it
+  // references is reassigned, and `story` is a const read from context that
+  // never is — so the statement ran exactly once whichever way it is written.
+  const inheritedFromStory = Object.keys(story).filter(key => !omitInheritStoryProps.includes(key)).reduce((acc, key) => {
+    acc[key] = story[key]
+    return acc
+  }, {})
 </script>
 
 {#if story.variants.length === 1 && story.variants[0].id === '_default'}

package/dist/client/MountVariant.svelte

@@ -1,47 +1,47 @@
 <script>
-import { afterUpdate, getContext } from 'svelte'
+  import { afterUpdate, getContext } from 'svelte'
 
-export let source = null
-export let responsiveDisabled = false
-export let autoPropsDisabled = false
-export let setupApp = null
-export let implicit = false
+  export let source = null
+  export let responsiveDisabled = false
+  export let autoPropsDisabled = false
+  export let setupApp = null
+  export let implicit = false
 
-const story = getContext('__pvtStory')
-const index = getContext('__pvtIndex')
-const storySlots = getContext('__pvtSlots')
+  const story = getContext('__pvtStory')
+  const index = getContext('__pvtIndex')
+  const storySlots = getContext('__pvtSlots')
 
-const variant = story.variants[index.value]
-index.value++
+  const variant = story.variants[index.value]
+  index.value++
 
-function updateVariant () {
-  Object.assign(variant, {
-    slots: () => ({
-      default: true,
-      controls: $$slots.controls ?? storySlots.controls,
-    }),
-    source,
-    responsiveDisabled,
-    autoPropsDisabled,
-    setupApp,
-    configReady: true,
-  })
-
-  if (!implicit && !story.meta?.hasVariantChildComponents) {
-    story.meta = story.meta || {}
-    Object.assign(story.meta, {
-      hasVariantChildComponents: true,
+  function updateVariant() {
+    Object.assign(variant, {
+      slots: () => ({
+        default: true,
+        controls: $$slots.controls ?? storySlots.controls,
+      }),
+      source,
+      responsiveDisabled,
+      autoPropsDisabled,
+      setupApp,
+      configReady: true,
     })
-  }
-}
-updateVariant()
 
-afterUpdate(() => {
+    if (!implicit && !story.meta?.hasVariantChildComponents) {
+      story.meta = story.meta || {}
+      Object.assign(story.meta, {
+        hasVariantChildComponents: true,
+      })
+    }
+  }
   updateVariant()
-})
+
+  afterUpdate(() => {
+    updateVariant()
+  })
 </script>
 
 {#if false}
-<slot />
-<slot name="controls" />
+  <slot />
+  <slot name="controls" />
 {/if}

package/dist/client/RenderStory.js

@@ -1 +1 @@
-import{getContext as e,setContext as t}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as n from"svelte/internal/client";var r=n.from_html(`<!> <!>`,1);function i(i,a){n.push(a,!1);let o=e(`__pvtStory`),s=e(`__pvtVariant`),c=e(`__pvtSlot`);t(`__pvtIndex`,{value:0});let l=n.prop(a,`source`,8,null);n.legacy_pre_effect(()=>n.deep_read_state(l()),()=>{l()!=null&&Object.assign(s,{source:l()})}),n.legacy_pre_effect_reset(),n.init();var u=r(),d=n.first_child(u),f=e=>{var t=n.comment(),r=n.first_child(t);n.slot(r,a,`controls`,{},null),n.append(e,t)};n.if(d,e=>{c===`controls`&&e(f)});var p=n.sibling(d,2),m=e=>{var t=n.comment(),r=n.first_child(t);n.slot(r,a,`default`,{},null),n.append(e,t)};n.if(p,e=>{n.untrack(()=>c===`default`||o.meta?.hasVariantChildComponents)&&e(m)}),n.append(i,u),n.pop()}export{i as default};
+import{getContext as e,setContext as t}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as n from"svelte/internal/client";var r=n.from_html(`<!> <!>`,1);function i(i,a){n.push(a,!1);let o=e(`__pvtStory`),s=e(`__pvtVariant`),c=e(`__pvtSlot`);t(`__pvtIndex`,{value:0});let l=n.prop(a,`source`,8,null);n.legacy_pre_effect(()=>n.deep_read_state(l()),()=>{l()!=null&&Object.assign(s,{source:l()})}),n.legacy_pre_effect_reset(),n.init();var u=r(),d=n.first_child(u),f=e=>{var t=n.comment(),r=n.first_child(t);n.slot(r,a,`controls`,{},null),n.append(e,t)};n.if(d,e=>{c===`controls`&&e(f)});var p=n.sibling(d,2),m=e=>{var t=n.comment(),r=n.first_child(t);n.slot(r,a,`default`,{},null),n.append(e,t)};n.if(p,e=>{n.untrack(()=>c==="default"||o.meta?.hasVariantChildComponents)&&e(m)}),n.append(i,u),n.pop()}export{i as default};

package/dist/client/RenderStory.svelte

@@ -1,22 +1,22 @@
 <script>
-import { getContext, setContext } from 'svelte'
+  import { getContext, setContext } from 'svelte'
 
-const story = getContext('__pvtStory')
-const currentVariant = getContext('__pvtVariant')
-const slotName = getContext('__pvtSlot')
+  const story = getContext('__pvtStory')
+  const currentVariant = getContext('__pvtVariant')
+  const slotName = getContext('__pvtSlot')
 
-let index = { value: 0 }
-setContext('__pvtIndex', index)
+  const index = { value: 0 }
+  setContext('__pvtIndex', index)
 
-export let source = null
+  export let source = null
 
-$: {
-  if (source != null) {
-    Object.assign(currentVariant, {
-      source,
-    })
+  $: {
+    if (source != null) {
+      Object.assign(currentVariant, {
+        source,
+      })
+    }
   }
-}
 </script>
 
 {#if slotName === 'controls'}

package/dist/client/RenderVariant.js

@@ -1 +1 @@
-import{getContext as e}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as t from"svelte/internal/client";var n=t.from_html(`<!> <!>`,1);function r(r,i){t.push(i,!1);let a=t.mutable_source(),o=e(`__pvtStory`),s=e(`__pvtVariant`),c=e(`__pvtSlot`),l=e(`__pvtIndex`),u=o.variants[l.value];l.value++;let d=t.prop(i,`source`,8,null);t.legacy_pre_effect(()=>{},()=>{t.set(a,s.id===u.id)}),t.legacy_pre_effect(()=>t.deep_read_state(d()),()=>{d()!=null&&Object.assign(s,{source:d()})}),t.legacy_pre_effect_reset(),t.init();var f=t.comment(),p=t.first_child(f),m=e=>{var r=n(),a=t.first_child(r),o=e=>{var n=t.comment(),r=t.first_child(n);t.slot(r,i,`default`,{},null),t.append(e,n)};t.if(a,e=>{c===`default`&&e(o)});var s=t.sibling(a,2),l=e=>{var n=t.comment(),r=t.first_child(n);t.slot(r,i,`controls`,{},null),t.append(e,n)};t.if(s,e=>{c===`controls`&&e(l)}),t.append(e,r)};t.if(p,e=>{t.get(a)&&e(m)}),t.append(r,f),t.pop()}export{r as default};
+import{getContext as e}from"svelte";import"svelte/internal/disclose-version";import"svelte/internal/flags/legacy";import*as t from"svelte/internal/client";var n=t.from_html(`<!> <!>`,1);function r(r,i){t.push(i,!1);let a=e(`__pvtStory`),o=e(`__pvtVariant`),s=e(`__pvtSlot`),c=e(`__pvtIndex`),l=a.variants[c.value];c.value++;let u=o.id===l.id,d=t.prop(i,`source`,8,null);t.legacy_pre_effect(()=>t.deep_read_state(d()),()=>{d()!=null&&Object.assign(o,{source:d()})}),t.legacy_pre_effect_reset(),t.init();var f=t.comment(),p=t.first_child(f),m=e=>{var r=n(),a=t.first_child(r),o=e=>{var n=t.comment(),r=t.first_child(n);t.slot(r,i,`default`,{},null),t.append(e,n)};t.if(a,e=>{s==="default"&&e(o)});var c=t.sibling(a,2),l=e=>{var n=t.comment(),r=t.first_child(n);t.slot(r,i,`controls`,{},null),t.append(e,n)};t.if(c,e=>{s===`controls`&&e(l)}),t.append(e,r)};t.if(p,e=>{u&&e(m)}),t.append(r,f),t.pop()}export{r as default};

package/dist/client/RenderVariant.svelte

@@ -1,25 +1,28 @@
 <script>
-import { getContext } from 'svelte'
+  import { getContext } from 'svelte'
 
-const story = getContext('__pvtStory')
-const currentVariant = getContext('__pvtVariant')
-const slotName = getContext('__pvtSlot')
-const index = getContext('__pvtIndex')
+  const story = getContext('__pvtStory')
+  const currentVariant = getContext('__pvtVariant')
+  const slotName = getContext('__pvtSlot')
+  const index = getContext('__pvtIndex')
 
-const variant = story.variants[index.value]
-index.value++
+  const variant = story.variants[index.value]
+  index.value++
 
-$: shouldRender = currentVariant.id === variant.id
+  // Not `$:`: Svelte invalidates a reactive statement when a variable it
+  // references is reassigned, and both of these are consts that never are —
+  // so the statement ran exactly once whichever way it is written.
+  const shouldRender = currentVariant.id === variant.id
 
-export let source = null
+  export let source = null
 
-$: {
-  if (source != null) {
-    Object.assign(currentVariant, {
-      source,
-    })
+  $: {
+    if (source != null) {
+      Object.assign(currentVariant, {
+        source,
+      })
+    }
   }
-}
 </script>
 
 {#if shouldRender}

package/dist/client/Wrap.svelte

@@ -1,61 +1,62 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte'
-import {
-  createApp as _createApp,
-  h as _h,
-  reactive as _reactive,
-} from '@poveste/vendors/vue'
+  import {
+    createApp as _createApp,
+    h as _h,
+    reactive as _reactive,
+  } from '@poveste/vendors/vue'
+  import { createEventDispatcher, onMount } from 'svelte'
 
-export let controlComponent
-export let value
+  export let controlComponent
+  export let value
 
-const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher()
 
-let el
+  let el
 
-let app
+  let app
 
-const state = _reactive({})
+  const state = _reactive({})
 
-function updateState (value, attrs) {
-  Object.assign(state, {
-    value,
-    attrs,
-  })
-}
-
-onMount(() => {
-  updateState(value, $$restProps)
-
-  app = _createApp({
-    render () {
-      const finalListeners = {}
-      if (controlComponent.emits) {
-        for (const k in controlComponent.emits) {
-          const key = Array.isArray(controlComponent.emits) ? controlComponent.emits[k] : k
-          const finalKey = key === 'input' ? 'update:modelValue' : key
-          finalListeners[`on${finalKey.charAt(0).toUpperCase()}${finalKey.substring(1)}`] = (...args) => {
-            if (key === 'update:modelValue') {
-              value = args[0]
-            } else {
-              dispatch(key, ...args)
+  function updateState(value, attrs) {
+    Object.assign(state, {
+      value,
+      attrs,
+    })
+  }
+
+  onMount(() => {
+    updateState(value, $$restProps)
+
+    app = _createApp({
+      render() {
+        const finalListeners = {}
+        if (controlComponent.emits) {
+          for (const k in controlComponent.emits) {
+            const key = Array.isArray(controlComponent.emits) ? controlComponent.emits[k] : k
+            const finalKey = key === 'input' ? 'update:modelValue' : key
+            finalListeners[`on${finalKey.charAt(0).toUpperCase()}${finalKey.substring(1)}`] = (...args) => {
+              if (key === 'update:modelValue') {
+                value = args[0]
+              }
+              else {
+                dispatch(key, ...args)
+              }
             }
           }
         }
-      }
-
-      return _h(controlComponent, {
-        modelValue: value,
-        ...state.attrs,
-        ...finalListeners,
-        key: 'component',
-      })
-    },
+
+        return _h(controlComponent, {
+          modelValue: value,
+          ...state.attrs,
+          ...finalListeners,
+          key: 'component',
+        })
+      },
+    })
+    app.mount(el)
   })
-  app.mount(el)
-})
 
-$: updateState(value, $$restProps)
+  $: updateState(value, $$restProps)
 </script>
 
 <div bind:this={el}>

package/dist/client/mount.d.ts

@@ -1,16 +1,16 @@
 import type { Story } from '@poveste/shared';
 import type { PropType as _PropType } from '@poveste/vendors/vue';
-declare const _default: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     story: {
         type: _PropType<Story>;
         required: true;
     };
 }>, {
-    el: import("@vue/reactivity").Ref<HTMLDivElement, HTMLDivElement>;
-}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    el: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     story: {
         type: _PropType<Story>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, 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,await e(f,p,{app:o,story:i.story,variant:null})}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*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};

package/dist/client/render.d.ts

@@ -1,6 +1,6 @@
 import type { Story, Variant } from '@poveste/shared';
 import type { PropType as _PropType } from '@poveste/vendors/vue';
-declare const _default: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     variant: {
         type: _PropType<Variant>;
         required: true;
@@ -14,8 +14,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<import("@vue
         default: string;
     };
 }>, {
-    el: import("@vue/reactivity").Ref<HTMLDivElement, HTMLDivElement>;
-}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    el: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     variant: {
         type: _PropType<Variant>;
         required: true;
@@ -30,5 +30,5 @@ declare const _default: import("@vue/runtime-core").DefineComponent<import("@vue
     };
 }>> & Readonly<{}>, {
     slotName: string;
-}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/client/render.js

@@ -1 +1 @@
-import{callSetupFunctions as e,createWrappedComponent as t,getLegacyStateApi as n,mountSvelteComponent as r}from"../util/svelte.js";import i from"./RenderStory.svelte";import a from"./RenderVariant.svelte";import{syncState as o}from"./util.js";import s from"./Wrap.svelte";import{components as c}from"@poveste/controls";import{defineComponent as l,h as u,onMounted as d,onUnmounted as f,ref as p,watch as m}from"@poveste/vendors/vue";import*as h from"virtual:$poveste-generated-global-setup";import*as g from"virtual:$poveste-setup";var _=l({name:`RenderStory`,props:{variant:{type:Object,required:!0},story:{type:Object,required:!0},slotName:{type:String,default:`default`}},setup(t,{emit:s}){let c=p(),l,u,_=[];function y(e,t){document.addEventListener(e,t);let n=()=>document.removeEventListener(e,t);return _.push(n),{off:n}}async function b(){u=document.createElement(`div`),c.value.appendChild(u);let d=[],{off:f}=y(`SvelteRegisterComponent`,e=>{let{component:t}=e.detail;d.push(t)}),p=await r(t.story.file.component,{target:u,props:{Hst:{Story:i,Variant:a,...v()}},context:new Map(Object.entries({__pvtStory:t.story,__pvtVariant:t.variant,__pvtSlot:t.slotName}))},`client`);l=p.app,_.push(()=>{p.destroy()});let m=d.find(e=>e.$$&&l?.$$&&e.$$===l.$$)??l;f(),d=[];function b(){let e=m?.$replace;e&&(m.$replace=(...t)=>{let n=e.apply(m,t);return m=n??m,n})}b();let x=n(m);if(x){let{apply:e,stop:n}=o(t.variant.state,e=>{x.injectState(e)});_.push(n);let r,i=()=>{e(x.captureState()),r=requestAnimationFrame(i)};r=requestAnimationFrame(i),_.push(()=>{cancelAnimationFrame(r)}),e(x.captureState())}await e(h,g,{app:l,story:t.story,variant:t.variant},t.variant.setupApp),s(`ready`)}function x(){_.forEach(e=>e()),_=[],u&&=(u.parentNode?.removeChild(u),null),l=null}return m(()=>t.story.id,async()=>{x(),await b()}),d(async()=>{await b()}),f(()=>{x()}),{el:c}},render(){return u(`div`,{ref:`el`})}});function v(){let e={};for(let t in c)e[t.substring(3)]=y(c[t]);return e}function y(e){return t(s,e)}export{_ as default};
+import{callSetupFunctions as e,createWrappedComponent as t,getLegacyStateApi as n,mountSvelteComponent as r}from"../util/svelte.js";import i from"./RenderStory.svelte";import a from"./RenderVariant.svelte";import{syncState as o}from"./util.js";import s from"./Wrap.svelte";import{components as c}from"@poveste/controls";import{defineComponent as l,h as u,onMounted as d,onUnmounted as f,ref as p,watch as m}from"@poveste/vendors/vue";import*as h from"virtual:$poveste-generated-global-setup";import*as g from"virtual:$poveste-setup";var _=l({name:`RenderStory`,props:{variant:{type:Object,required:!0},story:{type:Object,required:!0},slotName:{type:String,default:`default`}},setup(t,{emit:s}){let c=p(),l,u,_=[];function y(e,t){document.addEventListener(e,t);let n=()=>document.removeEventListener(e,t);return _.push(n),{off:n}}async function b(){u=document.createElement(`div`),c.value.appendChild(u);let d=[],{off:f}=y(`SvelteRegisterComponent`,e=>{let{component:t}=e.detail;d.push(t)}),p=await r(t.story.file.component,{target:u,props:{Hst:{Story:i,Variant:a,...v()}},context:new Map(Object.entries({__pvtStory:t.story,__pvtVariant:t.variant,__pvtSlot:t.slotName}))},`client`);l=p.app,_.push(()=>{p.destroy()});let m=d.find(e=>e.$$&&l?.$$&&e.$$===l.$$)??l;f(),d=[];function b(){let e=m?.$replace;e&&(m.$replace=(...t)=>{let n=e.apply(m,t);return m=n??m,n})}b();let x=n(m);if(x){let{apply:e,stop:n}=o(t.variant.state,e=>{x.injectState(e)});_.push(n);let r,i=()=>{e(x.captureState()),r=requestAnimationFrame(i)};r=requestAnimationFrame(i),_.push(()=>{cancelAnimationFrame(r)}),e(x.captureState())}let S={app:l,story:t.story,variant:t.variant};await e(h,g,S,t.variant.setupApp),s(`ready`)}function x(){_.forEach(e=>e()),_=[],u&&=(u.parentNode?.removeChild(u),null),l=null}return m(()=>t.story.id,async()=>{x(),await b()}),d(async()=>{await b()}),f(()=>{x()}),{el:c}},render(){return u(`div`,{ref:`el`})}});function v(){let e={};for(let t in c)e[t.substring(3)]=y(c[t]);return e}function y(e){return t(s,e)}export{_ as default};

package/dist/client/util.js

@@ -1 +1 @@
-import{watch as e}from"@poveste/vendors/vue";import{applyState as t,clone as n}from"@poveste/shared";function r(e){let t={};for(let n in e){if(n===`Hst`)continue;let r=e[n];typeof r!=`function`&&r!==void 0&&(r instanceof HTMLElement||typeof r==`object`&&r?.$$||(t[n]=r))}return t}function i(i,a){let o=!1,s=e(()=>i,e=>{e!=null&&(o?o=!1:(o=!0,a(r(e))))},{deep:!0,immediate:!0});function c(e){e!=null&&(o?o=!1:(o=!0,t(i,n(r(e)))))}return{apply:c,stop(){s()}}}export{i as syncState};
+import{watch as e}from"@poveste/vendors/vue";import{applyState as t,clone as n}from"@poveste/shared";function r(e){let t={};for(let n in e){if(n===`Hst`)continue;let r=e[n];typeof r!=`function`&&r!==void 0&&(r instanceof HTMLElement||typeof r==`object`&&r?.$$||(t[n]=r))}return t}function i(i,a){let o=!1,s=e(()=>i,e=>{if(e!=null){if(o){o=!1;return}o=!0,a(r(e))}},{deep:!0,immediate:!0});function c(e){if(e!=null){if(o){o=!1;return}o=t(i,n(r(e)))}}return{apply:c,stop(){s()}}}export{i as syncState};

package/dist/collect/Story.svelte

@@ -1,34 +1,34 @@
 <script>
-import { getContext, setContext } from 'svelte'
+  import { getContext, setContext } from 'svelte'
 
-export let title = null
-export let id = null
-export let group = null
-export let layout = null
-export let icon = null
-export let iconColor = null
-export let docsOnly = false
+  export let title = null
+  export let id = null
+  export let group = null
+  export let layout = null
+  export let icon = null
+  export let iconColor = null
+  export let docsOnly = false
 
-const addStory = getContext('__pvtAddStory')
-const file = getContext('__pvtStoryFile')
+  const addStory = getContext('__pvtAddStory')
+  const file = getContext('__pvtStoryFile')
 
-const story = {
-  id: id ?? file.id,
-  title: title ?? file.fileName,
-  group,
-  layout,
-  icon,
-  iconColor,
-  docsOnly,
-  variants: [],
-}
+  const story = {
+    id: id ?? file.id,
+    title: title ?? file.fileName,
+    group,
+    layout,
+    icon,
+    iconColor,
+    docsOnly,
+    variants: [],
+  }
 
-addStory(story)
+  addStory(story)
 
-setContext('__pvtStory', story)
-setContext('__pvtAddVariant', (variant) => {
-  story.variants.push(variant)
-})
+  setContext('__pvtStory', story)
+  setContext('__pvtAddVariant', (variant) => {
+    story.variants.push(variant)
+  })
 </script>
 
 <slot />

package/dist/collect/Variant.svelte

@@ -1,24 +1,24 @@
 <script>
-import { getContext } from 'svelte'
+  import { getContext } from 'svelte'
 
-export let title = 'untitled'
-export let id = null
-export let icon = null
-export let iconColor = null
+  export let title = 'untitled'
+  export let id = null
+  export let icon = null
+  export let iconColor = null
 
-const story = getContext('__pvtStory')
-const addVariant = getContext('__pvtAddVariant')
+  const story = getContext('__pvtStory')
+  const addVariant = getContext('__pvtAddVariant')
 
-function generateId () {
-  return `${story.id}-${story.variants.length}`
-}
+  function generateId() {
+    return `${story.id}-${story.variants.length}`
+  }
 
-const variant = {
-  id: id ?? generateId(),
-  title,
-  icon,
-  iconColor,
-}
+  const variant = {
+    id: id ?? generateId(),
+    title,
+    icon,
+    iconColor,
+  }
 
-addVariant(variant)
+  addVariant(variant)
 </script>

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`);await e(i,a,{app:d.app,story:null,variant:null}),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};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};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@poveste/plugin-svelte",
   "type": "module",
-  "version": "0.2.1",
-  "description": "Poveste plugin for Svelte 4/5 and SvelteKit support",
+  "version": "0.3.0",
+  "description": "Poveste plugin for Svelte 5 and SvelteKit support",
   "author": {
     "name": "Sorin Gitlan"
   },
@@ -25,17 +25,17 @@
   "module": "./dist/index.node.js",
   "types": "./dist/index.node.d.ts",
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0",
-    "poveste": "^0.2.1"
+    "svelte": "^5.0.0",
+    "poveste": "^0.3.0"
   },
   "dependencies": {
     "change-case": "^5.4.4",
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
     "pathe": "^1.1.2",
-    "@poveste/controls": "^0.2.1",
-    "@poveste/shared": "^0.2.1",
-    "@poveste/vendors": "^0.2.1"
+    "@poveste/controls": "^0.3.0",
+    "@poveste/shared": "^0.3.0",
+    "@poveste/vendors": "^0.3.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -47,7 +47,7 @@
     "svelte-preprocess": "^6.0.3",
     "typescript": "5.6.3",
     "vite": "^8.0.0",
-    "poveste": "0.2.1"
+    "poveste": "0.3.0"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",

package/src/client/MountStory.svelte

@@ -1,17 +1,20 @@
 <script>
-import { omitInheritStoryProps } from '@poveste/shared'
-import { getContext, setContext } from 'svelte'
-import MountVariant from './MountVariant.svelte'
+  import { omitInheritStoryProps } from '@poveste/shared'
+  import { getContext, setContext } from 'svelte'
+  import MountVariant from './MountVariant.svelte'
 
-const story = getContext('__pvtStory')
-let index = { value: 0 }
-setContext('__pvtIndex', index)
-setContext('__pvtSlots', $$slots)
+  const story = getContext('__pvtStory')
+  const index = { value: 0 }
+  setContext('__pvtIndex', index)
+  setContext('__pvtSlots', $$slots)
 
-$: inheritedFromStory = Object.keys(story).filter(key => !omitInheritStoryProps.includes(key)).reduce((acc, key) => {
-  acc[key] = story[key]
-  return acc
-}, {})
+  // Not `$:`: Svelte invalidates a reactive statement when a variable it
+  // references is reassigned, and `story` is a const read from context that
+  // never is — so the statement ran exactly once whichever way it is written.
+  const inheritedFromStory = Object.keys(story).filter(key => !omitInheritStoryProps.includes(key)).reduce((acc, key) => {
+    acc[key] = story[key]
+    return acc
+  }, {})
 </script>
 
 {#if story.variants.length === 1 && story.variants[0].id === '_default'}

package/src/client/MountVariant.svelte

@@ -1,47 +1,47 @@
 <script>
-import { afterUpdate, getContext } from 'svelte'
+  import { afterUpdate, getContext } from 'svelte'
 
-export let source = null
-export let responsiveDisabled = false
-export let autoPropsDisabled = false
-export let setupApp = null
-export let implicit = false
+  export let source = null
+  export let responsiveDisabled = false
+  export let autoPropsDisabled = false
+  export let setupApp = null
+  export let implicit = false
 
-const story = getContext('__pvtStory')
-const index = getContext('__pvtIndex')
-const storySlots = getContext('__pvtSlots')
+  const story = getContext('__pvtStory')
+  const index = getContext('__pvtIndex')
+  const storySlots = getContext('__pvtSlots')
 
-const variant = story.variants[index.value]
-index.value++
+  const variant = story.variants[index.value]
+  index.value++
 
-function updateVariant () {
-  Object.assign(variant, {
-    slots: () => ({
-      default: true,
-      controls: $$slots.controls ?? storySlots.controls,
-    }),
-    source,
-    responsiveDisabled,
-    autoPropsDisabled,
-    setupApp,
-    configReady: true,
-  })
-
-  if (!implicit && !story.meta?.hasVariantChildComponents) {
-    story.meta = story.meta || {}
-    Object.assign(story.meta, {
-      hasVariantChildComponents: true,
+  function updateVariant() {
+    Object.assign(variant, {
+      slots: () => ({
+        default: true,
+        controls: $$slots.controls ?? storySlots.controls,
+      }),
+      source,
+      responsiveDisabled,
+      autoPropsDisabled,
+      setupApp,
+      configReady: true,
     })
-  }
-}
-updateVariant()
 
-afterUpdate(() => {
+    if (!implicit && !story.meta?.hasVariantChildComponents) {
+      story.meta = story.meta || {}
+      Object.assign(story.meta, {
+        hasVariantChildComponents: true,
+      })
+    }
+  }
   updateVariant()
-})
+
+  afterUpdate(() => {
+    updateVariant()
+  })
 </script>
 
 {#if false}
-<slot />
-<slot name="controls" />
+  <slot />
+  <slot name="controls" />
 {/if}

package/src/client/RenderStory.svelte

@@ -1,22 +1,22 @@
 <script>
-import { getContext, setContext } from 'svelte'
+  import { getContext, setContext } from 'svelte'
 
-const story = getContext('__pvtStory')
-const currentVariant = getContext('__pvtVariant')
-const slotName = getContext('__pvtSlot')
+  const story = getContext('__pvtStory')
+  const currentVariant = getContext('__pvtVariant')
+  const slotName = getContext('__pvtSlot')
 
-let index = { value: 0 }
-setContext('__pvtIndex', index)
+  const index = { value: 0 }
+  setContext('__pvtIndex', index)
 
-export let source = null
+  export let source = null
 
-$: {
-  if (source != null) {
-    Object.assign(currentVariant, {
-      source,
-    })
+  $: {
+    if (source != null) {
+      Object.assign(currentVariant, {
+        source,
+      })
+    }
   }
-}
 </script>
 
 {#if slotName === 'controls'}

package/src/client/RenderVariant.svelte

@@ -1,25 +1,28 @@
 <script>
-import { getContext } from 'svelte'
+  import { getContext } from 'svelte'
 
-const story = getContext('__pvtStory')
-const currentVariant = getContext('__pvtVariant')
-const slotName = getContext('__pvtSlot')
-const index = getContext('__pvtIndex')
+  const story = getContext('__pvtStory')
+  const currentVariant = getContext('__pvtVariant')
+  const slotName = getContext('__pvtSlot')
+  const index = getContext('__pvtIndex')
 
-const variant = story.variants[index.value]
-index.value++
+  const variant = story.variants[index.value]
+  index.value++
 
-$: shouldRender = currentVariant.id === variant.id
+  // Not `$:`: Svelte invalidates a reactive statement when a variable it
+  // references is reassigned, and both of these are consts that never are —
+  // so the statement ran exactly once whichever way it is written.
+  const shouldRender = currentVariant.id === variant.id
 
-export let source = null
+  export let source = null
 
-$: {
-  if (source != null) {
-    Object.assign(currentVariant, {
-      source,
-    })
+  $: {
+    if (source != null) {
+      Object.assign(currentVariant, {
+        source,
+      })
+    }
   }
-}
 </script>
 
 {#if shouldRender}

package/src/client/Wrap.svelte

@@ -1,61 +1,62 @@
 <script>
-import { onMount, createEventDispatcher } from 'svelte'
-import {
-  createApp as _createApp,
-  h as _h,
-  reactive as _reactive,
-} from '@poveste/vendors/vue'
+  import {
+    createApp as _createApp,
+    h as _h,
+    reactive as _reactive,
+  } from '@poveste/vendors/vue'
+  import { createEventDispatcher, onMount } from 'svelte'
 
-export let controlComponent
-export let value
+  export let controlComponent
+  export let value
 
-const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher()
 
-let el
+  let el
 
-let app
+  let app
 
-const state = _reactive({})
+  const state = _reactive({})
 
-function updateState (value, attrs) {
-  Object.assign(state, {
-    value,
-    attrs,
-  })
-}
-
-onMount(() => {
-  updateState(value, $$restProps)
-
-  app = _createApp({
-    render () {
-      const finalListeners = {}
-      if (controlComponent.emits) {
-        for (const k in controlComponent.emits) {
-          const key = Array.isArray(controlComponent.emits) ? controlComponent.emits[k] : k
-          const finalKey = key === 'input' ? 'update:modelValue' : key
-          finalListeners[`on${finalKey.charAt(0).toUpperCase()}${finalKey.substring(1)}`] = (...args) => {
-            if (key === 'update:modelValue') {
-              value = args[0]
-            } else {
-              dispatch(key, ...args)
+  function updateState(value, attrs) {
+    Object.assign(state, {
+      value,
+      attrs,
+    })
+  }
+
+  onMount(() => {
+    updateState(value, $$restProps)
+
+    app = _createApp({
+      render() {
+        const finalListeners = {}
+        if (controlComponent.emits) {
+          for (const k in controlComponent.emits) {
+            const key = Array.isArray(controlComponent.emits) ? controlComponent.emits[k] : k
+            const finalKey = key === 'input' ? 'update:modelValue' : key
+            finalListeners[`on${finalKey.charAt(0).toUpperCase()}${finalKey.substring(1)}`] = (...args) => {
+              if (key === 'update:modelValue') {
+                value = args[0]
+              }
+              else {
+                dispatch(key, ...args)
+              }
             }
           }
         }
-      }
-
-      return _h(controlComponent, {
-        modelValue: value,
-        ...state.attrs,
-        ...finalListeners,
-        key: 'component',
-      })
-    },
+
+        return _h(controlComponent, {
+          modelValue: value,
+          ...state.attrs,
+          ...finalListeners,
+          key: 'component',
+        })
+      },
+    })
+    app.mount(el)
   })
-  app.mount(el)
-})
 
-$: updateState(value, $$restProps)
+  $: updateState(value, $$restProps)
 </script>
 
 <div bind:this={el}>

package/src/client/util.ts

@@ -16,17 +16,30 @@ function cleanupState(state: Record<string, any>): Record<string, any> {
 }
 
 export function syncState(variantState, onChange: (state) => unknown) {
+  // Same flag, same #95 caveat as `plugin-vue` and the sandbox bridge: `apply`
+  // may only claim the next firing when its write will actually cause one, and
+  // `applyState` reports that. It matters more here than anywhere else, because
+  // the render loop calls `apply` on *every animation frame* whether or not the
+  // story did anything — set the flag unconditionally and it is set through
+  // roughly every other frame, ready to eat whatever lands in it.
+  //
+  // The `onChange` direction below still sets it blind. Nothing here can see
+  // whether handing the state to the component changed anything, so the same
+  // hazard remains on that side. It cannot be exercised today: `syncState` is
+  // only reachable through `getLegacyStateApi`, which needs Svelte 4's
+  // `$capture_state`/`$inject_state`, and the Svelte example is on 5 with both
+  // state-sync specs already `fixme` under #81. Whoever revives that path
+  // inherits this note.
   let syncing = false
 
   const _stop = _watch(() => variantState, (value) => {
     if (value == null) return
-    if (!syncing) {
-      syncing = true
-      onChange(cleanupState(value))
-    }
-    else {
+    if (syncing) {
       syncing = false
+      return
     }
+    syncing = true
+    onChange(cleanupState(value))
   }, {
     deep: true,
     immediate: true,
@@ -34,13 +47,11 @@ export function syncState(variantState, onChange: (state) => unknown) {
 
   function apply(value) {
     if (value == null) return
-    if (!syncing) {
-      syncing = true
-      applyState(variantState, clone(cleanupState(value)))
-    }
-    else {
+    if (syncing) {
       syncing = false
+      return
     }
+    syncing = applyState(variantState, clone(cleanupState(value)))
   }
 
   return {

package/src/collect/Story.svelte

@@ -1,34 +1,34 @@
 <script>
-import { getContext, setContext } from 'svelte'
+  import { getContext, setContext } from 'svelte'
 
-export let title = null
-export let id = null
-export let group = null
-export let layout = null
-export let icon = null
-export let iconColor = null
-export let docsOnly = false
+  export let title = null
+  export let id = null
+  export let group = null
+  export let layout = null
+  export let icon = null
+  export let iconColor = null
+  export let docsOnly = false
 
-const addStory = getContext('__pvtAddStory')
-const file = getContext('__pvtStoryFile')
+  const addStory = getContext('__pvtAddStory')
+  const file = getContext('__pvtStoryFile')
 
-const story = {
-  id: id ?? file.id,
-  title: title ?? file.fileName,
-  group,
-  layout,
-  icon,
-  iconColor,
-  docsOnly,
-  variants: [],
-}
+  const story = {
+    id: id ?? file.id,
+    title: title ?? file.fileName,
+    group,
+    layout,
+    icon,
+    iconColor,
+    docsOnly,
+    variants: [],
+  }
 
-addStory(story)
+  addStory(story)
 
-setContext('__pvtStory', story)
-setContext('__pvtAddVariant', (variant) => {
-  story.variants.push(variant)
-})
+  setContext('__pvtStory', story)
+  setContext('__pvtAddVariant', (variant) => {
+    story.variants.push(variant)
+  })
 </script>
 
 <slot />

package/src/collect/Variant.svelte

@@ -1,24 +1,24 @@
 <script>
-import { getContext } from 'svelte'
+  import { getContext } from 'svelte'
 
-export let title = 'untitled'
-export let id = null
-export let icon = null
-export let iconColor = null
+  export let title = 'untitled'
+  export let id = null
+  export let icon = null
+  export let iconColor = null
 
-const story = getContext('__pvtStory')
-const addVariant = getContext('__pvtAddVariant')
+  const story = getContext('__pvtStory')
+  const addVariant = getContext('__pvtAddVariant')
 
-function generateId () {
-  return `${story.id}-${story.variants.length}`
-}
+  function generateId() {
+    return `${story.id}-${story.variants.length}`
+  }
 
-const variant = {
-  id: id ?? generateId(),
-  title,
-  icon,
-  iconColor,
-}
+  const variant = {
+    id: id ?? generateId(),
+    title,
+    icon,
+    iconColor,
+  }
 
-addVariant(variant)
+  addVariant(variant)
 </script>

package/tsconfig.json

@@ -9,7 +9,7 @@
     ],
     "rootDir": "src",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "types": [
       "node"