fix: functional-vue & inject-h should traverse before JSX plugin (#166)

partially revert #87, fix functional-vue & inject-h in preset
fixes #165

Author: haoqunjiang

packages/babel-sugar-functional-vue/package.json

@@ -15,7 +15,7 @@
     "prepublish": "yarn build",
     "build": "rollup -c",
     "build:test": "rollup -c rollup.config.testing.js",
-    "pretest": "yarn build:test",
+    "pretest": "yarn build:test && cd ../babel-plugin-transform-vue-jsx && yarn build:test",
     "test": "nyc --reporter=html --reporter=text-summary ava -v test/test.js"
   },
   "devDependencies": {

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

@@ -77,35 +77,39 @@ export default babel => {
   return {
     inherits: syntaxJsx,
     visitor: {
-      ExportDefaultDeclaration: {
-        exit(path) {
-          if (!t.isArrowFunctionExpression(path.node.declaration) || !hasJSX(t, path)) {
-            return
-          }
+      Program(p) {
+        p.traverse({
+          ExportDefaultDeclaration: {
+            exit(path) {
+              if (!t.isArrowFunctionExpression(path.node.declaration) || !hasJSX(t, path)) {
+                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
-          }
+              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-functional-vue/test/test.js

@@ -1,6 +1,7 @@
 import test from 'ava'
 import { transform } from '@babel/core'
 import plugin from '../dist/plugin.testing'
+import jsxPlugin from '../../babel-plugin-transform-vue-jsx/dist/plugin.testing'
 
 const transpile = src =>
   new Promise((resolve, reject) => {
@@ -18,6 +19,22 @@ const transpile = src =>
     )
   })
 
+const transpileWithJSXPlugin = src =>
+  new Promise((resolve, reject) => {
+    transform(
+      src,
+      {
+        plugins: [plugin, jsxPlugin],
+      },
+      (err, result) => {
+        if (err) {
+          return reject(err)
+        }
+        resolve(result.code)
+      },
+    )
+  })
+
 const tests = [
   {
     name: 'Generic functional component',
@@ -107,3 +124,19 @@ tests.map(({ name, from, to, NODE_ENV }) => {
     }
   })
 })
+
+test('Should work with JSX plugin enabled', async t => {
+  const from = `export const A = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}</div>`
+  const to = `export const A = {
+  functional: true,
+  render: (h, {
+    props,
+    listeners
+  }) => h("div", {
+    "on": {
+      "click": listeners.click
+    }
+  }, [props.msg])
+};`
+  t.is(await(transpileWithJSXPlugin(from)), to)
+})

packages/babel-sugar-inject-h/package.json

@@ -15,7 +15,7 @@
     "prepublish": "yarn build",
     "build": "rollup -c",
     "build:test": "rollup -c rollup.config.testing.js",
-    "pretest": "yarn build:test",
+    "pretest": "yarn build:test && cd ../babel-plugin-transform-vue-jsx && yarn build:test",
     "test": "nyc --reporter=html --reporter=text-summary ava -v test/test.js"
   },
   "devDependencies": {

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

@@ -54,29 +54,31 @@ export default babel => {
   return {
     inherits: syntaxJsx,
     visitor: {
-      'ObjectMethod|ClassMethod': {
-        exit(path) {
-          if (firstParamIsH(t, path) || !hasJSX(t, path) || isInsideJSXExpression(t, path)) {
-            return
-          }
+      Program(path1) {
+        path1.traverse({
+          'ObjectMethod|ClassMethod'(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-inject-h/test/test.js

@@ -1,6 +1,7 @@
 import test from 'ava'
 import { transform } from '@babel/core'
 import plugin from '../dist/plugin.testing'
+import jsxPlugin from '../../babel-plugin-transform-vue-jsx/dist/plugin.testing'
 
 const transpile = src =>
   new Promise((resolve, reject) => {
@@ -18,6 +19,22 @@ const transpile = src =>
     )
   })
 
+const transpileWithJSXPlugin = src =>
+  new Promise((resolve, reject) => {
+    transform(
+      src,
+      {
+        plugins: [plugin, jsxPlugin],
+      },
+      (err, result) => {
+        if (err) {
+          return reject(err)
+        }
+        resolve(result.code)
+      },
+    )
+  })
+
 const tests = [
   {
     name: 'Simple injection in object methods',
@@ -106,3 +123,19 @@ const tests = [
 ]
 
 tests.forEach(({ name, from, to }) => test(name, async t => t.is(await transpile(from), to)))
+
+test('Should work with JSX plugin enabled', async t => {
+  const from = `const obj = {
+    render () {
+      return <div>test</div>
+    }
+  }`
+  const to = `const obj = {
+  render() {
+    const h = arguments[0];
+    return h("div", ["test"]);
+  }
+
+};`
+  t.is(await(transpileWithJSXPlugin(from)), to)
+})