@poveste/plugin-svelte 0.6.1 → 0.7.0

package/src/client/render.ts

@@ -1,191 +0,0 @@
-import type { Story, Variant } from '@poveste/shared'
-import type {
-  PropType as _PropType,
-} from '@poveste/vendors/vue'
-import type { SvelteStorySetupApi, SvelteStorySetupHandler } 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'
-// @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,
-  createWrappedComponent,
-  getLegacyStateApi,
-  mountSvelteComponent,
-} from '../util/svelte.js'
-import RenderStorySvelte from './RenderStory.svelte'
-import RenderVariantSvelte from './RenderVariant.svelte'
-import { syncState } from './util'
-import Wrap from './Wrap.svelte'
-
-export default _defineComponent({
-  name: 'RenderStory',
-
-  props: {
-    variant: {
-      type: Object as _PropType<Variant>,
-      required: true,
-    },
-
-    story: {
-      type: Object as _PropType<Story>,
-      required: true,
-    },
-
-    slotName: {
-      type: String,
-      default: 'default',
-    },
-  },
-
-  setup(props, { emit }) {
-    const el = _ref<HTMLDivElement>()
-    let app: any
-    let target: HTMLDivElement
-
-    let tearDownHandlers: (() => void)[] = []
-
-    function documentOn(event, cb) {
-      document.addEventListener(event, cb)
-      const off = () => document.removeEventListener(event, cb)
-      tearDownHandlers.push(off)
-      return {
-        off,
-      }
-    }
-
-    async function mountStory() {
-      target = document.createElement('div')
-      el.value.appendChild(target)
-
-      let components = []
-      const { off: registerComponentOff } = documentOn('SvelteRegisterComponent', (e) => {
-        const { component } = e.detail
-        components.push(component)
-      })
-
-      const mountedApp = await mountSvelteComponent(props.story.file.component, {
-        target,
-        props: {
-          Hst: {
-            Story: RenderStorySvelte,
-            Variant: RenderVariantSvelte,
-            ...getControls(),
-          },
-        },
-        context: new Map(Object.entries({
-          __pvtStory: props.story,
-          __pvtVariant: props.variant,
-          __pvtSlot: props.slotName,
-        })),
-      }, 'client')
-      app = mountedApp.app
-      tearDownHandlers.push(() => {
-        mountedApp.destroy()
-      })
-
-      let appComponent = components.find(c => c.$$ && app?.$$ && c.$$ === app.$$) ?? app
-      registerComponentOff()
-      components = []
-
-      function patchReplaceIfAvailable() {
-        const origReplace = appComponent?.$replace
-        if (!origReplace) {
-          return
-        }
-
-        appComponent.$replace = (...args) => {
-          const result = origReplace.apply(appComponent, args)
-          appComponent = result ?? appComponent
-          return result
-        }
-      }
-      patchReplaceIfAvailable()
-
-      const stateApi = getLegacyStateApi(appComponent)
-      if (stateApi) {
-        const { apply, stop } = syncState(props.variant.state, (value) => {
-          stateApi.injectState(value)
-        })
-        tearDownHandlers.push(stop)
-
-        let frameId: number
-        const syncFromComponent = () => {
-          apply(stateApi.captureState())
-          frameId = requestAnimationFrame(syncFromComponent)
-        }
-
-        frameId = requestAnimationFrame(syncFromComponent)
-        tearDownHandlers.push(() => {
-          cancelAnimationFrame(frameId)
-        })
-
-        apply(stateApi.captureState())
-      }
-
-      const setupApi: SvelteStorySetupApi = {
-        app,
-        story: props.story,
-        variant: props.variant,
-      }
-
-      await callSetupFunctions(generatedSetup, setup, setupApi, props.variant.setupApp as SvelteStorySetupHandler | null)
-
-      emit('ready')
-    }
-
-    function unmountStory() {
-      tearDownHandlers.forEach(fn => fn())
-      tearDownHandlers = []
-      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)] = wrapComponent(components[key])
-  }
-  return result
-}
-
-function wrapComponent(controlComponent) {
-  return createWrappedComponent(Wrap, controlComponent)
-}

package/src/client/util.ts

@@ -1,63 +0,0 @@
-import { applyState, clone } from '@poveste/shared'
-import { watch as _watch } from '@poveste/vendors/vue'
-
-function cleanupState(state: Record<string, any>): Record<string, any> {
-  const result = {}
-  for (const key in state) {
-    if (key === 'Hst') continue
-    const value = state[key]
-    if (typeof value === 'function') continue
-    if (typeof value === 'undefined') continue
-    if (value instanceof HTMLElement) continue
-    if (typeof value === 'object' && value?.$$) continue
-    result[key] = value
-  }
-  return result
-}
-
-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 = false
-      return
-    }
-    syncing = true
-    onChange(cleanupState(value))
-  }, {
-    deep: true,
-    immediate: true,
-  })
-
-  function apply(value) {
-    if (value == null) return
-    if (syncing) {
-      syncing = false
-      return
-    }
-    syncing = applyState(variantState, clone(cleanupState(value)))
-  }
-
-  return {
-    apply,
-    stop() {
-      _stop()
-    },
-  }
-}

