Skip to content

Commit bd13001

Browse files
edison1105edison1105
authored
refactor(vapor): import v-o withModifiers or withKeys on demand (#12539)
1 parent e79a6df commit bd13001

File tree

5 files changed

+88
-147
lines changed

5 files changed

+88
-147
lines changed

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

+3-7
Original file line numberDiff line numberDiff line change
@@ -304,18 +304,14 @@ export function render(_ctx) {
304304
`;
305305
306306
exports[`compiler: element transform > props merging: event handlers 1`] = `
307-
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
307+
"import { withKeys as _withKeys, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
308308
const t0 = _template("<div></div>", true)
309309
_delegateEvents("click")
310310
311311
export function render(_ctx) {
312312
const n0 = t0()
313-
_delegate(n0, "click", () => _ctx.a, {
314-
keys: ["foo"]
315-
})
316-
_delegate(n0, "click", () => _ctx.b, {
317-
keys: ["bar"]
318-
})
313+
_delegate(n0, "click", () => _withKeys(_ctx.a, ["foo"]))
314+
_delegate(n0, "click", () => _withKeys(_ctx.b, ["bar"]))
319315
return n0
320316
}"
321317
`;

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap

+41-101
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export function render(_ctx) {
6161
`;
6262

6363
exports[`v-on > event modifier 1`] = `
64-
"import { delegate as _delegate, on as _on, delegateEvents as _delegateEvents, template as _template } from 'vue';
64+
"import { withModifiers as _withModifiers, delegate as _delegate, on as _on, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
6565
const t0 = _template("<a></a>")
6666
const t1 = _template("<form></form>")
6767
const t2 = _template("<div></div>")
@@ -91,18 +91,10 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
9191
const n19 = t3()
9292
const n20 = t3()
9393
const n21 = t3()
94-
_delegate(n0, "click", () => _ctx.handleEvent, {
95-
modifiers: ["stop"]
96-
})
97-
_on(n1, "submit", () => _ctx.handleEvent, {
98-
modifiers: ["prevent"]
99-
})
100-
_delegate(n2, "click", () => _ctx.handleEvent, {
101-
modifiers: ["stop", "prevent"]
102-
})
103-
_delegate(n3, "click", () => _ctx.handleEvent, {
104-
modifiers: ["self"]
105-
})
94+
_delegate(n0, "click", () => _withModifiers(_ctx.handleEvent, ["stop"]))
95+
_on(n1, "submit", () => _withModifiers(_ctx.handleEvent, ["prevent"]))
96+
_delegate(n2, "click", () => _withModifiers(_ctx.handleEvent, ["stop","prevent"]))
97+
_delegate(n3, "click", () => _withModifiers(_ctx.handleEvent, ["self"]))
10698
_on(n4, "click", () => _ctx.handleEvent, {
10799
capture: true
108100
})
@@ -112,53 +104,21 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
112104
_on(n6, "scroll", () => _ctx.handleEvent, {
113105
passive: true
114106
})
115-
_delegate(n7, "contextmenu", () => _ctx.handleEvent, {
116-
modifiers: ["right"]
117-
})
118-
_delegate(n8, "click", () => _ctx.handleEvent, {
119-
modifiers: ["left"]
120-
})
121-
_delegate(n9, "mouseup", () => _ctx.handleEvent, {
122-
modifiers: ["middle"]
123-
})
124-
_delegate(n10, "contextmenu", () => _ctx.handleEvent, {
125-
modifiers: ["right"],
126-
keys: ["enter"]
127-
})
128-
_delegate(n11, "keyup", () => _ctx.handleEvent, {
129-
keys: ["enter"]
130-
})
131-
_delegate(n12, "keyup", () => _ctx.handleEvent, {
132-
keys: ["tab"]
133-
})
134-
_delegate(n13, "keyup", () => _ctx.handleEvent, {
135-
keys: ["delete"]
136-
})
137-
_delegate(n14, "keyup", () => _ctx.handleEvent, {
138-
keys: ["esc"]
139-
})
140-
_delegate(n15, "keyup", () => _ctx.handleEvent, {
141-
keys: ["space"]
142-
})
143-
_delegate(n16, "keyup", () => _ctx.handleEvent, {
144-
keys: ["up"]
145-
})
146-
_delegate(n17, "keyup", () => _ctx.handleEvent, {
147-
keys: ["down"]
148-
})
149-
_delegate(n18, "keyup", () => _ctx.handleEvent, {
150-
keys: ["left"]
151-
})
152-
_delegate(n19, "keyup", () => _ctx.submit, {
153-
modifiers: ["middle"]
154-
})
155-
_delegate(n20, "keyup", () => _ctx.submit, {
156-
modifiers: ["middle", "self"]
157-
})
158-
_delegate(n21, "keyup", () => _ctx.handleEvent, {
159-
modifiers: ["self"],
160-
keys: ["enter"]
161-
})
107+
_delegate(n7, "contextmenu", () => _withModifiers(_ctx.handleEvent, ["right"]))
108+
_delegate(n8, "click", () => _withModifiers(_ctx.handleEvent, ["left"]))
109+
_delegate(n9, "mouseup", () => _withModifiers(_ctx.handleEvent, ["middle"]))
110+
_delegate(n10, "contextmenu", () => _withKeys(_withModifiers(_ctx.handleEvent, ["right"]), ["enter"]))
111+
_delegate(n11, "keyup", () => _withKeys(_ctx.handleEvent, ["enter"]))
112+
_delegate(n12, "keyup", () => _withKeys(_ctx.handleEvent, ["tab"]))
113+
_delegate(n13, "keyup", () => _withKeys(_ctx.handleEvent, ["delete"]))
114+
_delegate(n14, "keyup", () => _withKeys(_ctx.handleEvent, ["esc"]))
115+
_delegate(n15, "keyup", () => _withKeys(_ctx.handleEvent, ["space"]))
116+
_delegate(n16, "keyup", () => _withKeys(_ctx.handleEvent, ["up"]))
117+
_delegate(n17, "keyup", () => _withKeys(_ctx.handleEvent, ["down"]))
118+
_delegate(n18, "keyup", () => _withKeys(_ctx.handleEvent, ["left"]))
119+
_delegate(n19, "keyup", () => _withModifiers(_ctx.submit, ["middle"]))
120+
_delegate(n20, "keyup", () => _withModifiers(_ctx.submit, ["middle","self"]))
121+
_delegate(n21, "keyup", () => _withKeys(_withModifiers(_ctx.handleEvent, ["self"]), ["enter"]))
162122
return [n0, n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16, n17, n18, n19, n20, n21]
163123
}"
164124
`;
@@ -315,44 +275,37 @@ export function render(_ctx) {
315275
`;
316276
317277
exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = `
318-
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
278+
"import { withModifiers as _withModifiers, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
319279
const t0 = _template("<div></div>", true)
320280
_delegateEvents("keyup")
321281
322282
export function render(_ctx) {
323283
const n0 = t0()
324-
_delegate(n0, "keyup", () => _ctx.test, {
325-
modifiers: ["exact"]
326-
})
284+
_delegate(n0, "keyup", () => _withModifiers(_ctx.test, ["exact"]))
327285
return n0
328286
}"
329287
`;
330288
331289
exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = `
332-
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
290+
"import { withModifiers as _withModifiers, delegate as _delegate, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
333291
const t0 = _template("<div></div>", true)
334292
_delegateEvents("click", "keyup")
335293
336294
export function render(_ctx) {
337295
const n0 = t0()
338-
_delegate(n0, "click", () => _ctx.test, {
339-
modifiers: ["stop"]
340-
})
341-
_delegate(n0, "keyup", () => _ctx.test, {
342-
keys: ["enter"]
343-
})
296+
_delegate(n0, "click", () => _withModifiers(_ctx.test, ["stop"]))
297+
_delegate(n0, "keyup", () => _withKeys(_ctx.test, ["enter"]))
344298
return n0
345299
}"
346300
`;
347301
348302
exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = `
349-
"import { on as _on, template as _template } from 'vue';
303+
"import { withModifiers as _withModifiers, on as _on, template as _template } from 'vue';
350304
const t0 = _template("<div></div>", true)
351305
352306
export function render(_ctx) {
353307
const n0 = t0()
354-
_on(n0, "click", () => _ctx.test, {
355-
modifiers: ["stop", "prevent"],
308+
_on(n0, "click", () => _withModifiers(_ctx.test, ["stop","prevent"]), {
356309
capture: true,
357310
once: true
358311
})
@@ -361,29 +314,26 @@ export function render(_ctx) {
361314
`;
362315
363316
exports[`v-on > should transform click.middle 1`] = `
364-
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
317+
"import { withModifiers as _withModifiers, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
365318
const t0 = _template("<div></div>", true)
366319
_delegateEvents("mouseup")
367320
368321
export function render(_ctx) {
369322
const n0 = t0()
370-
_delegate(n0, "mouseup", () => _ctx.test, {
371-
modifiers: ["middle"]
372-
})
323+
_delegate(n0, "mouseup", () => _withModifiers(_ctx.test, ["middle"]))
373324
return n0
374325
}"
375326
`;
376327
377328
exports[`v-on > should transform click.middle 2`] = `
378-
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
329+
"import { withModifiers as _withModifiers, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
379330
const t0 = _template("<div></div>", true)
380331
381332
export function render(_ctx) {
382333
const n0 = t0()
383334
_renderEffect(() => {
384335
385-
_on(n0, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), () => _ctx.test, {
386-
modifiers: ["middle"],
336+
_on(n0, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), () => _withModifiers(_ctx.test, ["middle"]), {
387337
effect: true
388338
})
389339
})
@@ -392,30 +342,26 @@ export function render(_ctx) {
392342
`;
393343
394344
exports[`v-on > should transform click.right 1`] = `
395-
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
345+
"import { withModifiers as _withModifiers, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
396346
const t0 = _template("<div></div>", true)
397347
_delegateEvents("contextmenu")
398348
399349
export function render(_ctx) {
400350
const n0 = t0()
401-
_delegate(n0, "contextmenu", () => _ctx.test, {
402-
modifiers: ["right"]
403-
})
351+
_delegate(n0, "contextmenu", () => _withModifiers(_ctx.test, ["right"]))
404352
return n0
405353
}"
406354
`;
407355
408356
exports[`v-on > should transform click.right 2`] = `
409-
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
357+
"import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
410358
const t0 = _template("<div></div>", true)
411359
412360
export function render(_ctx) {
413361
const n0 = t0()
414362
_renderEffect(() => {
415363
416-
_on(n0, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), () => _ctx.test, {
417-
modifiers: ["right"],
418-
keys: ["right"],
364+
_on(n0, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), () => _withKeys(_withModifiers(_ctx.test, ["right"]), ["right"]), {
419365
effect: true
420366
})
421367
})
@@ -436,16 +382,14 @@ export function render(_ctx) {
436382
`;
437383
438384
exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
439-
"import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
385+
"import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
440386
const t0 = _template("<div></div>", true)
441387
442388
export function render(_ctx) {
443389
const n0 = t0()
444390
_renderEffect(() => {
445391
446-
_on(n0, _ctx.e, () => _ctx.test, {
447-
modifiers: ["left"],
448-
keys: ["left"],
392+
_on(n0, _ctx.e, () => _withKeys(_withModifiers(_ctx.test, ["left"]), ["left"]), {
449393
effect: true
450394
})
451395
})
@@ -466,30 +410,26 @@ exports[`v-on > should wrap in unref if identifier is setup-maybe-ref w/ inline:
466410
`;
467411
468412
exports[`v-on > should wrap keys guard for keyboard events or dynamic events 1`] = `
469-
"import { on as _on, template as _template } from 'vue';
413+
"import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, template as _template } from 'vue';
470414
const t0 = _template("<div></div>", true)
471415
472416
export function render(_ctx) {
473417
const n0 = t0()
474-
_on(n0, "keydown", () => _ctx.test, {
475-
modifiers: ["stop", "ctrl"],
476-
keys: ["a"],
418+
_on(n0, "keydown", () => _withKeys(_withModifiers(_ctx.test, ["stop","ctrl"]), ["a"]), {
477419
capture: true
478420
})
479421
return n0
480422
}"
481423
`;
482424
483425
exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = `
484-
"import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
426+
"import { withKeys as _withKeys, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
485427
const t0 = _template("<div></div>", true)
486428
_delegateEvents("keyup")
487429
488430
export function render(_ctx) {
489431
const n0 = t0()
490-
_delegate(n0, "keyup", () => _ctx.test, {
491-
keys: ["left"]
492-
})
432+
_delegate(n0, "keyup", () => _withKeys(_ctx.test, ["left"]))
493433
return n0
494434
}"
495435
`;

‎packages/compiler-vapor/__tests__/transforms/vOn.spec.ts

+3-9
Original file line numberDiff line numberDiff line change
@@ -428,8 +428,7 @@ describe('v-on', () => {
428428
},
429429
])
430430
expect(code).contains(
431-
`_on(n0, "click", () => _ctx.test, {
432-
modifiers: ["stop", "prevent"],
431+
`_on(n0, "click", () => _withModifiers(_ctx.test, ["stop","prevent"]), {
433432
capture: true,
434433
once: true
435434
})`,
@@ -485,14 +484,9 @@ describe('v-on', () => {
485484

486485
expect(code).matchSnapshot()
487486
expect(code).contains(
488-
`_delegate(n0, "click", () => _ctx.test, {
489-
modifiers: ["stop"]
490-
})`,
487+
`_delegate(n0, "click", () => _withModifiers(_ctx.test, ["stop"]))
488+
_delegate(n0, "keyup", () => _withKeys(_ctx.test, ["enter"]))`,
491489
)
492-
493-
expect(code).contains(`_delegate(n0, "keyup", () => _ctx.test, {
494-
keys: ["enter"]
495-
})`)
496490
})
497491

498492
test('should wrap keys guard for keyboard events or dynamic events', () => {

0 commit comments

Comments
 (0)