@poveste/plugin-svelte 0.6.1 → 0.7.0

package/client.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/client/index'

package/collect.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/microsoft/TypeScript/issues/33079
+export * from './dist/collect/index'

package/dist/client/index.d.ts

@@ -1,5 +1,5 @@
-export { default as MountStory } from './mount';
-export { default as RenderStory } from './render';
+export { default as MountStory } from './mount.js';
+export { default as RenderStory } from './render.js';
 declare module '@poveste/shared' {
     interface StoryMeta {
         hasVariantChildComponents?: boolean;

package/package.json

@@ -1,34 +1,66 @@
 {
   "name": "@poveste/plugin-svelte",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Poveste plugin for Svelte 5 and SvelteKit support",
   "author": {
     "name": "Sorin Gitlan"
   },
   "license": "MIT",
+  "homepage": "https://poveste.dev",
   "repository": {
     "url": "https://github.com/poveste-dev/poveste.git",
     "type": "git",
     "directory": "packages/poveste-plugin-svelte"
   },
+  "bugs": "https://github.com/poveste-dev/poveste/issues",
+  "keywords": [
+    "poveste",
+    "histoire",
+    "storybook",
+    "component-playground",
+    "component-explorer",
+    "stories",
+    "styleguide",
+    "design-system",
+    "vite",
+    "svelte",
+    "svelte5",
+    "sveltekit",
+    "plugin"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    "./client": "./dist/client/index.js",
-    "./collect": "./dist/collect/index.js",
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.js"
+    },
+    "./collect": {
+      "types": "./dist/collect/index.d.ts",
+      "default": "./dist/collect/index.js"
+    },
     ".": "./dist/index.node.js",
     "./*": "./*"
   },
   "main": "./dist/index.node.js",
   "module": "./dist/index.node.js",
   "types": "./dist/index.node.d.ts",
+  "files": [
+    "assets",
+    "client.d.ts",
+    "collect.d.ts",
+    "dist"
+  ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
   "peerDependencies": {
     "@sveltejs/kit": "^2.53.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "svelte": "^5.46.4",
-    "poveste": "^0.6.1"
+    "poveste": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "@sveltejs/kit": {
@@ -40,9 +72,9 @@
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
     "pathe": "^1.1.2",
-    "@poveste/controls": "^0.6.1",
-    "@poveste/shared": "^0.6.1",
-    "@poveste/vendors": "^0.6.1"
+    "@poveste/controls": "^0.7.0",
+    "@poveste/vendors": "^0.7.0",
+    "@poveste/shared": "^0.7.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -54,7 +86,7 @@
     "svelte-preprocess": "^6.0.3",
     "typescript": "5.6.3",
     "vite": "^8.0.0",
-    "poveste": "0.6.1"
+    "poveste": "0.7.0"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",

package/src/client/MountStory.svelte

@@ -1,27 +0,0 @@
-<script>
-  import { omitInheritStoryProps } from '@poveste/shared'
-  import { getContext, setContext } from 'svelte'
-  import MountVariant from './MountVariant.svelte'
-
-  const story = getContext('__pvtStory')
-  const index = { value: 0 }
-  setContext('__pvtIndex', index)
-  setContext('__pvtSlots', $$slots)
-
-  // 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'}
-  <MountVariant {...inheritedFromStory} {...$$restProps} implicit>
-    <slot />
-    <slot name="controls" slot="controls" />
-  </MountVariant>
-{:else}
-  <slot />
-{/if}

package/src/client/MountVariant.svelte

@@ -1,74 +0,0 @@
-<script>
-  import { afterUpdate, getContext, onDestroy } from 'svelte'
-
-  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')
-  // 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: () => ({
-        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 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>
-
-{#if false}
-  <slot />
-  <slot name="controls" />
-{/if}

package/src/client/RenderStory.svelte

@@ -1,77 +0,0 @@
-<script>
-  import { watch as _watch } from '@poveste/vendors/vue'
-  import { getContext, onDestroy, setContext } from 'svelte'
-
-  const story = getContext('__pvtStory')
-  const currentVariant = getContext('__pvtVariant')
-  const slotName = getContext('__pvtSlot')
-
-  const index = { value: 0 }
-  setContext('__pvtIndex', index)
-
-  export let source = null
-  export let initState = null
-
-  // Poveste owns the state, not the story component.
-  //
-  // The story is mounted once per slot — the app renders it with
-  // `slot-name="controls"`, the preview with the default — so a `let count` in
-  // the story exists twice and cannot be shared. Svelte 4 bridged the two
-  // instances with `$capture_state` / `$inject_state`; Svelte 5 provides neither,
-  // and no shim does either. So state lives on the variant, which both mounts
-  // read from the same context object and which the sandbox bridge already
-  // serialises across the iframe boundary (#81).
-  //
-  // Whichever mount arrives first seeds it; the second must not, or it would
-  // clobber whatever the user has already changed.
-  if (initState && currentVariant && !currentVariant.__pvtStateSeeded) {
-    currentVariant.__pvtStateSeeded = true
-    currentVariant.state = { ...currentVariant.state, ...initState() }
-  }
-
-  // Only from the mount that renders the controls. The story is mounted once per
-  // slot and, for an iframe layout, in a different realm — so the flag below cannot
-  // dedupe across them and the warning would appear twice.
-  if (!initState && slotName === 'controls' && $$slots.controls && currentVariant && !currentVariant.__pvtStateWarned) {
-    currentVariant.__pvtStateWarned = true
-    console.error([
-      `[poveste] Story "${story?.title ?? story?.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(' '))
-  }
-
-  // `variant.state` is a Vue-reactive object, so Svelte has no way to know when a
-  // control writes into it. Mirroring the reference back into a local on every
-  // Vue tick is what makes the template re-render: Svelte's invalidation treats
-  // any object assignment as a change, so reassigning the same proxy is enough.
-  let state = currentVariant?.state
-
-  const stopWatchingState = _watch(() => currentVariant?.state, () => {
-    state = currentVariant?.state
-  }, { deep: true })
-
-  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).
-  $: {
-    const resolvedSource = typeof source === 'function' ? source(state) : source
-    if (resolvedSource != null) {
-      Object.assign(currentVariant, {
-        source: resolvedSource,
-      })
-    }
-  }
-</script>
-
-{#if slotName === 'controls'}
-  <slot name="controls" {state} />
-{/if}
-{#if slotName === 'default' || story.meta?.hasVariantChildComponents}
-  <slot {state} />
-{/if}

package/src/client/RenderVariant.svelte

@@ -1,83 +0,0 @@
-<script>
-  import { watch as _watch } from '@poveste/vendors/vue'
-  import { getContext, onDestroy } from 'svelte'
-
-  const story = getContext('__pvtStory')
-  const currentVariant = getContext('__pvtVariant')
-  const slotName = getContext('__pvtSlot')
-  const index = getContext('__pvtIndex')
-
-  const variant = story.variants[index.value]
-  index.value++
-
-  // 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 initState = null
-
-  // Same contract as `RenderStory`: poveste owns the state because the story is
-  // mounted once per slot, so a component-local variable cannot be shared (#81).
-  // `variant.state` is also the only bucket the sandbox bridge carries across the
-  // iframe boundary, which is why state is per variant rather than per story.
-  if (initState && shouldRender && !currentVariant.__pvtStateSeeded) {
-    currentVariant.__pvtStateSeeded = true
-    currentVariant.state = { ...currentVariant.state, ...initState() }
-  }
-
-  // Controls mount only — see the note in RenderStory: the two mounts do not share
-  // a realm for iframe layouts, so this is what keeps it to one warning.
-  if (!initState && shouldRender && slotName === 'controls' && $$slots.controls && !currentVariant.__pvtStateWarned) {
-    currentVariant.__pvtStateWarned = true
-    console.error([
-      `[poveste] Variant "${variant?.title ?? variant?.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 state = currentVariant?.state
-
-  // 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())
-
-  // `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, {
-        source: resolvedSource,
-      })
-    }
-  }
-</script>
-
-{#if shouldRender}
-  {#if slotName === 'default'}
-    <slot {state} />
-  {/if}
-  {#if slotName === 'controls'}
-    <slot name="controls" {state} />
-  {/if}
-{/if}

package/src/client/Wrap.svelte

@@ -1,68 +0,0 @@
-<script>
-  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
-
-  const dispatch = createEventDispatcher()
-
-  let el
-
-  let app
-
-  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)
-              }
-            }
-          }
-        }
-
-        // `state` is the Vue-reactive mirror kept in sync by the `$:` below.
-        // Reading the plain `value` here would make the render depend on a
-        // variable Vue cannot track — it only saw fresh values because the
-        // `state` mutation was what triggered the re-render in the first place.
-        return _h(controlComponent, {
-          modelValue: state.value,
-          ...state.attrs,
-          ...finalListeners,
-          key: 'component',
-        })
-      },
-    })
-    app.mount(el)
-  })
-
-  $: updateState(value, $$restProps)
-</script>
-
-<div bind:this={el}>
-  {controlComponent.name}
-</div>

