@poveste/plugin-vue 0.1.0

package/dist/helpers.d.ts

@@ -0,0 +1,10 @@
+import type { Story, Variant } from '@poveste/shared';
+import type { App, Component } from 'vue';
+export interface Vue3StorySetupApi {
+    app: App;
+    story?: Story;
+    variant?: Variant;
+    addWrapper: (wrapper: Component) => void;
+}
+export type Vue3StorySetupHandler = (api: Vue3StorySetupApi) => Promise<void> | void;
+export declare function defineSetupVue3(handler: Vue3StorySetupHandler): Vue3StorySetupHandler;

package/dist/helpers.js

@@ -0,0 +1,3 @@
+export function defineSetupVue3(handler) {
+    return handler;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './helpers.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './helpers.js';

package/dist/index.node.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'poveste';
+export declare function HstVue(): Plugin;
+export * from './helpers.js';

package/dist/index.node.js

@@ -0,0 +1,54 @@
+import generateStoryCommand from './commands/generate-story.server.js';
+import { listComponentFiles } from './util/list-components.js';
+export function HstVue() {
+    return {
+        name: '@poveste/plugin-vue',
+        defaultConfig() {
+            return {
+                supportMatch: [
+                    {
+                        id: 'vue',
+                        patterns: ['**/*.vue'],
+                        pluginIds: ['vue3'],
+                    },
+                ],
+            };
+        },
+        config() {
+            return {
+                vite: {
+                    plugins: [
+                        {
+                            name: 'histoire-plugin-vue',
+                            enforce: 'post',
+                            transform(code, id) {
+                                // Remove vue warnings about unknown components
+                                if (this.meta.histoire?.isCollecting && id.endsWith('.vue')) {
+                                    return `const _stubComponent = (name) => ['Story','Variant'].some(validName => name.toLowerCase() === validName.toLowerCase()) ? _resolveComponent(name) : ({ render: () => null });${code?.replaceAll('_resolveComponent(', '_stubComponent(') ?? ''}`;
+                                }
+                            },
+                        },
+                    ],
+                },
+            };
+        },
+        supportPlugin: {
+            id: 'vue3',
+            moduleName: '@poveste/plugin-vue',
+            setupFn: 'setupVue3',
+            importStoriesPrepend: `import { defineAsyncComponent as defineAsyncComponentVue3 } from 'vue'`,
+            importStoryComponent: (file, index) => `const Comp${index} = defineAsyncComponentVue3(() => import(${JSON.stringify(file.moduleId)}))`,
+        },
+        commands: [
+            generateStoryCommand,
+        ],
+        async onDevEvent(api) {
+            switch (api.event) {
+                case 'listVueComponents': {
+                    return listComponentFiles(api.payload.search, api.getConfig().storyMatch);
+                }
+            }
+        },
+    };
+}
+export * from './helpers.js';

package/dist/util/list-components.d.ts

@@ -0,0 +1 @@
+export declare function listComponentFiles(search?: string, ignore?: string[], limit?: number): Promise<string[]>;

package/dist/util/list-components.js

@@ -0,0 +1,15 @@
+import { globby } from 'globby';
+export async function listComponentFiles(search = '', ignore = [], limit = 10) {
+    let files = await globby('**/*.vue', {
+        gitignore: true,
+        ignore: [
+            'node_modules',
+            ...ignore,
+        ],
+    });
+    if (search) {
+        const searchText = search.toLowerCase();
+        files = files.filter(file => file.toLowerCase().includes(searchText));
+    }
+    return files.slice(0, limit);
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@poveste/plugin-vue",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Poveste plugin for Vue.js support",
+  "author": {
+    "name": "Sorin Gitlan"
+  },
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/poveste-dev/poveste.git",
+    "type": "git",
+    "directory": "packages/poveste-plugin-vue"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./client": {
+      "types": "./dist/client/client.d.ts",
+      "default": "./dist/bundled/client/client.js"
+    },
+    "./collect": {
+      "types": "./dist/client/server.d.ts",
+      "default": "./dist/bundled/client/server.js"
+    },
+    "./components": {
+      "types": "./components.d.ts"
+    },
+    "./client-dev": {
+      "default": "./src/client/client.ts"
+    },
+    "./collect-dev": {
+      "default": "./src/client/server.ts"
+    },
+    ".": {
+      "types": "./dist/index.node.d.ts",
+      "node": "./dist/index.node.js",
+      "default": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.node.d.ts",
+  "peerDependencies": {
+    "vue": "^3.5.26",
+    "poveste": "^0.1.0"
+  },
+  "dependencies": {
+    "change-case": "^5.4.4",
+    "globby": "^14.0.2",
+    "launch-editor": "^2.9.1",
+    "pathe": "^1.1.2",
+    "@poveste/controls": "^0.1.0",
+    "@poveste/vendors": "^0.1.0",
+    "@poveste/shared": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "concurrently": "^9.1.0",
+    "typescript": "5.6.3",
+    "vite": "^7.3.0",
+    "vue": "^3.5.26",
+    "poveste": "0.1.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",
+    "build:types": "tsc --declaration --emitDeclarationOnly",
+    "watch": "concurrently \"vite build --watch\" \"tsc -d -P tsconfig.build.json --watch\" \"pnpm run build:types --watch\""
+  }
+}

package/src/client/app/MountStory.ts

@@ -0,0 +1,83 @@
+import type { Story } from '@poveste/shared'
+import type {
+  PropType as _PropType,
+} from '@poveste/vendors/vue'
+import {
+  defineComponent as _defineComponent,
+  h as _h,
+  onMounted as _onMounted,
+  onUnmounted as _onUnmounted,
+  ref as _ref,
+  watch as _watch,
+} from '@poveste/vendors/vue'
+import { reactive } from 'vue'
+import { createPreviewHost } from './host.js'
+
+export default _defineComponent({
+  name: 'MountStory',
+
+  props: {
+    story: {
+      type: Object as _PropType<Story>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const el = _ref<HTMLDivElement>()
+    const renderContext = reactive({
+      mode: 'mount' as const,
+      slotName: 'default',
+      currentVariant: null,
+      externalState: null,
+      nextVariantIndex: {
+        value: 0,
+      },
+    })
+    let host: ReturnType<typeof createPreviewHost>
+
+    async function mountStory() {
+      host = createPreviewHost({
+        name: 'MountStorySubApp',
+        el: el.value,
+        getStory: () => props.story,
+        getVariant: () => null,
+        renderContext,
+      })
+
+      await host.mount()
+    }
+
+    function unmountStory() {
+      host?.unmount()
+      host = null
+    }
+
+    _watch(() => props.story.id, async () => {
+      unmountStory()
+      await mountStory()
+    })
+
+    _onMounted(async () => {
+      await mountStory()
+    })
+
+    _watch(() => props.story.variants, () => {
+      host?.forceUpdate()
+    })
+
+    _onUnmounted(() => {
+      unmountStory()
+    })
+
+    return {
+      el,
+    }
+  },
+
+  render() {
+    return _h('div', {
+      ref: 'el',
+    })
+  },
+})

package/src/client/app/RenderStory.ts

@@ -0,0 +1,131 @@
+import type { Story, Variant } from '@poveste/shared'
+import type {
+  PropType as _PropType,
+} from '@poveste/vendors/vue'
+import {
+  defineComponent as _defineComponent,
+  h as _h,
+  onBeforeUnmount as _onBeforeUnmount,
+  onMounted as _onMounted,
+  ref as _ref,
+  watch as _watch,
+} from '@poveste/vendors/vue'
+import { reactive } from 'vue'
+import { createPreviewHost } from './host.js'
+import { syncStateBundledAndExternal } from './util.js'
+
+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',
+    },
+  },
+
+  emits: {
+    ready: () => true,
+  },
+
+  setup(props, { emit }) {
+    const sandbox = _ref<HTMLDivElement>()
+    let host: ReturnType<typeof createPreviewHost>
+    let mounting = false
+
+    const externalState = reactive<Variant['state']>({})
+    let stateSync = syncStateBundledAndExternal(props.variant.state, externalState)
+    const renderContext = reactive({
+      mode: 'render' as const,
+      slotName: props.slotName,
+      currentVariant: props.variant,
+      externalState,
+      nextVariantIndex: {
+        value: 0,
+      },
+    })
+
+    function unmountVariant() {
+      host?.unmount()
+      host = null
+    }
+
+    function syncExternalState() {
+      stateSync?.stop()
+      stateSync = syncStateBundledAndExternal(props.variant.state, externalState)
+    }
+
+    async function mountVariant() {
+      if (mounting) return
+      mounting = true
+
+      unmountVariant()
+      renderContext.currentVariant = props.variant
+      renderContext.slotName = props.slotName
+
+      host = createPreviewHost({
+        name: 'RenderStorySubApp',
+        el: sandbox.value,
+        getStory: () => props.story,
+        getVariant: () => props.variant,
+        renderContext,
+        wrapInDiv: true,
+      })
+
+      await host.mount()
+      mounting = false
+
+      emit('ready')
+    }
+
+    _onMounted(async () => {
+      if (props.variant.configReady) {
+        await mountVariant()
+      }
+    })
+
+    _watch(() => props.variant, () => {
+      renderContext.currentVariant = props.variant
+      syncExternalState()
+    })
+
+    _watch(() => [props.story.id, props.slotName, props.variant.id, props.variant.configReady] as const, async ([, slotName]) => {
+      renderContext.currentVariant = props.variant
+      renderContext.slotName = slotName
+
+      if (props.variant.configReady && !mounting) {
+        if (!host) {
+          await mountVariant()
+        }
+        else {
+          host.forceUpdate()
+        }
+      }
+    })
+
+    _onBeforeUnmount(() => {
+      stateSync?.stop()
+      unmountVariant()
+    })
+
+    return {
+      sandbox,
+    }
+  },
+
+  render() {
+    return _h('div', {
+      ref: 'sandbox',
+    })
+  },
+})

