feat: supplement the path of components and styles

Author: tolking

playground/app.vue

@@ -169,7 +169,7 @@ onMounted(() => {
         @close="showCascader = false"
       />
     </van-popup>
-    <van-floating-panel
+    <!-- <van-floating-panel
       v-model:show="showFloatingPanel"
       :content-draggable="false"
       :lock-scroll="true"
@@ -178,7 +178,7 @@ onMounted(() => {
       <van-cell-group>
         <van-cell v-for=" (n, i) in 150" :key="i" :title="n" :value="n" />
       </van-cell-group>
-    </van-floating-panel>
+    </van-floating-panel> -->
 
     <van-back-top bottom="70" />
     <van-sticky position="bottom">

playground/nuxt.config.ts

@@ -2,6 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 import Vant from '..'
 
 export default defineNuxtConfig({
+  devtools: true,
   modules: [Vant],
   vant: {
     lazyload: true

src/core/components.ts

@@ -1,22 +1,23 @@
-import { addComponent } from '@nuxt/kit'
+import { addComponent, createResolver } from '@nuxt/kit'
 import { libraryName } from '../config'
 import { hyphenate, toArray } from '../utils'
 import type { Options } from '../types'
 
 export function resolveComponents (config: Options) {
   const { components, excludeExports } = config
+  const { resolvePath } = createResolver(import.meta.url)
 
-  components.forEach((item) => {
+  components.forEach(async (item) => {
     const [name, alias, from] = toArray(item)
     if (excludeExports.includes(name)) { return }
     const filePath =
       !from || from === libraryName
-        ? `${libraryName}/es/${hyphenate(name)}/${name}`
+        ? `${libraryName}/es/${hyphenate(name)}/${name}.mjs`
         : from
 
     addComponent({
       name: alias || `Van${name}`,
-      filePath
+      filePath: await resolvePath(filePath)
     })
   })
 }

src/core/options.ts

@@ -3,6 +3,7 @@ import { libraryName } from '../config'
 
 export function resolveOptions () {
   const nuxt = useNuxt()
+  const regExp = new RegExp(`${libraryName}/es/.*/style/index.mjs`)
 
-  nuxt.options.build.transpile.push(libraryName)
+  nuxt.options.build.transpile.push(regExp)
 }

src/core/styles.ts

@@ -3,7 +3,7 @@ import { hyphenate } from '../utils'
 import type { Options } from '../types'
 
 export function getStyleDir (name: string) {
-  return `${libraryName}/es/${hyphenate(name)}/style/index`
+  return `${libraryName}/es/${hyphenate(name)}/style/index.mjs`
 }
 
 export function resolveStyles (config: Options, name: string) {

src/core/transformPlugin.ts

@@ -1,6 +1,7 @@
 import { createUnplugin } from 'unplugin'
 import MagicString from 'magic-string'
 import type { NuxtOptions } from '@nuxt/schema'
+import { createResolver } from '@nuxt/kit'
 import { allImportsWithStyle, libraryName } from '../config'
 import { camelize, genSideEffectsImport, toRegExp } from '../utils'
 import type { TransformOptions } from '../types'
@@ -28,25 +29,33 @@ export const transformPlugin = createUnplugin((options: PluginOptions) => {
         return true
       }
     },
-    transform (code, id) {
-      const imports = new Set<string>()
+    async transform (code, id) {
+      const { resolvePath } = createResolver(import.meta.url)
+      const styles = new Set<string>()
       const s = new MagicString(code)
 
-      const addStyles = (style?: string) => {
-        style && imports.add(genSideEffectsImport(style))
-      }
-
       s.replace(componentsRegExp, (full, lazy, name) => {
-        addStyles(transformStyles(camelize(name)))
+        styles.add(camelize(name))
         return full
       })
 
       s.replace(importsRegExp, (full, name) => {
-        addStyles(transformStyles(name))
+        styles.add(name)
         return full
       })
 
-      if (imports.size) {
+      if (styles.size) {
+        const imports: string[] = []
+
+        for await (const name of styles) {
+          const style = transformStyles(name)
+          if (style) {
+            const path = await resolvePath(style)
+            const importPath = genSideEffectsImport(path)
+            imports.push(importPath)
+          }
+        }
+
         s.prepend([...imports, ''].join('\n'))
       }