package/src/collect/Story.svelte

@@ -1,41 +0,0 @@
-<script>
-  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 initState = null
-
-  const addStory = getContext('__pvtAddStory')
-  const file = getContext('__pvtStoryFile')
-
-  const story = {
-    id: id ?? file.id,
-    title: title ?? file.fileName,
-    group,
-    layout,
-    icon,
-    iconColor,
-    docsOnly,
-    variants: [],
-  }
-
-  addStory(story)
-
-  // Collection renders the story's markup purely to discover its variants, but
-  // that markup now reads `state`. Without a value here every expression
-  // referencing it throws and collection fails with a bare
-  // `Cannot read properties of undefined` (#81).
-  const state = initState ? initState() : {}
-
-  setContext('__pvtStory', story)
-  setContext('__pvtAddVariant', (variant) => {
-    story.variants.push(variant)
-  })
-</script>
-
-<slot {state} />

package/src/collect/Variant.svelte

@@ -1,28 +0,0 @@
-<script>
-  import { getContext } from 'svelte'
-
-  export let title = 'untitled'
-  export let id = null
-  export let icon = null
-  export let iconColor = null
-  // Absorbs the prop; collection never renders variant children. `export const`
-  // (the compiler's suggestion) would make passing one an error.
-  // svelte-ignore export_let_unused
-  export let initState = null
-
-  const story = getContext('__pvtStory')
-  const addVariant = getContext('__pvtAddVariant')
-
-  function generateId() {
-    return `${story.id}-${story.variants.length}`
-  }
-
-  const variant = {
-    id: id ?? generateId(),
-    title,
-    icon,
-    iconColor,
-  }
-
-  addVariant(variant)
-</script>

package/src/collect/index.ts

@@ -1,65 +0,0 @@
-import type { ServerRunPayload } from '@poveste/shared'
-import type { SvelteStorySetupApi } from '../helpers.js'
-import { tick } from 'svelte'
-// @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 Story from './Story.svelte'
-import Variant from './Variant.svelte'
-
-export async function run({ file, el, storyData }: ServerRunPayload) {
-  const { default: Comp } = await import(/* @vite-ignore */ file.moduleId)
-
-  const mountedApp = await mountSvelteComponent(Comp, {
-    target: el,
-    props: {
-      Hst: {
-        Story,
-        Variant,
-      },
-    },
-    context: new Map(Object.entries({
-      __pvtAddStory(data) {
-        storyData.push(data)
-      },
-      __pvtStoryFile: file,
-    })),
-  }, 'client')
-  const app = mountedApp.app
-
-  const setupApi: SvelteStorySetupApi = {
-    app,
-    story: null,
-    variant: null,
-  }
-
-  await callSetupFunctions(generatedSetup, setup, setupApi)
-
-  await tick()
-
-  // 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',
-    })
-  }
-
-  mountedApp.destroy()
-}

package/src/commands/generate-story.client.ts

@@ -1,29 +0,0 @@
-import type { ClientCommandOptions } from 'poveste'
-import { kebabCase } from 'change-case'
-import { openStory, sendEvent } from 'poveste/plugin'
-
-export default {
-  prompts: [
-    {
-      field: 'component',
-      label: 'Choose a component',
-      type: 'select',
-      options: async search => sendEvent('listSvelteComponents', { search }),
-      required: true,
-    },
-    {
-      field: 'fileName',
-      label: 'File name',
-      type: 'text',
-      required: true,
-      defaultValue: answers => answers.component?.replace(/[^/]+\/([^/]+)\.svelte$/, '$1.story.svelte'),
-    },
-  ],
-  clientAction: (params) => {
-    const index = params.component.lastIndexOf('/')
-    const dirname = params.component.substring(0, index + 1)
-    const file = `${dirname}${params.fileName}`
-    const storyId = kebabCase(file.toLowerCase())
-    openStory(storyId)
-  },
-} as ClientCommandOptions

package/src/commands/generate-story.server.ts

@@ -1,62 +0,0 @@
-import type { PluginCommand } from 'poveste'
-import fs from 'node:fs'
-import launchEditor from 'launch-editor'
-import path from 'pathe'
-
-export default {
-  id: 'poveste:plugin-svelte:generate-story',
-  label: 'Generate Svelte story from component',
-  icon: 'https://svelte.dev/favicon.png',
-  searchText: 'generate create',
-  async serverAction(params) {
-    const targetFile = path.join(path.dirname(params.component), params.fileName)
-
-    if (fs.existsSync(targetFile)) {
-      throw new Error(`File ${targetFile} already exists`)
-    }
-
-    const { component, componentName, isTs } = await getComponentInfo(params.component)
-
-    const content = `<script${isTs ? ' lang="ts"' : ''}>
-  ${isTs
-    ? `import type { Hst } from '@poveste/plugin-svelte'\n  
-  `
-    : ''}import ${componentName} from './${component}'
-
-  export let Hst${isTs ? ': Hst' : ''}
-</script>
-  
-<Hst.Story>
-  <Hst.Variant title="Default">
-    <${componentName} />
-
-    <svelte:fragment slot="controls">
-      <!-- Put controls here -->
-    </svelte:fragment>
-  </Hst.Variant>
-</Hst.Story>
-`
-
-    await fs.promises.writeFile(targetFile, content, 'utf-8')
-
-    launchEditor(targetFile)
-  },
-  clientSetupFile: '@poveste/plugin-svelte/dist/commands/generate-story.client.js',
-} as PluginCommand
-
-async function isComponentTs(component: string) {
-  const componentContent = await fs.promises.readFile(component, 'utf-8')
-  return componentContent.includes('lang="ts"')
-}
-
-async function getComponentInfo(file: string) {
-  const component = path.basename(file)
-  const componentName = component.replace(path.extname(component), '')
-  const isTs = await isComponentTs(file)
-
-  return {
-    component,
-    componentName,
-    isTs,
-  }
-}