package/src/client/app/RouterLinkStub.ts

@@ -0,0 +1,48 @@
+// From: https://github.com/vuejs/test-utils/blob/main/src/components/RouterLinkStub.ts
+
+import { computed, defineComponent, h } from 'vue'
+
+// match return type of router.resolve: RouteLocation & { href: string }
+const defaultRoute = {
+  path: '/',
+  name: undefined as string | undefined,
+  redirectedFrom: undefined as object | undefined,
+  params: {},
+  query: {},
+  hash: '',
+  fullPath: '/',
+  matched: [] as object[],
+  meta: {},
+  href: '/',
+}
+
+// TODO: Borrow typings from vue-router-next
+export const RouterLinkStub = defineComponent({
+  name: 'RouterLinkStub',
+
+  compatConfig: { MODE: 3 },
+
+  props: {
+    to: {
+      type: [String, Object],
+      required: true,
+    },
+    custom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  render() {
+    const route = computed(() => defaultRoute)
+    // mock reasonable return values to mimic vue-router's useLink
+    const children = this.$slots?.default?.({
+      route,
+      href: computed(() => route.value.href),
+      isActive: computed(() => false),
+      isExactActive: computed(() => false),
+      navigate: async () => {},
+    })
+    return this.custom ? children : h('a', undefined, children)
+  },
+})

package/src/client/app/Story.ts

@@ -0,0 +1,209 @@
+import type { Story } from '@poveste/shared'
+import type { PropType, VNode } from 'vue'
+import { omitInheritStoryProps } from '@poveste/shared'
+import { cloneVNode, computed, defineComponent, getCurrentInstance, h, isRef, provide, reactive, useAttrs } from 'vue'
+import { useRenderContext } from './render-context.js'
+import Variant from './Variant'
+
+export default defineComponent({
+
+  name: 'Story',
+  __histoireType: 'story',
+
+  inheritAttrs: false,
+
+  props: {
+    initState: {
+      type: Function as PropType<() => any | Promise<any>>,
+      default: undefined,
+    },
+
+    meta: {
+      type: Object as PropType<Story['meta']>,
+      default: undefined,
+    },
+  },
+
+  setup(props) {
+    const vm = getCurrentInstance()
+
+    const attrs = useAttrs() as {
+      story: Story
+    }
+
+    const renderContext = useRenderContext()
+    const story = computed(() => attrs.story)
+    provide('story', story)
+
+    const storyComponent: any = vm.parent
+    const implicitState = reactive<Record<string, any>>({})
+
+    Object.defineProperty(implicitState, '$data', {
+      enumerable: true,
+      configurable: true,
+      get: () => storyComponent.data,
+      set: (value) => {
+        Object.assign(storyComponent.data, value)
+      },
+    })
+
+    function addImplicitState(source: Record<string, any>, key: string) {
+      const value = source[key]
+
+      if (typeof value === 'function' || (value?.__file) || typeof value?.render === 'function' || typeof value?.setup === 'function') {
+        return
+      }
+
+      Object.defineProperty(implicitState, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => {
+          const currentValue = source[key]
+          return isRef(currentValue) ? currentValue.value : currentValue
+        },
+        set: (newValue) => {
+          const currentValue = source[key]
+
+          if (isRef(currentValue)) {
+            currentValue.value = newValue
+          }
+          else if (currentValue && typeof currentValue === 'object' && newValue && typeof newValue === 'object') {
+            Object.assign(currentValue, newValue)
+          }
+          else {
+            source[key] = newValue
+          }
+        },
+      })
+    }
+
+    // From `<script setup>`'s `defineExpose`
+    for (const key in storyComponent.exposed) {
+      addImplicitState(storyComponent.exposed, key)
+    }
+    // We needs __VUE_PROD_DEVTOOLS__ flag set to `true` to enable `devtoolsRawSetupState`
+    for (const key in storyComponent.devtoolsRawSetupState) {
+      addImplicitState(storyComponent.devtoolsRawSetupState, key)
+    }
+    for (const key in storyComponent.data) {
+      addImplicitState(storyComponent.data, key)
+    }
+    provide('implicitState', () => implicitState)
+
+    function updateStory() {
+      if (props.meta) {
+        if (!attrs.story.meta) {
+          attrs.story.meta = {}
+        }
+
+        Object.assign(attrs.story.meta, props.meta)
+      }
+
+      Object.assign(attrs.story, {
+        slots: () => vm.proxy.$slots,
+      })
+    }
+
+    return {
+      renderContext,
+      story,
+      renderMountStory,
+      renderPreviewStory,
+      updateStory,
+    }
+
+    function renderMountStory() {
+      let index = 0
+
+      const applyAttrs = (vnodes: VNode[]) => {
+        const result: VNode[] = []
+
+        for (const vnode of vnodes) {
+          // @ts-expect-error custom option
+          if (vnode.type?.__histoireType === 'variant') {
+            const variant = attrs.story.variants[index]
+            index++
+
+            if (!variant) {
+              continue
+            }
+
+            const nextProps: any = {
+              variant,
+            }
+
+            if (!vnode.props?.initState && !vnode.props?.['init-state']) {
+              nextProps.initState = props.initState
+            }
+
+            for (const attr in vm.proxy.$attrs) {
+              if (typeof vnode.props?.[attr] === 'undefined') {
+                nextProps[attr] = vm.proxy.$attrs[attr]
+              }
+            }
+
+            for (const attr in attrs.story) {
+              if (!omitInheritStoryProps.includes(attr) && typeof vnode.props?.[attr] === 'undefined') {
+                nextProps[attr] = attrs.story[attr]
+              }
+            }
+
+            result.push(cloneVNode(vnode, nextProps))
+            continue
+          }
+
+          if (Array.isArray(vnode.children)) {
+            vnode.children = applyAttrs(vnode.children as VNode[])
+          }
+
+          result.push(vnode)
+        }
+
+        return result
+      }
+
+      return applyAttrs(vm.proxy.$slots.default?.() ?? [])
+    }
+
+    function renderPreviewStory() {
+      renderContext.nextVariantIndex.value = 0
+
+      const slotProps = {
+        state: renderContext.externalState,
+      }
+
+      const children = []
+
+      if (renderContext.slotName === 'controls') {
+        children.push(...(vm.proxy.$slots.controls?.(slotProps) ?? []))
+      }
+
+      if (renderContext.slotName === 'default' || attrs.story.meta?.hasVariantChildComponents) {
+        children.push(...(vm.proxy.$slots.default?.(slotProps) ?? []))
+      }
+
+      return children
+    }
+  },
+
+  render() {
+    this.updateStory()
+
+    const [firstVariant] = this.story.variants
+
+    if (firstVariant?.id === '_default') {
+      return h(Variant, {
+        variant: firstVariant,
+        initState: this.initState,
+        implicit: true,
+        ...this.$attrs,
+      }, this.$slots)
+    }
+
+    if (this.renderContext?.mode === 'render') {
+      return this.renderPreviewStory()
+    }
+
+    return this.renderMountStory()
+  },
+})