@vue/compiler-sfc 3.2.32 → 3.2.34

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 */]}`;
             }
@@ -23264,7 +23271,7 @@ const transformElement = (node, context) => {
                 (tag === 'svg' || tag === 'foreignObject'));
         // props
         if (props.length > 0) {
-            const propsBuildResult = buildProps(node, context);
+            const propsBuildResult = buildProps(node, context, undefined, isComponent, isDynamicComponent);
             vnodeProps = propsBuildResult.props;
             patchFlag = propsBuildResult.patchFlag;
             dynamicPropNames = propsBuildResult.dynamicPropNames;
@@ -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
@@ -23464,9 +23472,8 @@ function resolveSetupReference(name, context) {
             : `$setup[${JSON.stringify(fromMaybeRef)}]`;
     }
 }
-function buildProps(node, context, props = node.props, ssr = false) {
+function buildProps(node, context, props = node.props, isComponent, isDynamicComponent, ssr = false) {
     const { tag, loc: elementLoc, children } = node;
-    const isComponent = node.tagType === 1 /* COMPONENT */;
     let properties = [];
     const mergeArgs = [];
     const runtimeDirectives = [];
@@ -23485,8 +23492,8 @@ function buildProps(node, context, props = node.props, ssr = false) {
         if (isStaticExp(key)) {
             const name = key.content;
             const isEventHandler = isOn(name);
-            if (!isComponent &&
-                isEventHandler &&
+            if (isEventHandler &&
+                (!isComponent || isDynamicComponent) &&
                 // omit the flag for click handlers because hydration gives click
                 // dedicated fast path.
                 name.toLowerCase() !== 'onclick' &&
@@ -23721,10 +23728,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 */)) {
@@ -23909,7 +23917,7 @@ function processSlotOutlet(node, context) {
         }
     }
     if (nonNameProps.length > 0) {
-        const { props, directives } = buildProps(node, context, nonNameProps);
+        const { props, directives } = buildProps(node, context, nonNameProps, false, false);
         slotProps = props;
         if (directives.length) {
             context.onError(createCompilerError(36 /* X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET */, directives[0].loc));
@@ -24115,11 +24123,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 +26907,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 +27117,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 +27364,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 +27373,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 +27409,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 +27428,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 +27465,7 @@ const ignoreSideEffectTags = (node, context) => {
 
 const DOMNodeTransforms = [
     transformStyle,
-    ...([warnTransitionChildren] )
+    ...([transformTransition] )
 ];
 const DOMDirectiveTransforms = {
     cloak: noopDirectiveTransform,
@@ -27497,6 +27538,7 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   buildProps: buildProps,
   buildDirectiveArgs: buildDirectiveArgs,
   processSlotOutlet: processSlotOutlet,
+  getConstantType: getConstantType,
   generateCodeFrame: generateCodeFrame,
   checkCompatEnabled: checkCompatEnabled,
   warnDeprecation: warnDeprecation,
@@ -27668,9 +27710,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 +27723,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 +27738,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 +27754,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 +33208,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 +33221,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 +33263,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 +33327,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 +33350,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 +33370,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`,
@@ -33366,7 +33423,7 @@ function processIfBranch(branch, context, disableNestedFragments = false) {
         (children.length !== 1 || children[0].type !== 1 /* ELEMENT */) &&
         // optimize away nested fragments when the only child is a ForNode
         !(children.length === 1 && children[0].type === 11 /* FOR */);
-    return processChildrenAsStatement(children, context, needFragmentWrapper);
+    return processChildrenAsStatement(branch, context, needFragmentWrapper);
 }
 
 // Plugin for the first transform pass, which simply constructs the AST node