package/src/helpers.ts

@@ -1,131 +0,0 @@
-import type { HstControlOption } from '@poveste/controls'
-import type { Story, StoryProps, Variant, VariantProps } from '@poveste/shared'
-import type { Component, Snippet } from 'svelte'
-
-export interface SvelteStorySetupApi {
-  app: any
-  story?: Story
-  variant?: Variant
-}
-
-export type SvelteStorySetupHandler = (api: SvelteStorySetupApi) => Promise<void> | void
-
-export function defineSetupSvelte(handler: SvelteStorySetupHandler): SvelteStorySetupHandler {
-  return handler
-}
-
-export const defineSetupSvelte3 = defineSetupSvelte
-export const defineSetupSvelte4 = defineSetupSvelte
-export const defineSetupSvelte5 = defineSetupSvelte
-
-export type StoryState = Record<string, any>
-
-/**
- * Props plus Svelte 5 children.
- *
- * `StoryProps` and `VariantProps` live in `@poveste/shared` and are shared with
- * the Vue plugin, so a Svelte-only `Snippet` cannot be added there — it is
- * intersected in here instead.
- *
- * This is what the move off `SvelteComponentTyped` needed. The class form carried
- * Svelte 4 slot typing, so nested content type-checked implicitly; `Component<P>`
- * has no slots, and Svelte 5 passes children as a prop (#99).
- */
-type WithChildren<P> = P & {
-  children?: Snippet<[{ state: StoryState }]>
-  controls?: Snippet<[{ state: StoryState }]>
-}
-
-/**
- * Story state is owned by poveste, not by the story component.
- *
- * The story is mounted once per slot, so a component-local variable exists twice
- * and cannot be shared. `initState` seeds `variant.state`, which both mounts read
- * and which the sandbox bridge carries across the iframe boundary (#81).
- */
-type WithState<P> = Omit<P, 'source'> & {
-  initState?: () => StoryState
-  /** A literal, or a function of the variant state so the source panel can track the controls. */
-  source?: string | ((state: StoryState) => string)
-}
-
-export interface Hst {
-  // Main built-ins
-  Story: Component<WithState<WithChildren<StoryProps>>>
-  Variant: Component<WithState<WithChildren<VariantProps>>>
-  // Controls
-  // Deliberately permissive. This was previously a bare `SvelteComponentTyped`,
-  // i.e. props `any`; it wraps a Vue control whose default slot renders the label,
-  // and the prop set `Wrap` forwards is not pinned down. Narrowing it is its own
-  // change rather than a silent break.
-  Button: Component<WithChildren<Record<string, any>>>
-  ButtonGroup: Component<{
-    value?: string
-    options: (string | HstControlOption)[]
-    title?: string
-  }>
-  Checkbox: Component<{
-    value?: boolean
-    title: string
-  }>
-  CheckboxList: Component<{
-    value: string[]
-    options: (string | HstControlOption)[]
-    title?: string
-  }>
-  Text: Component<{
-    value?: string
-    title: string
-  }>
-  Number: Component<{
-    value?: number
-    title: string
-    step?: number
-  }>
-  Slider: Component<{
-    value?: number
-    title: string
-    min: number
-    max: number
-    step?: number
-  }>
-  Textarea: Component<{
-    value?: string
-    title: string
-  }>
-  Select: Component<{
-    value?: string
-    title: string
-    options: Record<string, any> | string[] | HstControlOption[]
-  }>
-  Radio: Component<{
-    value?: string
-    options: HstControlOption[]
-    title?: string
-  }>
-  Json: Component<{
-    value: unknown
-    title: string
-  }>
-  Shades: Component<{
-    shades: Record<string, any>
-    getName?: (key: string, color: string) => string
-    search?: string
-  }>
-  TokenList: Component<{
-    tokens: Record<string, string | number | any[] | Record<string, any>>
-    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
-  }>
-  TokenGrid: Component<{
-    tokens: Record<string, string | number | any[] | Record<string, any>>
-    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
-    colSize?: number
-  }>
-  CopyIcon: Component<{
-    content: string
-  }>
-  ColorSelect: Component<{
-    value?: string
-    title: string
-  }>
-}