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

package/dist/compiler-sfc.cjs.js

@@ -111,9 +111,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) {
@@ -124,7 +124,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] === `"`)) {
@@ -139,7 +139,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);
             }
@@ -155,7 +155,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)})`;
                 });
             }
         }
@@ -1011,9 +1011,15 @@ const defaultAssetUrlOptions = {
 const normalizeOptions = (options) => {
     if (Object.keys(options).some(key => shared.isArray(options[key]))) {
         // legacy option format which directly passes in tags config
-        return Object.assign(Object.assign({}, defaultAssetUrlOptions), { tags: options });
+        return {
+            ...defaultAssetUrlOptions,
+            tags: options
+        };
     }
-    return Object.assign(Object.assign({}, defaultAssetUrlOptions), options);
+    return {
+        ...defaultAssetUrlOptions,
+        ...options
+    };
 };
 const createAssetUrlTransformWithOptions = (options) => {
     return (node, context) => transformAssetUrl(node, context, options);
@@ -1102,6 +1108,10 @@ function getImportsExpressionExp(path, hash, loc, context) {
             return exp;
         }
         const hashExp = `${name} + '${hash}'`;
+        const finalExp = compilerCore.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 */ &&
@@ -1111,7 +1121,7 @@ function getImportsExpressionExp(path, hash, loc, context) {
         if (existingHoistIndex > -1) {
             return compilerCore.createSimpleExpression(`_hoisted_${existingHoistIndex + 1}`, false, loc, 3 /* CAN_STRINGIFY */);
         }
-        return context.hoist(compilerCore.createSimpleExpression(hashExp, false, loc, 3 /* CAN_STRINGIFY */));
+        return context.hoist(finalExp);
     }
     else {
         return compilerCore.createSimpleExpression(`''`, false, loc, 3 /* CAN_STRINGIFY */);
@@ -1153,35 +1163,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__default.posix || path__default).join(base, url) + descriptor);
+                            if (url[0] === '.') {
+                                candidate.url = (path__default.posix || path__default).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 = compilerCore.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) {
@@ -1211,13 +1227,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: compilerCore.createSimpleExpression('srcset', true, attr.loc),
-                        exp: hoisted,
+                        exp,
                         modifiers: [],
                         loc: attr.loc
                     };
@@ -3072,7 +3091,7 @@ function preprocess({ source, filename, preprocessOptions }, preprocessor) {
     // have to be sync because they are applied via Node.js require hooks)
     let res = '';
     let err = null;
-    preprocessor.render(source, Object.assign({ filename }, preprocessOptions), (_err, _res) => {
+    preprocessor.render(source, { filename, ...preprocessOptions }, (_err, _res) => {
         if (_err)
             err = _err;
         res = _res;
@@ -3090,7 +3109,10 @@ function compileTemplate(options) {
         : false;
     if (preprocessor) {
         try {
-            return doCompileTemplate(Object.assign(Object.assign({}, options), { source: preprocess(options, preprocessor) }));
+            return doCompileTemplate({
+                ...options,
+                source: preprocess(options, preprocessor)
+            });
         }
         catch (e) {
             return {
@@ -3141,9 +3163,23 @@ 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)
-            : '', scopeId: scoped ? longId : undefined, slotted, sourceMap: true }, compilerOptions), { nodeTransforms: nodeTransforms.concat(compilerOptions.nodeTransforms || []), filename, onError: e => errors.push(e), onWarn: w => warnings.push(w) }));
+    let { code, ast, preamble, map } = compiler.compile(source, {
+        mode: 'module',
+        prefixIdentifiers: true,
+        hoistStatic: true,
+        cacheHandlers: true,
+        ssrCssVars: ssr && ssrCssVars && ssrCssVars.length
+            ? 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
     // reflect the original line numbers.
@@ -3322,6 +3358,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)
@@ -3368,9 +3409,13 @@ function compileScript(sfc, options) {
                 content += genNormalScriptCssVarsCode(cssVars, bindings, scopeId, isProd);
                 content += `\nexport default ${DEFAULT_VAR}`;
             }
-            return Object.assign(Object.assign({}, script), { content,
+            return {
+                ...script,
+                content,
                 map,
-                bindings, scriptAst: scriptAst.body });
+                bindings,
+                scriptAst: scriptAst.body
+            };
         }
         catch (e) {
             // silently fallback if parse fails since user may be using custom
@@ -3397,6 +3442,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;
@@ -3439,12 +3486,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${shared.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] = {
@@ -3486,7 +3539,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;
@@ -3715,7 +3770,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) {
@@ -3765,12 +3820,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;
@@ -3823,6 +3906,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);
         }
     }
@@ -3877,9 +3964,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' &&
@@ -3901,7 +3991,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) {
@@ -3964,18 +4054,33 @@ function compileScript(sfc, options) {
         // await
         if ((node.type === 'VariableDeclaration' && !node.declare) ||
             node.type.endsWith('Statement')) {
+            const scope = [scriptSetupAst.body];
             estreeWalker.walk(node, {
                 enter(child, parent) {
                     if (CompilerDOM.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();
                 }
             });
         }
@@ -4024,7 +4129,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) {
@@ -4060,7 +4165,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];
@@ -4075,7 +4181,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 */;
     }
@@ -4092,7 +4200,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 && options.templateOptions?.ssr)) {
         helperImports.add(CSS_VARS_HELPER);
         helperImports.add('unref');
         s.prependRight(startOffset, `\n${genCssVarsCode(cssVars, bindingMetadata, scopeId, isProd)}\n`);
@@ -4131,16 +4241,45 @@ 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 = {
+            ...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;
             }
             // inline render function mode - we are going to compile the template and
             // inline it right here
-            const { code, ast, preamble, tips, errors } = compileTemplate(Object.assign(Object.assign({ filename, source: sfc.template.content, inMap: sfc.template.map }, options.templateOptions), { id: scopeId, scoped: sfc.styles.some(s => s.scoped), isProd: options.isProd, ssrCssVars: sfc.cssVars, compilerOptions: Object.assign(Object.assign({}, (options.templateOptions &&
-                    options.templateOptions.compilerOptions)), { inline: true, isTS,
-                    bindingMetadata }) }));
+            const { code, ast, preamble, tips, errors } = compileTemplate({
+                filename,
+                source: sfc.template.content,
+                inMap: sfc.template.map,
+                ...options.templateOptions,
+                id: scopeId,
+                scoped: sfc.styles.some(s => s.scoped),
+                isProd: options.isProd,
+                ssrCssVars: sfc.cssVars,
+                compilerOptions: {
+                    ...(options.templateOptions &&
+                        options.templateOptions.compilerOptions),
+                    inline: true,
+                    isTS,
+                    bindingMetadata
+                }
+            });
             if (tips.length) {
                 tips.forEach(warnOnce);
             }
@@ -4174,16 +4313,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 _
@@ -4197,6 +4326,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,`;
     }
