feat: allow prior babel plugins to traverse JSX tree throughly, close #86

Author: Nandiin

Diff for: packages/babel-plugin-transform-vue-jsx/src/index.js

@@ -75,9 +75,8 @@ const getChildren = (t, paths) =>
       if (path.isJSXSpreadChild()) {
         return transformJSXSpreadChild(t, path)
       }
-      /* istanbul ignore else */
-      if (path.isJSXElement()) {
-        return transformJSXElement(t, path)
+      if (path.isCallExpression()) {
+        return path.node
       }
       /* istanbul ignore next */
       throw new Error(`getChildren: ${path.type} is not supported`)
@@ -339,6 +338,9 @@ const transformAttributes = (t, attributes) =>
  * @returns CallExpression
  */
 const transformJSXElement = (t, path) => {
+  if (t.isJSXAttribute(path.container)) {
+    throw new Error(`getAttributes (attribute value): ${path.type} is not supported`)
+  }
   const tag = getTag(t, path.get('openingElement'))
   const children = getChildren(t, path.get('children'))
   const openingElementPath = path.get('openingElement')
@@ -451,8 +453,10 @@ export default babel => {
     name: 'babel-plugin-transform-vue-jsx',
     inherits: syntaxJsx,
     visitor: {
-      JSXElement(path) {
-        path.replaceWith(transformJSXElement(t, path))
+      JSXElement: {
+        exit(path) {
+          path.replaceWith(transformJSXElement(t, path))
+        },
       },
     },
   }

Diff for: packages/babel-plugin-transform-vue-jsx/test/snapshot.js

@@ -1,5 +1,6 @@
 import test from 'ava'
 import { transform } from '@babel/core'
+import syntaxJsx from '@babel/plugin-syntax-jsx'
 import plugin from '../dist/plugin.testing'
 
 const transpile = src =>
@@ -356,3 +357,25 @@ test('JSXElement attribute value throws error', t =>
         resolve()
       })
   }))
+
+
+test('Allows prior plugins to traverse JSX tree throughly', t => {
+  let visited = 0;
+  const anotherPlugin = () => ({
+    name: 'babel-plugin-another',
+    inherits: syntaxJsx,
+    visitor: {
+      JSXElement(path) {
+        visited++;
+
+      }
+    }
+  })
+  return new Promise(resolve => {
+    transform(`render(h => <a><b/></a>)`,{ plugins: [anotherPlugin, plugin] }, (err) => {
+      if (err) t.fail()
+      t.is(visited, 2)
+      resolve();
+    })
+  })
+})