feat: support transform user's resolveComponent usage, and enable by default

refer to nuxt/ui#3235

Author: antfu

src/core/options.ts

@@ -14,6 +14,8 @@ export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'ex
   collapseSamePrefixes: false,
   globalNamespaces: [],
 
+  transformerUserResolveFunctions: true,
+
   resolvers: [],
   globsExclude: [],
 

src/core/transforms/component.ts

@@ -24,13 +24,20 @@ function resolveVue2(code: string, s: MagicString) {
   return results
 }
 
-function resolveVue3(code: string, s: MagicString) {
+function resolveVue3(
+  code: string,
+  s: MagicString,
+  transformerUserResolveFunctions: boolean,
+) {
   const results: ResolveResult[] = []
 
   /**
    * when using some plugin like plugin-vue-jsx, resolveComponent will be imported as resolveComponent1 to avoid duplicate import
    */
-  for (const match of code.matchAll(/_resolveComponent\d*\("(.+?)"\)/g)) {
+  for (const match of code.matchAll(/_?resolveComponent\d*\("(.+?)"\)/g)) {
+    if (!transformerUserResolveFunctions && !match[0].startsWith('_')) {
+      continue
+    }
     const matchedName = match[1]
     if (match.index != null && matchedName && !matchedName.startsWith('_')) {
       const start = match.index
@@ -48,7 +55,9 @@ function resolveVue3(code: string, s: MagicString) {
 export default async function transformComponent(code: string, transformer: SupportedTransformer, s: MagicString, ctx: Context, sfcPath: string) {
   let no = 0
 
-  const results = transformer === 'vue2' ? resolveVue2(code, s) : resolveVue3(code, s)
+  const results = transformer === 'vue2'
+    ? resolveVue2(code, s)
+    : resolveVue3(code, s, ctx.options.transformerUserResolveFunctions)
 
   for (const { rawName, replace } of results) {
     debug(`| ${rawName}`)

src/core/transforms/directive/vue3.ts

@@ -1,11 +1,18 @@
 import type MagicString from 'magic-string'
 import type { ResolveResult } from '../../transformer'
 
-export default function resolveVue3(code: string, s: MagicString): ResolveResult[] {
+export default function resolveVue3(
+  code: string,
+  s: MagicString,
+  transformerUserResolveFunctions?: boolean,
+): ResolveResult[] {
   const results: ResolveResult[] = []
 
-  for (const match of code.matchAll(/_resolveDirective\("(.+?)"\)/g)) {
+  for (const match of code.matchAll(/_?resolveDirective\("(.+?)"\)/g)) {
     const matchedName = match[1]
+    if (!transformerUserResolveFunctions && !match[0].startsWith('_')) {
+      continue
+    }
     if (match.index != null && matchedName && !matchedName.startsWith('_')) {
       const start = match.index
       const end = start + match[0].length

src/types.ts

@@ -150,6 +150,16 @@ export interface Options {
    */
   transformer?: SupportedTransformer
 
+  /**
+   * Tranform users' usage of resolveComponent/resolveDirective as well
+   *
+   * If disabled, only components inside templates (which compiles to `_resolveComponent` etc.)
+   * will be transformed.
+   *
+   * @default true
+   */
+  transformerUserResolveFunctions?: boolean
+
   /**
    * Generate TypeScript declaration for global components
    *

test/__snapshots__/transform.test.ts.snap

@@ -103,17 +103,43 @@ exports[`transform > vue2 transform with jsx should work 1`] = `
 }
 `;
 
-exports[`transform > vue3 transform should work 1`] = `
+exports[`transform > vue3 transform should work > no-user-resolve 1`] = `
 {
   "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/Loading';
 import __unplugin_components_0 from 'test/component/TestComp';
 
     const render = (_ctx, _cache) => {
       const _component_test_comp = __unplugin_components_0
       const _directive_loading = __unplugin_directives_0
-    
+      
+      const _resolveNoUnderscore = resolveComponent("test-comp")
+
+      return _withDirectives(
+        (_openBlock(),
+        _createBlock(_resolveNoUnderscore, null, null, 512 /* NEED_PATCH */)),
+        _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
+        [[_directive_loading, 123]]
+      )
+    }
+    ",
+}
+`;
+
+exports[`transform > vue3 transform should work > with-user-resolve 1`] = `
+{
+  "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/Loading';
+import __unplugin_components_1 from 'test/component/TestComp';
+import __unplugin_components_0 from 'test/component/TestComp';
+
+    const render = (_ctx, _cache) => {
+      const _component_test_comp = __unplugin_components_0
+      const _directive_loading = __unplugin_directives_0
+      
+      const _resolveNoUnderscore = __unplugin_components_1
+
       return _withDirectives(
         (_openBlock(),
+        _createBlock(_resolveNoUnderscore, null, null, 512 /* NEED_PATCH */)),
         _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
         [[_directive_loading, 123]]
       )

test/transform.test.ts

@@ -67,22 +67,35 @@ describe('transform', () => {
     const render = (_ctx, _cache) => {
       const _component_test_comp = _resolveComponent("test-comp")
       const _directive_loading = _resolveDirective("loading")
-    
+      
+      const _resolveNoUnderscore = resolveComponent("test-comp")
+
       return _withDirectives(
         (_openBlock(),
+        _createBlock(_resolveNoUnderscore, null, null, 512 /* NEED_PATCH */)),
         _createBlock(_component_test_comp, null, null, 512 /* NEED_PATCH */)),
         [[_directive_loading, 123]]
       )
     }
     `
 
-    const ctx = new Context({
+    let ctx = new Context({
       resolvers: [resolver],
       transformer: 'vue3',
+      transformerUserResolveFunctions: false,
       directives: true,
     })
     ctx.sourcemap = false
-    expect(await ctx.transform(code, '')).toMatchSnapshot()
+    expect(await ctx.transform(code, '')).toMatchSnapshot('no-user-resolve')
+
+    ctx = new Context({
+      resolvers: [resolver],
+      transformer: 'vue3',
+      transformerUserResolveFunctions: true,
+      directives: true,
+    })
+    ctx.sourcemap = false
+    expect(await ctx.transform(code, '')).toMatchSnapshot('with-user-resolve')
   })
 })