@vue/compiler-sfc 3.2.33 → 3.2.34-beta.1

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

@@ -453,7 +453,13 @@ const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + st
 /**
  * @private
  */
-const toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``);
+const toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``);
+const identRE = /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/;
+function genPropsAccessExp(name) {
+    return identRE.test(name)
+        ? `__props.${name}`
+        : `__props[${JSON.stringify(name)}]`;
+}
 
 function defaultOnError(error) {
     throw error;
@@ -20973,6 +20979,7 @@ var sourceMap = {
 };
 
 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,
@@ -21100,9 +21107,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();
         }
@@ -21159,7 +21164,6 @@ function genFunctionPreamble(ast, context) {
     const VueBinding = ssr
         ? `require(${JSON.stringify(runtimeModuleName)})`
         : 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
@@ -22286,7 +22290,9 @@ asRawStatements = false, localVars = Object.create(context.identifiers)) {
             const isUpdateArg = parent && parent.type === 'UpdateExpression' && parent.argument === id;
             // ({ x } = y)
             const isDestructureAssignment = parent && isInDestructureAssignment(parent, parentStack);
-            if (type === "setup-const" /* SETUP_CONST */ || localVars[raw]) {
+            if (type === "setup-const" /* SETUP_CONST */ ||
+                type === "setup-reactive-const" /* SETUP_REACTIVE_CONST */ ||
+                localVars[raw]) {
                 return raw;
             }
             else if (type === "setup-ref" /* SETUP_REF */) {
@@ -22340,11 +22346,11 @@ asRawStatements = false, localVars = Object.create(context.identifiers)) {
             else if (type === "props" /* PROPS */) {
                 // use __props which is generated by compileScript so in ts mode
                 // it gets correct type
-                return `__props.${raw}`;
+                return genPropsAccessExp(raw);
             }
             else if (type === "props-aliased" /* PROPS_ALIASED */) {
                 // prop with a different local alias (from defineProps() destructure)
-                return `__props.${bindingMetadata.__propsAliases[raw]}`;
+                return genPropsAccessExp(bindingMetadata.__propsAliases[raw]);
             }
         }
         else {
@@ -22353,7 +22359,7 @@ asRawStatements = false, localVars = Object.create(context.identifiers)) {
                 return `$setup.${raw}`;
             }
             else if (type === "props-aliased" /* PROPS_ALIASED */) {
-                return `$props.${bindingMetadata.__propsAliases[raw]}`;
+                return `$props['${bindingMetadata.__propsAliases[raw]}']`;
             }
             else if (type) {
                 return `$${type}.${raw}`;
@@ -22614,14 +22620,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) {
@@ -22656,7 +22662,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 */]}`;
             }
@@ -23447,7 +23454,8 @@ function resolveSetupReference(name, context) {
             return PascalName;
         }
     };
-    const fromConst = checkType("setup-const" /* SETUP_CONST */);
+    const fromConst = checkType("setup-const" /* SETUP_CONST */) ||
+        checkType("setup-reactive-const" /* SETUP_REACTIVE_CONST */);
     if (fromConst) {
         return context.inline
             ? // in inline mode, const setup bindings (e.g. imports) can be used as-is
@@ -23721,10 +23729,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 */)) {
@@ -24115,11 +24124,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);
@@ -26903,7 +26908,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))
         ]
     };
@@ -27111,19 +27118,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
+                            });
+                        }
+                    }
+                }
             };
         }
     }
@@ -27339,6 +27365,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 */) {
@@ -27347,25 +27374,35 @@ function stringifyElement(node, context) {
                 res += `="${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 = 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 = stringifyStyle(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 = normalizeClass(evaluated);
+                    }
+                    else if (arg === 'style') {
+                        evaluated = stringifyStyle(normalizeStyle(evaluated));
+                    }
+                    res += ` ${p.arg.content}="${escapeHtml(evaluated)}"`;
                 }
