@poveste/plugin-vue 0.13.1 → 0.15.0

package/src/client/server/run.ts

@@ -1,4 +1,4 @@
-import type { ServerRunPayload } from '@poveste/shared'
+import type { ServerRunPayload, ServerStory } from '@poveste/shared'
 import type { Vue3StorySetupApi, Vue3StorySetupHandler } from '../../helpers.js'
 import { getSetupHook } from '@poveste/shared'
 // @ts-expect-error virtual module id
@@ -15,7 +15,7 @@ export async function run({ file, storyData, el }: ServerRunPayload) {
 
   const app = createApp({
     provide: {
-      addStory(data) {
+      addStory(data: ServerStory) {
         storyData.push(data)
       },
       hstStoryFile: file,
@@ -33,8 +33,9 @@ export async function run({ file, storyData, el }: ServerRunPayload) {
 
   const setupApi: Vue3StorySetupApi = {
     app,
-    story: null,
-    variant: null,
+    // No story or variant exists while collecting.
+    story: undefined,
+    variant: undefined,
     addWrapper: () => { /* noop */ },
   }
 

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

@@ -16,13 +16,13 @@ export default {
       label: 'File name',
       type: 'text',
       required: true,
-      defaultValue: answers => answers.component?.replace(/[^/]+\/([^/]+)\.vue$/, '$1.story.vue'),
+      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 index = params['component'].lastIndexOf('/')
+    const dirname = params['component'].substring(0, index + 1)
+    const file = `${dirname}${params['fileName']}`
     const storyId = kebabCase(file.toLowerCase())
     openStory(storyId)
   },

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

@@ -9,13 +9,13 @@ export default {
   icon: 'https://vuejs.org/logo.svg',
   searchText: 'generate create',
   async serverAction(params) {
-    const targetFile = path.join(path.dirname(params.component), params.fileName)
+    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 { component, componentName, isTs } = await getComponentInfo(params['component'])
 
     const content = `<script setup${isTs ? ' lang="ts"' : ''}>
 import ${componentName} from './${component}'

package/src/helpers.ts

@@ -3,8 +3,8 @@ import type { App, Component } from 'vue'
 
 export interface Vue3StorySetupApi {
   app: App
-  story?: Story
-  variant?: Variant
+  story?: Story | undefined
+  variant?: Variant | undefined
   addWrapper: (wrapper: Component) => void
 }
 

package/src/index.node.ts

@@ -32,6 +32,7 @@ export function HstVue(): Plugin {
                 if ((this.meta as any).poveste?.isCollecting && id.endsWith('.vue')) {
                   return `const _stubComponent = (name) => ['Story','Variant'].some(validName => name.toLowerCase() === validName.toLowerCase()) ? _resolveComponent(name) : ({ render: () => null });${code?.replaceAll('_resolveComponent(', '_stubComponent(') ?? ''}`
                 }
+                return undefined
               },
             },
           ],
@@ -57,6 +58,7 @@ export function HstVue(): Plugin {
           return listComponentFiles(api.payload.search, api.getConfig().storyMatch)
         }
       }
+      return undefined
     },
   }
 }

package/src/util/list-components.spec.ts

@@ -0,0 +1,54 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { afterEach, describe, expect, it } from 'vitest'
+import { listComponentFiles } from './list-components.js'
+
+const roots: string[] = []
+
+function tree(files: Record<string, string>): string {
+  const root = mkdtempSync(join(tmpdir(), 'list-components-'))
+  roots.push(root)
+  for (const [path, content] of Object.entries(files)) {
+    mkdirSync(dirname(join(root, path)), { recursive: true })
+    writeFileSync(join(root, path), content)
+  }
+  return root
+}
+
+afterEach(() => {
+  for (const root of roots.splice(0)) {
+    rmSync(root, { recursive: true, force: true })
+  }
+})
+
+// Listing honoured .gitignore through globby's `gitignore: true`, and tinyglobby
+// has no such option, so the filtering is ours now (#839).
+describe('listComponentFiles', () => {
+  it('leaves out components git ignores, from the root .gitignore and a nested one', async () => {
+    const root = tree({
+      '.git/HEAD': 'ref: refs/heads/main\n',
+      '.gitignore': 'generated/\n',
+      'app/.gitignore': 'scratch/*\n!scratch/Kept.vue\n',
+      'app/src/Button.vue': '',
+      'app/src/generated/Output.vue': '',
+      'app/scratch/Draft.vue': '',
+      'app/scratch/Kept.vue': '',
+    })
+
+    const files = await listComponentFiles('', [], 10, join(root, 'app'))
+
+    expect(files.sort()).toEqual(['scratch/Kept.vue', 'src/Button.vue'])
+  })
+
+  it('still skips node_modules and the patterns it is given', async () => {
+    const root = tree({
+      '.git/HEAD': 'ref: refs/heads/main\n',
+      'src/Button.vue': '',
+      'src/Button.story.vue': '',
+      'node_modules/pkg/Dep.vue': '',
+    })
+
+    expect(await listComponentFiles('', ['**/*.story.vue'], 10, root)).toEqual(['src/Button.vue'])
+  })
+})

package/src/util/list-components.ts

@@ -1,13 +1,75 @@
-import { globby } from 'globby'
+import { existsSync, readFileSync } from 'node:fs'
+import { dirname, join, relative, resolve, sep } from 'node:path'
+import ignore from 'ignore'
+import { glob } from 'tinyglobby'
 
-export async function listComponentFiles(search = '', ignore: string[] = [], limit = 10) {
-  let files = await globby('**/*.vue', {
-    gitignore: true,
+function toPosix(path: string): string {
+  return path.split(sep).join('/')
+}
+
+/**
+ * Whether a file under `cwd` is git-ignored, the way globby's `gitignore: true`
+ * decided it: every `.gitignore` from the repository root down, each pattern
+ * relative to its own file. tinyglobby reads none of them (#839).
+ */
+async function gitIgnoredFilter(cwd: string): Promise<(file: string) => boolean> {
+  let root = cwd
+  while (!existsSync(join(root, '.git'))) {
+    const parent = dirname(root)
+    if (parent === root) {
+      root = cwd
+      break
+    }
+    root = parent
+  }
+
+  const ancestors: string[] = []
+  for (let dir = cwd; dir !== root;) {
+    dir = dirname(dir)
+    ancestors.unshift(join(dir, '.gitignore'))
+  }
+  // Shallow files first, so a nested `.gitignore` can override its parent.
+  const nested = (await glob('**/.gitignore', { cwd, absolute: true, dot: true, ignore: ['**/node_modules/**', '**/.git/**'] }))
+    .sort((a, b) => a.split('/').length - b.split('/').length || a.localeCompare(b))
+
+  const rules = ignore()
+  for (const file of [...ancestors, ...nested]) {
+    if (!existsSync(file)) {
+      continue
+    }
+    const base = toPosix(relative(root, dirname(file)))
+    for (const raw of readFileSync(file, 'utf8').split(/\r?\n/)) {
+      const line = raw.trimEnd()
+      if (!line || line.startsWith('#')) {
+        continue
+      }
+      const negated = line.startsWith('!')
+      let pattern = negated ? line.slice(1) : line
+      if (base) {
+        // A pattern with a slash before its end is anchored to its own directory;
+        // one without matches at any depth below it.
+        const anchored = pattern.replace(/\/$/, '').includes('/')
+        pattern = anchored ? `${base}/${pattern.replace(/^\//, '')}` : `${base}/**/${pattern}`
+      }
+      rules.add(negated ? `!${pattern}` : pattern)
+    }
+  }
+
+  return (file) => {
+    const path = toPosix(relative(root, resolve(cwd, file)))
+    return !path.startsWith('..') && rules.ignores(path)
+  }
+}
+
+export async function listComponentFiles(search = '', ignoredPatterns: string[] = [], limit = 10, cwd = process.cwd()) {
+  const isIgnored = await gitIgnoredFilter(cwd)
+  let files = (await glob('**/*.vue', {
+    cwd,
     ignore: [
       'node_modules',
-      ...ignore,
+      ...ignoredPatterns,
     ],
-  })
+  })).filter(file => !isIgnored(file))
   if (search) {
     const searchText = search.toLowerCase()
     files = files.filter(file => file.toLowerCase().includes(searchText))