fix: auto-import directives with v-on and v-bind

fixes #258
vuetifyjs · Jul 25, 2022 · d0e115c · d0e115c
1 parent adc2d84
commit d0e115c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/dev5/src/App.vue b/dev5/src/App.vue
@@ -9,6 +9,9 @@
           <v-text-field></v-text-field>
         </v-card-text>
       </v-card>
+      <v-card v-bind="$attrs" v-ripple>v-bind</v-card>
+      <v-card v-on="$listeners" v-ripple>v-on</v-card>
+      <v-card v-bind="$attrs" v-on="$listeners" v-ripple>v-bind v-on</v-card>
       <pre>{{ {
         directives: [{
           name: "resize"

diff --git a/dev5/webpack.config.js b/dev5/webpack.config.js
@@ -84,6 +84,7 @@ module.exports = {
     hints: false
   },
   optimization: {
+    minimize: false,
     concatenateModules: false
   }
 }

diff --git a/lib/loader.js b/lib/loader.js
@@ -80,27 +80,48 @@ module.exports = async function (content, sourceMap) {
   const ast = acorn.parse(content, { sourceType: 'module', ecmaVersion: 'latest' })
   acornWalk.simple(ast, {
     CallExpression (node) {
-      if (node.callee.name === '_c') {
+      let props
+
+      if (
+        // _c() or _vm._c()
+        node.callee.type === 'Identifier'
+          ? node.callee.name === '_c'
+          : (node.callee.type === 'MemberExpression' &&
+            node.callee.object.name === '_vm' &&
+            node.callee.property.name === '_c')
+      ) {
         if (node.arguments[0].type === 'Literal') {
+          // _c('div')
           matches.components.push([node.arguments[0].value, node.arguments[0].start, node.arguments[0].end])
         }
+
         if (node.arguments.length >= 2 && node.arguments[1].type === 'ObjectExpression') {
-          const props = node.arguments[1].properties
-          props.forEach(prop => {
-            if (prop.key.type === 'Identifier' && prop.key.name === 'directives' && prop.value.type === 'ArrayExpression') {
-              prop.value.elements.forEach(directive => {
-                if (directive.type === 'ObjectExpression') {
-                  directive.properties.forEach(prop => {
-                    if (prop.key.type === 'Identifier' && prop.key.name === 'name') {
-                      matches.directives.push([prop.value.value, prop.start, prop.end])
-                    }
-                  })
+          props = node.arguments[1].properties
+        }
+      } else if (
+        // _vm._b() or _vm._g()
+        node.callee.type === 'MemberExpression' &&
+          node.callee.object.name === '_vm' &&
+          ['_b', '_g'].includes(node.callee.property.name) &&
+          node.arguments.length > 0 &&
+          node.arguments[0].type === 'ObjectExpression'
+      ) {
+        props = node.arguments[0].properties
+      }
+
+      props && props.forEach(prop => {
+        if (prop.key.type === 'Identifier' && prop.key.name === 'directives' && prop.value.type === 'ArrayExpression') {
+          prop.value.elements.forEach(directive => {
+            if (directive.type === 'ObjectExpression') {
+              directive.properties.forEach(prop => {
+                if (prop.key.type === 'Identifier' && prop.key.name === 'name') {
+                  matches.directives.push([prop.value.value, prop.start, prop.end])
                 }
               })
             }
           })
         }
-      }
+      })
     }
   })