@vue/compiler-dom 3.2.46 → 3.3.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/compiler-dom.cjs.js +673 -768
- package/dist/compiler-dom.cjs.prod.js +619 -715
- package/dist/compiler-dom.d.ts +43 -66
- package/dist/compiler-dom.esm-browser.js +4692 -4971
- package/dist/compiler-dom.esm-browser.prod.js +1 -1
- package/dist/compiler-dom.esm-bundler.js +414 -411
- package/dist/compiler-dom.global.js +4692 -4971
- package/dist/compiler-dom.global.prod.js +1 -1
- package/package.json +3 -3
|
@@ -2,482 +2,485 @@ import { registerRuntimeHelpers, isBuiltInType, createSimpleExpression, createCo
|
|
|
2
2
|
export * from '@vue/compiler-core';
|
|
3
3
|
import { isVoidTag, isHTMLTag, isSVGTag, makeMap, parseStringStyle, capitalize, extend } from '@vue/shared';
|
|
4
4
|
|
|
5
|
-
const V_MODEL_RADIO = Symbol(
|
|
6
|
-
const V_MODEL_CHECKBOX = Symbol(
|
|
7
|
-
const V_MODEL_TEXT = Symbol(
|
|
8
|
-
const V_MODEL_SELECT = Symbol(
|
|
9
|
-
const V_MODEL_DYNAMIC = Symbol(
|
|
10
|
-
const V_ON_WITH_MODIFIERS = Symbol(
|
|
11
|
-
const V_ON_WITH_KEYS = Symbol(
|
|
12
|
-
const V_SHOW = Symbol(
|
|
13
|
-
const TRANSITION = Symbol(
|
|
14
|
-
const TRANSITION_GROUP = Symbol(
|
|
5
|
+
const V_MODEL_RADIO = Symbol(process.env.NODE_ENV !== "production" ? `vModelRadio` : ``);
|
|
6
|
+
const V_MODEL_CHECKBOX = Symbol(process.env.NODE_ENV !== "production" ? `vModelCheckbox` : ``);
|
|
7
|
+
const V_MODEL_TEXT = Symbol(process.env.NODE_ENV !== "production" ? `vModelText` : ``);
|
|
8
|
+
const V_MODEL_SELECT = Symbol(process.env.NODE_ENV !== "production" ? `vModelSelect` : ``);
|
|
9
|
+
const V_MODEL_DYNAMIC = Symbol(process.env.NODE_ENV !== "production" ? `vModelDynamic` : ``);
|
|
10
|
+
const V_ON_WITH_MODIFIERS = Symbol(process.env.NODE_ENV !== "production" ? `vOnModifiersGuard` : ``);
|
|
11
|
+
const V_ON_WITH_KEYS = Symbol(process.env.NODE_ENV !== "production" ? `vOnKeysGuard` : ``);
|
|
12
|
+
const V_SHOW = Symbol(process.env.NODE_ENV !== "production" ? `vShow` : ``);
|
|
13
|
+
const TRANSITION = Symbol(process.env.NODE_ENV !== "production" ? `Transition` : ``);
|
|
14
|
+
const TRANSITION_GROUP = Symbol(process.env.NODE_ENV !== "production" ? `TransitionGroup` : ``);
|
|
15
15
|
registerRuntimeHelpers({
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
[V_MODEL_RADIO]: `vModelRadio`,
|
|
17
|
+
[V_MODEL_CHECKBOX]: `vModelCheckbox`,
|
|
18
|
+
[V_MODEL_TEXT]: `vModelText`,
|
|
19
|
+
[V_MODEL_SELECT]: `vModelSelect`,
|
|
20
|
+
[V_MODEL_DYNAMIC]: `vModelDynamic`,
|
|
21
|
+
[V_ON_WITH_MODIFIERS]: `withModifiers`,
|
|
22
|
+
[V_ON_WITH_KEYS]: `withKeys`,
|
|
23
|
+
[V_SHOW]: `vShow`,
|
|
24
|
+
[TRANSITION]: `Transition`,
|
|
25
|
+
[TRANSITION_GROUP]: `TransitionGroup`
|
|
26
26
|
});
|
|
27
27
|
|
|
28
|
-
/* eslint-disable no-restricted-globals */
|
|
29
28
|
let decoder;
|
|
30
29
|
function decodeHtmlBrowser(raw, asAttr = false) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
30
|
+
if (!decoder) {
|
|
31
|
+
decoder = document.createElement("div");
|
|
32
|
+
}
|
|
33
|
+
if (asAttr) {
|
|
34
|
+
decoder.innerHTML = `<div foo="${raw.replace(/"/g, """)}">`;
|
|
35
|
+
return decoder.children[0].getAttribute("foo");
|
|
36
|
+
} else {
|
|
37
|
+
decoder.innerHTML = raw;
|
|
38
|
+
return decoder.textContent;
|
|
39
|
+
}
|
|
42
40
|
}
|
|
43
41
|
|
|
44
|
-
const isRawTextContainer =
|
|
42
|
+
const isRawTextContainer = /* @__PURE__ */ makeMap(
|
|
43
|
+
"style,iframe,script,noscript",
|
|
44
|
+
true
|
|
45
|
+
);
|
|
45
46
|
const parserOptions = {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
return 1 /* DOMNamespaces.SVG */;
|
|
65
|
-
}
|
|
66
|
-
if (parent.props.some(a => a.type === 6 /* NodeTypes.ATTRIBUTE */ &&
|
|
67
|
-
a.name === 'encoding' &&
|
|
68
|
-
a.value != null &&
|
|
69
|
-
(a.value.content === 'text/html' ||
|
|
70
|
-
a.value.content === 'application/xhtml+xml'))) {
|
|
71
|
-
ns = 0 /* DOMNamespaces.HTML */;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
else if (/^m(?:[ions]|text)$/.test(parent.tag) &&
|
|
75
|
-
tag !== 'mglyph' &&
|
|
76
|
-
tag !== 'malignmark') {
|
|
77
|
-
ns = 0 /* DOMNamespaces.HTML */;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
else if (parent && ns === 1 /* DOMNamespaces.SVG */) {
|
|
81
|
-
if (parent.tag === 'foreignObject' ||
|
|
82
|
-
parent.tag === 'desc' ||
|
|
83
|
-
parent.tag === 'title') {
|
|
84
|
-
ns = 0 /* DOMNamespaces.HTML */;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
if (ns === 0 /* DOMNamespaces.HTML */) {
|
|
88
|
-
if (tag === 'svg') {
|
|
89
|
-
return 1 /* DOMNamespaces.SVG */;
|
|
90
|
-
}
|
|
91
|
-
if (tag === 'math') {
|
|
92
|
-
return 2 /* DOMNamespaces.MATH_ML */;
|
|
93
|
-
}
|
|
47
|
+
isVoidTag,
|
|
48
|
+
isNativeTag: (tag) => isHTMLTag(tag) || isSVGTag(tag),
|
|
49
|
+
isPreTag: (tag) => tag === "pre",
|
|
50
|
+
decodeEntities: decodeHtmlBrowser ,
|
|
51
|
+
isBuiltInComponent: (tag) => {
|
|
52
|
+
if (isBuiltInType(tag, `Transition`)) {
|
|
53
|
+
return TRANSITION;
|
|
54
|
+
} else if (isBuiltInType(tag, `TransitionGroup`)) {
|
|
55
|
+
return TRANSITION_GROUP;
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
// https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
|
|
59
|
+
getNamespace(tag, parent) {
|
|
60
|
+
let ns = parent ? parent.ns : 0;
|
|
61
|
+
if (parent && ns === 2) {
|
|
62
|
+
if (parent.tag === "annotation-xml") {
|
|
63
|
+
if (tag === "svg") {
|
|
64
|
+
return 1;
|
|
94
65
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
if (ns === 0 /* DOMNamespaces.HTML */) {
|
|
100
|
-
if (tag === 'textarea' || tag === 'title') {
|
|
101
|
-
return 1 /* TextModes.RCDATA */;
|
|
102
|
-
}
|
|
103
|
-
if (isRawTextContainer(tag)) {
|
|
104
|
-
return 2 /* TextModes.RAWTEXT */;
|
|
105
|
-
}
|
|
66
|
+
if (parent.props.some(
|
|
67
|
+
(a) => a.type === 6 && a.name === "encoding" && a.value != null && (a.value.content === "text/html" || a.value.content === "application/xhtml+xml")
|
|
68
|
+
)) {
|
|
69
|
+
ns = 0;
|
|
106
70
|
}
|
|
107
|
-
|
|
71
|
+
} else if (/^m(?:[ions]|text)$/.test(parent.tag) && tag !== "mglyph" && tag !== "malignmark") {
|
|
72
|
+
ns = 0;
|
|
73
|
+
}
|
|
74
|
+
} else if (parent && ns === 1) {
|
|
75
|
+
if (parent.tag === "foreignObject" || parent.tag === "desc" || parent.tag === "title") {
|
|
76
|
+
ns = 0;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
if (ns === 0) {
|
|
80
|
+
if (tag === "svg") {
|
|
81
|
+
return 1;
|
|
82
|
+
}
|
|
83
|
+
if (tag === "math") {
|
|
84
|
+
return 2;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return ns;
|
|
88
|
+
},
|
|
89
|
+
// https://html.spec.whatwg.org/multipage/parsing.html#parsing-html-fragments
|
|
90
|
+
getTextMode({ tag, ns }) {
|
|
91
|
+
if (ns === 0) {
|
|
92
|
+
if (tag === "textarea" || tag === "title") {
|
|
93
|
+
return 1;
|
|
94
|
+
}
|
|
95
|
+
if (isRawTextContainer(tag)) {
|
|
96
|
+
return 2;
|
|
97
|
+
}
|
|
108
98
|
}
|
|
99
|
+
return 0;
|
|
100
|
+
}
|
|
109
101
|
};
|
|
110
102
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
exp: parseInlineCSS(p.value.content, p.loc),
|
|
127
|
-
modifiers: [],
|
|
128
|
-
loc: p.loc
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
}
|
|
103
|
+
const transformStyle = (node) => {
|
|
104
|
+
if (node.type === "element") {
|
|
105
|
+
node.props.forEach((p, i) => {
|
|
106
|
+
if (p.type === 6 && p.name === "style" && p.value) {
|
|
107
|
+
node.props[i] = {
|
|
108
|
+
type: 7,
|
|
109
|
+
name: `bind`,
|
|
110
|
+
arg: createSimpleExpression(`style`, true, p.loc),
|
|
111
|
+
exp: parseInlineCSS(p.value.content, p.loc),
|
|
112
|
+
modifiers: [],
|
|
113
|
+
loc: p.loc
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
}
|
|
133
118
|
};
|
|
134
119
|
const parseInlineCSS = (cssText, loc) => {
|
|
135
|
-
|
|
136
|
-
|
|
120
|
+
const normalized = parseStringStyle(cssText);
|
|
121
|
+
return createSimpleExpression(
|
|
122
|
+
JSON.stringify(normalized),
|
|
123
|
+
false,
|
|
124
|
+
loc,
|
|
125
|
+
3
|
|
126
|
+
);
|
|
137
127
|
};
|
|
138
128
|
|
|
139
129
|
function createDOMCompilerError(code, loc) {
|
|
140
|
-
|
|
130
|
+
return createCompilerError(
|
|
131
|
+
code,
|
|
132
|
+
loc,
|
|
133
|
+
process.env.NODE_ENV !== "production" || false ? DOMErrorMessages : void 0
|
|
134
|
+
);
|
|
141
135
|
}
|
|
142
136
|
const DOMErrorMessages = {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
137
|
+
[51]: `v-html is missing expression.`,
|
|
138
|
+
[52]: `v-html will override element children.`,
|
|
139
|
+
[53]: `v-text is missing expression.`,
|
|
140
|
+
[54]: `v-text will override element children.`,
|
|
141
|
+
[55]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
|
|
142
|
+
[56]: `v-model argument is not supported on plain elements.`,
|
|
143
|
+
[57]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
|
|
144
|
+
[58]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
|
|
145
|
+
[59]: `v-show is missing expression.`,
|
|
146
|
+
[60]: `<Transition> expects exactly one child element or component.`,
|
|
147
|
+
[61]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
|
|
154
148
|
};
|
|
155
149
|
|
|
156
150
|
const transformVHtml = (dir, node, context) => {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
151
|
+
const { exp, loc } = dir;
|
|
152
|
+
if (!exp) {
|
|
153
|
+
context.onError(
|
|
154
|
+
createDOMCompilerError(51, loc)
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
if (node.children.length) {
|
|
158
|
+
context.onError(
|
|
159
|
+
createDOMCompilerError(52, loc)
|
|
160
|
+
);
|
|
161
|
+
node.children.length = 0;
|
|
162
|
+
}
|
|
163
|
+
return {
|
|
164
|
+
props: [
|
|
165
|
+
createObjectProperty(
|
|
166
|
+
createSimpleExpression(`innerHTML`, true, loc),
|
|
167
|
+
exp || createSimpleExpression("", true)
|
|
168
|
+
)
|
|
169
|
+
]
|
|
170
|
+
};
|
|
170
171
|
};
|
|
171
172
|
|
|
172
173
|
const transformVText = (dir, node, context) => {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
174
|
+
const { exp, loc } = dir;
|
|
175
|
+
if (!exp) {
|
|
176
|
+
context.onError(
|
|
177
|
+
createDOMCompilerError(53, loc)
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
if (node.children.length) {
|
|
181
|
+
context.onError(
|
|
182
|
+
createDOMCompilerError(54, loc)
|
|
183
|
+
);
|
|
184
|
+
node.children.length = 0;
|
|
185
|
+
}
|
|
186
|
+
return {
|
|
187
|
+
props: [
|
|
188
|
+
createObjectProperty(
|
|
189
|
+
createSimpleExpression(`textContent`, true),
|
|
190
|
+
exp ? getConstantType(exp, context) > 0 ? exp : createCallExpression(
|
|
191
|
+
context.helperString(TO_DISPLAY_STRING),
|
|
192
|
+
[exp],
|
|
193
|
+
loc
|
|
194
|
+
) : createSimpleExpression("", true)
|
|
195
|
+
)
|
|
196
|
+
]
|
|
197
|
+
};
|
|
190
198
|
};
|
|
191
199
|
|
|
192
200
|
const transformModel = (dir, node, context) => {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
201
|
+
const baseResult = transformModel$1(dir, node, context);
|
|
202
|
+
if (!baseResult.props.length || node.tagType === 1) {
|
|
203
|
+
return baseResult;
|
|
204
|
+
}
|
|
205
|
+
if (dir.arg) {
|
|
206
|
+
context.onError(
|
|
207
|
+
createDOMCompilerError(
|
|
208
|
+
56,
|
|
209
|
+
dir.arg.loc
|
|
210
|
+
)
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
function checkDuplicatedValue() {
|
|
214
|
+
const value = findProp(node, "value");
|
|
215
|
+
if (value) {
|
|
216
|
+
context.onError(
|
|
217
|
+
createDOMCompilerError(
|
|
218
|
+
58,
|
|
219
|
+
value.loc
|
|
220
|
+
)
|
|
221
|
+
);
|
|
206
222
|
}
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
else if (hasDynamicKeyVBind(node)) {
|
|
242
|
-
// element has bindings with dynamic keys, which can possibly contain
|
|
243
|
-
// "type".
|
|
244
|
-
directiveToUse = V_MODEL_DYNAMIC;
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
// text type
|
|
248
|
-
(process.env.NODE_ENV !== 'production') && checkDuplicatedValue();
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
else if (tag === 'select') {
|
|
252
|
-
directiveToUse = V_MODEL_SELECT;
|
|
253
|
-
}
|
|
254
|
-
else {
|
|
255
|
-
// textarea
|
|
256
|
-
(process.env.NODE_ENV !== 'production') && checkDuplicatedValue();
|
|
257
|
-
}
|
|
258
|
-
// inject runtime directive
|
|
259
|
-
// by returning the helper symbol via needRuntime
|
|
260
|
-
// the import will replaced a resolveDirective call.
|
|
261
|
-
if (!isInvalidType) {
|
|
262
|
-
baseResult.needRuntime = context.helper(directiveToUse);
|
|
223
|
+
}
|
|
224
|
+
const { tag } = node;
|
|
225
|
+
const isCustomElement = context.isCustomElement(tag);
|
|
226
|
+
if (tag === "input" || tag === "textarea" || tag === "select" || isCustomElement) {
|
|
227
|
+
let directiveToUse = V_MODEL_TEXT;
|
|
228
|
+
let isInvalidType = false;
|
|
229
|
+
if (tag === "input" || isCustomElement) {
|
|
230
|
+
const type = findProp(node, `type`);
|
|
231
|
+
if (type) {
|
|
232
|
+
if (type.type === 7) {
|
|
233
|
+
directiveToUse = V_MODEL_DYNAMIC;
|
|
234
|
+
} else if (type.value) {
|
|
235
|
+
switch (type.value.content) {
|
|
236
|
+
case "radio":
|
|
237
|
+
directiveToUse = V_MODEL_RADIO;
|
|
238
|
+
break;
|
|
239
|
+
case "checkbox":
|
|
240
|
+
directiveToUse = V_MODEL_CHECKBOX;
|
|
241
|
+
break;
|
|
242
|
+
case "file":
|
|
243
|
+
isInvalidType = true;
|
|
244
|
+
context.onError(
|
|
245
|
+
createDOMCompilerError(
|
|
246
|
+
57,
|
|
247
|
+
dir.loc
|
|
248
|
+
)
|
|
249
|
+
);
|
|
250
|
+
break;
|
|
251
|
+
default:
|
|
252
|
+
process.env.NODE_ENV !== "production" && checkDuplicatedValue();
|
|
253
|
+
break;
|
|
254
|
+
}
|
|
263
255
|
}
|
|
256
|
+
} else if (hasDynamicKeyVBind(node)) {
|
|
257
|
+
directiveToUse = V_MODEL_DYNAMIC;
|
|
258
|
+
} else {
|
|
259
|
+
process.env.NODE_ENV !== "production" && checkDuplicatedValue();
|
|
260
|
+
}
|
|
261
|
+
} else if (tag === "select") {
|
|
262
|
+
directiveToUse = V_MODEL_SELECT;
|
|
263
|
+
} else {
|
|
264
|
+
process.env.NODE_ENV !== "production" && checkDuplicatedValue();
|
|
264
265
|
}
|
|
265
|
-
|
|
266
|
-
|
|
266
|
+
if (!isInvalidType) {
|
|
267
|
+
baseResult.needRuntime = context.helper(directiveToUse);
|
|
267
268
|
}
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
269
|
+
} else {
|
|
270
|
+
context.onError(
|
|
271
|
+
createDOMCompilerError(
|
|
272
|
+
55,
|
|
273
|
+
dir.loc
|
|
274
|
+
)
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
baseResult.props = baseResult.props.filter(
|
|
278
|
+
(p) => !(p.key.type === 4 && p.key.content === "modelValue")
|
|
279
|
+
);
|
|
280
|
+
return baseResult;
|
|
273
281
|
};
|
|
274
282
|
|
|
275
|
-
const isEventOptionModifier =
|
|
276
|
-
const isNonKeyModifier =
|
|
277
|
-
// event propagation management
|
|
278
|
-
`stop,prevent,self
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
const isKeyboardEvent = /*#__PURE__*/ makeMap(`onkeyup,onkeydown,onkeypress`, true);
|
|
283
|
+
const isEventOptionModifier = /* @__PURE__ */ makeMap(`passive,once,capture`);
|
|
284
|
+
const isNonKeyModifier = /* @__PURE__ */ makeMap(
|
|
285
|
+
// event propagation management
|
|
286
|
+
`stop,prevent,self,ctrl,shift,alt,meta,exact,middle`
|
|
287
|
+
);
|
|
288
|
+
const maybeKeyModifier = /* @__PURE__ */ makeMap("left,right");
|
|
289
|
+
const isKeyboardEvent = /* @__PURE__ */ makeMap(
|
|
290
|
+
`onkeyup,onkeydown,onkeypress`,
|
|
291
|
+
true
|
|
292
|
+
);
|
|
286
293
|
const resolveModifiers = (key, modifiers, context, loc) => {
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
294
|
+
const keyModifiers = [];
|
|
295
|
+
const nonKeyModifiers = [];
|
|
296
|
+
const eventOptionModifiers = [];
|
|
297
|
+
for (let i = 0; i < modifiers.length; i++) {
|
|
298
|
+
const modifier = modifiers[i];
|
|
299
|
+
if (modifier === "native" && checkCompatEnabled(
|
|
300
|
+
"COMPILER_V_ON_NATIVE",
|
|
301
|
+
context,
|
|
302
|
+
loc
|
|
303
|
+
)) {
|
|
304
|
+
eventOptionModifiers.push(modifier);
|
|
305
|
+
} else if (isEventOptionModifier(modifier)) {
|
|
306
|
+
eventOptionModifiers.push(modifier);
|
|
307
|
+
} else {
|
|
308
|
+
if (maybeKeyModifier(modifier)) {
|
|
309
|
+
if (isStaticExp(key)) {
|
|
310
|
+
if (isKeyboardEvent(key.content)) {
|
|
311
|
+
keyModifiers.push(modifier);
|
|
312
|
+
} else {
|
|
313
|
+
nonKeyModifiers.push(modifier);
|
|
314
|
+
}
|
|
315
|
+
} else {
|
|
316
|
+
keyModifiers.push(modifier);
|
|
317
|
+
nonKeyModifiers.push(modifier);
|
|
295
318
|
}
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
else {
|
|
302
|
-
// runtimeModifiers: modifiers that needs runtime guards
|
|
303
|
-
if (maybeKeyModifier(modifier)) {
|
|
304
|
-
if (isStaticExp(key)) {
|
|
305
|
-
if (isKeyboardEvent(key.content)) {
|
|
306
|
-
keyModifiers.push(modifier);
|
|
307
|
-
}
|
|
308
|
-
else {
|
|
309
|
-
nonKeyModifiers.push(modifier);
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
else {
|
|
313
|
-
keyModifiers.push(modifier);
|
|
314
|
-
nonKeyModifiers.push(modifier);
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
else {
|
|
318
|
-
if (isNonKeyModifier(modifier)) {
|
|
319
|
-
nonKeyModifiers.push(modifier);
|
|
320
|
-
}
|
|
321
|
-
else {
|
|
322
|
-
keyModifiers.push(modifier);
|
|
323
|
-
}
|
|
324
|
-
}
|
|
319
|
+
} else {
|
|
320
|
+
if (isNonKeyModifier(modifier)) {
|
|
321
|
+
nonKeyModifiers.push(modifier);
|
|
322
|
+
} else {
|
|
323
|
+
keyModifiers.push(modifier);
|
|
325
324
|
}
|
|
325
|
+
}
|
|
326
326
|
}
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
327
|
+
}
|
|
328
|
+
return {
|
|
329
|
+
keyModifiers,
|
|
330
|
+
nonKeyModifiers,
|
|
331
|
+
eventOptionModifiers
|
|
332
|
+
};
|
|
332
333
|
};
|
|
333
334
|
const transformClick = (key, event) => {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
key,
|
|
343
|
-
`)`
|
|
344
|
-
])
|
|
345
|
-
: key;
|
|
335
|
+
const isStaticClick = isStaticExp(key) && key.content.toLowerCase() === "onclick";
|
|
336
|
+
return isStaticClick ? createSimpleExpression(event, true) : key.type !== 4 ? createCompoundExpression([
|
|
337
|
+
`(`,
|
|
338
|
+
key,
|
|
339
|
+
`) === "onClick" ? "${event}" : (`,
|
|
340
|
+
key,
|
|
341
|
+
`)`
|
|
342
|
+
]) : key;
|
|
346
343
|
};
|
|
347
344
|
const transformOn = (dir, node, context) => {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
const modifierPostfix = eventOptionModifiers.map(capitalize).join('');
|
|
377
|
-
key = isStaticExp(key)
|
|
378
|
-
? createSimpleExpression(`${key.content}${modifierPostfix}`, true)
|
|
379
|
-
: createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);
|
|
380
|
-
}
|
|
381
|
-
return {
|
|
382
|
-
props: [createObjectProperty(key, handlerExp)]
|
|
383
|
-
};
|
|
384
|
-
});
|
|
385
|
-
};
|
|
386
|
-
|
|
387
|
-
const transformShow = (dir, node, context) => {
|
|
388
|
-
const { exp, loc } = dir;
|
|
389
|
-
if (!exp) {
|
|
390
|
-
context.onError(createDOMCompilerError(59 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */, loc));
|
|
345
|
+
return transformOn$1(dir, node, context, (baseResult) => {
|
|
346
|
+
const { modifiers } = dir;
|
|
347
|
+
if (!modifiers.length)
|
|
348
|
+
return baseResult;
|
|
349
|
+
let { key, value: handlerExp } = baseResult.props[0];
|
|
350
|
+
const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);
|
|
351
|
+
if (nonKeyModifiers.includes("right")) {
|
|
352
|
+
key = transformClick(key, `onContextmenu`);
|
|
353
|
+
}
|
|
354
|
+
if (nonKeyModifiers.includes("middle")) {
|
|
355
|
+
key = transformClick(key, `onMouseup`);
|
|
356
|
+
}
|
|
357
|
+
if (nonKeyModifiers.length) {
|
|
358
|
+
handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
|
|
359
|
+
handlerExp,
|
|
360
|
+
JSON.stringify(nonKeyModifiers)
|
|
361
|
+
]);
|
|
362
|
+
}
|
|
363
|
+
if (keyModifiers.length && // if event name is dynamic, always wrap with keys guard
|
|
364
|
+
(!isStaticExp(key) || isKeyboardEvent(key.content))) {
|
|
365
|
+
handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
|
|
366
|
+
handlerExp,
|
|
367
|
+
JSON.stringify(keyModifiers)
|
|
368
|
+
]);
|
|
369
|
+
}
|
|
370
|
+
if (eventOptionModifiers.length) {
|
|
371
|
+
const modifierPostfix = eventOptionModifiers.map(capitalize).join("");
|
|
372
|
+
key = isStaticExp(key) ? createSimpleExpression(`${key.content}${modifierPostfix}`, true) : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);
|
|
391
373
|
}
|
|
392
374
|
return {
|
|
393
|
-
|
|
394
|
-
needRuntime: context.helper(V_SHOW)
|
|
375
|
+
props: [createObjectProperty(key, handlerExp)]
|
|
395
376
|
};
|
|
377
|
+
});
|
|
378
|
+
};
|
|
379
|
+
|
|
380
|
+
const transformShow = (dir, node, context) => {
|
|
381
|
+
const { exp, loc } = dir;
|
|
382
|
+
if (!exp) {
|
|
383
|
+
context.onError(
|
|
384
|
+
createDOMCompilerError(59, loc)
|
|
385
|
+
);
|
|
386
|
+
}
|
|
387
|
+
return {
|
|
388
|
+
props: [],
|
|
389
|
+
needRuntime: context.helper(V_SHOW)
|
|
390
|
+
};
|
|
396
391
|
};
|
|
397
392
|
|
|
398
393
|
const transformTransition = (node, context) => {
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
return;
|
|
406
|
-
}
|
|
407
|
-
// warn multiple transition children
|
|
408
|
-
if (hasMultipleChildren(node)) {
|
|
409
|
-
context.onError(createDOMCompilerError(60 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */, {
|
|
410
|
-
start: node.children[0].loc.start,
|
|
411
|
-
end: node.children[node.children.length - 1].loc.end,
|
|
412
|
-
source: ''
|
|
413
|
-
}));
|
|
414
|
-
}
|
|
415
|
-
// check if it's s single child w/ v-show
|
|
416
|
-
// if yes, inject "persisted: true" to the transition props
|
|
417
|
-
const child = node.children[0];
|
|
418
|
-
if (child.type === 1 /* NodeTypes.ELEMENT */) {
|
|
419
|
-
for (const p of child.props) {
|
|
420
|
-
if (p.type === 7 /* NodeTypes.DIRECTIVE */ && p.name === 'show') {
|
|
421
|
-
node.props.push({
|
|
422
|
-
type: 6 /* NodeTypes.ATTRIBUTE */,
|
|
423
|
-
name: 'persisted',
|
|
424
|
-
value: undefined,
|
|
425
|
-
loc: node.loc
|
|
426
|
-
});
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
};
|
|
394
|
+
if (node.type === "element" && node.tagType === 1) {
|
|
395
|
+
const component = context.isBuiltInComponent(node.tag);
|
|
396
|
+
if (component === TRANSITION) {
|
|
397
|
+
return () => {
|
|
398
|
+
if (!node.children.length) {
|
|
399
|
+
return;
|
|
431
400
|
}
|
|
401
|
+
if (hasMultipleChildren(node)) {
|
|
402
|
+
context.onError(
|
|
403
|
+
createDOMCompilerError(
|
|
404
|
+
60,
|
|
405
|
+
{
|
|
406
|
+
start: node.children[0].loc.start,
|
|
407
|
+
end: node.children[node.children.length - 1].loc.end,
|
|
408
|
+
source: ""
|
|
409
|
+
}
|
|
410
|
+
)
|
|
411
|
+
);
|
|
412
|
+
}
|
|
413
|
+
const child = node.children[0];
|
|
414
|
+
if (child.type === "element") {
|
|
415
|
+
for (const p of child.props) {
|
|
416
|
+
if (p.type === 7 && p.name === "show") {
|
|
417
|
+
node.props.push({
|
|
418
|
+
type: 6,
|
|
419
|
+
name: "persisted",
|
|
420
|
+
value: void 0,
|
|
421
|
+
loc: node.loc
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
};
|
|
432
427
|
}
|
|
428
|
+
}
|
|
433
429
|
};
|
|
434
430
|
function hasMultipleChildren(node) {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
child.type === 11 /* NodeTypes.FOR */ ||
|
|
441
|
-
(child.type === 9 /* NodeTypes.IF */ && child.branches.some(hasMultipleChildren)));
|
|
431
|
+
const children = node.children = node.children.filter(
|
|
432
|
+
(c) => c.type !== "comment" && !(c.type === "text" && !c.content.trim())
|
|
433
|
+
);
|
|
434
|
+
const child = children[0];
|
|
435
|
+
return children.length !== 1 || child.type === 11 || child.type === 9 && child.branches.some(hasMultipleChildren);
|
|
442
436
|
}
|
|
443
437
|
|
|
444
438
|
const ignoreSideEffectTags = (node, context) => {
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
439
|
+
if (node.type === "element" && node.tagType === 0 && (node.tag === "script" || node.tag === "style")) {
|
|
440
|
+
context.onError(
|
|
441
|
+
createDOMCompilerError(61, node.loc)
|
|
442
|
+
);
|
|
443
|
+
context.removeNode();
|
|
444
|
+
}
|
|
451
445
|
};
|
|
452
446
|
|
|
453
447
|
const DOMNodeTransforms = [
|
|
454
|
-
|
|
455
|
-
|
|
448
|
+
transformStyle,
|
|
449
|
+
...process.env.NODE_ENV !== "production" ? [transformTransition] : []
|
|
456
450
|
];
|
|
457
451
|
const DOMDirectiveTransforms = {
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
452
|
+
cloak: noopDirectiveTransform,
|
|
453
|
+
html: transformVHtml,
|
|
454
|
+
text: transformVText,
|
|
455
|
+
model: transformModel,
|
|
456
|
+
// override compiler-core
|
|
457
|
+
on: transformOn,
|
|
458
|
+
// override compiler-core
|
|
459
|
+
show: transformShow
|
|
464
460
|
};
|
|
465
461
|
function compile(template, options = {}) {
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
462
|
+
return baseCompile(
|
|
463
|
+
template,
|
|
464
|
+
extend({}, parserOptions, options, {
|
|
465
|
+
nodeTransforms: [
|
|
466
|
+
// ignore <script> and <tag>
|
|
467
|
+
// this is not put inside DOMNodeTransforms because that list is used
|
|
468
|
+
// by compiler-ssr to generate vnode fallback branches
|
|
469
|
+
ignoreSideEffectTags,
|
|
470
|
+
...DOMNodeTransforms,
|
|
471
|
+
...options.nodeTransforms || []
|
|
472
|
+
],
|
|
473
|
+
directiveTransforms: extend(
|
|
474
|
+
{},
|
|
475
|
+
DOMDirectiveTransforms,
|
|
476
|
+
options.directiveTransforms || {}
|
|
477
|
+
),
|
|
478
|
+
transformHoist: null
|
|
479
|
+
})
|
|
480
|
+
);
|
|
478
481
|
}
|
|
479
482
|
function parse(template, options = {}) {
|
|
480
|
-
|
|
483
|
+
return baseParse(template, extend({}, parserOptions, options));
|
|
481
484
|
}
|
|
482
485
|
|
|
483
486
|
export { DOMDirectiveTransforms, DOMNodeTransforms, TRANSITION, TRANSITION_GROUP, V_MODEL_CHECKBOX, V_MODEL_DYNAMIC, V_MODEL_RADIO, V_MODEL_SELECT, V_MODEL_TEXT, V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS, V_SHOW, compile, createDOMCompilerError, parse, parserOptions, transformStyle };
|