chore: try rewrite resolver

examples/vite-vue3/App.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Account from '~images:others/account.png'
+import AccountP from '~images:others/account.png'
 import AccountS from '~images/account.svg'
 import Password from '~images:normal/password.png'
 import OA from '~images:others/account.png'
@@ -11,7 +11,10 @@ import Test2Password from '~images/test/test/password.png?gif&width=100&height=1
 
 <template>
   <div>
-    <Account width="150" @click="() => console.log('on click')" />
+    <account />
+    <account-png />
+    <normal-account />
+    <AccountP width="150" @click="() => console.log('on click')" />
     <AccountS />
     <OA />
     <Password />

examples/vite-vue3/vite.config.ts

@@ -1,36 +1,27 @@
-import process from 'node:process'
 import type { UserConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import VueImages from 'unplugin-vue-images/vite'
 import Components from 'unplugin-vue-components/vite'
-import createDebugger from 'debug'
-
-import fg from 'fast-glob'
+import VueImages from 'unplugin-vue-images/vite'
+import { ImagesResolver } from 'unplugin-vue-images/resolver'
 
-const debug = createDebugger('unplugin-vue-images:unplugin')
+const collectionDirs = [
+  'src/assets/images',
+  { others: 'src/assets/others' },
+]
 
 const config: UserConfig = {
   plugins: [
     Vue(),
     VueImages({
-      dirs: ['src/assets/images', { others: 'src/assets/others' }],
+      dirs: collectionDirs,
       compiler: 'vue3',
     }),
     Components({
       resolvers: [
-        (name: string) => {
-          // debug('name =>', name)
-          const dirs = [{ alias: 'normal', path: 'src/assets/images' }, { alias: 'others', path: 'src/assets/others' }]
-          const extensions = ['jpg', 'jpeg', 'png', 'svg', 'gif', 'webp'].join(',')
-          const globs = dirs.map(dir => `${dir.path}/**/*.{${extensions}}`)
-          const files = fg.sync(globs, {
-            ignore: ['**/node_modules/**'],
-            onlyFiles: true,
-            cwd: process.cwd(),
-          })
-          // debug('files => ', files)
-          return ''
-        },
+        ImagesResolver({
+          prefix: false,
+          dirs: collectionDirs,
+        }),
       ],
     }),
   ],

package.json

@@ -55,11 +55,10 @@
       "require": "./dist/types.cjs",
       "import": "./dist/types.js"
     },
-    "./types/vue": {
-      "types": "./types/vue.d.ts"
-    },
-    "./types/vue3": {
-      "types": "./types/vue3.d.ts"
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "require": "./dist/resolver.cjs",
+      "import": "./dist/resolver.js"
     },
     "./*": "./*"
   },

src/constants.ts → src/core/constants.ts

@@ -5,3 +5,5 @@ export const DEFAULT_ALIAS = 'normal'
 export const DEFAULT_PATH = 'src/assets/images'
 
 export const DEFAULT_EXTENSIONS = ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif']
+
+export const DEFAULT_PREFIX = 'img'

src/core/context.ts

@@ -6,7 +6,7 @@ import type { ViteDevServer } from 'vite'
 import { ensurePrefix, toCamelCase } from '@vtrbo/utils/string'
 import createDebugger from 'debug'
 import type { Options, ResolvedOptions } from '../types'
-import { UNPLUGIN_NAME } from '../constants'
+import { UNPLUGIN_NAME } from './constants'
 import { resolveOptions } from './options'
 import { getAlias, getName } from './utils'
 
