Studying all day long)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

483 lines
20 KiB

import { registerRuntimeHelpers, isBuiltInType, createSimpleExpression, createCompilerError, createObjectProperty, getConstantType, createCallExpression, TO_DISPLAY_STRING, transformModel as transformModel$1, findProp, hasDynamicKeyVBind, transformOn as transformOn$1, createCompoundExpression, isStaticExp, 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`
});
/* eslint-disable no-restricted-globals */
let decoder;
function decodeHtmlBrowser(raw, asAttr = false) {
if (!decoder) {
decoder = document.createElement('div');
}
if (asAttr) {
decoder.innerHTML = `<div foo="${raw.replace(/"/g, '&quot;')}">`;
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 /* HTML */;
if (parent && ns === 2 /* MATH_ML */) {
if (parent.tag === 'annotation-xml') {
if (tag === 'svg') {
return 1 /* SVG */;
}
if (parent.props.some(a => a.type === 6 /* ATTRIBUTE */ &&
a.name === 'encoding' &&
a.value != null &&
(a.value.content === 'text/html' ||
a.value.content === 'application/xhtml+xml'))) {
ns = 0 /* HTML */;
}
}
else if (/^m(?:[ions]|text)$/.test(parent.tag) &&
tag !== 'mglyph' &&
tag !== 'malignmark') {
ns = 0 /* HTML */;
}
}
else if (parent && ns === 1 /* SVG */) {
if (parent.tag === 'foreignObject' ||
parent.tag === 'desc' ||
parent.tag === 'title') {
ns = 0 /* HTML */;
}
}
if (ns === 0 /* HTML */) {
if (tag === 'svg') {
return 1 /* SVG */;
}
if (tag === 'math') {
return 2 /* MATH_ML */;
}
}
return ns;
},
// https://html.spec.whatwg.org/multipage/parsing.html#parsing-html-fragments
getTextMode({ tag, ns }) {
if (ns === 0 /* HTML */) {
if (tag === 'textarea' || tag === 'title') {
return 1 /* RCDATA */;
}
if (isRawTextContainer(tag)) {
return 2 /* RAWTEXT */;
}
}
return 0 /* DATA */;
}
};
// Parse inline CSS strings for static style attributes into an object.
// This is a NodeTransform since it works on the static `style` attribute and
// converts it into a dynamic equivalent:
// style="color: red" -> :style='{ "color": "red" }'
// It is then processed by `transformElement` and included in the generated
// props.
const transformStyle = node => {
if (node.type === 1 /* ELEMENT */) {
node.props.forEach((p, i) => {
if (p.type === 6 /* ATTRIBUTE */ && p.name === 'style' && p.value) {
// replace p with an expression node
node.props[i] = {
type: 7 /* DIRECTIVE */,
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 /* CAN_STRINGIFY */);
};
function createDOMCompilerError(code, loc) {
return createCompilerError(code, loc, (process.env.NODE_ENV !== 'production') || !true ? DOMErrorMessages : undefined);
}
const DOMErrorMessages = {
[50 /* X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,
[51 /* X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,
[52 /* X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,
[53 /* X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,
[54 /* X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
[55 /* X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,
[56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
[57 /* X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
[58 /* X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,
[59 /* X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,
[60 /* X_IGNORED_SIDE_EFFECT_TAG */]: `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(50 /* X_V_HTML_NO_EXPRESSION */, loc));
}
if (node.children.length) {
context.onError(createDOMCompilerError(51 /* X_V_HTML_WITH_CHILDREN */, 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(52 /* X_V_TEXT_NO_EXPRESSION */, loc));
}
if (node.children.length) {
context.onError(createDOMCompilerError(53 /* X_V_TEXT_WITH_CHILDREN */, 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);
// base transform has errors OR component v-model (only need props)
if (!baseResult.props.length || node.tagType === 1 /* COMPONENT */) {
return baseResult;
}
if (dir.arg) {
context.onError(createDOMCompilerError(55 /* X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));
}
function checkDuplicatedValue() {
const value = findProp(node, 'value');
if (value) {
context.onError(createDOMCompilerError(57 /* X_V_MODEL_UNNECESSARY_VALUE */, 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 /* DIRECTIVE */) {
// :type="foo"
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(56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
break;
default:
// text type
(process.env.NODE_ENV !== 'production') && checkDuplicatedValue();
break;
}
}
}
else if (hasDynamicKeyVBind(node)) {
// element has bindings with dynamic keys, which can possibly contain
// "type".
directiveToUse = V_MODEL_DYNAMIC;
}
else {
// text type
(process.env.NODE_ENV !== 'production') && checkDuplicatedValue();
}
}
else if (tag === 'select') {
directiveToUse = V_MODEL_SELECT;
}
else {
// textarea
(process.env.NODE_ENV !== 'production') && checkDuplicatedValue();
}
// inject runtime directive
// by returning the helper symbol via needRuntime
// the import will replaced a resolveDirective call.
if (!isInvalidType) {
baseResult.needRuntime = context.helper(directiveToUse);
}
}
else {
context.onError(createDOMCompilerError(54 /* X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
}
// native vmodel doesn't need the `modelValue` props since they are also
// passed to the runtime as `binding.value`. removing it reduces code size.
baseResult.props = baseResult.props.filter(p => !(p.key.type === 4 /* SIMPLE_EXPRESSION */ &&
p.key.content === 'modelValue'));
return baseResult;
};
const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`);
const isNonKeyModifier = /*#__PURE__*/ makeMap(
// event propagation management
`stop,prevent,self,` +
// system modifiers + exact
`ctrl,shift,alt,meta,exact,` +
// mouse
`middle`);
// left & right could be mouse or key modifiers based on event type
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" /* COMPILER_V_ON_NATIVE */, context, loc)) {
eventOptionModifiers.push(modifier);
}
else if (isEventOptionModifier(modifier)) {
// eventOptionModifiers: modifiers for addEventListener() options,
// e.g. .passive & .capture
eventOptionModifiers.push(modifier);
}
else {
// runtimeModifiers: modifiers that needs runtime guards
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 /* SIMPLE_EXPRESSION */
? 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);
// normalize click.right and click.middle since they don't actually fire
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(58 /* X_V_SHOW_NO_EXPRESSION */, loc));
}
return {
props: [],
needRuntime: context.helper(V_SHOW)
};
};
const transformTransition = (node, context) => {
if (node.type === 1 /* ELEMENT */ &&
node.tagType === 1 /* COMPONENT */) {
const component = context.isBuiltInComponent(node.tag);
if (component === TRANSITION) {
return () => {
if (!node.children.length) {
return;
}
// warn multiple transition children
if (hasMultipleChildren(node)) {
context.onError(createDOMCompilerError(59 /* X_TRANSITION_INVALID_CHILDREN */, {
start: node.children[0].loc.start,
end: node.children[node.children.length - 1].loc.end,
source: ''
}));
}
// check if it's s single child w/ v-show
// if yes, inject "persisted: true" to the transition props
const child = node.children[0];
if (child.type === 1 /* ELEMENT */) {
for (const p of child.props) {
if (p.type === 7 /* DIRECTIVE */ && p.name === 'show') {
node.props.push({
type: 6 /* ATTRIBUTE */,
name: 'persisted',
value: undefined,
loc: node.loc
});
}
}
}
};
}
}
};
function hasMultipleChildren(node) {
// #1352 filter out potential comment nodes.
const children = (node.children = node.children.filter(c => c.type !== 3 /* COMMENT */ &&
!(c.type === 2 /* TEXT */ && !c.content.trim())));
const child = children[0];
return (children.length !== 1 ||
child.type === 11 /* FOR */ ||
(child.type === 9 /* IF */ && child.branches.some(hasMultipleChildren)));
}
const ignoreSideEffectTags = (node, context) => {
if (node.type === 1 /* ELEMENT */ &&
node.tagType === 0 /* ELEMENT */ &&
(node.tag === 'script' || node.tag === 'style')) {
context.onError(createDOMCompilerError(60 /* X_IGNORED_SIDE_EFFECT_TAG */, node.loc));
context.removeNode();
}
};
const DOMNodeTransforms = [
transformStyle,
...((process.env.NODE_ENV !== 'production') ? [transformTransition] : [])
];
const DOMDirectiveTransforms = {
cloak: noopDirectiveTransform,
html: transformVHtml,
text: transformVText,
model: transformModel,
on: transformOn,
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 };