@@ -33377,7 +33434,7 @@ function ssrProcessFor(node, context, disableNestedFragments = false) {
     const needFragmentWrapper = !disableNestedFragments &&
         (node.children.length !== 1 || node.children[0].type !== 1 /* ELEMENT */);
     const renderLoop = createFunctionExpression(createForLoopParams(node.parseResult));
-    renderLoop.body = processChildrenAsStatement(node.children, context, needFragmentWrapper);
+    renderLoop.body = processChildrenAsStatement(node, context, needFragmentWrapper);
     // v-for always renders a fragment unless explicitly disabled
     if (!disableNestedFragments) {
         context.pushStringPart(`<!--[-->`);
@@ -33407,7 +33464,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) {
@@ -33415,7 +33485,7 @@ function ssrProcessSlotOutlet(node, context) {
     // has fallback content
     if (node.children.length) {
         const fallbackRenderFn = createFunctionExpression([]);
-        fallbackRenderFn.body = processChildrenAsStatement(node.children, context);
+        fallbackRenderFn.body = processChildrenAsStatement(node, context);
         // _renderSlot(slots, name, props, fallback, ...)
         renderCall.arguments[3] = fallbackRenderFn;
     }
@@ -33467,7 +33537,7 @@ function ssrProcessTeleport(node, context) {
     true, // newline
     false, // isSlot
     node.loc);
-    contentRenderFn.body = processChildrenAsStatement(node.children, context);
+    contentRenderFn.body = processChildrenAsStatement(node, context);
     context.pushStatement(createCallExpression(context.helper(SSR_RENDER_TELEPORT), [
         `_push`,
         contentRenderFn,
@@ -33510,8 +33580,8 @@ function ssrProcessSuspense(node, context) {
     }
     const { slotsExp, wipSlots } = wipEntry;
     for (let i = 0; i < wipSlots.length; i++) {
-        const { fn, children } = wipSlots[i];
-        fn.body = processChildrenAsStatement(children, context);
+        const slot = wipSlots[i];
+        slot.fn.body = processChildrenAsStatement(slot, context);
     }
     // _push(ssrRenderSuspense(slots))
     context.pushStatement(createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [
@@ -33520,39 +33590,6 @@ function ssrProcessSuspense(node, context) {
     ]));
 }
 
-function ssrProcessTransitionGroup(node, context) {
-    const tag = findProp(node, 'tag');
-    if (tag) {
-        if (tag.type === 7 /* DIRECTIVE */) {
-            // dynamic :tag
-            context.pushStringPart(`<`);
-            context.pushStringPart(tag.exp);
-            context.pushStringPart(`>`);
-            processChildren(node.children, context, false, 
-            /**
-             * TransitionGroup has the special runtime behavior of flattening and
-             * concatenating all children into a single fragment (in order for them to
-             * be patched using the same key map) so we need to account for that here
-             * by disabling nested fragment wrappers from being generated.
-             */
-            true);
-            context.pushStringPart(`</`);
-            context.pushStringPart(tag.exp);
-            context.pushStringPart(`>`);
-        }
-        else {
-            // static tag
-            context.pushStringPart(`<${tag.value.content}>`);
-            processChildren(node.children, context, false, true);
-            context.pushStringPart(`</${tag.value.content}>`);
-        }
-    }
-    else {
-        // fragment
-        processChildren(node.children, context, true, true);
-    }
-}
-
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
 const rawChildrenMap = new WeakMap();
@@ -33574,7 +33611,7 @@ const ssrTransformElement = (node, context) => {
         const hasCustomDir = node.props.some(p => p.type === 7 /* DIRECTIVE */ && !isBuiltInDirective(p.name));
         const needMergeProps = hasDynamicVBind || hasCustomDir;
         if (needMergeProps) {
-            const { props, directives } = buildProps(node, context, node.props, true /* ssr */);
+            const { props, directives } = buildProps(node, context, node.props, false /* isComponent */, false /* isDynamicComponent */, true /* ssr */);
             if (props || directives.length) {
                 const mergedProps = buildSSRProps(props, directives, context);
                 const propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [mergedProps]);
@@ -33653,7 +33690,7 @@ const ssrTransformElement = (node, context) => {
                         node.children = [createInterpolation(prop.exp, prop.loc)];
                     }
                 }
-                else if (!needMergeProps) {
+                else if (!needMergeProps && prop.name !== 'on') {
                     // Directive transforms.
                     const directiveTransform = context.directiveTransforms[prop.name];
                     if (directiveTransform) {
@@ -33818,7 +33855,7 @@ function ssrProcessElement(node, context) {
         context.pushStringPart(rawChildren);
     }
     else if (node.children.length) {
-        processChildren(node.children, context);
+        processChildren(node, context);
     }
     if (!isVoidTag(node.tag)) {
         // push closing tag
@@ -33826,11 +33863,75 @@ function ssrProcessElement(node, context) {
     }
 }
 
+const wipMap$1 = new WeakMap();
+// phase 1: build props
+function ssrTransformTransitionGroup(node, context) {
+    return () => {
+        const tag = findProp(node, 'tag');
+        if (tag) {
+            const otherProps = node.props.filter(p => p !== tag);
+            const { props, directives } = buildProps(node, context, otherProps, true, /* isComponent */ false, /* isDynamicComponent */ true /* ssr (skip event listeners) */);
+            let propsExp = null;
+            if (props || directives.length) {
+                propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [
+                    buildSSRProps(props, directives, context)
+                ]);
+            }
+            wipMap$1.set(node, {
+                tag,
+                propsExp
+            });
+        }
+    };
+}
+// phase 2: process children
+function ssrProcessTransitionGroup(node, context) {
+    const entry = wipMap$1.get(node);
+    if (entry) {
+        const { tag, propsExp } = entry;
+        if (tag.type === 7 /* DIRECTIVE */) {
+            // dynamic :tag
+            context.pushStringPart(`<`);
+            context.pushStringPart(tag.exp);
+            if (propsExp) {
+                context.pushStringPart(propsExp);
+            }
+            context.pushStringPart(`>`);
+            processChildren(node, context, false, 
+            /**
+             * TransitionGroup has the special runtime behavior of flattening and
+             * concatenating all children into a single fragment (in order for them to
+             * be patched using the same key map) so we need to account for that here
+             * by disabling nested fragment wrappers from being generated.
+             */
+            true);
+            context.pushStringPart(`</`);
+            context.pushStringPart(tag.exp);
+            context.pushStringPart(`>`);
+        }
+        else {
+            // static tag
+            context.pushStringPart(`<${tag.value.content}`);
+            if (propsExp) {
+                context.pushStringPart(propsExp);
+            }
+            context.pushStringPart(`>`);
+            processChildren(node, context, false, true);
+            context.pushStringPart(`</${tag.value.content}>`);
+        }
+    }
+    else {
+        // fragment
+        processChildren(node, context, true, true);
+    }
+}
+
 // We need to construct the slot functions in the 1st pass to ensure proper
 // scope tracking, but the children of each slot cannot be processed until
 // the 2nd pass, so we store the WIP slot functions in a weakMap during the 1st
 // pass and complete them in the 2nd pass.
-const wipMap$1 = new WeakMap();
+const wipMap$2 = new WeakMap();
+const WIP_SLOT = Symbol();
 const componentTypeMap = new WeakMap();
 // ssr component transform is done in two phases:
 // In phase 1. we use `buildSlot` to analyze the children of the component into
@@ -33844,12 +33945,16 @@ const ssrTransformComponent = (node, context) => {
         return;
     }
     const component = resolveComponentType(node, context, true /* ssr */);
+    const isDynamicComponent = isObject(component) && component.callee === RESOLVE_DYNAMIC_COMPONENT;
     componentTypeMap.set(node, component);
     if (isSymbol(component)) {
         if (component === SUSPENSE) {
             return ssrTransformSuspense(node, context);
         }
-        return; // built-in component: fallthrough
+        if (component === TRANSITION_GROUP) {
+            return ssrTransformTransitionGroup(node, context);
+        }
+        return; // other built-in components: fallthrough
     }
     // Build the fallback vnode-based branch for the component's slots.
     // We need to clone the node into a fresh copy and use the buildSlots' logic
@@ -33873,19 +33978,20 @@ const ssrTransformComponent = (node, context) => {
         if (node.props.length) {
             // note we are not passing ssr: true here because for components, v-on
             // handlers should still be passed
-            const { props, directives } = buildProps(node, context);
+            const { props, directives } = buildProps(node, context, undefined, true, isDynamicComponent);
             if (props || directives.length) {
                 propsExp = buildSSRProps(props, directives, context);
             }
         }
         const wipEntries = [];
-        wipMap$1.set(node, wipEntries);
+        wipMap$2.set(node, wipEntries);
         const buildSSRSlotFn = (props, children, loc) => {
             const fn = createFunctionExpression([props || `_`, `_push`, `_parent`, `_scopeId`], undefined, // no return, assign body later
             true, // newline
             true, // isSlot
             loc);
             wipEntries.push({
+                type: WIP_SLOT,
                 fn,
                 children,
                 // also collect the corresponding vnode branch built earlier
@@ -33915,7 +34021,7 @@ const ssrTransformComponent = (node, context) => {
         }
     };
 };
-function ssrProcessComponent(node, context) {
+function ssrProcessComponent(node, context, parent) {
     const component = componentTypeMap.get(node);
     if (!node.ssrCodegenNode) {
         // this is a built-in component that fell-through.
@@ -33931,19 +34037,29 @@ function ssrProcessComponent(node, context) {
         else {
             // real fall-through: Transition / KeepAlive
             // just render its children.
-            processChildren(node.children, context);
+            // #5352: if is at root level of a slot, push an empty string.
+            // this does not affect the final output, but avoids all-comment slot
+            // content of being treated as empty by ssrRenderSlot().
+            if (parent.type === WIP_SLOT) {
+                context.pushStringPart(``);
+            }
+            // #5351: filter out comment children inside transition
+            if (component === TRANSITION) {
+                node.children = node.children.filter(c => c.type !== 3 /* COMMENT */);
+            }
+            processChildren(node, context);
         }
     }
     else {
         // finish up slot function expressions from the 1st pass.
-        const wipEntries = wipMap$1.get(node) || [];
+        const wipEntries = wipMap$2.get(node) || [];
         for (let i = 0; i < wipEntries.length; i++) {
-            const { fn, children, vnodeBranch } = wipEntries[i];
+            const { fn, vnodeBranch } = wipEntries[i];
             // For each slot, we generate two branches: one SSR-optimized branch and
             // one normal vnode-based branch. The branches are taken based on the
             // presence of the 2nd `_push` argument (which is only present if the slot
             // is called by `_ssrRenderSlot`.
-            fn.body = createIfStatement(createSimpleExpression(`_push`, false), processChildrenAsStatement(children, context, false, true /* withSlotScopeId */), vnodeBranch);
+            fn.body = createIfStatement(createSimpleExpression(`_push`, false), processChildrenAsStatement(wipEntries[i], context, false, true /* withSlotScopeId */), vnodeBranch);
         }
         // component is inside a slot, inherit slot scope Id
         if (context.withSlotScopeId) {
@@ -34063,7 +34179,7 @@ function ssrCodegenTransform(ast, options) {
         context.body.push(createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`]));
     }
     const isFragment = ast.children.length > 1 && ast.children.some(c => !isText(c));
-    processChildren(ast.children, context, isFragment);
+    processChildren(ast, context, isFragment);
     ast.codegenNode = createBlockStatement(context.body);
     // Finalize helpers.
     // We need to separate helpers imported from 'vue' vs. '@vue/server-renderer'
@@ -34114,10 +34230,11 @@ function createChildContext(parent, withSlotScopeId = parent.withSlotScopeId) {
     // ensure child inherits parent helpers
     return createSSRTransformContext(parent.root, parent.options, parent.helpers, withSlotScopeId);
 }
-function processChildren(children, context, asFragment = false, disableNestedFragments = false) {
+function processChildren(parent, context, asFragment = false, disableNestedFragments = false) {
     if (asFragment) {
         context.pushStringPart(`<!--[-->`);
     }
+    const { children } = parent;
     for (let i = 0; i < children.length; i++) {
         const child = children[i];
         switch (child.type) {
@@ -34127,7 +34244,7 @@ function processChildren(children, context, asFragment = false, disableNestedFra
                         ssrProcessElement(child, context);
                         break;
                     case 1 /* COMPONENT */:
-                        ssrProcessComponent(child, context);
+                        ssrProcessComponent(child, context, parent);
                         break;
                     case 2 /* SLOT */:
                         ssrProcessSlotOutlet(child, context);
@@ -34178,9 +34295,9 @@ function processChildren(children, context, asFragment = false, disableNestedFra
         context.pushStringPart(`<!--]-->`);
     }
 }
-function processChildrenAsStatement(children, parentContext, asFragment = false, withSlotScopeId = parentContext.withSlotScopeId) {
+function processChildrenAsStatement(parent, parentContext, asFragment = false, withSlotScopeId = parentContext.withSlotScopeId) {
     const childContext = createChildContext(parentContext, withSlotScopeId);
-    processChildren(children, childContext, asFragment);
+    processChildren(parent, childContext, asFragment);
     return createBlockStatement(childContext.body);
 }
 
@@ -34299,7 +34416,8 @@ const ssrTransformShow = (dir, node, context) => {
     };
 };
 
-const hasSingleChild = (node) => node.children.filter(n => n.type !== 3 /* COMMENT */).length === 1;
+const filterChild = (node) => node.children.filter(n => n.type !== 3 /* COMMENT */);
+const hasSingleChild = (node) => filterChild(node).length === 1;
 const ssrInjectFallthroughAttrs = (node, context) => {
     // _attrs is provided as a function argument.
     // mark it as a known identifier so that it doesn't get prefixed by
@@ -34311,16 +34429,37 @@ const ssrInjectFallthroughAttrs = (node, context) => {
         node.tagType === 1 /* COMPONENT */ &&
         (isBuiltInType(node.tag, 'Transition') ||
             isBuiltInType(node.tag, 'KeepAlive'))) {
-        if (hasSingleChild(node)) {
-            injectFallthroughAttrs(node.children[0]);
+        const rootChildren = filterChild(context.root);
+        if (rootChildren.length === 1 && rootChildren[0] === node) {
+            if (hasSingleChild(node)) {
+                injectFallthroughAttrs(node.children[0]);
+            }
+            return;
         }
-        return;
     }
     const parent = context.parent;
     if (!parent || parent.type !== 0 /* ROOT */) {
         return;
     }
     if (node.type === 10 /* IF_BRANCH */ && hasSingleChild(node)) {
+        // detect cases where the parent v-if is not the only root level node
+        let hasEncounteredIf = false;
+        for (const c of filterChild(parent)) {
+            if (c.type === 9 /* IF */ ||
+                (c.type === 1 /* ELEMENT */ && findDir(c, 'if'))) {
+                // multiple root v-if
+                if (hasEncounteredIf)
+                    return;
+                hasEncounteredIf = true;
+            }
+            else if (
+            // node before v-if
+            !hasEncounteredIf ||
+                // non else nodes
+                !(c.type === 1 /* ELEMENT */ && findDir(c, /else/, true))) {
+                return;
+            }
+        }
         injectFallthroughAttrs(node.children[0]);
     }
     else if (hasSingleChild(parent)) {
@@ -34421,11 +34560,12 @@ function compile$1(template, options = {}) {
             ...(options.nodeTransforms || []) // user transforms
         ], directiveTransforms: Object.assign({ 
             // reusing core v-bind
-            bind: transformBind, 
+            bind: transformBind, on: transformOn, 
             // model and show has dedicated SSR handling
             model: ssrTransformModel, show: ssrTransformShow, 
             // the following are ignored during SSR
-            on: noopDirectiveTransform, cloak: noopDirectiveTransform, once: noopDirectiveTransform, memo: noopDirectiveTransform }, (options.directiveTransforms || {}) // user transforms
+            // on: noopDirectiveTransform,
+            cloak: noopDirectiveTransform, once: noopDirectiveTransform, memo: noopDirectiveTransform }, (options.directiveTransforms || {}) // user transforms
         ) }));
     // traverse the template AST and convert into SSR codegen AST
     // by replacing ast.codegenNode.
@@ -34547,7 +34687,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
@@ -34633,7 +34773,7 @@ function patchErrors(errors, source, inMap) {
 }
 
 const defaultExportRE = /((?:^|\n|;)\s*)export(\s*)default/;
-const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)as(\s*)default/s;
+const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)(?:as)?(\s*)default/s;
 const exportDefaultClassRE = /((?:^|\n|;)\s*)export\s+default\s+class\s+([\w$]+)/;
 /**
  * Utility for rewriting `export default` in a script block into a variable
@@ -34664,25 +34804,61 @@ function rewriteDefault(input, as, parserPlugins) {
         plugins: parserPlugins
     }).program.body;
     ast.forEach(node => {
+        var _a;
         if (node.type === 'ExportDefaultDeclaration') {
             s.overwrite(node.start, node.declaration.start, `const ${as} = `);
         }
         if (node.type === 'ExportNamedDeclaration') {
-            node.specifiers.forEach(specifier => {
+            for (const specifier of node.specifiers) {
                 if (specifier.type === 'ExportSpecifier' &&
                     specifier.exported.type === 'Identifier' &&
                     specifier.exported.name === 'default') {
-                    const end = specifier.end;
-                    s.overwrite(specifier.start, input.charAt(end) === ',' ? end + 1 : end, ``);
+                    if (node.source) {
+                        if (specifier.local.name === 'default') {
+                            const end = specifierEnd(input, specifier.local.end, node.end);
+                            s.prepend(`import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`);
+                            s.overwrite(specifier.start, end, ``);
+                            s.append(`\nconst ${as} = __VUE_DEFAULT__`);
+                            continue;
+                        }
+                        else {
+                            const end = specifierEnd(input, specifier.exported.end, node.end);
+                            s.prepend(`import { ${input.slice(specifier.local.start, specifier.local.end)} } from '${(_a = node.source) === null || _a === void 0 ? void 0 : _a.value}'\n`);
+                            s.overwrite(specifier.start, end, ``);
+                            s.append(`\nconst ${as} = ${specifier.local.name}`);
+                            continue;
+                        }
+                    }
+                    const end = specifierEnd(input, specifier.end, node.end);
+                    s.overwrite(specifier.start, end, ``);
                     s.append(`\nconst ${as} = ${specifier.local.name}`);
                 }
-            });
+            }
         }
     });
     return s.toString();
 }
 function hasDefaultExport(input) {
     return defaultExportRE.test(input) || namedDefaultExportRE.test(input);
+}
+function specifierEnd(input, end, nodeEnd) {
+    // export { default   , foo } ...
+    let hasCommas = false;
+    let oldEnd = end;
+    while (end < nodeEnd) {
+        if (/\s/.test(input.charAt(end))) {
+            end++;
+        }
+        else if (input.charAt(end) === ',') {
+            end++;
+            hasCommas = true;
+            break;
+        }
+        else if (input.charAt(end) === '}') {
+            break;
+        }
+    }
+    return hasCommas ? end : oldEnd;
 }
 
 const CONVERT_SYMBOL = '$';
@@ -35045,13 +35221,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 +35245,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 {
@@ -35104,6 +35280,15 @@ function transformAST(ast, s, offset = 0, knownRefs, knownProps) {
                 }
                 return;
             }
+            // catch param
+            if (node.type === 'CatchClause') {
+                scopeStack.push((currentScope = {}));
+                if (node.param && node.param.type === 'Identifier') {
+                    registerBinding(node.param);
+                }
+                walkScope(node.body);
+                return;
+            }
             // non-function block scopes
             if (node.type === 'BlockStatement' && !isFunctionType(parent)) {
                 scopeStack.push((currentScope = {}));
@@ -35207,6 +35392,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
@@ -35235,6 +35421,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)
@@ -35310,6 +35501,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;
@@ -35352,12 +35545,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] = {
@@ -35399,7 +35598,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;
@@ -35628,7 +35829,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) {
@@ -35676,12 +35877,42 @@ function compileScript(sfc, options) {
                     const imported = specifier.type === 'ImportSpecifier' &&
                         specifier.imported.type === 'Identifier' &&
                         specifier.imported.name;
-                    registerUserImport(node.source.value, specifier.local.name, imported, node.importKind === 'type', false);
+                    registerUserImport(node.source.value, specifier.local.name, imported, node.importKind === 'type' ||
+                        (specifier.type === 'ImportSpecifier' &&
+                            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;
@@ -35734,6 +35965,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);
         }
     }
@@ -35788,9 +36023,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' &&
@@ -35810,7 +36048,9 @@ function compileScript(sfc, options) {
                     }
                 }
                 else {
-                    registerUserImport(source, local, imported, node.importKind === 'type', true);
+                    registerUserImport(source, local, imported, node.importKind === 'type' ||
+                        (specifier.type === 'ImportSpecifier' &&
+                            specifier.importKind === 'type'), true, !options.inlineTemplate);
                 }
             }
             if (node.specifiers.length && removed === node.specifiers.length) {
@@ -35873,18 +36113,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();
                 }
             });
         }
@@ -35933,7 +36188,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) {
@@ -35969,7 +36224,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];
@@ -35984,7 +36240,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 */;
     }
@@ -36001,7 +36259,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`);
@@ -36040,7 +36300,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;
@@ -36083,16 +36355,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 _
@@ -36106,6 +36368,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,`;
     }
@@ -36195,14 +36463,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')) {
@@ -36378,6 +36650,7 @@ function inferRuntimeType(node, declaredTypes) {
                     case 'WeakSet':
                     case 'WeakMap':
                     case 'Date':
+                    case 'Promise':
                         return [node.typeName.name];
                     case 'Record':
                     case 'Partial':
@@ -36615,13 +36888,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)}`;
                 }
             }
         ]
@@ -36630,6 +36903,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, '')
@@ -36670,8 +36955,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) {