@poveste/plugin-vue 0.14.0 → 0.16.0

package/src/client/codegen.ts

@@ -7,7 +7,7 @@ import { camelCase, pascalCase } from 'change-case'
 import { Text, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText } from 'vue'
 
 export async function generateSourceCode(variant: Variant) {
-  const vnode = variant.slots().default?.({ state: variant.state ?? {} }) ?? []
+  const vnode = variant.slots?.().default?.({ state: variant.state ?? {} }) ?? []
   const list = Array.isArray(vnode) ? vnode : [vnode]
   const lines: string[] = []
   for (const n in list) {
@@ -17,7 +17,7 @@ export async function generateSourceCode(variant: Variant) {
   return lines.join('\n')
 }
 
-async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = null): Promise<{ lines: string[], isText?: boolean }> {
+async function printVNode(vnode: VNode, propsOverrides: Record<string, any> | null = null): Promise<{ lines: string[], isText?: boolean }> {
   if (vnode.type === Text) {
     return {
       // @ts-expect-error TODO
@@ -43,7 +43,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
     ]
 
     // Directives
-    function genDirective(dirName: string, dir, valueCode: string = null) {
+    function genDirective(dirName: string, dir: { arg?: string | null, modifiers?: Partial<Record<string, boolean>>, value: unknown }, valueCode: string | null = null) {
       let modifiers = ''
       for (const key in dir.modifiers) {
         if (dir.modifiers[key]) {
@@ -77,15 +77,15 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         // Vmodel
         if (dir.dir === vModelText || dir.dir === vModelSelect || dir.dir === vModelRadio || dir.dir === vModelCheckbox || dir.dir === vModelDynamic) {
           const listenerKeys = [`onUpdate:${dir.arg ?? 'modelValue'}`, `onUpdate:${camelCase(dir.arg ?? 'modelValue')}`]
-          const listenerKey = listenerKeys.find(key => vnode.props[key])
-          const listener = vnode.props[listenerKey]
-          let valueCode: string = null
-          if (listener) {
+          const listenerKey = listenerKeys.find(key => vnode.props?.[key])
+          const listener = listenerKey ? vnode.props?.[listenerKey] : undefined
+          let valueCode: string | null = null
+          if (listenerKey && listener) {
             skipProps.push(listenerKey)
             const listenerSource = listener.toString()
             const result = /\(\$event\) => (.*?) = \$event/.exec(listenerSource)
             if (result) {
-              valueCode = result[1]
+              valueCode = result[1] ?? null
             }
           }
           genDirective('model', dir, valueCode)
@@ -94,7 +94,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         else if (dir.instance._ || dir.instance.$) {
           // @ts-expect-error TODO
           const target = dir.instance.$ ?? dir.instance._
-          let dirName: string
+          let dirName: string | undefined
           for (const directives of [target.directives, target.appContext.directives]) {
             for (const key in directives) {
               if (directives[key] === dir.dir) {
@@ -128,7 +128,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         if (prop.startsWith('on')) {
           directive = '@'
         }
-        const arg = directive === '@' ? `${prop[2].toLowerCase()}${prop.slice(3)}` : prop
+        const arg = directive === '@' ? `${prop.charAt(2).toLowerCase()}${prop.slice(3)}` : prop
 
         // v-model on component
         const vmodelListeners = [`onUpdate:${prop}`, `onUpdate:${camelCase(prop)}`]
@@ -137,17 +137,17 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         if (directive === ':' && vmodelListener) {
           // Listener
           skipProps.push(vmodelListener)
-          const listener = vnode.props[vmodelListener]
-          const listenerSource = listener.toString()
-          let valueCode: string
+          const listener = vnode.props?.[vmodelListener]
+          const listenerSource = String(listener)
+          let valueCode: string | null = null
           const result = /\(\$event\) => (.*?) = \$event/.exec(listenerSource)
           if (result) {
-            valueCode = result[1]
+            valueCode = result[1] ?? null
           }
 
           // Modifiers
           const modifiersKey = `${prop === 'modelValue' ? 'model' : prop}Modifiers`
-          const modifiers = vnode.props[modifiersKey] ?? {}
+          const modifiers = vnode.props?.[modifiersKey] ?? {}
           skipProps.push(modifiersKey)
 
           // Directive
@@ -169,11 +169,11 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
           serialized = cleanupExpression(value.substring(2, value.length - 2).trim()).split('\n')
         }
         else if (typeof value === 'function') {
-          let code = cleanupExpression(value.toString().replace(/'/g, '\\\'').replace(/"/g, '\''))
-          const testResult = /function (\S+)\(/.exec(code)
-          if (testResult) {
+          let code = cleanupExpression(value.toString())
+          const functionName = /function (\S+)\(/.exec(code)?.[1]
+          if (functionName) {
             // Function name only
-            serialized = [testResult[1]]
+            serialized = [functionName]
           }
           else {
             if (code.startsWith('($event) => ')) {
@@ -186,15 +186,16 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         else {
           serialized = serializeAndCleanJs(value)
         }
-        if (serialized.length > 1) {
+        const { quote, lines } = delimitAttr(serialized)
+        if (lines.length > 1) {
           multilineAttrs = true
-          const indented: string[] = [`${directive}${arg}="${serialized[0]}`]
-          indented.push(...serialized.slice(1, serialized.length - 1))
-          indented.push(`${serialized[serialized.length - 1]}"`)
+          const indented: string[] = [`${directive}${arg}=${quote}${lines[0]}`]
+          indented.push(...lines.slice(1, lines.length - 1))
+          indented.push(`${lines[lines.length - 1]}${quote}`)
           attrs.push(indented)
         }
         else {
-          attrs.push([`${directive}${arg}="${serialized[0]}"`])
+          attrs.push([`${directive}${arg}=${quote}${lines[0]}${quote}`])
         }
       }
       // @ts-expect-error TODO
@@ -202,7 +203,12 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
         attrs.push([prop])
       }
       else {
-        attrs.push([`${prop}="${value}"`])
+        // Same delimiting as the directive branch above. A string prop is the
+        // other way a `"` reaches an attribute — `title='He said "hi"'` closed
+        // the attribute early and turned the rest of the value into stray
+        // attributes, on an element whose directives rendered correctly.
+        const plain = delimitAttr([String(value)])
+        attrs.push([`${prop}=${plain.quote}${plain.lines[0]}${plain.quote}`])
       }
     }
 
@@ -248,7 +254,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
           if (isAllChildText === undefined) {
             isAllChildText = true
           }
-          const text = result.lines[0]
+          const text = result.lines[0] ?? ''
           if (!childLines.length || /^\s/.test(text)) {
             childLines.push(text.trim())
           }
@@ -277,6 +283,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
             if (p === '__v_isRef') {
               return () => false
             }
+            return null
           })
           const children = vnode.children[key](autoObject.proxy)
           const slotLines: string[] = []
@@ -352,6 +359,51 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
   }
 }
 
+/**
+ * How to delimit an attribute whose value is arbitrary code.
+ *
+ * The source pane shows template source a reader copies, so the code has to
+ * survive as written. The pass this replaces escaped `'` for a JavaScript
+ * string and rewrote `"` into `'`, and the consumer is neither — it is an
+ * attribute delimited by `"`. Both halves reached the reader: a handler written
+ * `() => alert("hi")` was shown as `() => alert('hi')`, and one written
+ * `() => alert('hi')` came out with visible backslashes, which reads as a bug
+ * in the reader's own code rather than as our rendering.
+ *
+ * The order made it worse. Every `'` the rewrite introduced arrived after the
+ * escaping pass, so an authored quote was escaped and a manufactured one was
+ * not. A backslash was never escaped at all, which is what CodeQL flagged as
+ * `js/incomplete-sanitization`: `() => alert('it\'s')` went in carrying one
+ * and came out carrying four.
+ *
+ * So nothing is escaped for a string context. Code containing `"` takes the
+ * other delimiter, the way someone writing the template by hand would. Code
+ * carrying both quote characters has no free delimiter, so whichever it takes
+ * is escaped inside it — and the one appearing less often wins, because every
+ * escape is a character the author did not write. That is `&#39;` as often as
+ * `&quot;`: the repository's own `get-name` fixture holds two doubles and one
+ * single, so the single is the cheaper one there (#602).
+ */
+export function delimitAttr(lines: string[]): { quote: string, lines: string[] } {
+  const code = lines.join('\n')
+  const doubles = (code.match(/"/g) ?? []).length
+  const singles = (code.match(/'/g) ?? []).length
+
+  if (doubles === 0) {
+    return { quote: '"', lines }
+  }
+  if (singles === 0) {
+    return { quote: '\'', lines }
+  }
+
+  // Both appear, so whichever delimiter is chosen has to be escaped inside it.
+  // The one that appears less often wins, because every escape is a character
+  // the author did not write and this pane exists to show what they did.
+  return singles <= doubles
+    ? { quote: '\'', lines: lines.map(line => line.replace(/'/g, '&#39;')) }
+    : { quote: '"', lines: lines.map(line => line.replace(/"/g, '&quot;')) }
+}
+
 export function getTagName(vnode: VNode) {
   if (typeof vnode.type === 'string') {
     return vnode.type
@@ -376,9 +428,9 @@ export function getTagName(vnode: VNode) {
 }
 
 function getNameFromFile(file: string) {
-  const parts = /([^/]+)\.vue$/.exec(file)
-  if (parts) {
-    return pascalCase(parts[1])
+  const name = /([^/]+)\.vue$/.exec(file)?.[1]
+  if (name) {
+    return pascalCase(name)
   }
   return 'Anonymous'
 }

package/src/client/context.ts

@@ -0,0 +1,66 @@
+import type { InjectionKey } from 'vue'
+import { inject as vueInject, provide as vueProvide } from 'vue'
+
+/**
+ * A context keyed by a symbol, with its provide and its inject in one place.
+ *
+ * Six of these used to be string keys carrying `any`, and two of the six were
+ * the same string meaning two different things in two realms (#981). A symbol
+ * cannot collide and the type travels with it.
+ *
+ * `inject` and `injectOptional` are separate functions rather than one call with a
+ * default, because "nobody provided this" and "this is allowed to be absent"
+ * are different questions that used to arrive as the same `undefined` — and the
+ * first one is what an author hits when they nest a component wrongly.
+ *
+ * Reka's `createContext` is this shape and is already a dependency of the
+ * controls package. It is not one of this package's, and this is fifteen lines,
+ * so it is written here rather than taking a dependency for it.
+ */
+export interface Context<T> {
+  provide: (value: T) => void
+  /** Throws, naming the provider, when nothing provided it. */
+  inject: (consumer: string) => T
+  /** `null` when nothing provided it, which the caller is expected to handle. */
+  injectOptional: () => T | null
+}
+
+/**
+ * `description` is what a symbol shows in a stack; `provider` is the component
+ * a reader has to go and add, and is the only part of the error they can act on.
+ *
+ * The key comes from the global registry rather than being minted here, because
+ * this module is evaluated more than once. A collection worker's module graph is
+ * invalidated while a story is mid-run, so `provide` and `inject` can each hold
+ * their own instance of this file — a plain `Symbol()` then differs between them
+ * and the injection misses, which reads as a `<Variant>` outside its `<Story>`.
+ * Every description here is already unique, so the registry cannot re-collide
+ * the way the string keys in #981 did.
+ *
+ * Absence is read as `null` rather than `undefined` so that a provider passing
+ * `undefined` on purpose is still a provider. None does today, and this is the
+ * cheaper of the two mistakes to have made.
+ */
+export function createContext<T>(description: string, provider: string): Context<T> {
+  const key: InjectionKey<T> = Symbol.for(description)
+
+  return {
+    provide(value) {
+      vueProvide(key, value)
+    },
+
+    inject(consumer) {
+      const value = vueInject(key, null)
+
+      if (value === null) {
+        throw new Error(`[poveste] a ${consumer} has to be inside a ${provider}`)
+      }
+
+      return value
+    },
+
+    injectOptional() {
+      return vueInject(key, null)
+    },
+  }
+}

package/src/client/server/Story.ts

@@ -1,6 +1,7 @@
-import type { ServerStory, ServerStoryFile, ServerVariant } from '@poveste/shared'
+import type { ServerStory, ServerVariant } from '@poveste/shared'
 import type { PropType } from 'vue'
-import { defineComponent, inject, onMounted, provide } from 'vue'
+import { defineComponent, onMounted } from 'vue'
+import { addStoryContext, addVariantContext, serverStoryContext, storyFileContext } from './context.js'
 import { autoStubComponents } from './stub.js'
 
 export default defineComponent({
@@ -51,13 +52,19 @@ export default defineComponent({
   },
 
   setup(props) {
-    const file = inject<ServerStoryFile>('hstStoryFile')
+    const file = storyFileContext.injectOptional()
 
     // Story
 
+    const id = props.id ?? file?.id
+    const title = props.title ?? file?.fileName
+    if (!id || title === undefined) {
+      throw new Error('[poveste] a <Story> collected outside a story file needs an `id` and a `title`')
+    }
+
     const story: ServerStory = {
-      id: props.id ?? file?.id,
-      title: props.title ?? file?.fileName,
+      id,
+      title,
       group: props.group,
       layout: props.layout,
       icon: props.icon,
@@ -66,14 +73,13 @@ export default defineComponent({
       meta: props.meta,
       variants: [],
     }
-    const addStory = inject('addStory', null)
-    addStory?.(story)
+    addStoryContext.injectOptional()?.(story)
 
     // Variants
 
-    provide('story', story)
+    serverStoryContext.provide(story)
 
-    provide('addVariant', (variant: ServerVariant) => {
+    addVariantContext.provide((variant: ServerVariant) => {
       story.variants.push(variant)
     })
 
@@ -94,7 +100,7 @@ export default defineComponent({
   render() {
     let suppressError = false
     try {
-      const vnodes = this.$slots.default?.({
+      const vnodes = this.$slots['default']?.({
         get state() {
           // No variant tags
           suppressError = true

package/src/client/server/Variant.ts

@@ -1,6 +1,7 @@
-import type { ServerStory, ServerVariant } from '@poveste/shared'
+import type { ServerVariant } from '@poveste/shared'
 import type { PropType } from 'vue'
-import { defineComponent, inject } from 'vue'
+import { defineComponent } from 'vue'
+import { addVariantContext, serverStoryContext } from './context.js'
 
 export default defineComponent({
   name: 'PovesteVariant',
@@ -33,22 +34,20 @@ export default defineComponent({
   },
 
   setup(props) {
-    const story = inject<ServerStory>('story')
-
-    function generateId() {
-      return `${story.id}-${story.variants.length}`
-    }
-
-    const variant: ServerVariant = {
-      id: props.id ?? generateId(),
+    // Asked for before anything reads it, so a missing `<Story>` is reported
+    // once and the same way whether or not the variant carries an `id`. The
+    // guard this replaces sat inside the branch that generates one, so an
+    // explicit `id` skipped it and reached `undefined(variant)` instead (#981).
+    const story = serverStoryContext.inject('<Variant>')
+    const addVariant = addVariantContext.inject('<Variant>')
+
+    addVariant({
+      id: props.id ?? `${story.id}-${story.variants.length}`,
       title: props.title,
       icon: props.icon,
       iconColor: props.iconColor,
       meta: props.meta,
-    }
-
-    const addVariant = inject('addVariant') as (variant: ServerVariant) => void
-    addVariant(variant)
+    })
   },
 
   render() {

package/src/client/server/__tests__/nesting-errors.spec.ts

@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { createApp, h } from 'vue'
+import Story from '../Story.js'
+import Variant from '../Variant.js'
+
+/*
+ * What a story author gets for a nesting mistake in collect mode, where the
+ * stack has nothing in it about stories (#981).
+ *
+ * Mounted the way `run.ts` mounts them — a bare `createApp` — rather than
+ * through a test-utils wrapper, because the missing provider is the whole
+ * subject and a harness that supplies one would prove nothing.
+ */
+function mountAlone(component: any, props: Record<string, unknown> = {}) {
+  const app = createApp({ render: () => h(component, props) })
+  const el = document.createElement('div')
+  try {
+    app.mount(el)
+  }
+  finally {
+    app.unmount()
+  }
+}
+
+describe('a <Variant> outside a <Story>', () => {
+  it('says which component it needed, when it carries an id', () => {
+    // The branch that generates an id already threw a good error, so an
+    // explicit id was the case that reached `undefined(variant)` and said
+    // `addVariant is not a function`.
+    expect(() => mountAlone(Variant, { id: 'mine', title: 'Solo' })).toThrow(/<Variant>.*<Story>/)
+  })
+
+  it('says the same thing when it does not', () => {
+    expect(() => mountAlone(Variant, { title: 'Solo' })).toThrow(/<Variant>.*<Story>/)
+  })
+
+  it('never reports that a function is not a function', () => {
+    expect(() => mountAlone(Variant, { id: 'mine', title: 'Solo' })).not.toThrow(/is not a function/)
+  })
+})
+
+describe('a <Story> outside the collect runner', () => {
+  it('says which provider it needed', () => {
+    // `hstStoryFile` comes from `run.ts`, the only thing that mounts these.
+    expect(() => mountAlone(Story, { title: 'Solo' })).toThrow(/<Story>/)
+  })
+})

package/src/client/server/context.ts

@@ -0,0 +1,18 @@
+import type { ServerStory, ServerStoryFile, ServerVariant } from '@poveste/shared'
+import { createContext } from '../context.js'
+
+/*
+ * Collect mode's contexts. The story one is deliberately not the app's: they
+ * carry different shapes in different realms and shared one string key, so
+ * nothing stopped one being injected where the other was expected (#981).
+ */
+
+/** The file being collected, provided by `run.ts` rather than by a component. */
+export const storyFileContext = createContext<ServerStoryFile>('poveste-server-story-file', 'story file')
+
+/** Optional: a `<Story>` collected outside a run has nowhere to report to. */
+export const addStoryContext = createContext<(story: ServerStory) => void>('poveste-server-add-story', 'story file')
+
+export const serverStoryContext = createContext<ServerStory>('poveste-server-story', '<Story>')
+
+export const addVariantContext = createContext<(variant: ServerVariant) => void>('poveste-server-add-variant', '<Story>')

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
@@ -7,6 +7,7 @@ import * as generatedSetup from 'virtual:$poveste-generated-global-setup'
 import * as setup from 'virtual:$poveste-setup'
 import { createApp, h } from 'vue'
 import { VUE_SETUP_HOOK_NAMES } from '../../setup-hooks.js'
+import { addStoryContext, storyFileContext } from './context.js'
 import Story from './Story.js'
 import Variant from './Variant.js'
 
@@ -14,11 +15,13 @@ export async function run({ file, storyData, el }: ServerRunPayload) {
   const { default: Comp } = await import(/* @vite-ignore */ file.moduleId)
 
   const app = createApp({
-    provide: {
-      addStory(data) {
+    // Provided from `setup` rather than the options object so the keys can be
+    // the symbols the components inject; the options form takes string keys.
+    setup() {
+      addStoryContext.provide((data: ServerStory) => {
         storyData.push(data)
-      },
-      hstStoryFile: file,
+      })
+      storyFileContext.provide(file)
     },
     render() {
       return h(Comp)
@@ -33,8 +36,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'])
+  })
+})