Merge pull request #87 from Nandiin/dev

feat: allow prior babel plugins to traverse JSX tree thoroughly

Author: nickmessing

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))
+        },
       },
     },
   }

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();
+    })
+  })
+})

packages/babel-sugar-functional-vue/src/index.js

@@ -77,34 +77,34 @@ export default babel => {
   return {
     inherits: syntaxJsx,
     visitor: {
-      Program(path) {
-        path.traverse({
-          ExportDefaultDeclaration(path) {
-            if (!t.isArrowFunctionExpression(path.node.declaration) || !hasJSX(t, path)) {
-              return
-            }
+      ExportDefaultDeclaration: {
+        exit(path) {
+          if (!t.isArrowFunctionExpression(path.node.declaration) || !hasJSX(t, path)) {
+            return
+          }
 
-            convertFunctionalComponent(t, path.get('declaration'))
-          },
-          VariableDeclaration(path) {
-            if (
-              path.node.declarations.length !== 1 ||
-              !t.isVariableDeclarator(path.node.declarations[0]) ||
-              !t.isArrowFunctionExpression(path.node.declarations[0].init)
-            ) {
-              return
-            }
+          convertFunctionalComponent(t, path.get('declaration'))
+        },
+      },
+      VariableDeclaration: {
+        exit(path) {
+          if (
+            path.node.declarations.length !== 1 ||
+            !t.isVariableDeclarator(path.node.declarations[0]) ||
+            !t.isArrowFunctionExpression(path.node.declarations[0].init)
+          ) {
+            return
+          }
 
-            const declarator = path.get('declarations')[0]
+          const declarator = path.get('declarations')[0]
 
-            if (!isFunctionalComponentDeclarator(t, declarator)) {
-              return
-            }
+          if (!isFunctionalComponentDeclarator(t, declarator)) {
+            return
+          }
 
-            const name = path.node.declarations[0].id.name
-            convertFunctionalComponent(t, path.get('declarations')[0].get('init'), name)
-          },
-        })
+          const name = path.node.declarations[0].id.name
+          convertFunctionalComponent(t, path.get('declarations')[0].get('init'), name)
+        },
       },
     },
   }

packages/babel-sugar-inject-h/src/index.js

@@ -54,30 +54,28 @@ export default babel => {
   return {
     inherits: syntaxJsx,
     visitor: {
-      Program(path) {
-        path.traverse({
-          'ObjectMethod|ClassMethod'(path) {
-            if (firstParamIsH(t, path) || !hasJSX(t, path) || isInsideJSXExpression(t, path)) {
-              return
-            }
+      'ObjectMethod|ClassMethod': {
+        exit(path) {
+          if (firstParamIsH(t, path) || !hasJSX(t, path) || isInsideJSXExpression(t, path)) {
+            return
+          }
 
-            const isRender = path.node.key.name === 'render'
+          const isRender = path.node.key.name === 'render'
 
-            path
-              .get('body')
-              .unshiftContainer(
-                'body',
-                t.variableDeclaration('const', [
-                  t.variableDeclarator(
-                    t.identifier('h'),
-                    isRender
-                      ? t.memberExpression(t.identifier('arguments'), t.numericLiteral(0), true)
-                      : t.memberExpression(t.thisExpression(), t.identifier('$createElement')),
-                  ),
-                ]),
-              )
-          },
-        })
+          path
+            .get('body')
+            .unshiftContainer(
+              'body',
+              t.variableDeclaration('const', [
+                t.variableDeclarator(
+                  t.identifier('h'),
+                  isRender
+                    ? t.memberExpression(t.identifier('arguments'), t.numericLiteral(0), true)
+                    : t.memberExpression(t.thisExpression(), t.identifier('$createElement')),
+                ),
+              ]),
+            )
+        },
       },
     },
   }

packages/babel-sugar-v-model/src/index.js

@@ -24,21 +24,19 @@ export default function(babel) {
   return {
     inherits: syntaxJsx,
     visitor: {
-      Program(path) {
-        path.traverse({
-          JSXAttribute(path) {
-            const parsed = parseVModel(t, path)
-            if (!parsed) {
-              return
-            }
-
-            const { modifiers, valuePath } = parsed
-
-            const parent = path.parentPath
-            transformModel(t, parent, valuePath, modifiers)
-            path.remove()
-          },
-        })
+      JSXAttribute: {
+        exit(path) {
+          const parsed = parseVModel(t, path)
+          if (!parsed) {
+            return
+          }
+
+          const { modifiers, valuePath } = parsed
+
+          const parent = path.parentPath
+          transformModel(t, parent, valuePath, modifiers)
+          path.remove()
+        },
       },
     },
   }
@@ -182,17 +180,12 @@ const addProp = (t, path, propName, expression, unshift = false) => {
  */
 const genAssignmentCode = (t, valuePath, valueExpression) => {
   let obj
-  if (t.isMemberExpression(valuePath) && !t.isThisExpression(obj = valuePath.get('object').node)) {
-    return t.callExpression(
-      t.memberExpression(t.thisExpression(), t.identifier('$set')),
-      [
-        obj,
-        valuePath.node.computed
-          ? valuePath.get('property').node
-          : t.stringLiteral(valuePath.get('property.name').node),
-        valueExpression
-      ]
-    );
+  if (t.isMemberExpression(valuePath) && !t.isThisExpression((obj = valuePath.get('object').node))) {
+    return t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('$set')), [
+      obj,
+      valuePath.node.computed ? valuePath.get('property').node : t.stringLiteral(valuePath.get('property.name').node),
+      valueExpression,
+    ])
   } else {
     return t.assignmentExpression('=', valuePath.node, valueExpression)
   }

packages/babel-sugar-v-on/src/index.js

@@ -287,18 +287,16 @@ export default function(babel) {
   return {
     inherits: syntaxJsx,
     visitor: {
-      Program(path) {
-        path.traverse({
-          JSXAttribute(path) {
-            const { event, expression, isNative } = genHandler(path)
-
-            if (event) {
-              path.remove()
-
-              addEvent(event, expression, isNative, path.parentPath.node.attributes)
-            }
-          },
-        })
+      JSXAttribute: {
+        exit(path) {
+          const { event, expression, isNative } = genHandler(path)
+
+          if (event) {
+            path.remove()
+
+            addEvent(event, expression, isNative, path.parentPath.node.attributes)
+          }
+        },
       },
     },
   }