package/src/client/index.ts

@@ -1,12 +0,0 @@
-export { default as MountStory } from './mount'
-export { default as RenderStory } from './render'
-
-declare module '@poveste/shared' {
-  interface StoryMeta {
-    hasVariantChildComponents?: boolean
-  }
-}
-
-export function generateSourceCode() {
-  // noop
-}

package/src/client/mount.ts

@@ -1,131 +0,0 @@
-import type { Story } from '@poveste/shared'
-import type {
-  PropType as _PropType,
-} from '@poveste/vendors/vue'
-import type { SvelteStorySetupApi } from '../helpers.js'
-import { components } from '@poveste/controls'
-import {
-  defineComponent as _defineComponent,
-  h as _h,
-  onMounted as _onMounted,
-  onUnmounted as _onUnmounted,
-  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
-import * as setup from 'virtual:$poveste-setup'
-import {
-  callSetupFunctions,
-  mountSvelteComponent,
-} from '../util/svelte.js'
-import MountStorySvelte from './MountStory.svelte'
-import MountVariantSvelte from './MountVariant.svelte'
-import StubComponent from './Stub.svelte'
-
-export default _defineComponent({
-  name: 'MountStory',
-
-  props: {
-    story: {
-      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) {
-    const el = _ref<HTMLDivElement>()
-    let app: any
-    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)
-
-      const mountedApp = await mountSvelteComponent(props.story.file.component, {
-        target,
-        props: {
-          Hst: {
-            Story: MountStorySvelte,
-            Variant: MountVariantSvelte,
-            ...getControls(),
-          },
-        },
-        context: new Map(Object.entries({
-          __pvtStory: props.story,
-          __pvtTargetVariantId: targetVariantId,
-        })),
-      }, 'client')
-      app = mountedApp.app
-      destroyApp = mountedApp.destroy
-
-      const setupApi: SvelteStorySetupApi = {
-        app,
-        story: props.story,
-        variant: null,
-      }
-
-      await callSetupFunctions(generatedSetup, setup, setupApi)
-    }
-
-    function unmountStory() {
-      destroyApp?.()
-      destroyApp = null
-      if (target) {
-        target.parentNode?.removeChild(target)
-        target = null
-      }
-      app = null
-    }
-
-    _watch(() => props.story.id, async () => {
-      unmountStory()
-      await mountStory()
-    })
-
-    _onMounted(async () => {
-      await mountStory()
-    })
-
-    _onUnmounted(() => {
-      unmountStory()
-    })
-
-    return {
-      el,
-    }
-  },
-
-  render() {
-    return _h('div', {
-      ref: 'el',
-    })
-  },
-})
-
-function getControls() {
-  const result: Record<string, any> = {}
-  for (const key in components) {
-    result[key.substring(3)] = StubComponent
-  }
-  return result
-}