@vue/compiler-dom 3.2.31 → 3.2.34-beta.1

package/dist/compiler-dom.cjs.js

@@ -2524,7 +2524,9 @@ const transformVText = (dir, node, context) => {
     return {
         props: [
             compilerCore.createObjectProperty(compilerCore.createSimpleExpression(`textContent`, true), exp
-                ? compilerCore.createCallExpression(context.helperString(compilerCore.TO_DISPLAY_STRING), [exp], loc)
+                ? compilerCore.getConstantType(exp, context) > 0
+                    ? exp
+                    : compilerCore.createCallExpression(context.helperString(compilerCore.TO_DISPLAY_STRING), [exp], loc)
                 : compilerCore.createSimpleExpression('', true))
         ]
     };
@@ -2736,19 +2738,38 @@ const transformShow = (dir, node, context) => {
     };
 };
 
-const warnTransitionChildren = (node, context) => {
+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 && hasMultipleChildren(node)) {
+                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
+                            });
+                        }
+                    }
+                }
             };
         }
     }
@@ -2964,6 +2985,7 @@ function stringifyNode(node, context) {
 }
 function stringifyElement(node, context) {
     let res = `<${node.tag}`;
+    let innerHTML = '';
     for (let i = 0; i < node.props.length; i++) {
         const p = node.props[i];
         if (p.type === 6 /* ATTRIBUTE */) {
@@ -2972,25 +2994,35 @@ function stringifyElement(node, context) {
                 res += `="${shared.escapeHtml(p.value.content)}"`;
             }
         }
-        else if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {
-            const exp = p.exp;
-            if (exp.content[0] === '_') {
-                // internally generated string constant references
-                // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin
-                res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;
-                continue;
-            }
-            // constant v-bind, e.g. :foo="1"
-            let evaluated = evaluateConstant(exp);
-            if (evaluated != null) {
-                const arg = p.arg && p.arg.content;
-                if (arg === 'class') {
-                    evaluated = shared.normalizeClass(evaluated);
+        else if (p.type === 7 /* DIRECTIVE */) {
+            if (p.name === 'bind') {
+                const exp = p.exp;
+                if (exp.content[0] === '_') {
+                    // internally generated string constant references
+                    // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin
+                    res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;
+                    continue;
                 }
-                else if (arg === 'style') {
-                    evaluated = shared.stringifyStyle(shared.normalizeStyle(evaluated));
+                // constant v-bind, e.g. :foo="1"
+                let evaluated = evaluateConstant(exp);
+                if (evaluated != null) {
+                    const arg = p.arg && p.arg.content;
+                    if (arg === 'class') {
+                        evaluated = shared.normalizeClass(evaluated);
+                    }
+                    else if (arg === 'style') {
+                        evaluated = shared.stringifyStyle(shared.normalizeStyle(evaluated));
+                    }
+                    res += ` ${p.arg.content}="${shared.escapeHtml(evaluated)}"`;
                 }
-                res += ` ${p.arg.content}="${shared.escapeHtml(evaluated)}"`;
+            }
+            else if (p.name === 'html') {
+                // #5439 v-html with constant value
+                // not sure why would anyone do this but it can happen
+                innerHTML = evaluateConstant(p.exp);
+            }
+            else if (p.name === 'text') {
+                innerHTML = shared.escapeHtml(shared.toDisplayString(evaluateConstant(p.exp)));
             }
         }
     }
@@ -2998,8 +3030,13 @@ function stringifyElement(node, context) {
         res += ` ${context.scopeId}`;
     }
     res += `>`;
-    for (let i = 0; i < node.children.length; i++) {
-        res += stringifyNode(node.children[i], context);
+    if (innerHTML) {
+        res += innerHTML;
+    }
+    else {
+        for (let i = 0; i < node.children.length; i++) {
+            res += stringifyNode(node.children[i], context);
+        }
     }
     if (!shared.isVoidTag(node.tag)) {
         res += `</${node.tag}>`;
@@ -3012,7 +3049,7 @@ function stringifyElement(node, context) {
 // here, e.g. `{{ 1 }}` or `{{ 'foo' }}`
 // in addition, constant exps bail on presence of parens so you can't even
 // run JSFuck in here. But we mark it unsafe for security review purposes.
-// (see compiler-core/src/transformExpressions)
+// (see compiler-core/src/transforms/transformExpression)
 function evaluateConstant(exp) {
     if (exp.type === 4 /* SIMPLE_EXPRESSION */) {
         return new Function(`return ${exp.content}`)();
@@ -3049,7 +3086,7 @@ const ignoreSideEffectTags = (node, context) => {
 
 const DOMNodeTransforms = [
     transformStyle,
-    ...([warnTransitionChildren] )
+    ...([transformTransition] )
 ];
 const DOMDirectiveTransforms = {
     cloak: compilerCore.noopDirectiveTransform,

package/dist/compiler-dom.cjs.prod.js

@@ -2524,7 +2524,9 @@ const transformVText = (dir, node, context) => {
     return {
         props: [
             compilerCore.createObjectProperty(compilerCore.createSimpleExpression(`textContent`, true), exp
-                ? compilerCore.createCallExpression(context.helperString(compilerCore.TO_DISPLAY_STRING), [exp], loc)
+                ? compilerCore.getConstantType(exp, context) > 0
+                    ? exp
+                    : compilerCore.createCallExpression(context.helperString(compilerCore.TO_DISPLAY_STRING), [exp], loc)
                 : compilerCore.createSimpleExpression('', true))
         ]
     };
@@ -2921,6 +2923,7 @@ function stringifyNode(node, context) {
 }
 function stringifyElement(node, context) {
     let res = `<${node.tag}`;
+    let innerHTML = '';
     for (let i = 0; i < node.props.length; i++) {
         const p = node.props[i];
         if (p.type === 6 /* ATTRIBUTE */) {
@@ -2929,25 +2932,35 @@ function stringifyElement(node, context) {
                 res += `="${shared.escapeHtml(p.value.content)}"`;
             }
         }
-        else if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {
-            const exp = p.exp;
-            if (exp.content[0] === '_') {
-                // internally generated string constant references
-                // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin
-                res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;
-                continue;
-            }
-            // constant v-bind, e.g. :foo="1"
-            let evaluated = evaluateConstant(exp);
-            if (evaluated != null) {
-                const arg = p.arg && p.arg.content;
-                if (arg === 'class') {
-                    evaluated = shared.normalizeClass(evaluated);
+        else if (p.type === 7 /* DIRECTIVE */) {
+            if (p.name === 'bind') {
+                const exp = p.exp;
+                if (exp.content[0] === '_') {
+                    // internally generated string constant references
+                    // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin
+                    res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;
+                    continue;
                 }
-                else if (arg === 'style') {
-                    evaluated = shared.stringifyStyle(shared.normalizeStyle(evaluated));
+                // constant v-bind, e.g. :foo="1"
+                let evaluated = evaluateConstant(exp);
+                if (evaluated != null) {
+                    const arg = p.arg && p.arg.content;
+                    if (arg === 'class') {
+                        evaluated = shared.normalizeClass(evaluated);
+                    }
+                    else if (arg === 'style') {
+                        evaluated = shared.stringifyStyle(shared.normalizeStyle(evaluated));
+                    }
+                    res += ` ${p.arg.content}="${shared.escapeHtml(evaluated)}"`;
                 }
-                res += ` ${p.arg.content}="${shared.escapeHtml(evaluated)}"`;
+            }
+            else if (p.name === 'html') {
+                // #5439 v-html with constant value
+                // not sure why would anyone do this but it can happen
+                innerHTML = evaluateConstant(p.exp);
+            }
+            else if (p.name === 'text') {
+                innerHTML = shared.escapeHtml(shared.toDisplayString(evaluateConstant(p.exp)));
             }
         }
     }
@@ -2955,8 +2968,13 @@ function stringifyElement(node, context) {
         res += ` ${context.scopeId}`;
     }
     res += `>`;
-    for (let i = 0; i < node.children.length; i++) {
-        res += stringifyNode(node.children[i], context);
+    if (innerHTML) {
+        res += innerHTML;
+    }
+    else {
+        for (let i = 0; i < node.children.length; i++) {
+            res += stringifyNode(node.children[i], context);
+        }
     }
     if (!shared.isVoidTag(node.tag)) {
         res += `</${node.tag}>`;
@@ -2969,7 +2987,7 @@ function stringifyElement(node, context) {
 // here, e.g. `{{ 1 }}` or `{{ 'foo' }}`
 // in addition, constant exps bail on presence of parens so you can't even
 // run JSFuck in here. But we mark it unsafe for security review purposes.
-// (see compiler-core/src/transformExpressions)
+// (see compiler-core/src/transforms/transformExpression)
 function evaluateConstant(exp) {
     if (exp.type === 4 /* SIMPLE_EXPRESSION */) {
         return new Function(`return ${exp.content}`)();

package/dist/compiler-dom.esm-browser.js

@@ -2371,6 +2371,7 @@ function createStructuralDirectiveTransform(name, fn) {
 }
 
 const PURE_ANNOTATION = `/*#__PURE__*/`;
+const aliasHelper = (s) => `${helperNameMap[s]}: _${helperNameMap[s]}`;
 function createCodegenContext(ast, { mode = 'function', prefixIdentifiers = mode === 'module', sourceMap = false, filename = `template.vue.html`, scopeId = null, optimizeImports = false, runtimeGlobalName = `Vue`, runtimeModuleName = `vue`, ssrRuntimeModuleName = 'vue/server-renderer', ssr = false, isTS = false, inSSR = false }) {
     const context = {
         mode,
@@ -2447,9 +2448,7 @@ function generate(ast, options = {}) {
         // function mode const declarations should be inside with block
         // also they should be renamed to avoid collision with user properties
         if (hasHelpers) {
-            push(`const { ${ast.helpers
-                .map(s => `${helperNameMap[s]}: _${helperNameMap[s]}`)
-                .join(', ')} } = _Vue`);
+            push(`const { ${ast.helpers.map(aliasHelper).join(', ')} } = _Vue`);
             push(`\n`);
             newline();
         }
@@ -2509,7 +2508,6 @@ function generate(ast, options = {}) {
 function genFunctionPreamble(ast, context) {
     const { ssr, prefixIdentifiers, push, newline, runtimeModuleName, runtimeGlobalName, ssrRuntimeModuleName } = context;
     const VueBinding = runtimeGlobalName;
-    const aliasHelper = (s) => `${helperNameMap[s]}: _${helperNameMap[s]}`;
     // Generate const declaration for helpers
     // In prefix mode, we place the const declaration at top so it's done
     // only once; But if we not prefixing, we place the declaration inside the
@@ -3224,14 +3222,14 @@ function processIf(node, dir, context, processCodegen) {
     }
 }
 function createIfBranch(node, dir) {
+    const isTemplateIf = node.tagType === 3 /* TEMPLATE */;
     return {
         type: 10 /* IF_BRANCH */,
         loc: node.loc,
         condition: dir.name === 'else' ? undefined : dir.exp,
-        children: node.tagType === 3 /* TEMPLATE */ && !findDir(node, 'for')
-            ? node.children
-            : [node],
-        userKey: findProp(node, `key`)
+        children: isTemplateIf && !findDir(node, 'for') ? node.children : [node],
+        userKey: findProp(node, `key`),
+        isTemplateIf
     };
 }
 function createCodegenNodeForBranch(branch, keyIndex, context) {
@@ -3266,7 +3264,8 @@ function createChildrenCodegenNode(branch, keyIndex, context) {
             let patchFlagText = PatchFlagNames[64 /* STABLE_FRAGMENT */];
             // check if the fragment actually contains a single valid child with
             // the rest being comments
-            if (children.filter(c => c.type !== 3 /* COMMENT */).length === 1) {
+            if (!branch.isTemplateIf &&
+                children.filter(c => c.type !== 3 /* COMMENT */).length === 1) {
                 patchFlag |= 2048 /* DEV_ROOT_FRAGMENT */;
                 patchFlagText += `, ${PatchFlagNames[2048 /* DEV_ROOT_FRAGMENT */]}`;
             }
@@ -4258,10 +4257,11 @@ function buildProps(node, context, props = node.props, ssr = false) {
                         classProp.value = createCallExpression(context.helper(NORMALIZE_CLASS), [classProp.value]);
                     }
                     if (styleProp &&
-                        !isStaticExp(styleProp.value) &&
                         // the static style is compiled into an object,
                         // so use `hasStyleBinding` to ensure that it is a dynamic style binding
                         (hasStyleBinding ||
+                            (styleProp.value.type === 4 /* SIMPLE_EXPRESSION */ &&
+                                styleProp.value.content.trim()[0] === `[`) ||
                             // v-bind:style and style both exist,
                             // v-bind:style with static literal object
                             styleProp.value.type === 17 /* JS_ARRAY_EXPRESSION */)) {
@@ -4611,11 +4611,7 @@ const transformText = (node, context) => {
                         const next = children[j];
                         if (isText(next)) {
                             if (!currentContainer) {
-                                currentContainer = children[i] = {
-                                    type: 8 /* COMPOUND_EXPRESSION */,
-                                    loc: child.loc,
-                                    children: [child]
-                                };
+                                currentContainer = children[i] = createCompoundExpression([child], child.loc);
                             }
                             // merge adjacent text node into current
                             currentContainer.children.push(` + `, next);
@@ -5187,7 +5183,9 @@ const transformVText = (dir, node, context) => {
     return {
         props: [
             createObjectProperty(createSimpleExpression(`textContent`, true), exp
-                ? createCallExpression(context.helperString(TO_DISPLAY_STRING), [exp], loc)
+                ? getConstantType(exp, context) > 0
+                    ? exp
+                    : createCallExpression(context.helperString(TO_DISPLAY_STRING), [exp], loc)
                 : createSimpleExpression('', true))
         ]
     };
@@ -5399,19 +5397,38 @@ const transformShow = (dir, node, context) => {
     };
 };
 
-const warnTransitionChildren = (node, context) => {
+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 && hasMultipleChildren(node)) {
+                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
+                            });
+                        }
+                    }
+                }
             };
         }
     }
@@ -5437,7 +5454,7 @@ const ignoreSideEffectTags = (node, context) => {
 
 const DOMNodeTransforms = [
     transformStyle,
-    ...([warnTransitionChildren] )
+    ...([transformTransition] )
 ];
 const DOMDirectiveTransforms = {
     cloak: noopDirectiveTransform,
@@ -5465,4 +5482,4 @@ function parse(template, options = {}) {
     return baseParse(template, extend({}, parserOptions, options));
 }
 
-export { BASE_TRANSITION, CAMELIZE, CAPITALIZE, CREATE_BLOCK, CREATE_COMMENT, CREATE_ELEMENT_BLOCK, CREATE_ELEMENT_VNODE, CREATE_SLOTS, CREATE_STATIC, CREATE_TEXT, CREATE_VNODE, DOMDirectiveTransforms, DOMNodeTransforms, FRAGMENT, GUARD_REACTIVE_PROPS, IS_MEMO_SAME, IS_REF, KEEP_ALIVE, MERGE_PROPS, NORMALIZE_CLASS, NORMALIZE_PROPS, NORMALIZE_STYLE, OPEN_BLOCK, POP_SCOPE_ID, PUSH_SCOPE_ID, RENDER_LIST, RENDER_SLOT, RESOLVE_COMPONENT, RESOLVE_DIRECTIVE, RESOLVE_DYNAMIC_COMPONENT, RESOLVE_FILTER, SET_BLOCK_TRACKING, SUSPENSE, TELEPORT, TO_DISPLAY_STRING, TO_HANDLERS, TO_HANDLER_KEY, TRANSITION, TRANSITION_GROUP, UNREF, 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, WITH_CTX, WITH_DIRECTIVES, WITH_MEMO, advancePositionWithClone, advancePositionWithMutation, assert, baseCompile, baseParse, buildDirectiveArgs, buildProps, buildSlots, checkCompatEnabled, compile, createArrayExpression, createAssignmentExpression, createBlockStatement, createCacheExpression, createCallExpression, createCompilerError, createCompoundExpression, createConditionalExpression, createDOMCompilerError, createForLoopParams, createFunctionExpression, createIfStatement, createInterpolation, createObjectExpression, createObjectProperty, createReturnStatement, createRoot, createSequenceExpression, createSimpleExpression, createStructuralDirectiveTransform, createTemplateLiteral, createTransformContext, createVNodeCall, extractIdentifiers, findDir, findProp, generate, generateCodeFrame, getBaseTransformPreset, getInnerRange, getMemoedVNodeCall, getVNodeBlockHelper, getVNodeHelper, hasDynamicKeyVBind, hasScopeRef, helperNameMap, injectProp, isBuiltInType, isCoreComponent, isFunctionType, isInDestructureAssignment, isMemberExpression, isMemberExpressionBrowser, isMemberExpressionNode, isReferencedIdentifier, isSimpleIdentifier, isSlotOutlet, isStaticArgOf, isStaticExp, isStaticProperty, isStaticPropertyKey, isTemplateNode, isText, isVSlot, locStub, makeBlock, noopDirectiveTransform, parse, parserOptions, processExpression, processFor, processIf, processSlotOutlet, registerRuntimeHelpers, resolveComponentType, toValidAssetId, trackSlotScopes, trackVForSlotScopes, transform, transformBind, transformElement, transformExpression, transformModel, transformOn, transformStyle, traverseNode, walkBlockDeclarations, walkFunctionParams, walkIdentifiers, warnDeprecation };
+export { BASE_TRANSITION, CAMELIZE, CAPITALIZE, CREATE_BLOCK, CREATE_COMMENT, CREATE_ELEMENT_BLOCK, CREATE_ELEMENT_VNODE, CREATE_SLOTS, CREATE_STATIC, CREATE_TEXT, CREATE_VNODE, DOMDirectiveTransforms, DOMNodeTransforms, FRAGMENT, GUARD_REACTIVE_PROPS, IS_MEMO_SAME, IS_REF, KEEP_ALIVE, MERGE_PROPS, NORMALIZE_CLASS, NORMALIZE_PROPS, NORMALIZE_STYLE, OPEN_BLOCK, POP_SCOPE_ID, PUSH_SCOPE_ID, RENDER_LIST, RENDER_SLOT, RESOLVE_COMPONENT, RESOLVE_DIRECTIVE, RESOLVE_DYNAMIC_COMPONENT, RESOLVE_FILTER, SET_BLOCK_TRACKING, SUSPENSE, TELEPORT, TO_DISPLAY_STRING, TO_HANDLERS, TO_HANDLER_KEY, TRANSITION, TRANSITION_GROUP, UNREF, 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, WITH_CTX, WITH_DIRECTIVES, WITH_MEMO, advancePositionWithClone, advancePositionWithMutation, assert, baseCompile, baseParse, buildDirectiveArgs, buildProps, buildSlots, checkCompatEnabled, compile, createArrayExpression, createAssignmentExpression, createBlockStatement, createCacheExpression, createCallExpression, createCompilerError, createCompoundExpression, createConditionalExpression, createDOMCompilerError, createForLoopParams, createFunctionExpression, createIfStatement, createInterpolation, createObjectExpression, createObjectProperty, createReturnStatement, createRoot, createSequenceExpression, createSimpleExpression, createStructuralDirectiveTransform, createTemplateLiteral, createTransformContext, createVNodeCall, extractIdentifiers, findDir, findProp, generate, generateCodeFrame, getBaseTransformPreset, getConstantType, getInnerRange, getMemoedVNodeCall, getVNodeBlockHelper, getVNodeHelper, hasDynamicKeyVBind, hasScopeRef, helperNameMap, injectProp, isBuiltInType, isCoreComponent, isFunctionType, isInDestructureAssignment, isMemberExpression, isMemberExpressionBrowser, isMemberExpressionNode, isReferencedIdentifier, isSimpleIdentifier, isSlotOutlet, isStaticArgOf, isStaticExp, isStaticProperty, isStaticPropertyKey, isTemplateNode, isText, isVSlot, locStub, makeBlock, noopDirectiveTransform, parse, parserOptions, processExpression, processFor, processIf, processSlotOutlet, registerRuntimeHelpers, resolveComponentType, toValidAssetId, trackSlotScopes, trackVForSlotScopes, transform, transformBind, transformElement, transformExpression, transformModel, transformOn, transformStyle, traverseNode, walkBlockDeclarations, walkFunctionParams, walkIdentifiers, warnDeprecation };