Skip to content

Commit 9864fb9

Browse files
rigor789rigor789
committed
fix: simplified event handling based on vue/core
1 parent e885dc1 commit 9864fb9

File tree

7 files changed

+112
-288
lines changed

7 files changed

+112
-288
lines changed

‎packages/compiler/__tests__/__snapshots__/index.spec.ts.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ return function render(_ctx, _cache) {
4040
key: i,
4141
onTap: onTap,
4242
text: msg,
43+
ref_for: true,
4344
ref: \\"test\\"
4445
}, null, 8 /* PROPS */, [\\"onTap\\", \\"text\\"]))
4546
}), 128 /* KEYED_FRAGMENT */)),

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

Lines changed: 15 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ exports[`compiler: transform v-on should work w/ prefixIdentifiers: true 1`] = `
44
Object {
55
"key": Object {
66
"constType": 3,
7-
"content": "onTap",
7+
"content": "onTapOnce",
88
"isHandlerKey": true,
99
"isStatic": true,
1010
"loc": Object {
1111
"end": Object {
12-
"column": 12,
12+
"column": 1,
1313
"line": 1,
14-
"offset": 11,
14+
"offset": 0,
1515
},
16-
"source": "tap",
16+
"source": "",
1717
"start": Object {
18-
"column": 9,
18+
"column": 1,
1919
"line": 1,
20-
"offset": 8,
20+
"offset": 0,
2121
},
2222
},
2323
"type": 4,
@@ -37,183 +37,23 @@ Object {
3737
},
3838
"type": 16,
3939
"value": Object {
40+
"constType": 0,
41+
"content": "_ctx.test",
42+
"isStatic": false,
4043
"loc": Object {
4144
"end": Object {
42-
"column": 1,
45+
"column": 23,
4346
"line": 1,
44-
"offset": 0,
47+
"offset": 22,
4548
},
46-
"source": "",
49+
"source": "test",
4750
"start": Object {
48-
"column": 1,
51+
"column": 19,
4952
"line": 1,
50-
"offset": 0,
53+
"offset": 18,
5154
},
5255
},
53-
"properties": Array [
54-
Object {
55-
"key": Object {
56-
"constType": 3,
57-
"content": "handler",
58-
"isStatic": true,
59-
"loc": Object {
60-
"end": Object {
61-
"column": 1,
62-
"line": 1,
63-
"offset": 0,
64-
},
65-
"source": "",
66-
"start": Object {
67-
"column": 1,
68-
"line": 1,
69-
"offset": 0,
70-
},
71-
},
72-
"type": 4,
73-
},
74-
"loc": Object {
75-
"end": Object {
76-
"column": 1,
77-
"line": 1,
78-
"offset": 0,
79-
},
80-
"source": "",
81-
"start": Object {
82-
"column": 1,
83-
"line": 1,
84-
"offset": 0,
85-
},
86-
},
87-
"type": 16,
88-
"value": Object {
89-
"constType": 0,
90-
"content": "_ctx.test",
91-
"isStatic": false,
92-
"loc": Object {
93-
"end": Object {
94-
"column": 23,
95-
"line": 1,
96-
"offset": 22,
97-
},
98-
"source": "test",
99-
"start": Object {
100-
"column": 19,
101-
"line": 1,
102-
"offset": 18,
103-
},
104-
},
105-
"type": 4,
106-
},
107-
},
108-
Object {
109-
"key": Object {
110-
"constType": 3,
111-
"content": "options",
112-
"isStatic": true,
113-
"loc": Object {
114-
"end": Object {
115-
"column": 1,
116-
"line": 1,
117-
"offset": 0,
118-
},
119-
"source": "",
120-
"start": Object {
121-
"column": 1,
122-
"line": 1,
123-
"offset": 0,
124-
},
125-
},
126-
"type": 4,
127-
},
128-
"loc": Object {
129-
"end": Object {
130-
"column": 1,
131-
"line": 1,
132-
"offset": 0,
133-
},
134-
"source": "",
135-
"start": Object {
136-
"column": 1,
137-
"line": 1,
138-
"offset": 0,
139-
},
140-
},
141-
"type": 16,
142-
"value": Object {
143-
"loc": Object {
144-
"end": Object {
145-
"column": 1,
146-
"line": 1,
147-
"offset": 0,
148-
},
149-
"source": "",
150-
"start": Object {
151-
"column": 1,
152-
"line": 1,
153-
"offset": 0,
154-
},
155-
},
156-
"properties": Array [
157-
Object {
158-
"key": Object {
159-
"constType": 3,
160-
"content": "once",
161-
"isStatic": true,
162-
"loc": Object {
163-
"end": Object {
164-
"column": 1,
165-
"line": 1,
166-
"offset": 0,
167-
},
168-
"source": "",
169-
"start": Object {
170-
"column": 1,
171-
"line": 1,
172-
"offset": 0,
173-
},
174-
},
175-
"type": 4,
176-
},
177-
"loc": Object {
178-
"end": Object {
179-
"column": 1,
180-
"line": 1,
181-
"offset": 0,
182-
},
183-
"source": "",
184-
"start": Object {
185-
"column": 1,
186-
"line": 1,
187-
"offset": 0,
188-
},
189-
},
190-
"type": 16,
191-
"value": Object {
192-
"constType": 0,
193-
"content": "true",
194-
"isStatic": false,
195-
"loc": Object {
196-
"end": Object {
197-
"column": 1,
198-
"line": 1,
199-
"offset": 0,
200-
},
201-
"source": "",
202-
"start": Object {
203-
"column": 1,
204-
"line": 1,
205-
"offset": 0,
206-
},
207-
},
208-
"type": 4,
209-
},
210-
},
211-
],
212-
"type": 15,
213-
},
214-
},
215-
],
216-
"type": 15,
56+
"type": 4,
21757
},
21858
}
21959
`;

