feat: allow sort files

Author: userquin

src/core/context.ts

@@ -215,27 +215,27 @@ export class Context {
   private updateComponentNameMap() {
     this._componentNameMap = {}
 
-    Array
-      .from(this._componentPaths)
-      .forEach((path) => {
-        const fileName = getNameFromFilePath(path, this.options)
-        const name = this.options.prefix
-          ? `${pascalCase(this.options.prefix)}${pascalCase(fileName)}`
-          : pascalCase(fileName)
-        if (isExclude(name, this.options.excludeNames)) {
-          debug.components('exclude', name)
-          return
-        }
-        if (this._componentNameMap[name] && !this.options.allowOverrides) {
-          console.warn(`[unplugin-vue-components] component "${name}"(${path}) has naming conflicts with other components, ignored.`)
-          return
-        }
+    const files = Array.from(this._componentPaths)
+
+    ;(this.options.sort?.(this.options.root, files) || files).forEach((path) => {
+      const fileName = getNameFromFilePath(path, this.options)
+      const name = this.options.prefix
+        ? `${pascalCase(this.options.prefix)}${pascalCase(fileName)}`
+        : pascalCase(fileName)
+      if (isExclude(name, this.options.excludeNames)) {
+        debug.components('exclude', name)
+        return
+      }
+      if (this._componentNameMap[name] && !this.options.allowOverrides) {
+        console.warn(`[unplugin-vue-components] component "${name}"(${path}) has naming conflicts with other components, ignored.`)
+        return
+      }
 
-        this._componentNameMap[name] = {
-          as: name,
-          from: path,
-        }
-      })
+      this._componentNameMap[name] = {
+        as: name,
+        from: path,
+      }
+    })
   }
 
   async findComponent(name: string, type: 'component' | 'directive', excludePaths: string[] = []): Promise<ComponentInfo | undefined> {

src/core/options.ts

@@ -5,7 +5,7 @@ import { getPackageInfoSync, isPackageExists } from 'local-pkg'
 import { detectTypeImports } from './type-imports/detect'
 import { escapeSpecialChars } from './utils'
 
-export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'excludeNames' | 'transformer' | 'globs' | 'globsExclude' | 'directives' | 'types' | 'version'> = {
+export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'excludeNames' | 'transformer' | 'globs' | 'globsExclude' | 'directives' | 'types' | 'version' | 'sort'> = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,

src/types.ts

@@ -230,6 +230,8 @@ export interface Options {
    * @default 'default'
    */
   syncMode?: 'default' | 'append' | 'overwrite'
+
+  sort?: (root: string, files: string[]) => string[]
 }
 
 export type ResolvedOptions = Omit<

test/sort.test.ts

@@ -0,0 +1,102 @@
+import { relative, resolve } from 'pathe'
+import { describe, expect, it } from 'vitest'
+import { Context } from '../src/core/context'
+
+const root = resolve(__dirname, '../examples/vite-vue3')
+
+function cleanup(data: any) {
+  return Object.values(data).map((e: any) => {
+    delete e.absolute
+    e.from = relative(root, e.from).replace(/\\/g, '/')
+    return e
+  })
+}
+
+describe('sort', () => {
+  it('sort ascending works', async () => {
+    const ctx = new Context({
+      dirs: ['src/components/ui'],
+      sort(_, files) {
+        return files.toSorted((a, b) => a.localeCompare(b))
+      },
+    })
+    ctx.setRoot(root)
+    ctx.searchGlob()
+
+    expect(cleanup(ctx.componentNameMap)).toMatchInlineSnapshot(`
+      [
+        {
+          "as": "Button",
+          "from": "src/components/ui/button.vue",
+        },
+        {
+          "as": "Checkbox",
+          "from": "src/components/ui/nested/checkbox.vue",
+        },
+      ]
+    `)
+
+    // simulate the watcher adding a components
+    ctx.addComponents(resolve(root, 'src/components/book/index.vue').replace(/\\/g, '/'))
+    ctx.searchGlob()
+
+    expect(cleanup(ctx.componentNameMap)).toMatchInlineSnapshot(`
+      [
+        {
+          "as": "Book",
+          "from": "src/components/book/index.vue",
+        },
+        {
+          "as": "Button",
+          "from": "src/components/ui/button.vue",
+        },
+        {
+          "as": "Checkbox",
+          "from": "src/components/ui/nested/checkbox.vue",
+        },
+      ]
+    `)
+  })
+
+  it('sort descending works', async () => {
+    const ctx = new Context({
+      dirs: ['src/components/book'],
+      sort(_, files) {
+        return files.toSorted((a, b) => b.localeCompare(a))
+      },
+    })
+    ctx.setRoot(root)
+    ctx.searchGlob()
+
+    expect(cleanup(ctx.componentNameMap)).toMatchInlineSnapshot(`
+      [
+        {
+          "as": "Book",
+          "from": "src/components/book/index.vue",
+        },
+      ]
+    `)
+
+    // simulate the watcher adding a components
+    ctx.addComponents(resolve(root, 'src/components/ui/button.vue').replace(/\\/g, '/'))
+    ctx.addComponents(resolve(root, 'src/components/ui/nested/checkbox.vue').replace(/\\/g, '/'))
+    ctx.searchGlob()
+
+    expect(cleanup(ctx.componentNameMap)).toMatchInlineSnapshot(`
+      [
+        {
+          "as": "Checkbox",
+          "from": "src/components/ui/nested/checkbox.vue",
+        },
+        {
+          "as": "Button",
+          "from": "src/components/ui/button.vue",
+        },
+        {
+          "as": "Book",
+          "from": "src/components/book/index.vue",
+        },
+      ]
+    `)
+  })
+})