diff --git a/packages/babel-sugar-functional-vue/package.json b/packages/babel-sugar-functional-vue/package.json
index 9f2a5cc..a44e103 100644
--- a/packages/babel-sugar-functional-vue/package.json
+++ b/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": {
diff --git a/packages/babel-sugar-functional-vue/src/index.js b/packages/babel-sugar-functional-vue/src/index.js
index 8c24fe4..86b435a 100644
--- a/packages/babel-sugar-functional-vue/src/index.js
+++ b/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)
+ },
+ },
+ })
+ }
},
}
}
diff --git a/packages/babel-sugar-functional-vue/test/test.js b/packages/babel-sugar-functional-vue/test/test.js
index abee254..5eaab64 100644
--- a/packages/babel-sugar-functional-vue/test/test.js
+++ b/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 }) => {props.msg}
`
+ 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)
+})
diff --git a/packages/babel-sugar-inject-h/package.json b/packages/babel-sugar-inject-h/package.json
index 1550837..608b113 100644
--- a/packages/babel-sugar-inject-h/package.json
+++ b/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": {
diff --git a/packages/babel-sugar-inject-h/src/index.js b/packages/babel-sugar-inject-h/src/index.js
index 778d7cc..43ad368 100644
--- a/packages/babel-sugar-inject-h/src/index.js
+++ b/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')),
+ ),
+ ]),
+ )
+ }
+ })
+ }
},
}
}
diff --git a/packages/babel-sugar-inject-h/test/test.js b/packages/babel-sugar-inject-h/test/test.js
index 173c6e2..3c59e96 100644
--- a/packages/babel-sugar-inject-h/test/test.js
+++ b/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 test
+ }
+ }`
+ const to = `const obj = {
+ render() {
+ const h = arguments[0];
+ return h("div", ["test"]);
+ }
+
+};`
+ t.is(await(transpileWithJSXPlugin(from)), to)
+})