‎packages/compiler/src/transforms/vOn.ts

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import {
22
transformOn as baseTransform,
33
DirectiveTransform,
44
createObjectProperty,
5-
createObjectExpression,
6-
createSimpleExpression
5+
createSimpleExpression,
6+
createCompoundExpression,
7+
isStaticExp
78
} from '@vue/compiler-core'
8-
import { makeMap } from '@vue/shared'
9+
import { capitalize, makeMap } from '@vue/shared'
910

1011
// todo: simplify - we only support `once` - no need to use makeMap
11-
const isEventOptionModifier = /*#__PURE__*/ makeMap(`once`)
12+
const isEventOptionModifier = /*#__PURE__*/ makeMap(`once,capture`)
1213

1314
// todo: remove - no need to loop through modifiers as only `once` is supported
1415
const generateOptionModifiers = (modifiers: string[]) => {
@@ -35,20 +36,10 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
3536
const eventOptionModifiers = generateOptionModifiers(modifiers)
3637

3738
if (eventOptionModifiers.length) {
38-
handlerExp = createObjectExpression([
39-
createObjectProperty('handler', handlerExp),
40-
createObjectProperty(
41-
'options',
42-
createObjectExpression(
43-
eventOptionModifiers.map(modifier =>
44-
createObjectProperty(
45-
modifier,
46-
createSimpleExpression('true', false)
47-
)
48-
)
49-
)
50-
)
51-
])
39+
const modifierPostfix = eventOptionModifiers.map(capitalize).join('')
40+
key = isStaticExp(key)
41+
? createSimpleExpression(`${key.content}${modifierPostfix}`, true)
42+
: createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`])
5243
}
5344

5445
return {

‎packages/runtime/__tests__/modules/events.spec.ts

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe(`events`, () => {
1010
const el = new NSVElement('Button')
1111
const event = 'tap'
1212
const fn = jest.fn()
13-
patchEvent(el, 'tap', null, fn)
13+
patchEvent(el, 'onTap', null, fn)
1414
el.dispatchEvent(event)
1515
await nextTick()
1616
el.dispatchEvent(event)
@@ -25,9 +25,9 @@ describe(`events`, () => {
2525
const event = 'tap'
2626
const prevFn = jest.fn()
2727
const nextFn = jest.fn()
28-
patchEvent(el, 'tap', null, prevFn)
28+
patchEvent(el, 'onTap', null, prevFn)
2929
el.dispatchEvent(event)
30-
patchEvent(el, 'tap', prevFn, nextFn)
30+
patchEvent(el, 'onTap', prevFn, nextFn)
3131
await nextTick()
3232
el.dispatchEvent(event)
3333
await nextTick()
@@ -42,7 +42,7 @@ describe(`events`, () => {
4242
const event = 'tap'
4343
const fn1 = jest.fn()
4444
const fn2 = jest.fn()
45-
patchEvent(el, 'tap', null, [fn1, fn2])
45+
patchEvent(el, 'onTap', null, [fn1, fn2])
4646
el.dispatchEvent(event)
4747
await nextTick()
4848
expect(fn1).toHaveBeenCalledTimes(1)
@@ -53,8 +53,8 @@ describe(`events`, () => {
5353
const el = new NSVElement('Button')
5454
const event = 'tap'
5555
const fn = jest.fn()
56-
patchEvent(el, 'tap', null, fn)
57-
patchEvent(el, 'tap', fn, null)
56+
patchEvent(el, 'onTap', null, fn)
57+
patchEvent(el, 'onTap', fn, null)
5858
el.dispatchEvent(event)
5959
await nextTick()
6060
expect(fn).not.toHaveBeenCalled()
@@ -64,13 +64,8 @@ describe(`events`, () => {
6464
const el = new NSVElement('Button')
6565
const event = 'tap'
6666
const fn = jest.fn()
67-
const nextValue = {
68-
handler: fn,
69-
options: {
70-
once: true,
71-
},
72-
}
73-
patchEvent(el, 'tap', null, nextValue)
67+
const nextValue = fn
68+
patchEvent(el, 'onTapOnce', null, nextValue)
7469
el.dispatchEvent(event)
7570
await nextTick()
7671
el.dispatchEvent(event)
@@ -83,14 +78,9 @@ describe(`events`, () => {
8378
const event = 'tap'
8479
const prevFn = jest.fn()
8580
const nextFn = jest.fn()
86-
const nextValue = {
87-
handler: nextFn,
88-
options: {
89-
once: true,
90-
},
91-
}
92-
patchEvent(el, 'tap', null, prevFn)
93-
patchEvent(el, 'tap', prevFn, nextValue)
81+
const nextValue = nextFn
82+
patchEvent(el, 'onTapOnce', null, prevFn)
83+
patchEvent(el, 'onTapOnce', prevFn, nextValue)
9484
el.dispatchEvent(event)
9585
await nextTick()
9686
el.dispatchEvent(event)
@@ -103,14 +93,9 @@ describe(`events`, () => {
10393
const el = new NSVElement('Button')
10494
const event = 'tap'
10595
const fn = jest.fn()
106-
const nextValue = {
107-
handler: fn,
108-
options: {
109-
once: true,
110-
},
111-
}
112-
patchEvent(el, 'tap', null, nextValue)
113-
patchEvent(el, 'tap', nextValue, null)
96+
const nextValue = fn
97+
patchEvent(el, 'onTapOnce', null, nextValue)
98+
patchEvent(el, 'onTapOnce', nextValue, null)
11499
el.dispatchEvent(event)
115100
await nextTick()
116101
el.dispatchEvent(event)

0 commit comments

Comments
 (0)