fix: directive for vue 2.7 (#487)

Author: sxzz

src/core/options.ts

@@ -65,17 +65,16 @@ export function resolveOptions(options: Options, root: string): ResolvedOptions
   resolved.types = resolved.types || []
 
   resolved.root = root
-  resolved.transformer = options.transformer || getVueVersion() || 'vue3'
+  resolved.transformer = options.transformer || getVueVersion(root) || 'vue3'
   resolved.directives = (typeof options.directives === 'boolean')
     ? options.directives
     : !resolved.resolvers.some(i => i.type === 'directive')
         ? false
-        : getVueVersion() === 'vue3'
-
+        : getVueVersion(root) === 'vue3'
   return resolved
 }
 
-function getVueVersion() {
-  const version = getPackageInfoSync('vue')?.version || '3'
+function getVueVersion(root: string) {
+  const version = getPackageInfoSync('vue', { paths: [root] })?.version || '3'
   return version.startsWith('2.') ? 'vue2' : 'vue3'
 }

src/core/transforms/directive/vue2.ts

@@ -15,7 +15,7 @@ const getRenderFnStart = (ast: ParseResult<File>): number => {
   const renderFn = ast.program.body.find((node): node is VariableDeclaration =>
     node.type === 'VariableDeclaration'
       && node.declarations[0].id.type === 'Identifier'
-      && node.declarations[0].id.name === 'render',
+      && ['render', '_sfc_render'].includes(node.declarations[0].id.name),
   )
   const start = (((renderFn?.declarations[0].init as FunctionExpression)?.body) as BlockStatement)?.start
   if (start === null || start === undefined)
@@ -41,7 +41,11 @@ export default async function resolveVue2(code: string, s: MagicString): Promise
     },
   })
 
+  if (nodes.length === 0)
+    return []
+
   const results: ResolveResult[] = []
+  const renderStart = getRenderFnStart(ast)
   for (const node of nodes) {
     const { callee, arguments: args } = node
     // _c(_, {})
@@ -58,8 +62,6 @@ export default async function resolveVue2(code: string, s: MagicString): Promise
     if (!directives || directives.type !== 'ArrayExpression')
       continue
 
-    const renderStart = getRenderFnStart(ast)
-
     for (const directive of directives.elements) {
       if (directive?.type !== 'ObjectExpression')
         continue

test/__snapshots__/transform.test.ts.snap

@@ -23,6 +23,27 @@ this.$options.directives[\\"loading\\"] = __unplugin_directives_0;
 }
 `;
 
+exports[`Component and directive as same name > vue2.7 transform should work 1`] = `
+{
+  "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/Loading';
+import __unplugin_components_0 from 'test/component/Div';
+
+    import { defineComponent as _defineComponent } from \\"vue\\";
+    const _sfc_main = /* @__PURE__ */ _defineComponent({
+      __name: \\"App\\",
+      setup(__props) {
+        return { __sfc: true };
+      }
+    });
+    var _sfc_render = function render() {
+this.$options.directives[\\"loading\\"] = __unplugin_directives_0;
+      var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+      return _c(__unplugin_components_0, { directives: [{ name: \\"loading\\", rawName: \\"v-loading\\", value: 123, expression: \\"123\\" }] }, [], 1);
+    };
+    ",
+}
+`;
+
 exports[`Component and directive as same name > vue3 transform should work 1`] = `
 {
   "code": "/* unplugin-vue-components disabled */import __unplugin_directives_0 from 'test/directive/ElInfiniteScroll';

test/transform.test.ts

@@ -91,6 +91,30 @@ describe('Component and directive as same name', () => {
     expect(await ctx.transform(code, '')).toMatchSnapshot()
   })
 
+  it('vue2.7 transform should work', async () => {
+    const code = `
+    import { defineComponent as _defineComponent } from "vue";
+    const _sfc_main = /* @__PURE__ */ _defineComponent({
+      __name: "App",
+      setup(__props) {
+        return { __sfc: true };
+      }
+    });
+    var _sfc_render = function render() {
+      var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+      return _c("div", { directives: [{ name: "loading", rawName: "v-loading", value: 123, expression: "123" }] }, [], 1);
+    };
+    `
+
+    const ctx = new Context({
+      resolvers: [resolver],
+      transformer: 'vue2',
+      directives: true,
+    })
+    ctx.sourcemap = false
+    expect(await ctx.transform(code, '')).toMatchSnapshot()
+  })
+
   it('vue3 transform should work', async () => {
     const code = `
     const render = (_ctx, _cache) => {