@poveste/plugin-svelte 0.1.0

package/src/client/Wrap.svelte

@@ -0,0 +1,63 @@
+<script>
+import { onMount, createEventDispatcher } from 'svelte'
+import {
+  createApp as _createApp,
+  h as _h,
+  reactive as _reactive,
+} from '@poveste/vendors/vue'
+
+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)
+            }
+          }
+        }
+      }
+
+      return _h(controlComponent, {
+        modelValue: 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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,113 @@
+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'
+// @ts-expect-error virtual module id
+import * as generatedSetup from 'virtual:$histoire-generated-global-setup'
+// @ts-expect-error virtual module id
+import * as setup from 'virtual:$histoire-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,
+    },
+  },
+
+  setup(props) {
+    const el = _ref<HTMLDivElement>()
+    let app: any
+    let target: HTMLDivElement
+    let destroyApp: (() => void) | null = null
+
+    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({
+          __hstStory: props.story,
+        })),
+      }, '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
+}

package/src/client/render.ts

@@ -0,0 +1,191 @@
+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:$histoire-generated-global-setup'
+// @ts-expect-error virtual module id
+import * as setup from 'virtual:$histoire-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({
+          __hstStory: props.story,
+          __hstVariant: props.variant,
+          __hstSlot: 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

@@ -0,0 +1,52 @@
+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) {
+  let syncing = false
+
+  const _stop = _watch(() => variantState, (value) => {
+    if (value == null) return
+    if (!syncing) {
+      syncing = true
+      onChange(cleanupState(value))
+    }
+    else {
+      syncing = false
+    }
+  }, {
+    deep: true,
+    immediate: true,
+  })
+
+  function apply(value) {
+    if (value == null) return
+    if (!syncing) {
+      syncing = true
+      applyState(variantState, clone(cleanupState(value)))
+    }
+    else {
+      syncing = false
+    }
+  }
+
+  return {
+    apply,
+    stop() {
+      _stop()
+    },
+  }
+}

package/src/collect/Story.svelte

@@ -0,0 +1,34 @@
+<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
+
+const addStory = getContext('__hstAddStory')
+const file = getContext('__hstStoryFile')
+
+const story = {
+  id: id ?? file.id,
+  title: title ?? file.fileName,
+  group,
+  layout,
+  icon,
+  iconColor,
+  docsOnly,
+  variants: [],
+}
+
+addStory(story)
+
+setContext('__hstStory', story)
+setContext('__hstAddVariant', (variant) => {
+  story.variants.push(variant)
+})
+</script>
+
+<slot />

package/src/collect/Variant.svelte

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

package/src/collect/index.ts

@@ -0,0 +1,53 @@
+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:$histoire-generated-global-setup'
+// @ts-expect-error virtual module id
+import * as setup from 'virtual:$histoire-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({
+      __hstAddStory(data) {
+        storyData.push(data)
+      },
+      __hstStoryFile: file,
+    })),
+  }, 'client')
+  const app = mountedApp.app
+
+  const setupApi: SvelteStorySetupApi = {
+    app,
+    story: null,
+    variant: null,
+  }
+
+  await callSetupFunctions(generatedSetup, setup, setupApi)
+
+  await tick()
+
+  if (!storyData[0]?.variants.length) {
+    storyData[0].variants.push({
+      id: '_default',
+      title: 'default',
+    })
+  }
+
+  mountedApp.destroy()
+}

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,62 @@
+import type { PluginCommand } from 'poveste'
+import fs from 'node:fs'
+import launchEditor from 'launch-editor'
+import path from 'pathe'
+
+export default {
+  id: 'histoire: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,
+  }
+}