489 lines
15 KiB
JavaScript
489 lines
15 KiB
JavaScript
import { registerRuntimeHelpers, isBuiltInType, createSimpleExpression, createCompilerError, createObjectProperty, getConstantType, createCallExpression, TO_DISPLAY_STRING, transformModel as transformModel$1, findProp, hasDynamicKeyVBind, transformOn as transformOn$1, isStaticExp, createCompoundExpression, checkCompatEnabled, noopDirectiveTransform, baseCompile, baseParse } from '@vue/compiler-core';
|
|
export * from '@vue/compiler-core';
|
|
import { isVoidTag, isHTMLTag, isSVGTag, makeMap, parseStringStyle, capitalize, extend } from '@vue/shared';
|
|
|
|
const V_MODEL_RADIO = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelRadio` : ``);
|
|
const V_MODEL_CHECKBOX = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelCheckbox` : ``);
|
|
const V_MODEL_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelText` : ``);
|
|
const V_MODEL_SELECT = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelSelect` : ``);
|
|
const V_MODEL_DYNAMIC = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelDynamic` : ``);
|
|
const V_ON_WITH_MODIFIERS = Symbol(!!(process.env.NODE_ENV !== "production") ? `vOnModifiersGuard` : ``);
|
|
const V_ON_WITH_KEYS = Symbol(!!(process.env.NODE_ENV !== "production") ? `vOnKeysGuard` : ``);
|
|
const V_SHOW = Symbol(!!(process.env.NODE_ENV !== "production") ? `vShow` : ``);
|
|
const TRANSITION = Symbol(!!(process.env.NODE_ENV !== "production") ? `Transition` : ``);
|
|
const TRANSITION_GROUP = Symbol(!!(process.env.NODE_ENV !== "production") ? `TransitionGroup` : ``);
|
|
registerRuntimeHelpers({
|
|
[V_MODEL_RADIO]: `vModelRadio`,
|
|
[V_MODEL_CHECKBOX]: `vModelCheckbox`,
|
|
[V_MODEL_TEXT]: `vModelText`,
|
|
[V_MODEL_SELECT]: `vModelSelect`,
|
|
[V_MODEL_DYNAMIC]: `vModelDynamic`,
|
|
[V_ON_WITH_MODIFIERS]: `withModifiers`,
|
|
[V_ON_WITH_KEYS]: `withKeys`,
|
|
[V_SHOW]: `vShow`,
|
|
[TRANSITION]: `Transition`,
|
|
[TRANSITION_GROUP]: `TransitionGroup`
|
|
});
|
|
|
|
let decoder;
|
|
function decodeHtmlBrowser(raw, asAttr = false) {
|
|
if (!decoder) {
|
|
decoder = document.createElement("div");
|
|
}
|
|
if (asAttr) {
|
|
decoder.innerHTML = `<div foo="${raw.replace(/"/g, """)}">`;
|
|
return decoder.children[0].getAttribute("foo");
|
|
} else {
|
|
decoder.innerHTML = raw;
|
|
return decoder.textContent;
|
|
}
|
|
}
|
|
|
|
const isRawTextContainer = /* @__PURE__ */ makeMap(
|
|
"style,iframe,script,noscript",
|
|
true
|
|
);
|
|
const parserOptions = {
|
|
isVoidTag,
|
|
isNativeTag: (tag) => isHTMLTag(tag) || isSVGTag(tag),
|
|
isPreTag: (tag) => tag === "pre",
|
|
decodeEntities: decodeHtmlBrowser ,
|
|
isBuiltInComponent: (tag) => {
|
|
if (isBuiltInType(tag, `Transition`)) {
|
|
return TRANSITION;
|
|
} else if (isBuiltInType(tag, `TransitionGroup`)) {
|
|
return TRANSITION_GROUP;
|
|
}
|
|
},
|
|
// https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
|
|
getNamespace(tag, parent) {
|
|
let ns = parent ? parent.ns : 0;
|
|
if (parent && ns === 2) {
|
|
if (parent.tag === "annotation-xml") {
|
|
if (tag === "svg") {
|
|
return 1;
|
|
}
|
|
if (parent.props.some(
|
|
(a) => a.type === 6 && a.name === "encoding" && a.value != null && (a.value.content === "text/html" || a.value.content === "application/xhtml+xml")
|
|
)) {
|
|
ns = 0;
|
|
}
|
|
} else if (/^m(?:[ions]|text)$/.test(parent.tag) && tag !== "mglyph" && tag !== "malignmark") {
|
|
ns = 0;
|
|
}
|
|
} else if (parent && ns === 1) {
|
|
if (parent.tag === "foreignObject" || parent.tag === "desc" || parent.tag === "title") {
|
|
ns = 0;
|
|
}
|
|
}
|
|
if (ns === 0) {
|
|
if (tag === "svg") {
|
|
return 1;
|
|
}
|
|
if (tag === "math") {
|
|
return 2;
|
|
}
|
|
}
|
|
return ns;
|
|
},
|
|
// https://html.spec.whatwg.org/multipage/parsing.html#parsing-html-fragments
|
|
getTextMode({ tag, ns }) {
|
|
if (ns === 0) {
|
|
if (tag === "textarea" || tag === "title") {
|
|
return 1;
|
|
}
|
|
if (isRawTextContainer(tag)) {
|
|
return 2;
|
|
}
|
|
}
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
const transformStyle = (node) => {
|
|
if (node.type === 1) {
|
|
node.props.forEach((p, i) => {
|
|
if (p.type === 6 && p.name === "style" && p.value) {
|
|
node.props[i] = {
|
|
type: 7,
|
|
name: `bind`,
|
|
arg: createSimpleExpression(`style`, true, p.loc),
|
|
exp: parseInlineCSS(p.value.content, p.loc),
|
|
modifiers: [],
|
|
loc: p.loc
|
|
};
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const parseInlineCSS = (cssText, loc) => {
|
|
const normalized = parseStringStyle(cssText);
|
|
return createSimpleExpression(
|
|
JSON.stringify(normalized),
|
|
false,
|
|
loc,
|
|
3
|
|
);
|
|
};
|
|
|
|
function createDOMCompilerError(code, loc) {
|
|
return createCompilerError(
|
|
code,
|
|
loc,
|
|
!!(process.env.NODE_ENV !== "production") || false ? DOMErrorMessages : void 0
|
|
);
|
|
}
|
|
const DOMErrorMessages = {
|
|
[53]: `v-html is missing expression.`,
|
|
[54]: `v-html will override element children.`,
|
|
[55]: `v-text is missing expression.`,
|
|
[56]: `v-text will override element children.`,
|
|
[57]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
|
|
[58]: `v-model argument is not supported on plain elements.`,
|
|
[59]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
|
|
[60]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
|
|
[61]: `v-show is missing expression.`,
|
|
[62]: `<Transition> expects exactly one child element or component.`,
|
|
[63]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
|
|
};
|
|
|
|
const transformVHtml = (dir, node, context) => {
|
|
const { exp, loc } = dir;
|
|
if (!exp) {
|
|
context.onError(
|
|
createDOMCompilerError(53, loc)
|
|
);
|
|
}
|
|
if (node.children.length) {
|
|
context.onError(
|
|
createDOMCompilerError(54, loc)
|
|
);
|
|
node.children.length = 0;
|
|
}
|
|
return {
|
|
props: [
|
|
createObjectProperty(
|
|
createSimpleExpression(`innerHTML`, true, loc),
|
|
exp || createSimpleExpression("", true)
|
|
)
|
|
]
|
|
};
|
|
};
|
|
|
|
const transformVText = (dir, node, context) => {
|
|
const { exp, loc } = dir;
|
|
if (!exp) {
|
|
context.onError(
|
|
createDOMCompilerError(55, loc)
|
|
);
|
|
}
|
|
if (node.children.length) {
|
|
context.onError(
|
|
createDOMCompilerError(56, loc)
|
|
);
|
|
node.children.length = 0;
|
|
}
|
|
return {
|
|
props: [
|
|
createObjectProperty(
|
|
createSimpleExpression(`textContent`, true),
|
|
exp ? getConstantType(exp, context) > 0 ? exp : createCallExpression(
|
|
context.helperString(TO_DISPLAY_STRING),
|
|
[exp],
|
|
loc
|
|
) : createSimpleExpression("", true)
|
|
)
|
|
]
|
|
};
|
|
};
|
|
|
|
const transformModel = (dir, node, context) => {
|
|
const baseResult = transformModel$1(dir, node, context);
|
|
if (!baseResult.props.length || node.tagType === 1) {
|
|
return baseResult;
|
|
}
|
|
if (dir.arg) {
|
|
context.onError(
|
|
createDOMCompilerError(
|
|
58,
|
|
dir.arg.loc
|
|
)
|
|
);
|
|
}
|
|
function checkDuplicatedValue() {
|
|
const value = findProp(node, "value");
|
|
if (value) {
|
|
context.onError(
|
|
createDOMCompilerError(
|
|
60,
|
|
value.loc
|
|
)
|
|
);
|
|
}
|
|
}
|
|
const { tag } = node;
|
|
const isCustomElement = context.isCustomElement(tag);
|
|
if (tag === "input" || tag === "textarea" || tag === "select" || isCustomElement) {
|
|
let directiveToUse = V_MODEL_TEXT;
|
|
let isInvalidType = false;
|
|
if (tag === "input" || isCustomElement) {
|
|
const type = findProp(node, `type`);
|
|
if (type) {
|
|
if (type.type === 7) {
|
|
directiveToUse = V_MODEL_DYNAMIC;
|
|
} else if (type.value) {
|
|
switch (type.value.content) {
|
|
case "radio":
|
|
directiveToUse = V_MODEL_RADIO;
|
|
break;
|
|
case "checkbox":
|
|
directiveToUse = V_MODEL_CHECKBOX;
|
|
break;
|
|
case "file":
|
|
isInvalidType = true;
|
|
context.onError(
|
|
createDOMCompilerError(
|
|
59,
|
|
dir.loc
|
|
)
|
|
);
|
|
break;
|
|
default:
|
|
!!(process.env.NODE_ENV !== "production") && checkDuplicatedValue();
|
|
break;
|
|
}
|
|
}
|
|
} else if (hasDynamicKeyVBind(node)) {
|
|
directiveToUse = V_MODEL_DYNAMIC;
|
|
} else {
|
|
!!(process.env.NODE_ENV !== "production") && checkDuplicatedValue();
|
|
}
|
|
} else if (tag === "select") {
|
|
directiveToUse = V_MODEL_SELECT;
|
|
} else {
|
|
!!(process.env.NODE_ENV !== "production") && checkDuplicatedValue();
|
|
}
|
|
if (!isInvalidType) {
|
|
baseResult.needRuntime = context.helper(directiveToUse);
|
|
}
|
|
} else {
|
|
context.onError(
|
|
createDOMCompilerError(
|
|
57,
|
|
dir.loc
|
|
)
|
|
);
|
|
}
|
|
baseResult.props = baseResult.props.filter(
|
|
(p) => !(p.key.type === 4 && p.key.content === "modelValue")
|
|
);
|
|
return baseResult;
|
|
};
|
|
|
|
const isEventOptionModifier = /* @__PURE__ */ makeMap(`passive,once,capture`);
|
|
const isNonKeyModifier = /* @__PURE__ */ makeMap(
|
|
// event propagation management
|
|
`stop,prevent,self,ctrl,shift,alt,meta,exact,middle`
|
|
);
|
|
const maybeKeyModifier = /* @__PURE__ */ makeMap("left,right");
|
|
const isKeyboardEvent = /* @__PURE__ */ makeMap(
|
|
`onkeyup,onkeydown,onkeypress`,
|
|
true
|
|
);
|
|
const resolveModifiers = (key, modifiers, context, loc) => {
|
|
const keyModifiers = [];
|
|
const nonKeyModifiers = [];
|
|
const eventOptionModifiers = [];
|
|
for (let i = 0; i < modifiers.length; i++) {
|
|
const modifier = modifiers[i];
|
|
if (modifier === "native" && checkCompatEnabled(
|
|
"COMPILER_V_ON_NATIVE",
|
|
context,
|
|
loc
|
|
)) {
|
|
eventOptionModifiers.push(modifier);
|
|
} else if (isEventOptionModifier(modifier)) {
|
|
eventOptionModifiers.push(modifier);
|
|
} else {
|
|
if (maybeKeyModifier(modifier)) {
|
|
if (isStaticExp(key)) {
|
|
if (isKeyboardEvent(key.content)) {
|
|
keyModifiers.push(modifier);
|
|
} else {
|
|
nonKeyModifiers.push(modifier);
|
|
}
|
|
} else {
|
|
keyModifiers.push(modifier);
|
|
nonKeyModifiers.push(modifier);
|
|
}
|
|
} else {
|
|
if (isNonKeyModifier(modifier)) {
|
|
nonKeyModifiers.push(modifier);
|
|
} else {
|
|
keyModifiers.push(modifier);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
keyModifiers,
|
|
nonKeyModifiers,
|
|
eventOptionModifiers
|
|
};
|
|
};
|
|
const transformClick = (key, event) => {
|
|
const isStaticClick = isStaticExp(key) && key.content.toLowerCase() === "onclick";
|
|
return isStaticClick ? createSimpleExpression(event, true) : key.type !== 4 ? createCompoundExpression([
|
|
`(`,
|
|
key,
|
|
`) === "onClick" ? "${event}" : (`,
|
|
key,
|
|
`)`
|
|
]) : key;
|
|
};
|
|
const transformOn = (dir, node, context) => {
|
|
return transformOn$1(dir, node, context, (baseResult) => {
|
|
const { modifiers } = dir;
|
|
if (!modifiers.length)
|
|
return baseResult;
|
|
let { key, value: handlerExp } = baseResult.props[0];
|
|
const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);
|
|
if (nonKeyModifiers.includes("right")) {
|
|
key = transformClick(key, `onContextmenu`);
|
|
}
|
|
if (nonKeyModifiers.includes("middle")) {
|
|
key = transformClick(key, `onMouseup`);
|
|
}
|
|
if (nonKeyModifiers.length) {
|
|
handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
|
|
handlerExp,
|
|
JSON.stringify(nonKeyModifiers)
|
|
]);
|
|
}
|
|
if (keyModifiers.length && // if event name is dynamic, always wrap with keys guard
|
|
(!isStaticExp(key) || isKeyboardEvent(key.content))) {
|
|
handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
|
|
handlerExp,
|
|
JSON.stringify(keyModifiers)
|
|
]);
|
|
}
|
|
if (eventOptionModifiers.length) {
|
|
const modifierPostfix = eventOptionModifiers.map(capitalize).join("");
|
|
key = isStaticExp(key) ? createSimpleExpression(`${key.content}${modifierPostfix}`, true) : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);
|
|
}
|
|
return {
|
|
props: [createObjectProperty(key, handlerExp)]
|
|
};
|
|
});
|
|
};
|
|
|
|
const transformShow = (dir, node, context) => {
|
|
const { exp, loc } = dir;
|
|
if (!exp) {
|
|
context.onError(
|
|
createDOMCompilerError(61, loc)
|
|
);
|
|
}
|
|
return {
|
|
props: [],
|
|
needRuntime: context.helper(V_SHOW)
|
|
};
|
|
};
|
|
|
|
const transformTransition = (node, context) => {
|
|
if (node.type === 1 && node.tagType === 1) {
|
|
const component = context.isBuiltInComponent(node.tag);
|
|
if (component === TRANSITION) {
|
|
return () => {
|
|
if (!node.children.length) {
|
|
return;
|
|
}
|
|
if (hasMultipleChildren(node)) {
|
|
context.onError(
|
|
createDOMCompilerError(
|
|
62,
|
|
{
|
|
start: node.children[0].loc.start,
|
|
end: node.children[node.children.length - 1].loc.end,
|
|
source: ""
|
|
}
|
|
)
|
|
);
|
|
}
|
|
const child = node.children[0];
|
|
if (child.type === 1) {
|
|
for (const p of child.props) {
|
|
if (p.type === 7 && p.name === "show") {
|
|
node.props.push({
|
|
type: 6,
|
|
name: "persisted",
|
|
value: void 0,
|
|
loc: node.loc
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
function hasMultipleChildren(node) {
|
|
const children = node.children = node.children.filter(
|
|
(c) => c.type !== 3 && !(c.type === 2 && !c.content.trim())
|
|
);
|
|
const child = children[0];
|
|
return children.length !== 1 || child.type === 11 || child.type === 9 && child.branches.some(hasMultipleChildren);
|
|
}
|
|
|
|
const ignoreSideEffectTags = (node, context) => {
|
|
if (node.type === 1 && node.tagType === 0 && (node.tag === "script" || node.tag === "style")) {
|
|
!!(process.env.NODE_ENV !== "production") && context.onError(
|
|
createDOMCompilerError(
|
|
63,
|
|
node.loc
|
|
)
|
|
);
|
|
context.removeNode();
|
|
}
|
|
};
|
|
|
|
const DOMNodeTransforms = [
|
|
transformStyle,
|
|
...!!(process.env.NODE_ENV !== "production") ? [transformTransition] : []
|
|
];
|
|
const DOMDirectiveTransforms = {
|
|
cloak: noopDirectiveTransform,
|
|
html: transformVHtml,
|
|
text: transformVText,
|
|
model: transformModel,
|
|
// override compiler-core
|
|
on: transformOn,
|
|
// override compiler-core
|
|
show: transformShow
|
|
};
|
|
function compile(template, options = {}) {
|
|
return baseCompile(
|
|
template,
|
|
extend({}, parserOptions, options, {
|
|
nodeTransforms: [
|
|
// ignore <script> and <tag>
|
|
// this is not put inside DOMNodeTransforms because that list is used
|
|
// by compiler-ssr to generate vnode fallback branches
|
|
ignoreSideEffectTags,
|
|
...DOMNodeTransforms,
|
|
...options.nodeTransforms || []
|
|
],
|
|
directiveTransforms: extend(
|
|
{},
|
|
DOMDirectiveTransforms,
|
|
options.directiveTransforms || {}
|
|
),
|
|
transformHoist: null
|
|
})
|
|
);
|
|
}
|
|
function parse(template, options = {}) {
|
|
return baseParse(template, extend({}, parserOptions, options));
|
|
}
|
|
|
|
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 };
|