-                res += ` ${p.arg.content}="${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 = escapeHtml(toDisplayString(evaluateConstant(p.exp)));
             }
         }
     }
@@ -27373,8 +27410,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 (!isVoidTag(node.tag)) {
         res += `</${node.tag}>`;
@@ -27387,7 +27429,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}`)();
@@ -27424,7 +27466,7 @@ const ignoreSideEffectTags = (node, context) => {
 
 const DOMNodeTransforms = [
     transformStyle,
-    ...([warnTransitionChildren] )
+    ...([transformTransition] )
 ];
 const DOMDirectiveTransforms = {
     cloak: noopDirectiveTransform,
@@ -27497,6 +27539,7 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   buildProps: buildProps,
   buildDirectiveArgs: buildDirectiveArgs,
   processSlotOutlet: processSlotOutlet,
+  getConstantType: getConstantType,
   generateCodeFrame: generateCodeFrame,
   checkCompatEnabled: checkCompatEnabled,
   warnDeprecation: warnDeprecation,
@@ -27668,9 +27711,9 @@ var hashSum = sum;
 const CSS_VARS_HELPER = `useCssVars`;
 // match v-bind() with max 2-levels of nested parens.
 const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g;
-function genCssVarsFromList(vars, id, isProd) {
+function genCssVarsFromList(vars, id, isProd, isSSR = false) {
     return `{\n  ${vars
-        .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
+        .map(key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`)
         .join(',\n  ')}\n}`;
 }
 function genVarName(id, raw, isProd) {
@@ -27681,7 +27724,7 @@ function genVarName(id, raw, isProd) {
         return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
     }
 }
-function noramlizeExpression(exp) {
+function normalizeExpression(exp) {
     exp = exp.trim();
     if ((exp[0] === `'` && exp[exp.length - 1] === `'`) ||
         (exp[0] === `"` && exp[exp.length - 1] === `"`)) {
@@ -27696,7 +27739,7 @@ function parseCssVars(sfc) {
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
         while ((match = cssVarRE.exec(content))) {
-            const variable = noramlizeExpression(match[1]);
+            const variable = normalizeExpression(match[1]);
             if (!vars.includes(variable)) {
                 vars.push(variable);
             }
@@ -27712,7 +27755,7 @@ const cssVarsPlugin = opts => {
             // rewrite CSS variables
             if (cssVarRE.test(decl.value)) {
                 decl.value = decl.value.replace(cssVarRE, (_, $1) => {
-                    return `var(--${genVarName(id, noramlizeExpression($1), isProd)})`;
+                    return `var(--${genVarName(id, normalizeExpression($1), isProd)})`;
                 });
             }
         }
@@ -33166,6 +33209,10 @@ function getImportsExpressionExp(path, hash, loc, context) {
             return exp;
         }
         const hashExp = `${name} + '${hash}'`;
+        const finalExp = createSimpleExpression(hashExp, false, loc, 3 /* CAN_STRINGIFY */);
+        if (!context.hoistStatic) {
+            return finalExp;
+        }
         const existingHoistIndex = context.hoists.findIndex(h => {
             return (h &&
                 h.type === 4 /* SIMPLE_EXPRESSION */ &&
@@ -33175,7 +33222,7 @@ function getImportsExpressionExp(path, hash, loc, context) {
         if (existingHoistIndex > -1) {
             return createSimpleExpression(`_hoisted_${existingHoistIndex + 1}`, false, loc, 3 /* CAN_STRINGIFY */);
         }
-        return context.hoist(createSimpleExpression(hashExp, false, loc, 3 /* CAN_STRINGIFY */));
+        return context.hoist(finalExp);
     }
     else {
         return createSimpleExpression(`''`, false, loc, 3 /* CAN_STRINGIFY */);
@@ -33217,35 +33264,41 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             imageCandidates.splice(i, 1);
                         }
                     }
-                    const hasQualifiedUrl = imageCandidates.some(({ url }) => {
+                    const shouldProcessUrl = (url) => {
                         return (!isExternalUrl(url) &&
                             !isDataUrl(url) &&
                             (options.includeAbsolute || isRelativeUrl(url)));
-                    });
+                    };
                     // When srcset does not contain any qualified URLs, skip transforming
-                    if (!hasQualifiedUrl) {
+                    if (!imageCandidates.some(({ url }) => shouldProcessUrl(url))) {
                         return;
                     }
                     if (options.base) {
                         const base = options.base;
                         const set = [];
-                        imageCandidates.forEach(({ url, descriptor }) => {
+                        let needImportTransform = false;
+                        imageCandidates.forEach(candidate => {
+                            let { url, descriptor } = candidate;
                             descriptor = descriptor ? ` ${descriptor}` : ``;
-                            if (isRelativeUrl(url)) {
-                                set.push((path.posix || path).join(base, url) + descriptor);
+                            if (url[0] === '.') {
+                                candidate.url = (path.posix || path).join(base, url);
+                                set.push(candidate.url + descriptor);
+                            }
+                            else if (shouldProcessUrl(url)) {
+                                needImportTransform = true;
                             }
                             else {
                                 set.push(url + descriptor);
                             }
                         });
-                        attr.value.content = set.join(', ');
-                        return;
+                        if (!needImportTransform) {
+                            attr.value.content = set.join(', ');
+                            return;
+                        }
                     }
                     const compoundExpression = createCompoundExpression([], attr.loc);
                     imageCandidates.forEach(({ url, descriptor }, index) => {
-                        if (!isExternalUrl(url) &&
-                            !isDataUrl(url) &&
-                            (options.includeAbsolute || isRelativeUrl(url))) {
+                        if (shouldProcessUrl(url)) {
                             const { path } = parseUrl(url);
                             let exp;
                             if (path) {
@@ -33275,13 +33328,16 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             compoundExpression.children.push(` + ', ' + `);
                         }
                     });
-                    const hoisted = context.hoist(compoundExpression);
-                    hoisted.constType = 3 /* CAN_STRINGIFY */;
+                    let exp = compoundExpression;
+                    if (context.hoistStatic) {
+                        exp = context.hoist(compoundExpression);
+                        exp.constType = 3 /* CAN_STRINGIFY */;
+                    }
                     node.props[index] = {
                         type: 7 /* DIRECTIVE */,
                         name: 'bind',
                         arg: createSimpleExpression('srcset', true, attr.loc),
-                        exp: hoisted,
+                        exp,
                         modifiers: [],
                         loc: attr.loc
                     };
@@ -33295,6 +33351,7 @@ const SSR_INTERPOLATE = Symbol(`ssrInterpolate`);
 const SSR_RENDER_VNODE = Symbol(`ssrRenderVNode`);
 const SSR_RENDER_COMPONENT = Symbol(`ssrRenderComponent`);
 const SSR_RENDER_SLOT = Symbol(`ssrRenderSlot`);
+const SSR_RENDER_SLOT_INNER = Symbol(`ssrRenderSlotInner`);
 const SSR_RENDER_CLASS = Symbol(`ssrRenderClass`);
 const SSR_RENDER_STYLE = Symbol(`ssrRenderStyle`);
 const SSR_RENDER_ATTRS = Symbol(`ssrRenderAttrs`);
@@ -33314,6 +33371,7 @@ const ssrHelpers = {
     [SSR_RENDER_VNODE]: `ssrRenderVNode`,
     [SSR_RENDER_COMPONENT]: `ssrRenderComponent`,
     [SSR_RENDER_SLOT]: `ssrRenderSlot`,
+    [SSR_RENDER_SLOT_INNER]: `ssrRenderSlotInner`,
     [SSR_RENDER_CLASS]: `ssrRenderClass`,
     [SSR_RENDER_STYLE]: `ssrRenderStyle`,
     [SSR_RENDER_ATTRS]: `ssrRenderAttrs`,
@@ -33407,7 +33465,20 @@ const ssrTransformSlotOutlet = (node, context) => {
         if (context.scopeId && context.slotted !== false) {
             args.push(`"${context.scopeId}-s"`);
         }
-        node.ssrCodegenNode = createCallExpression(context.helper(SSR_RENDER_SLOT), args);
+        let method = SSR_RENDER_SLOT;
+        // #3989
+        // check if this is a single slot inside a transition wrapper - since
+        // transition will unwrap the slot fragment into a single vnode at runtime,
+        // we need to avoid rendering the slot as a fragment.
+        const parent = context.parent;
+        if (parent &&
+            parent.type === 1 /* ELEMENT */ &&
+            parent.tagType === 1 /* COMPONENT */ &&
+            resolveComponentType(parent, context, true) === TRANSITION &&
+            parent.children.filter(c => c.type === 1 /* ELEMENT */).length === 1) {
+            method = SSR_RENDER_SLOT_INNER;
+        }
+        node.ssrCodegenNode = createCallExpression(context.helper(method), args);
     }
 };
 function ssrProcessSlotOutlet(node, context) {
@@ -34547,7 +34618,7 @@ function doCompileTemplate({ filename, id, scoped, slotted, inMap, source, ssr =
     const shortId = id.replace(/^data-v-/, '');
     const longId = `data-v-${shortId}`;
     let { code, ast, preamble, map } = compiler.compile(source, Object.assign(Object.assign({ mode: 'module', prefixIdentifiers: true, hoistStatic: true, cacheHandlers: true, ssrCssVars: ssr && ssrCssVars && ssrCssVars.length
-            ? genCssVarsFromList(ssrCssVars, shortId, isProd)
+            ? genCssVarsFromList(ssrCssVars, shortId, isProd, true)
             : '', scopeId: scoped ? longId : undefined, slotted, sourceMap: true }, compilerOptions), { nodeTransforms: nodeTransforms.concat(compilerOptions.nodeTransforms || []), filename, onError: e => errors.push(e), onWarn: w => warnings.push(w) }));
     // inMap should be the map produced by ./parse.ts which is a simple line-only
     // mapping. If it is present, we need to adjust the final map and errors to
@@ -35045,13 +35116,13 @@ function transformAST(ast, s, offset = 0, knownRefs, knownProps) {
                         if (isProp) {
                             if (escapeScope) {
                                 // prop binding in $$()
-                                // { prop } -> { prop: __prop_prop }
+                                // { prop } -> { prop: __props_prop }
                                 registerEscapedPropBinding(id);
                                 s.appendLeft(id.end + offset, `: __props_${propsLocalToPublicMap[id.name]}`);
                             }
                             else {
-                                // { prop } -> { prop: __prop.prop }
-                                s.appendLeft(id.end + offset, `: __props.${propsLocalToPublicMap[id.name]}`);
+                                // { prop } -> { prop: __props.prop }
+                                s.appendLeft(id.end + offset, `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`);
                             }
                         }
                         else {
@@ -35069,7 +35140,7 @@ function transformAST(ast, s, offset = 0, knownRefs, knownProps) {
                         }
                         else {
                             // x --> __props.x
-                            s.overwrite(id.start + offset, id.end + offset, `__props.${propsLocalToPublicMap[id.name]}`);
+                            s.overwrite(id.start + offset, id.end + offset, genPropsAccessExp(propsLocalToPublicMap[id.name]));
                         }
                     }
                     else {
@@ -35216,6 +35287,7 @@ const isBuiltInDir = makeMap(`once,memo,if,else,else-if,slot,text,html,on,bind,m
  * normal `<script>` + `<script setup>` if both are present.
  */
 function compileScript(sfc, options) {
+    var _a;
     let { script, scriptSetup, source, filename } = sfc;
     // feature flags
     // TODO remove support for deprecated options when out of experimental
@@ -35244,6 +35316,11 @@ function compileScript(sfc, options) {
     if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
         plugins.push('jsx');
     }
+    else {
+        // If don't match the case of adding jsx, should remove the jsx from the babelParserPlugins
+        if (options.babelParserPlugins)
+            options.babelParserPlugins = options.babelParserPlugins.filter(n => n !== 'jsx');
+    }
     if (options.babelParserPlugins)
         plugins.push(...options.babelParserPlugins);
     if (isTS)
@@ -35319,6 +35396,8 @@ function compileScript(sfc, options) {
     let hasDefinePropsCall = false;
     let hasDefineEmitCall = false;
     let hasDefineExposeCall = false;
+    let hasDefaultExportName = false;
+    let hasDefaultExportRender = false;
     let propsRuntimeDecl;
     let propsRuntimeDefaults;
     let propsDestructureDecl;
@@ -35361,12 +35440,18 @@ function compileScript(sfc, options) {
     function error(msg, node, end = node.end + startOffset) {
         throw new Error(`[@vue/compiler-sfc] ${msg}\n\n${sfc.filename}\n${generateCodeFrame(source, node.start + startOffset, end)}`);
     }
-    function registerUserImport(source, local, imported, isType, isFromSetup) {
+    function registerUserImport(source, local, imported, isType, isFromSetup, needTemplateUsageCheck) {
         if (source === 'vue' && imported) {
             userImportAlias[imported] = local;
         }
-        let isUsedInTemplate = true;
-        if (isTS && sfc.template && !sfc.template.src && !sfc.template.lang) {
+        // template usage check is only needed in non-inline mode, so we can skip
+        // the work if inlineTemplate is true.
+        let isUsedInTemplate = needTemplateUsageCheck;
+        if (needTemplateUsageCheck &&
+            isTS &&
+            sfc.template &&
+            !sfc.template.src &&
+            !sfc.template.lang) {
             isUsedInTemplate = isImportUsed(local, sfc);
         }
         userImports[local] = {
@@ -35408,7 +35493,9 @@ function compileScript(sfc, options) {
                         if (prop.computed) {
                             error(`${DEFINE_PROPS}() destructure cannot use computed key.`, prop.key);
                         }
-                        const propKey = prop.key.name;
+                        const propKey = prop.key.type === 'StringLiteral'
+                            ? prop.key.value
+                            : prop.key.name;
                         if (prop.value.type === 'AssignmentPattern') {
                             // default value { foo = 123 }
                             const { left, right } = prop.value;
@@ -35637,7 +35724,7 @@ function compileScript(sfc, options) {
         if (destructured && destructured.default) {
             const value = scriptSetup.content.slice(destructured.default.start, destructured.default.end);
             const isLiteral = destructured.default.type.endsWith('Literal');
-            return isLiteral ? value : `() => ${value}`;
+            return isLiteral ? value : `() => (${value})`;
         }
     }
     function genSetupPropsType(node) {
@@ -35687,12 +35774,40 @@ function compileScript(sfc, options) {
                         specifier.imported.name;
                     registerUserImport(node.source.value, specifier.local.name, imported, node.importKind === 'type' ||
                         (specifier.type === 'ImportSpecifier' &&
-                            specifier.importKind === 'type'), false);
+                            specifier.importKind === 'type'), false, !options.inlineTemplate);
                 }
             }
             else if (node.type === 'ExportDefaultDeclaration') {
                 // export default
                 defaultExport = node;
+                // check if user has manually specified `name` or 'render` option in
+                // export default
+                // if has name, skip name inference
+                // if has render and no template, generate return object instead of
+                // empty render function (#4980)
+                let optionProperties;
+                if (defaultExport.declaration.type === 'ObjectExpression') {
+                    optionProperties = defaultExport.declaration.properties;
+                }
+                else if (defaultExport.declaration.type === 'CallExpression' &&
+                    defaultExport.declaration.arguments[0].type === 'ObjectExpression') {
+                    optionProperties = defaultExport.declaration.arguments[0].properties;
+                }
+                if (optionProperties) {
+                    for (const s of optionProperties) {
+                        if (s.type === 'ObjectProperty' &&
+                            s.key.type === 'Identifier' &&
+                            s.key.name === 'name') {
+                            hasDefaultExportName = true;
+                        }
+                        if ((s.type === 'ObjectMethod' || s.type === 'ObjectProperty') &&
+                            s.key.type === 'Identifier' &&
+                            s.key.name === 'render') {
+                            // TODO warn when we provide a better way to do it?
+                            hasDefaultExportRender = true;
+                        }
+                    }
+                }
                 // export default { ... } --> const __default__ = { ... }
                 const start = node.start + scriptStartOffset;
                 const end = node.declaration.start + scriptStartOffset;
@@ -35745,6 +35860,10 @@ function compileScript(sfc, options) {
         // we need to move the block up so that `const __default__` is
         // declared before being used in the actual component definition
         if (scriptStartOffset > startOffset) {
+            // if content doesn't end with newline, add one
+            if (!/\n$/.test(script.content.trim())) {
+                s.appendLeft(scriptEndOffset, `\n`);
+            }
             s.move(scriptStartOffset, scriptEndOffset, 0);
         }
     }
@@ -35799,9 +35918,12 @@ function compileScript(sfc, options) {
             for (let i = 0; i < node.specifiers.length; i++) {
                 const specifier = node.specifiers[i];
                 const local = specifier.local.name;
-                const imported = specifier.type === 'ImportSpecifier' &&
+                let imported = specifier.type === 'ImportSpecifier' &&
                     specifier.imported.type === 'Identifier' &&
                     specifier.imported.name;
+                if (specifier.type === 'ImportNamespaceSpecifier') {
+                    imported = '*';
+                }
                 const source = node.source.value;
                 const existing = userImports[local];
                 if (source === 'vue' &&
@@ -35823,7 +35945,7 @@ function compileScript(sfc, options) {
                 else {
                     registerUserImport(source, local, imported, node.importKind === 'type' ||
                         (specifier.type === 'ImportSpecifier' &&
-                            specifier.importKind === 'type'), true);
+                            specifier.importKind === 'type'), true, !options.inlineTemplate);
                 }
             }
             if (node.specifiers.length && removed === node.specifiers.length) {
@@ -35886,18 +36008,33 @@ function compileScript(sfc, options) {
         // await
         if ((node.type === 'VariableDeclaration' && !node.declare) ||
             node.type.endsWith('Statement')) {
+            const scope = [scriptSetupAst.body];
             walk$1(node, {
                 enter(child, parent) {
                     if (isFunctionType(child)) {
                         this.skip();
                     }
+                    if (child.type === 'BlockStatement') {
+                        scope.push(child.body);
+                    }
                     if (child.type === 'AwaitExpression') {
                         hasAwait = true;
-                        const needsSemi = scriptSetupAst.body.some(n => {
-                            return n.type === 'ExpressionStatement' && n.start === child.start;
+                        // if the await expression is an expression statement and
+                        // - is in the root scope
+                        // - or is not the first statement in a nested block scope
+                        // then it needs a semicolon before the generated code.
+                        const currentScope = scope[scope.length - 1];
+                        const needsSemi = currentScope.some((n, i) => {
+                            return ((scope.length === 1 || i > 0) &&
+                                n.type === 'ExpressionStatement' &&
+                                n.start === child.start);
                         });
                         processAwait(child, needsSemi, parent.type === 'ExpressionStatement');
                     }
+                },
+                exit(node) {
+                    if (node.type === 'BlockStatement')
+                        scope.pop();
                 }
             });
         }
@@ -35946,7 +36083,7 @@ function compileScript(sfc, options) {
     checkInvalidScopeReference(propsRuntimeDecl, DEFINE_PROPS);
     checkInvalidScopeReference(propsRuntimeDefaults, DEFINE_PROPS);
     checkInvalidScopeReference(propsDestructureDecl, DEFINE_PROPS);
-    checkInvalidScopeReference(emitsRuntimeDecl, DEFINE_PROPS);
+    checkInvalidScopeReference(emitsRuntimeDecl, DEFINE_EMITS);
     // 6. remove non-script content
     if (script) {
         if (startOffset < scriptStartOffset) {
@@ -35982,7 +36119,8 @@ function compileScript(sfc, options) {
     // props aliases
     if (propsDestructureDecl) {
         if (propsDestructureRestId) {
-            bindingMetadata[propsDestructureRestId] = "setup-const" /* SETUP_CONST */;
+            bindingMetadata[propsDestructureRestId] =
+                "setup-reactive-const" /* SETUP_REACTIVE_CONST */;
         }
         for (const key in propsDestructuredBindings) {
             const { local } = propsDestructuredBindings[key];
@@ -35997,7 +36135,9 @@ function compileScript(sfc, options) {
         if (isType)
             continue;
         bindingMetadata[key] =
-            (imported === 'default' && source.endsWith('.vue')) || source === 'vue'
+            imported === '*' ||
+                (imported === 'default' && source.endsWith('.vue')) ||
+                source === 'vue'
                 ? "setup-const" /* SETUP_CONST */
                 : "setup-maybe-ref" /* SETUP_MAYBE_REF */;
     }
@@ -36014,7 +36154,9 @@ function compileScript(sfc, options) {
         }
     }
     // 8. inject `useCssVars` calls
-    if (cssVars.length) {
+    if (cssVars.length &&
+        // no need to do this when targeting SSR
+        !(options.inlineTemplate && ((_a = options.templateOptions) === null || _a === void 0 ? void 0 : _a.ssr))) {
         helperImports.add(CSS_VARS_HELPER);
         helperImports.add('unref');
         s.prependRight(startOffset, `\n${genCssVarsCode(cssVars, bindingMetadata, scopeId, isProd)}\n`);
@@ -36053,7 +36195,19 @@ function compileScript(sfc, options) {
     }
     // 10. generate return statement
     let returned;
-    if (options.inlineTemplate) {
+    if (!options.inlineTemplate || (!sfc.template && hasDefaultExportRender)) {
+        // non-inline mode, or has manual render in normal <script>
+        // return bindings from script and script setup
+        const allBindings = Object.assign(Object.assign({}, scriptBindings), setupBindings);
+        for (const key in userImports) {
+            if (!userImports[key].isType && userImports[key].isUsedInTemplate) {
+                allBindings[key] = true;
+            }
+        }
+        returned = `{ ${Object.keys(allBindings).join(', ')} }`;
+    }
+    else {
+        // inline mode
         if (sfc.template && !sfc.template.src) {
             if (options.templateOptions && options.templateOptions.ssr) {
                 hasInlinedSsrRenderFn = true;
@@ -36096,16 +36250,6 @@ function compileScript(sfc, options) {
             returned = `() => {}`;
         }
     }
-    else {
-        // return bindings from script and script setup
-        const allBindings = Object.assign(Object.assign({}, scriptBindings), setupBindings);
-        for (const key in userImports) {
-            if (!userImports[key].isType && userImports[key].isUsedInTemplate) {
-                allBindings[key] = true;
-            }
-        }
-        returned = `{ ${Object.keys(allBindings).join(', ')} }`;
-    }
     if (!options.inlineTemplate && !false) {
         // in non-inline mode, the `__isScriptSetup: true` flag is used by
         // componentPublicInstance proxy to allow properties that start with $ or _
@@ -36119,6 +36263,12 @@ function compileScript(sfc, options) {
     }
     // 11. finalize default export
     let runtimeOptions = ``;
+    if (!hasDefaultExportName && filename && filename !== DEFAULT_FILENAME) {
+        const match = filename.match(/([^/\\]+)\.\w+$/);
+        if (match) {
+            runtimeOptions += `\n  name: '${match[1]}',`;
+        }
+    }
     if (hasInlinedSsrRenderFn) {
         runtimeOptions += `\n  __ssrInlineRender: true,`;
     }
@@ -36208,14 +36358,18 @@ function walkDeclaration(node, bindings, userImportAlias) {
                 const userReactiveBinding = userImportAlias['reactive'] || 'reactive';
                 if (isCallOf(init, userReactiveBinding)) {
                     // treat reactive() calls as let since it's meant to be mutable
-                    bindingType = "setup-let" /* SETUP_LET */;
+                    bindingType = isConst
+                        ? "setup-reactive-const" /* SETUP_REACTIVE_CONST */
+                        : "setup-let" /* SETUP_LET */;
                 }
                 else if (
                 // if a declaration is a const literal, we can mark it so that
                 // the generated render fn code doesn't need to unref() it
                 isDefineCall ||
                     (isConst && canNeverBeRef(init, userReactiveBinding))) {
-                    bindingType = "setup-const" /* SETUP_CONST */;
+                    bindingType = isCallOf(init, DEFINE_PROPS)
+                        ? "setup-reactive-const" /* SETUP_REACTIVE_CONST */
+                        : "setup-const" /* SETUP_CONST */;
                 }
                 else if (isConst) {
                     if (isCallOf(init, userImportAlias['ref'] || 'ref')) {
@@ -36628,13 +36782,13 @@ function resolveTemplateUsageCheckString(sfc) {
                                 code += `,v${capitalize(camelize(prop.name))}`;
                             }
                             if (prop.exp) {
-                                code += `,${stripStrings(prop.exp.content)}`;
+                                code += `,${processExp(prop.exp.content)}`;
                             }
                         }
                     }
                 }
                 else if (node.type === 5 /* INTERPOLATION */) {
-                    code += `,${stripStrings(node.content.content)}`;
+                    code += `,${processExp(node.content.content)}`;
                 }
             }
         ]
@@ -36643,6 +36797,18 @@ function resolveTemplateUsageCheckString(sfc) {
     templateUsageCheckCache.set(content, code);
     return code;
 }
+function processExp(exp) {
+    if (/ as \w|<.*>/.test(exp)) {
+        let ret = '';
+        // has potential type cast or generic arguments that uses types
+        const ast = parseExpression_1(exp, { plugins: ['typescript'] });
+        walkIdentifiers(ast, node => {
+            ret += `,` + node.name;
+        });
+        return ret;
+    }
+    return stripStrings(exp);
+}
 function stripStrings(exp) {
     return exp
         .replace(/'[^']*'|"[^"]*"/g, '')
@@ -36683,8 +36849,9 @@ function hmrShouldReload(prevImports, next) {
     return false;
 }
 
+const DEFAULT_FILENAME = 'anonymous.vue';
 const sourceToSFC = createCache();
-function parse$4(source, { sourceMap = true, filename = 'anonymous.vue', sourceRoot = '', pad = false, ignoreEmpty = true, compiler = CompilerDOM } = {}) {
+function parse$4(source, { sourceMap = true, filename = DEFAULT_FILENAME, sourceRoot = '', pad = false, ignoreEmpty = true, compiler = CompilerDOM } = {}) {
     const sourceKey = source + sourceMap + filename + sourceRoot + pad + compiler.parse;
     const cache = sourceToSFC.get(sourceKey);
     if (cache) {