@poveste/plugin-vue 0.1.0

package/src/client/server/run.ts

@@ -0,0 +1,63 @@
+import type { ServerRunPayload } from '@poveste/shared'
+import type { Vue3StorySetupApi, Vue3StorySetupHandler } from '../../helpers.js'
+// @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 { createApp, h } from 'vue'
+import Story from './Story'
+import Variant from './Variant'
+
+export async function run({ file, storyData, el }: ServerRunPayload) {
+  const { default: Comp } = await import(/* @vite-ignore */ file.moduleId)
+
+  const app = createApp({
+    provide: {
+      addStory(data) {
+        storyData.push(data)
+      },
+    },
+    render() {
+      return h(Comp, {
+        ref: 'comp',
+        data: file,
+      })
+    },
+  })
+
+  app.component('Story', Story)
+
+  app.component('Variant', Variant)
+
+  // Call app setups to resolve global assets such as components
+
+  const setupApi: Vue3StorySetupApi = {
+    app,
+    story: null,
+    variant: null,
+    addWrapper: () => { /* noop */ },
+  }
+
+  if (typeof generatedSetup?.setupVue3 === 'function') {
+    const setupFn = generatedSetup.setupVue3 as Vue3StorySetupHandler
+    await setupFn(setupApi)
+  }
+
+  if (typeof setup?.setupVue3 === 'function') {
+    const setupFn = setup.setupVue3 as Vue3StorySetupHandler
+    await setupFn(setupApi)
+  }
+
+  app.mount(el)
+
+  if (Comp.doc) {
+    const el = document.createElement('div')
+    el.innerHTML = Comp.doc
+    const text = el.textContent
+    storyData.forEach((s) => {
+      s.docsText = text
+    })
+  }
+
+  app.unmount()
+}

package/src/client/server/stub.ts

@@ -0,0 +1,12 @@
+const stub = { name: 'StubbedComponent', render: () => null }
+
+export function autoStubComponents(vnodes: any[]) {
+  for (const vnode of vnodes) {
+    if (typeof vnode.type === 'object' && (vnode.type as any).name !== 'PovesteVariant') {
+      vnode.type = stub
+    }
+    if (Array.isArray(vnode.children)) {
+      autoStubComponents(vnode.children)
+    }
+  }
+}

package/src/client/server.ts

@@ -0,0 +1 @@
+export * from './server/run.js'

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('listVueComponents', { search }),
+      required: true,
+    },
+    {
+      field: 'fileName',
+      label: 'File name',
+      type: 'text',
+      required: true,
+      defaultValue: answers => answers.component?.replace(/[^/]+\/([^/]+)\.vue$/, '$1.story.vue'),
+    },
+  ],
+  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,55 @@
+import type { PluginCommand } from 'poveste'
+import fs from 'node:fs'
+import launchEditor from 'launch-editor'
+import path from 'pathe'
+
+export default {
+  id: 'histoire:plugin-vue:generate-story',
+  label: 'Generate Vue 3 story from component',
+  icon: 'https://vuejs.org/logo.svg',
+  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 setup${isTs ? ' lang="ts"' : ''}>
+import ${componentName} from './${component}'
+</script>
+
+<template>
+  <Story>
+    <Variant title="Default">
+      <${componentName} />
+    </Variant>
+  </Story>
+</template>
+`
+
+    await fs.promises.writeFile(targetFile, content, 'utf-8')
+
+    launchEditor(targetFile)
+  },
+  clientSetupFile: '@poveste/plugin-vue/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

@@ -0,0 +1,15 @@
+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 function defineSetupVue3(handler: Vue3StorySetupHandler): Vue3StorySetupHandler {
+  return handler
+}

package/src/index.node.ts

@@ -0,0 +1,63 @@
+import type { Plugin } from 'poveste'
+
+import generateStoryCommand from './commands/generate-story.server.js'
+import { listComponentFiles } from './util/list-components.js'
+
+export function HstVue(): Plugin {
+  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 as any).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/src/index.ts

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

package/src/util/list-components.ts

@@ -0,0 +1,16 @@
+import { globby } from 'globby'
+
+export async function listComponentFiles(search = '', ignore: string[] = [], 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/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "src/client"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    // Volar
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,70 @@
+import fs from 'node:fs'
+import { globbySync } from 'globby'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    {
+      name: 'histoire:preserve:import.dynamic',
+      enforce: 'pre',
+      transform(code) {
+        if (code.includes('import(')) {
+          return {
+            code: code.replace(/import\(/g, 'import__dyn('),
+          }
+        }
+      },
+      closeBundle() {
+        try {
+          const files = globbySync('./dist/**/*.js')
+          for (const file of files) {
+            const content = fs.readFileSync(file, 'utf-8')
+            if (content.includes('import__dyn')) {
+              fs.writeFileSync(file, content.replace(/import__dyn\(/g, 'import(/* @vite-ignore */'), 'utf-8')
+            }
+          }
+        }
+        catch (e) {
+          console.error(e)
+        }
+      },
+    },
+  ],
+
+  build: {
+    emptyOutDir: false,
+    outDir: 'dist/bundled',
+    lib: {
+      entry: '',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        /\$histoire/,
+        /@poveste/,
+        'vue',
+      ],
+
+      input: [
+        'src/client/client.ts',
+        'src/client/server.ts',
+      ],
+
+      output: {
+        // manualChunks (id) {
+        //   if (id.includes('node_modules')) {
+        //     return 'vendor'
+        //   }
+        // },
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name][extname]',
+        // hoistTransitiveImports: false,
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+      treeshake: false,
+      preserveEntrySignatures: 'strict',
+    },
+  },
+})