Skip to content

Commit 319932e

Browse files
haoqunjianghaoqunjiang
authored
fix: v-model/v-on should apply before arrow-functions transform (#167)
So that it can get the correct `this` scope. Partially reverts #87. Fixes #165 (comment)
1 parent c7e36cd commit 319932e

File tree

7 files changed

+137
-25
lines changed

7 files changed

+137
-25
lines changed

Diff for: ‎packages/babel-sugar-v-model/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"scripts": {
1515
"pretest:snapshot": "yarn build:test",
1616
"test:snapshot": "nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js",
17-
"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",
17+
"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",
1818
"test:functional": "ava -v test/functional-compiled.js",
1919
"build": "rollup -c",
2020
"build:test": "rollup -c rollup.config.testing.js",
@@ -24,6 +24,7 @@
2424
"devDependencies": {
2525
"@babel/cli": "^7.2.0",
2626
"@babel/core": "^7.2.0",
27+
"@babel/plugin-transform-arrow-functions": "^7.12.1",
2728
"@babel/preset-env": "^7.2.0",
2829
"@vue/test-utils": "^1.0.0-beta.26",
2930
"ava": "^0.25.0",

Diff for: ‎packages/babel-sugar-v-model/src/index.js

+16-14
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,23 @@ export default function(babel) {
2424
return {
2525
inherits: syntaxJsx,
2626
visitor: {
27-
JSXAttribute: {
28-
exit(path) {
29-
const parsed = parseVModel(t, path)
30-
if (!parsed) {
31-
return
27+
Program(p) {
28+
p.traverse({
29+
JSXAttribute(path) {
30+
const parsed = parseVModel(t, path)
31+
if (!parsed) {
32+
return
33+
}
34+
35+
const { modifiers, valuePath } = parsed
36+
37+
const parent = path.parentPath
38+
transformModel(t, parent, valuePath, modifiers)
39+
path.remove()
3240
}
33-
34-
const { modifiers, valuePath } = parsed
35-
36-
const parent = path.parentPath
37-
transformModel(t, parent, valuePath, modifiers)
38-
path.remove()
39-
},
40-
},
41-
},
41+
})
42+
}
43+
}
4244
}
4345
}
4446

Diff for: ‎packages/babel-sugar-v-model/yarn.lock

+34
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,11 @@
199199
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
200200
integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
201201

202+
"@babel/helper-plugin-utils@^7.10.4":
203+
version "7.10.4"
204+
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
205+
integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
206+
202207
"@babel/helper-regex@^7.0.0":
203208
version "7.0.0"
204209
resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
@@ -352,6 +357,13 @@
352357
dependencies:
353358
"@babel/helper-plugin-utils" "^7.0.0"
354359

360+
"@babel/plugin-transform-arrow-functions@^7.12.1":
361+
version "7.12.1"
362+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
363+
integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
364+
dependencies:
365+
"@babel/helper-plugin-utils" "^7.10.4"
366+
355367
"@babel/plugin-transform-arrow-functions@^7.2.0":
356368
version "7.2.0"
357369
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
@@ -674,6 +686,23 @@
674686
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.12.tgz#e15a9d034d9210f00320ef718a50c4a799417c47"
675687
integrity sha512-Pr+6JRiKkfsFvmU/LK68oBRCQeEg36TyAbPhc2xpez24OOZZCuoIhWGTd39VZy6nGafSbxzGouFPTFD/rR1A0A==
676688

689+
"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
690+
version "1.2.1"
691+
resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
692+
integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
693+
694+
"@vue/babel-plugin-transform-vue-jsx@^1.2.1":
695+
version "1.2.1"
696+
resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
697+
integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==
698+
dependencies:
699+
"@babel/helper-module-imports" "^7.0.0"
700+
"@babel/plugin-syntax-jsx" "^7.2.0"
701+
"@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
702+
html-tags "^2.0.0"
703+
lodash.kebabcase "^4.1.1"
704+
svg-tags "^1.0.0"
705+
677706
"@vue/test-utils@^1.0.0-beta.26":
678707
version "1.0.0-beta.26"
679708
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:
34103439
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
34113440
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
34123441

3442+
lodash.kebabcase@^4.1.1:
3443+
version "4.1.1"
3444+
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
3445+
integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
3446+
34133447
lodash.merge@^4.6.0:
34143448
version "4.6.2"
34153449
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"

Diff for: ‎packages/babel-sugar-v-on/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"scripts": {
1515
"pretest:snapshot": "yarn build:test",
1616
"test:snapshot": "nyc --reporter=html --reporter=text-summary ava -v test/snapshot.js",
17-
"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",
17+
"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",
1818
"test:functional": "ava -v test/functional-compiled.js",
1919
"build": "rollup -c",
2020
"build:test": "rollup -c rollup.config.testing.js",
@@ -24,6 +24,7 @@
2424
"devDependencies": {
2525
"@babel/cli": "^7.2.0",
2626
"@babel/core": "^7.2.0",
27+
"@babel/plugin-transform-arrow-functions": "^7.12.1",
2728
"@babel/preset-env": "^7.2.0",
2829
"@vue/test-utils": "^1.0.0-beta.26",
2930
"ava": "^0.25.0",

Diff for: ‎packages/babel-sugar-v-on/src/index.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -287,17 +287,19 @@ export default function(babel) {
287287
return {
288288
inherits: syntaxJsx,
289289
visitor: {
290-
JSXAttribute: {
291-
exit(path) {
292-
const { event, expression, isNative } = genHandler(path)
290+
Program(p) {
291+
p.traverse({
292+
JSXAttribute(path) {
293+
const { event, expression, isNative } = genHandler(path)
293294

294-
if (event) {
295-
path.remove()
295+
if (event) {
296+
path.remove()
296297

297-
addEvent(event, expression, isNative, path.parentPath.node.attributes)
298+
addEvent(event, expression, isNative, path.parentPath.node.attributes)
299+
}
298300
}
299-
},
300-
},
301-
},
301+
})
302+
}
303+
}
302304
}
303305
}

Diff for: ‎packages/babel-sugar-v-on/test/functional.js

+28
Original file line numberDiff line numberDiff line change
@@ -651,3 +651,31 @@ test('should support keyboard modifier for direction keys', t => {
651651
t.is(stubUp.calls.length, 1)
652652
t.is(stubDown.calls.length, 1)
653653
})
654+
655+
test('should work with nested components inside arrow functions', t => {
656+
const stubMouseLeft = t.context.stub()
657+
const stubKeyLeft = t.context.stub()
658+
const wrapper = mount({
659+
methods: {
660+
foo: stubMouseLeft,
661+
bar: stubKeyLeft
662+
},
663+
render(h) {
664+
return (
665+
<div>
666+
<div id="mouse" vOn:mousedown_left={this.foo}>
667+
{[1].map(() =>
668+
<input id="key" vOn:keydown_left={this.bar} />
669+
)}
670+
</div>
671+
</div>
672+
)
673+
}
674+
})
675+
676+
wrapper.find('#mouse').trigger('mousedown.left')
677+
wrapper.find('#key').trigger('keydown.left')
678+
679+
t.is(stubMouseLeft.calls.length, 1)
680+
t.is(stubKeyLeft.calls.length, 1)
681+
})

Diff for: ‎packages/babel-sugar-v-on/yarn.lock

+44
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,11 @@
199199
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
200200
integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
201201

202+
"@babel/helper-plugin-utils@^7.10.4":
203+
version "7.10.4"
204+
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
205+
integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
206+
202207
"@babel/helper-regex@^7.0.0":
203208
version "7.0.0"
204209
resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
@@ -352,6 +357,13 @@
352357
dependencies:
353358
"@babel/helper-plugin-utils" "^7.0.0"
354359

360+
"@babel/plugin-transform-arrow-functions@^7.12.1":
361+
version "7.12.1"
362+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
363+
integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
364+
dependencies:
365+
"@babel/helper-plugin-utils" "^7.10.4"
366+
355367
"@babel/plugin-transform-arrow-functions@^7.2.0":
356368
version "7.2.0"
357369
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
@@ -679,6 +691,23 @@
679691
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.12.tgz#e15a9d034d9210f00320ef718a50c4a799417c47"
680692
integrity sha512-Pr+6JRiKkfsFvmU/LK68oBRCQeEg36TyAbPhc2xpez24OOZZCuoIhWGTd39VZy6nGafSbxzGouFPTFD/rR1A0A==
681693

694+
"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
695+
version "1.2.1"
696+
resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
697+
integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
698+
699+
"@vue/babel-plugin-transform-vue-jsx@^1.2.1":
700+
version "1.2.1"
701+
resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
702+
integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==
703+
dependencies:
704+
"@babel/helper-module-imports" "^7.0.0"
705+
"@babel/plugin-syntax-jsx" "^7.2.0"
706+
"@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
707+
html-tags "^2.0.0"
708+
lodash.kebabcase "^4.1.1"
709+
svg-tags "^1.0.0"
710+
682711
"@vue/test-utils@^1.0.0-beta.26":
683712
version "1.0.0-beta.26"
684713
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:
28422871
dependencies:
28432872
whatwg-encoding "^1.0.1"
28442873

2874+
html-tags@^2.0.0:
2875+
version "2.0.0"
2876+
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
2877+
integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
2878+
28452879
http-signature@~1.2.0:
28462880
version "1.2.0"
28472881
resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -3600,6 +3634,11 @@ lodash.isplainobject@^4.0.6:
36003634
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
36013635
integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
36023636

3637+
lodash.kebabcase@^4.1.1:
3638+
version "4.1.1"
3639+
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
3640+
integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
3641+
36033642
lodash.merge@^4.6.0:
36043643
version "4.6.2"
36053644
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:
52155254
dependencies:
52165255
has-flag "^3.0.0"
52175256

5257+
svg-tags@^1.0.0:
5258+
version "1.0.0"
5259+
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
5260+
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
5261+
52185262
symbol-observable@^0.2.2:
52195263
version "0.2.4"
52205264
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"

0 commit comments

Comments
 (0)