@@ -4263,13 +4398,21 @@ function compileScript(sfc, options) {
             .join(', ')} } from 'vue'\n`);
     }
     s.trim();
-    return Object.assign(Object.assign({}, scriptSetup), { bindings: bindingMetadata, imports: userImports, content: s.toString(), map: genSourceMap
+    return {
+        ...scriptSetup,
+        bindings: bindingMetadata,
+        imports: userImports,
+        content: s.toString(),
+        map: genSourceMap
             ? s.generateMap({
                 source: filename,
                 hires: true,
                 includeContent: true
             })
-            : undefined, scriptAst: scriptAst === null || scriptAst === void 0 ? void 0 : scriptAst.body, scriptSetupAst: scriptSetupAst === null || scriptSetupAst === void 0 ? void 0 : scriptSetupAst.body });
+            : undefined,
+        scriptAst: scriptAst?.body,
+        scriptSetupAst: scriptSetupAst?.body
+    };
 }
 function registerBinding(bindings, node, type) {
     bindings[node.name] = type;
@@ -4286,14 +4429,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')) {
@@ -4706,13 +4853,13 @@ function resolveTemplateUsageCheckString(sfc) {
                                 code += `,v${shared.capitalize(shared.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)}`;
                 }
             }
         ]
@@ -4721,6 +4868,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 = parser$2.parseExpression(exp, { plugins: ['typescript'] });
+        CompilerDOM.walkIdentifiers(ast, node => {
+            ret += `,` + node.name;
+        });
+        return ret;
+    }
+    return stripStrings(exp);
+}
 function stripStrings(exp) {
     return exp
         .replace(/'[^']*'|"[^"]*"/g, '')
@@ -4761,8 +4920,9 @@ function hmrShouldReload(prevImports, next) {
     return false;
 }
 
+const DEFAULT_FILENAME = 'anonymous.vue';
 const sourceToSFC = createCache();
-function parse(source, { sourceMap = true, filename = 'anonymous.vue', sourceRoot = '', pad = false, ignoreEmpty = true, compiler = CompilerDOM__namespace } = {}) {
+function parse(source, { sourceMap = true, filename = DEFAULT_FILENAME, sourceRoot = '', pad = false, ignoreEmpty = true, compiler = CompilerDOM__namespace } = {}) {
     const sourceKey = source + sourceMap + filename + sourceRoot + pad + compiler.parse;
     const cache = sourceToSFC.get(sourceKey);
     if (cache) {
@@ -4921,7 +5081,7 @@ function createBlock(node, source, pad) {
                 offset: start.offset + offset
             };
         }
-        end = Object.assign({}, start);
+        end = { ...start };
     }
     const loc = {
         source: content,
@@ -9391,7 +9551,13 @@ function merge$1(oldMap, newMap) {
 // .scss/.sass processor
 const scss = (source, map, options, load = require) => {
     const nodeSass = load('sass');
-    const finalOptions = Object.assign(Object.assign({}, options), { data: getSource(source, options.filename, options.additionalData), file: options.filename, outFile: options.filename, sourceMap: !!map });
+    const finalOptions = {
+        ...options,
+        data: getSource(source, options.filename, options.additionalData),
+        file: options.filename,
+        outFile: options.filename,
+        sourceMap: !!map
+    };
     try {
         const result = nodeSass.renderSync(finalOptions);
         const dependencies = result.stats.includedFiles;
@@ -9409,13 +9575,16 @@ const scss = (source, map, options, load = require) => {
         return { code: '', errors: [e], dependencies: [] };
     }
 };
-const sass = (source, map, options, load) => scss(source, map, Object.assign(Object.assign({}, options), { indentedSyntax: true }), load);
+const sass = (source, map, options, load) => scss(source, map, {
+    ...options,
+    indentedSyntax: true
+}, load);
 // .less
 const less = (source, map, options, load = require) => {
     const nodeLess = load('less');
     let result;
     let error = null;
-    nodeLess.render(getSource(source, options.filename, options.additionalData), Object.assign(Object.assign({}, options), { syncImport: true }), (err, output) => {
+    nodeLess.render(getSource(source, options.filename, options.additionalData), { ...options, syncImport: true }, (err, output) => {
         error = err;
         result = output;
     });
@@ -17182,10 +17351,16 @@ var postcss$3 = true;
 build.postcss = postcss$3;
 
 function compileStyle(options) {
-    return doCompileStyle(Object.assign(Object.assign({}, options), { isAsync: false }));
+    return doCompileStyle({
+        ...options,
+        isAsync: false
+    });
 }
 function compileStyleAsync(options) {
-    return doCompileStyle(Object.assign(Object.assign({}, options), { isAsync: true }));
+    return doCompileStyle({
+        ...options,
+        isAsync: true
+    });
 }
 function doCompileStyle(options) {
     const { filename, id, scoped = false, trim = true, isProd = false, modules = false, modulesOptions = {}, preprocessLang, postcssOptions, postcssPlugins } = options;
@@ -17210,11 +17385,18 @@ function doCompileStyle(options) {
         if (!options.isAsync) {
             throw new Error('[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().');
         }
-        plugins.push(build(Object.assign(Object.assign({}, modulesOptions), { getJSON: (_cssFileName, json) => {
+        plugins.push(build({
+            ...modulesOptions,
+            getJSON: (_cssFileName, json) => {
                 cssModules = json;
-            } })));
+            }
+        }));
     }
-    const postCSSOptions = Object.assign(Object.assign({}, postcssOptions), { to: filename, from: filename });
+    const postCSSOptions = {
+        ...postcssOptions,
+        to: filename,
+        from: filename
+    };
     if (map) {
         postCSSOptions.map = {
             inline: false,
@@ -17280,7 +17462,10 @@ function doCompileStyle(options) {
     };
 }
 function preprocess$1(options, preprocessor) {
-    return preprocessor(options.source, options.inMap || options.map, Object.assign({ filename: options.filename }, options.preprocessOptions), options.preprocessCustomRequire);
+    return preprocessor(options.source, options.inMap || options.map, {
+        filename: options.filename,
+        ...options.preprocessOptions
+    }, options.preprocessCustomRequire);
 }
 
 // API