fix(vue2): parent components importing, close #125

Author: antfu

examples/vue-cli/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@vue/composition-api": "^1.1.3",
     "core-js": "^3.16.3",
+    "veui": "^2.0.6",
     "vue": "^2.6.14"
   },
   "devDependencies": {

examples/vue-cli/src/App.vue

@@ -1,17 +1,31 @@
 <template>
-  <div class="block">
-    <ComponentA msg="a" />
-    <component-b msg="b" />
-    <ComponentC msg="c" />
-    <ComponentD />
+  <div id="app">
+    <veui-input-group>
+      <veui-input />
+      <veui-button>OK</veui-button>
+    </veui-input-group>
+
+    <veui-select>
+      <veui-option value="1">
+        Option 1
+      </veui-option>
+      <veui-option value="2">
+        Option 2
+      </veui-option>
+    </veui-select>
+
+    <veui-date-picker />
   </div>
 </template>
 
-<style scoped>
-.block {
-  padding: 0px 20px 10px 20px;
-  margin: 20px 20px;
-  border: 1px solid #888;
-  border-radius: 5px;
+<script>
+export default {
+  name: 'App',
+}
+</script>
+
+<style>
+#app {
+  margin-top: 60px;
 }
 </style>

examples/vue-cli/vue.config.js

@@ -9,6 +9,7 @@ const Components = require('unplugin-vue-components/webpack')
  * @type {import('@vue/cli-service').ProjectOptions}
  */
 module.exports = {
+  transpileDependencies: ['veui'],
   configureWebpack: {
     plugins: [
       ScriptSetup({
@@ -23,6 +24,15 @@ module.exports = {
           IconsResolver({
             componentPrefix: '',
           }),
+          (name) => {
+            console.log(name)
+            if (name.startsWith('Veui')) {
+              return {
+                importName: name.slice(4),
+                path: 'veui',
+              }
+            }
+          },
         ],
         transformer: 'vue2',
       }),

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import Debug from 'debug'
 import MagicString from 'magic-string'
 import { TransformResult } from 'unplugin'
 import { Transformer } from '../../types'
+import { DISABLE_COMMENT } from '../constants'
 import { Context } from '../context'
 import { pascalCase, stringifyComponentImport } from '../utils'
 
@@ -20,7 +21,7 @@ export function Vue2Transformer(ctx: Context): Transformer {
 
     const s = new MagicString(code)
 
-    for (const match of code.matchAll(/_c\(['"](.+?)["']([,)])/g)) {
+    for (const match of code.matchAll(/_c\([\s\n\t]*['"](.+?)["']([,)])/g)) {
       const [full, matchedName, append] = match
 
       if (match.index != null && matchedName && !matchedName.startsWith('_')) {
@@ -31,7 +32,7 @@ export function Vue2Transformer(ctx: Context): Transformer {
         componentPaths.push(name)
         const component = ctx.findComponent(name, [sfcPath], matchedName)
         if (component) {
-          const var_name = `__vite_components_${no}`
+          const var_name = `__unplugin_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))
           no += 1
           s.overwrite(start, end, `_c(${var_name}${append}`)
@@ -46,7 +47,7 @@ export function Vue2Transformer(ctx: Context): Transformer {
     if (!head.length)
       return null
 
-    s.prepend(`${head.join(';')};`)
+    s.prepend(`${DISABLE_COMMENT}${head.join(';')};`)
 
     const result: TransformResult = { code: s.toString() }
     if (ctx.sourcemap)

src/core/transforms/vue2.ts

@@ -2,6 +2,7 @@ import Debug from 'debug'
 import MagicString from 'magic-string'
 import { TransformResult } from 'unplugin'
 import { Transformer } from '../../types'
+import { DISABLE_COMMENT } from '../constants'
 import { Context } from '../context'
 import { pascalCase, stringifyComponentImport } from '../utils'
 
@@ -30,7 +31,7 @@ export function Vue3Transformer(ctx: Context): Transformer {
         componentPaths.push(name)
         const component = ctx.findComponent(name, [sfcPath], matchedName)
         if (component) {
-          const var_name = `__vite_components_${no}`
+          const var_name = `__unplugin_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))
           no += 1
           s.overwrite(start, end, var_name)
@@ -45,7 +46,7 @@ export function Vue3Transformer(ctx: Context): Transformer {
     if (!head.length)
       return null
 
-    s.prepend(`${head.join(';')};`)
+    s.prepend(`${DISABLE_COMMENT}${head.join(';')};`)
 
     const result: TransformResult = { code: s.toString() }
     if (ctx.sourcemap)

src/core/transforms/vue3.ts

@@ -2,6 +2,7 @@ import { createUnplugin } from 'unplugin'
 import { createFilter } from '@rollup/pluginutils'
 import { Options } from '../types'
 import { Context } from './context'
+import { shouldTransform } from './utils'
 
 export default createUnplugin<Options>((options = {}) => {
   const filter = createFilter(
@@ -19,6 +20,8 @@ export default createUnplugin<Options>((options = {}) => {
     },
 
     async transform(code, id) {
+      if (!shouldTransform(code))
+        return null
       try {
         const result = await ctx.transform(code, id)
         ctx.generateDeclaration()

src/core/unplugin.ts

@@ -4,6 +4,7 @@ import { ResolvedConfig } from 'vite'
 import { slash, toArray } from '@antfu/utils'
 import { ComponentInfo, ResolvedOptions, ImportInfo } from '../types'
 import { Context } from './context'
+import { DISABLE_COMMENT } from './constants'
 
 export interface ResolveComponent {
   filename: string
@@ -148,3 +149,9 @@ export function getPkgVersion(pkgName: string, defaultVersion: string): string {
     return defaultVersion
   }
 }
+
+export function shouldTransform(code: string) {
+  if (code.includes(DISABLE_COMMENT))
+    return false
+  return true
+}