@@ -200,9 +200,11 @@ export class Context {
   setupWatcher(watcher: fs.FSWatcher) {
     watcher
       .on('add', (path) => {
+        debug('setupWatcher add path =>', path)
         this.addImage(path)
       })
       .on('unlink', (path) => {
+        debug('setupWatcher unlink path =>', path)
         this.delImage(path)
       })
   }

src/core/loader.ts

@@ -1,6 +1,6 @@
 import createDebugger from 'debug'
-import { DEFAULT_ALIAS, DEFAULT_PATH, UNPLUGIN_NAME } from '../constants'
 import type { ResolvedOptions } from '../types'
+import { DEFAULT_ALIAS, DEFAULT_PATH, UNPLUGIN_NAME } from './constants'
 import type { Context } from './context'
 import { compilers } from './compilers'
 

src/core/options.ts

@@ -1,7 +1,7 @@
 import { isArray, isObject, isString } from '@vtrbo/utils/fn'
 import createDebugger from 'debug'
 import type { Dir, Options, ResolvedOptions } from '../types'
-import { DEFAULT_ALIAS, DEFAULT_EXTENSIONS, DEFAULT_PATH, UNPLUGIN_NAME } from '../constants'
+import { DEFAULT_ALIAS, DEFAULT_EXTENSIONS, DEFAULT_PATH, UNPLUGIN_NAME } from './constants'
 import { removeSlash } from './utils'
 
 const debug = createDebugger(`${UNPLUGIN_NAME}:options`)

src/core/utils.ts

@@ -1,6 +1,6 @@
 import createDebugger from 'debug'
 import type { ResolvedOptions } from '../types'
-import { DEFAULT_ALIAS, UNPLUGIN_NAME } from '../constants'
+import { DEFAULT_ALIAS, UNPLUGIN_NAME } from './constants'
 
 const debug = createDebugger(`${UNPLUGIN_NAME}:utils`)
 
@@ -38,3 +38,15 @@ export function removeSlash(path: string) {
     path = path.slice(0, path.length - 1)
   return path
 }
+
+export function pathsEqual(oldPaths: string[], newPaths: string[]) {
+  if (oldPaths.length !== newPaths.length)
+    return false
+
+  for (let i = 0; i < oldPaths.length; i++) {
+    if (!oldPaths[i].includes(newPaths[i]))
+      return false
+  }
+
+  return true
+}

src/index.ts

@@ -3,7 +3,7 @@ import chokidar from 'chokidar'
 import createDebugger from 'debug'
 import type { ResolvedConfig, ViteDevServer } from 'vite'
 import type { Options } from './types'
-import { UNPLUGIN_NAME } from './constants'
+import { UNPLUGIN_NAME } from './core/constants'
 import { generateComponentFromPath, generateImagePath, isImagePath, normalizeImagePath } from './core/loader'
 import { Context } from './core/context'
 

src/resolver.ts

@@ -0,0 +1,97 @@
+import { isArray, isObject, isString } from '@vtrbo/utils/fn'
+import { toLinesCase } from '@vtrbo/utils/string'
+import createDebugger from 'debug'
+import type { Dir, Options } from './types'
+import { DEFAULT_ALIAS, DEFAULT_EXTENSIONS, DEFAULT_PATH, DEFAULT_PREFIX, UNPLUGIN_NAME } from './core/constants'
+import { removeSlash } from './core/utils'
+
+const debug = createDebugger(`${UNPLUGIN_NAME}:resolver`)
+
+export interface ImagesResolverOptions extends Omit<Options, 'compiler'> {
+  /**
+   * Prefix for resolving components name.
+   * Set '' to disable prefix.
+   *
+   * @default 'img'
+   */
+  prefix?: string | false
+}
+
+interface ResolvedImagesResolverOptions extends Omit<Required<ImagesResolverOptions>, 'dirs'> {
+  dirs: Dir[]
+}
+
+/**
+ * Resolver for unplugin-vue-components and unplugin-auto-import
+ *
+ * @param options
+ */
+export function ImagesResolver(options: ImagesResolverOptions = {}) {
+  const resolvedOptions = resolveOptions(options)
+  debug('ImagesResolver resolvedOptions =>', resolvedOptions)
+
+  return (name: string) => {
+    debug('ImagesResolver name =>', name)
+
+    return ''
+  }
+}
+
+function resolveOptions(options: ImagesResolverOptions = {}): ResolvedImagesResolverOptions {
+  const rawPrefix = options.prefix ?? DEFAULT_PREFIX
+  const prefix = rawPrefix ? `${toLinesCase(rawPrefix)}-` : ''
+
+  const dirs: Dir[] = []
+
+  if (options?.dirs) {
+    if (isString(options?.dirs)) {
+      dirs.push({
+        alias: DEFAULT_ALIAS,
+        path: removeSlash(options?.dirs),
+      })
+    }
+    else if (isArray(options?.dirs)) {
+      options?.dirs.forEach((dir) => {
+        if (isString(dir)) {
+          dirs.push({
+            alias: DEFAULT_ALIAS,
+            path: removeSlash(dir),
+          })
+        }
+        else {
+          for (const alias in dir) {
+            dirs.push({
+              alias,
+              path: removeSlash(dir[alias]),
+            })
+          }
+        }
+      })
+    }
+    else if (isObject(options?.dirs)) {
+      for (const alias in options?.dirs) {
+        dirs.push({
+          alias,
+          path: removeSlash(options?.dirs[alias]),
+        })
+      }
+    }
+  }
+
+  if (!dirs.length) {
+    dirs.push({
+      alias: DEFAULT_ALIAS,
+      path: removeSlash(DEFAULT_PATH),
+    })
+  }
+
+  const extensions = options?.extensions || DEFAULT_EXTENSIONS
+
+  return {
+    prefix,
+    dirs,
+    extensions,
+  }
+}
+
+export default ImagesResolver