From d78da16210c685f31be64db2d5b95f1e986c39a6 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Tue, 20 Oct 2020 16:27:24 +0800 Subject: [PATCH] fix: v-model/v-on should apply before arrow-functions transform So that it can get the correct `this` scope. Partially reverts #87. Fixes https://github.com/vuejs/jsx/issues/165#issuecomment-712603569 --- packages/babel-sugar-v-model/package.json | 3 +- packages/babel-sugar-v-model/src/index.js | 30 ++++++------- packages/babel-sugar-v-model/yarn.lock | 34 +++++++++++++++ packages/babel-sugar-v-on/package.json | 3 +- packages/babel-sugar-v-on/src/index.js | 20 +++++---- packages/babel-sugar-v-on/test/functional.js | 28 +++++++++++++ packages/babel-sugar-v-on/yarn.lock | 44 ++++++++++++++++++++ 7 files changed, 137 insertions(+), 25 deletions(-) diff --git a/packages/babel-sugar-v-model/package.json b/packages/babel-sugar-v-model/package.json index 34b195f..fbb279d 100644 --- a/packages/babel-sugar-v-model/package.json +++ b/packages/babel-sugar-v-model/package.json @@ -14,7 +14,7 @@ "scripts": { "pretest:snapshot": "yarn build:test", "test:snapshot": "nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js", - "pretest:functional": "yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js,./node_modules/@vue/babel-plugin-transform-vue-jsx/dist/plugin.js --out-file test/functional-compiled.js", + "pretest:functional": "yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js,./node_modules/@vue/babel-plugin-transform-vue-jsx/dist/plugin.js,@babel/plugin-transform-arrow-functions --out-file test/functional-compiled.js", "test:functional": "ava -v test/functional-compiled.js", "build": "rollup -c", "build:test": "rollup -c rollup.config.testing.js", @@ -24,6 +24,7 @@ "devDependencies": { "@babel/cli": "^7.2.0", "@babel/core": "^7.2.0", + "@babel/plugin-transform-arrow-functions": "^7.12.1", "@babel/preset-env": "^7.2.0", "@vue/test-utils": "^1.0.0-beta.26", "ava": "^0.25.0", diff --git a/packages/babel-sugar-v-model/src/index.js b/packages/babel-sugar-v-model/src/index.js index 1c2071c..49f013d 100644 --- a/packages/babel-sugar-v-model/src/index.js +++ b/packages/babel-sugar-v-model/src/index.js @@ -24,21 +24,23 @@ export default function(babel) { return { inherits: syntaxJsx, visitor: { - JSXAttribute: { - exit(path) { - const parsed = parseVModel(t, path) - if (!parsed) { - return + Program(p) { + p.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() } - - const { modifiers, valuePath } = parsed - - const parent = path.parentPath - transformModel(t, parent, valuePath, modifiers) - path.remove() - }, - }, - }, + }) + } + } } } diff --git a/packages/babel-sugar-v-model/yarn.lock b/packages/babel-sugar-v-model/yarn.lock index e2f41da..49b28ee 100644 --- a/packages/babel-sugar-v-model/yarn.lock +++ b/packages/babel-sugar-v-model/yarn.lock @@ -199,6 +199,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250" integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA== +"@babel/helper-plugin-utils@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375" + integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== + "@babel/helper-regex@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27" @@ -352,6 +357,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-arrow-functions@^7.12.1": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3" + integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-transform-arrow-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550" @@ -674,6 +686,23 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.12.tgz#e15a9d034d9210f00320ef718a50c4a799417c47" integrity sha512-Pr+6JRiKkfsFvmU/LK68oBRCQeEg36TyAbPhc2xpez24OOZZCuoIhWGTd39VZy6nGafSbxzGouFPTFD/rR1A0A== +"@vue/babel-helper-vue-jsx-merge-props@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81" + integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA== + +"@vue/babel-plugin-transform-vue-jsx@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7" + integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + html-tags "^2.0.0" + lodash.kebabcase "^4.1.1" + svg-tags "^1.0.0" + "@vue/test-utils@^1.0.0-beta.26": version "1.0.0-beta.26" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.26.tgz#1ae7e1dc2bef4f49f9dbfdfecad342d17d6c5c88" @@ -3410,6 +3439,11 @@ lodash.isequal@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA= +lodash.kebabcase@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" + integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY= + lodash.merge@^4.6.0: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" diff --git a/packages/babel-sugar-v-on/package.json b/packages/babel-sugar-v-on/package.json index e90d0c1..bee0a87 100644 --- a/packages/babel-sugar-v-on/package.json +++ b/packages/babel-sugar-v-on/package.json @@ -14,7 +14,7 @@ "scripts": { "pretest:snapshot": "yarn build:test", "test:snapshot": "nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js", - "pretest:functional": "yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js,./node_modules/@vue/babel-plugin-transform-vue-jsx/dist/plugin.js --out-file test/functional-compiled.js", + "pretest:functional": "yarn build:test && nyc --reporter=html --reporter=text-summary babel test/functional.js --plugins ./dist/plugin.testing.js,./node_modules/@vue/babel-plugin-transform-vue-jsx/dist/plugin.js,@babel/plugin-transform-arrow-functions --out-file test/functional-compiled.js", "test:functional": "ava -v test/functional-compiled.js", "build": "rollup -c", "build:test": "rollup -c rollup.config.testing.js", @@ -24,6 +24,7 @@ "devDependencies": { "@babel/cli": "^7.2.0", "@babel/core": "^7.2.0", + "@babel/plugin-transform-arrow-functions": "^7.12.1", "@babel/preset-env": "^7.2.0", "@vue/test-utils": "^1.0.0-beta.26", "ava": "^0.25.0", diff --git a/packages/babel-sugar-v-on/src/index.js b/packages/babel-sugar-v-on/src/index.js index cf258ae..52fb2cd 100644 --- a/packages/babel-sugar-v-on/src/index.js +++ b/packages/babel-sugar-v-on/src/index.js @@ -287,17 +287,19 @@ export default function(babel) { return { inherits: syntaxJsx, visitor: { - JSXAttribute: { - exit(path) { - const { event, expression, isNative } = genHandler(path) + Program(p) { + p.traverse({ + JSXAttribute(path) { + const { event, expression, isNative } = genHandler(path) - if (event) { - path.remove() + if (event) { + path.remove() - addEvent(event, expression, isNative, path.parentPath.node.attributes) + addEvent(event, expression, isNative, path.parentPath.node.attributes) + } } - }, - }, - }, + }) + } + } } } diff --git a/packages/babel-sugar-v-on/test/functional.js b/packages/babel-sugar-v-on/test/functional.js index 49de229..7006d1d 100644 --- a/packages/babel-sugar-v-on/test/functional.js +++ b/packages/babel-sugar-v-on/test/functional.js @@ -651,3 +651,31 @@ test('should support keyboard modifier for direction keys', t => { t.is(stubUp.calls.length, 1) t.is(stubDown.calls.length, 1) }) + +test('should work with nested components inside arrow functions', t => { + const stubMouseLeft = t.context.stub() + const stubKeyLeft = t.context.stub() + const wrapper = mount({ + methods: { + foo: stubMouseLeft, + bar: stubKeyLeft + }, + render(h) { + return ( +
+
+ {[1].map(() => + + )} +
+
+ ) + } + }) + + wrapper.find('#mouse').trigger('mousedown.left') + wrapper.find('#key').trigger('keydown.left') + + t.is(stubMouseLeft.calls.length, 1) + t.is(stubKeyLeft.calls.length, 1) +}) diff --git a/packages/babel-sugar-v-on/yarn.lock b/packages/babel-sugar-v-on/yarn.lock index 43b411f..09789eb 100644 --- a/packages/babel-sugar-v-on/yarn.lock +++ b/packages/babel-sugar-v-on/yarn.lock @@ -199,6 +199,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250" integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA== +"@babel/helper-plugin-utils@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375" + integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== + "@babel/helper-regex@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27" @@ -352,6 +357,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-arrow-functions@^7.12.1": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3" + integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-transform-arrow-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550" @@ -679,6 +691,23 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.12.tgz#e15a9d034d9210f00320ef718a50c4a799417c47" integrity sha512-Pr+6JRiKkfsFvmU/LK68oBRCQeEg36TyAbPhc2xpez24OOZZCuoIhWGTd39VZy6nGafSbxzGouFPTFD/rR1A0A== +"@vue/babel-helper-vue-jsx-merge-props@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81" + integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA== + +"@vue/babel-plugin-transform-vue-jsx@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7" + integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + html-tags "^2.0.0" + lodash.kebabcase "^4.1.1" + svg-tags "^1.0.0" + "@vue/test-utils@^1.0.0-beta.26": version "1.0.0-beta.26" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.26.tgz#1ae7e1dc2bef4f49f9dbfdfecad342d17d6c5c88" @@ -2842,6 +2871,11 @@ html-encoding-sniffer@^1.0.2: dependencies: whatwg-encoding "^1.0.1" +html-tags@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b" + integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos= + http-signature@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1" @@ -3600,6 +3634,11 @@ lodash.isplainobject@^4.0.6: resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs= +lodash.kebabcase@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" + integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY= + lodash.merge@^4.6.0: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" @@ -5215,6 +5254,11 @@ supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.4.0: dependencies: has-flag "^3.0.0" +svg-tags@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" + integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q= + symbol-observable@^0.2.2: version "0.2.4" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"