@vue/compiler-sfc 3.2.41 → 3.2.42

package/dist/compiler-sfc.cjs.js

@@ -119,7 +119,8 @@ function genVarName(id, raw, isProd) {
         return hashSum(id + raw);
     }
     else {
-        return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
+        // escape ASCII Punctuation & Symbols
+        return `${id}-${raw.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, s => `\\${s}`)}`;
     }
 }
 function normalizeExpression(exp) {
@@ -3537,7 +3538,6 @@ function compileScript(sfc, options) {
     const bindingMetadata = {};
     const helperImports = new Set();
     const userImports = Object.create(null);
-    const userImportAlias = Object.create(null);
     const scriptBindings = Object.create(null);
     const setupBindings = Object.create(null);
     let defaultExport;
@@ -3588,10 +3588,24 @@ 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, needTemplateUsageCheck) {
-        if (source === 'vue' && imported) {
-            userImportAlias[imported] = local;
+    function hoistNode(node) {
+        const start = node.start + startOffset;
+        let end = node.end + startOffset;
+        // locate comment
+        if (node.trailingComments && node.trailingComments.length > 0) {
+            const lastCommentNode = node.trailingComments[node.trailingComments.length - 1];
+            end = lastCommentNode.end + startOffset;
+        }
+        // locate the end of whitespace between this statement and the next
+        while (end <= source.length) {
+            if (!/\s/.test(source.charAt(end))) {
+                break;
+            }
+            end++;
         }
+        s.move(start, end, 0);
+    }
+    function registerUserImport(source, local, imported, isType, isFromSetup, needTemplateUsageCheck) {
         // template usage check is only needed in non-inline mode, so we can skip
         // the work if inlineTemplate is true.
         let isUsedInTemplate = needTemplateUsageCheck;
@@ -3605,6 +3619,7 @@ function compileScript(sfc, options) {
         userImports[local] = {
             isType,
             imported: imported || 'default',
+            local,
             source,
             isFromSetup,
             isUsedInTemplate
@@ -3638,12 +3653,10 @@ function compileScript(sfc, options) {
                 // props destructure - handle compilation sugar
                 for (const prop of declId.properties) {
                     if (prop.type === 'ObjectProperty') {
-                        if (prop.computed) {
+                        const propKey = resolveObjectKey(prop.key, prop.computed);
+                        if (!propKey) {
                             error(`${DEFINE_PROPS}() destructure cannot use computed key.`, prop.key);
                         }
-                        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;
@@ -3724,10 +3737,67 @@ function compileScript(sfc, options) {
             }
         }
         if (declId) {
-            emitIdentifier = scriptSetup.content.slice(declId.start, declId.end);
+            emitIdentifier =
+                declId.type === 'Identifier'
+                    ? declId.name
+                    : scriptSetup.content.slice(declId.start, declId.end);
         }
         return true;
     }
+    function getAstBody() {
+        return scriptAst
+            ? [...scriptSetupAst.body, ...scriptAst.body]
+            : scriptSetupAst.body;
+    }
+    function resolveExtendsType(node, qualifier, cache = []) {
+        if (node.type === 'TSInterfaceDeclaration' && node.extends) {
+            node.extends.forEach(extend => {
+                if (extend.type === 'TSExpressionWithTypeArguments' &&
+                    extend.expression.type === 'Identifier') {
+                    const body = getAstBody();
+                    for (const node of body) {
+                        const qualified = isQualifiedType(node, qualifier, extend.expression.name);
+                        if (qualified) {
+                            cache.push(qualified);
+                            resolveExtendsType(node, qualifier, cache);
+                            return cache;
+                        }
+                    }
+                }
+            });
+        }
+        return cache;
+    }
+    function isQualifiedType(node, qualifier, refName) {
+        if (node.type === 'TSInterfaceDeclaration' && node.id.name === refName) {
+            return node.body;
+        }
+        else if (node.type === 'TSTypeAliasDeclaration' &&
+            node.id.name === refName &&
+            qualifier(node.typeAnnotation)) {
+            return node.typeAnnotation;
+        }
+        else if (node.type === 'ExportNamedDeclaration' && node.declaration) {
+            return isQualifiedType(node.declaration, qualifier, refName);
+        }
+    }
+    // filter all extends types to keep the override declaration
+    function filterExtendsType(extendsTypes, bodies) {
+        extendsTypes.forEach(extend => {
+            const body = extend.body;
+            body.forEach(newBody => {
+                if (newBody.type === 'TSPropertySignature' &&
+                    newBody.key.type === 'Identifier') {
+                    const name = newBody.key.name;
+                    const hasOverride = bodies.some(seenBody => seenBody.type === 'TSPropertySignature' &&
+                        seenBody.key.type === 'Identifier' &&
+                        seenBody.key.name === name);
+                    if (!hasOverride)
+                        bodies.push(newBody);
+                }
+            });
+        });
+    }
     function resolveQualifiedType(node, qualifier) {
         if (qualifier(node)) {
             return node;
@@ -3735,26 +3805,16 @@ function compileScript(sfc, options) {
         if (node.type === 'TSTypeReference' &&
             node.typeName.type === 'Identifier') {
             const refName = node.typeName.name;
-            const isQualifiedType = (node) => {
-                if (node.type === 'TSInterfaceDeclaration' &&
-                    node.id.name === refName) {
-                    return node.body;
-                }
-                else if (node.type === 'TSTypeAliasDeclaration' &&
-                    node.id.name === refName &&
-                    qualifier(node.typeAnnotation)) {
-                    return node.typeAnnotation;
-                }
-                else if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-                    return isQualifiedType(node.declaration);
-                }
-            };
-            const body = scriptAst
-                ? [...scriptSetupAst.body, ...scriptAst.body]
-                : scriptSetupAst.body;
+            const body = getAstBody();
             for (const node of body) {
-                const qualified = isQualifiedType(node);
+                let qualified = isQualifiedType(node, qualifier, refName);
                 if (qualified) {
+                    const extendsTypes = resolveExtendsType(node, qualifier);
+                    if (extendsTypes.length) {
+                        const bodies = [...qualified.body];
+                        filterExtendsType(extendsTypes, bodies);
+                        qualified.body = bodies;
+                    }
                     return qualified;
                 }
             }
@@ -3818,7 +3878,8 @@ function compileScript(sfc, options) {
     function hasStaticWithDefaults() {
         return (propsRuntimeDefaults &&
             propsRuntimeDefaults.type === 'ObjectExpression' &&
-            propsRuntimeDefaults.properties.every(node => (node.type === 'ObjectProperty' && !node.computed) ||
+            propsRuntimeDefaults.properties.every(node => (node.type === 'ObjectProperty' &&
+                (!node.computed || node.key.type.endsWith('Literal'))) ||
                 node.type === 'ObjectMethod'));
     }
     function genRuntimeProps(props) {
@@ -3837,14 +3898,18 @@ function compileScript(sfc, options) {
                 defaultString = `default: ${destructured}`;
             }
             else if (hasStaticDefaults) {
-                const prop = propsRuntimeDefaults.properties.find((node) => node.key.name === key);
+                const prop = propsRuntimeDefaults.properties.find(node => {
+                    if (node.type === 'SpreadElement')
+                        return false;
+                    return resolveObjectKey(node.key, node.computed) === key;
+                });
                 if (prop) {
                     if (prop.type === 'ObjectProperty') {
                         // prop has corresponding static default value
                         defaultString = `default: ${scriptSetupSource.slice(prop.value.start, prop.value.end)}`;
                     }
                     else {
-                        defaultString = `default() ${scriptSetupSource.slice(prop.body.start, prop.body.end)}`;
+                        defaultString = `${prop.async ? 'async ' : ''}${prop.kind !== 'method' ? `${prop.kind} ` : ''}default() ${scriptSetupSource.slice(prop.body.start, prop.body.end)}`;
                     }
                 }
             }
@@ -3887,7 +3952,12 @@ function compileScript(sfc, options) {
                     m.type === 'TSMethodSignature') &&
                     m.typeAnnotation &&
                     m.key.type === 'Identifier') {
-                    if (propsRuntimeDefaults.properties.some((p) => p.key.name === m.key.name)) {
+                    if (propsRuntimeDefaults.properties.some(p => {
+                        if (p.type === 'SpreadElement')
+                            return false;
+                        return (resolveObjectKey(p.key, p.computed) ===
+                            m.key.name);
+                    })) {
                         res +=
                             m.key.name +
                                 (m.type === 'TSMethodSignature' ? '()' : '') +
@@ -3906,13 +3976,22 @@ function compileScript(sfc, options) {
             return scriptSetupSource.slice(node.start, node.end);
         }
     }
-    // 1. process normal <script> first if it exists
-    let scriptAst;
-    if (script) {
-        scriptAst = parse(script.content, {
+    // 0. parse both <script> and <script setup> blocks
+    const scriptAst = script &&
+        parse(script.content, {
             plugins,
             sourceType: 'module'
         }, scriptStartOffset);
+    const scriptSetupAst = parse(scriptSetup.content, {
+        plugins: [
+            ...plugins,
+            // allow top level await but only inside <script setup>
+            'topLevelAwait'
+        ],
+        sourceType: 'module'
+    }, startOffset);
+    // 1.1 walk import delcarations of <script>
+    if (scriptAst) {
         for (const node of scriptAst.body) {
             if (node.type === 'ImportDeclaration') {
                 // record imports for dedupe
@@ -3925,7 +4004,75 @@ function compileScript(sfc, options) {
                             specifier.importKind === 'type'), false, !options.inlineTemplate);
                 }
             }
-            else if (node.type === 'ExportDefaultDeclaration') {
+        }
+    }
+    // 1.2 walk import declarations of <script setup>
+    for (const node of scriptSetupAst.body) {
+        if (node.type === 'ImportDeclaration') {
+            // import declarations are moved to top
+            hoistNode(node);
+            // dedupe imports
+            let removed = 0;
+            const removeSpecifier = (i) => {
+                const removeLeft = i > removed;
+                removed++;
+                const current = node.specifiers[i];
+                const next = node.specifiers[i + 1];
+                s.remove(removeLeft
+                    ? node.specifiers[i - 1].end + startOffset
+                    : current.start + startOffset, next && !removeLeft
+                    ? next.start + startOffset
+                    : current.end + startOffset);
+            };
+            for (let i = 0; i < node.specifiers.length; i++) {
+                const specifier = node.specifiers[i];
+                const local = specifier.local.name;
+                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' &&
+                    (imported === DEFINE_PROPS ||
+                        imported === DEFINE_EMITS ||
+                        imported === DEFINE_EXPOSE)) {
+                    warnOnce(`\`${imported}\` is a compiler macro and no longer needs to be imported.`);
+                    removeSpecifier(i);
+                }
+                else if (existing) {
+                    if (existing.source === source && existing.imported === imported) {
+                        // already imported in <script setup>, dedupe
+                        removeSpecifier(i);
+                    }
+                    else {
+                        error(`different imports aliased to same local name.`, specifier);
+                    }
+                }
+                else {
+                    registerUserImport(source, local, imported, node.importKind === 'type' ||
+                        (specifier.type === 'ImportSpecifier' &&
+                            specifier.importKind === 'type'), true, !options.inlineTemplate);
+                }
+            }
+            if (node.specifiers.length && removed === node.specifiers.length) {
+                s.remove(node.start + startOffset, node.end + startOffset);
+            }
+        }
+    }
+    // 1.3 resolve possible user import alias of `ref` and `reactive`
+    const vueImportAliases = {};
+    for (const key in userImports) {
+        const { source, imported, local } = userImports[key];
+        if (source === 'vue')
+            vueImportAliases[imported] = local;
+    }
+    // 2.1 process normal <script> body
+    if (script && scriptAst) {
+        for (const node of scriptAst.body) {
+            if (node.type === 'ExportDefaultDeclaration') {
                 // export default
                 defaultExport = node;
                 // check if user has manually specified `name` or 'render` option in
@@ -3985,7 +4132,7 @@ function compileScript(sfc, options) {
                     }
                 }
                 if (node.declaration) {
-                    walkDeclaration(node.declaration, scriptBindings, userImportAlias);
+                    walkDeclaration(node.declaration, scriptBindings, vueImportAliases);
                 }
             }
             else if ((node.type === 'VariableDeclaration' ||
@@ -3993,7 +4140,7 @@ function compileScript(sfc, options) {
                 node.type === 'ClassDeclaration' ||
                 node.type === 'TSEnumDeclaration') &&
                 !node.declare) {
-                walkDeclaration(node, scriptBindings, userImportAlias);
+                walkDeclaration(node, scriptBindings, vueImportAliases);
             }
         }
         // apply reactivity transform
@@ -4015,31 +4162,10 @@ function compileScript(sfc, options) {
             s.move(scriptStartOffset, scriptEndOffset, 0);
         }
     }
-    // 2. parse <script setup> and  walk over top level statements
-    const scriptSetupAst = parse(scriptSetup.content, {
-        plugins: [
-            ...plugins,
-            // allow top level await but only inside <script setup>
-            'topLevelAwait'
-        ],
-        sourceType: 'module'
-    }, startOffset);
+    // 2.2 process <script setup> body
     for (const node of scriptSetupAst.body) {
-        const start = node.start + startOffset;
-        let end = node.end + startOffset;
-        // locate comment
-        if (node.trailingComments && node.trailingComments.length > 0) {
-            const lastCommentNode = node.trailingComments[node.trailingComments.length - 1];
-            end = lastCommentNode.end + startOffset;
-        }
-        // locate the end of whitespace between this statement and the next
-        while (end <= source.length) {
-            if (!/\s/.test(source.charAt(end))) {
-                break;
-            }
-            end++;
-        }
         // (Dropped) `ref: x` bindings
+        // TODO remove when out of experimental
         if (node.type === 'LabeledStatement' &&
             node.label.name === 'ref' &&
             node.body.type === 'ExpressionStatement') {
@@ -4047,59 +4173,6 @@ function compileScript(sfc, options) {
                 `has been dropped based on community feedback. Please check out ` +
                 `the new proposal at https://github.com/vuejs/rfcs/discussions/369`, node);
         }
-        if (node.type === 'ImportDeclaration') {
-            // import declarations are moved to top
-            s.move(start, end, 0);
-            // dedupe imports
-            let removed = 0;
-            const removeSpecifier = (i) => {
-                const removeLeft = i > removed;
-                removed++;
-                const current = node.specifiers[i];
-                const next = node.specifiers[i + 1];
-                s.remove(removeLeft
-                    ? node.specifiers[i - 1].end + startOffset
-                    : current.start + startOffset, next && !removeLeft
-                    ? next.start + startOffset
-                    : current.end + startOffset);
-            };
-            for (let i = 0; i < node.specifiers.length; i++) {
-                const specifier = node.specifiers[i];
-                const local = specifier.local.name;
-                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' &&
-                    (imported === DEFINE_PROPS ||
-                        imported === DEFINE_EMITS ||
-                        imported === DEFINE_EXPOSE)) {
-                    warnOnce(`\`${imported}\` is a compiler macro and no longer needs to be imported.`);
-                    removeSpecifier(i);
-                }
-                else if (existing) {
-                    if (existing.source === source && existing.imported === imported) {
-                        // already imported in <script setup>, dedupe
-                        removeSpecifier(i);
-                    }
-                    else {
-                        error(`different imports aliased to same local name.`, specifier);
-                    }
-                }
-                else {
-                    registerUserImport(source, local, imported, node.importKind === 'type' ||
-                        (specifier.type === 'ImportSpecifier' &&
-                            specifier.importKind === 'type'), true, !options.inlineTemplate);
-                }
-            }
-            if (node.specifiers.length && removed === node.specifiers.length) {
-                s.remove(node.start + startOffset, node.end + startOffset);
-            }
-        }
         if (node.type === 'ExpressionStatement') {
             // process `defineProps` and `defineEmit(s)` calls
             if (processDefineProps(node.expression) ||
@@ -4130,12 +4203,12 @@ function compileScript(sfc, options) {
                         else {
                             let start = decl.start + startOffset;
                             let end = decl.end + startOffset;
-                            if (i < total - 1) {
-                                // not the last one, locate the start of the next
+                            if (i === 0) {
+                                // first one, locate the start of the next
                                 end = node.declarations[i + 1].start + startOffset;
                             }
                             else {
-                                // last one, locate the end of the prev
+                                // not first one, locate the end of the prev
                                 start = node.declarations[i - 1].end + startOffset;
                             }
                             s.remove(start, end);
@@ -4150,7 +4223,7 @@ function compileScript(sfc, options) {
             node.type === 'FunctionDeclaration' ||
             node.type === 'ClassDeclaration') &&
             !node.declare) {
-            walkDeclaration(node, setupBindings, userImportAlias);
+            walkDeclaration(node, setupBindings, vueImportAliases);
         }
         // walk statements & named exports / variable declarations for top level
         // await
@@ -4204,7 +4277,7 @@ function compileScript(sfc, options) {
                     node.exportKind === 'type') ||
                 (node.type === 'VariableDeclaration' && node.declare)) {
                 recordType(node, declaredTypes);
-                s.move(start, end, 0);
+                hoistNode(node);
             }
         }
     }
@@ -4321,10 +4394,10 @@ function compileScript(sfc, options) {
     // we use a default __props so that template expressions referencing props
     // can use it directly
     if (propsIdentifier) {
-        s.prependLeft(startOffset, `\nconst ${propsIdentifier} = __props${propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``}\n`);
+        s.prependLeft(startOffset, `\nconst ${propsIdentifier} = __props${propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``};\n`);
     }
     if (propsDestructureRestId) {
-        s.prependLeft(startOffset, `\nconst ${propsDestructureRestId} = ${helper(`createPropsRestProxy`)}(__props, ${JSON.stringify(Object.keys(propsDestructuredBindings))})\n`);
+        s.prependLeft(startOffset, `\nconst ${propsDestructureRestId} = ${helper(`createPropsRestProxy`)}(__props, ${JSON.stringify(Object.keys(propsDestructuredBindings))});\n`);
     }
     // inject temp variables for async context preservation
     if (hasAwait) {
@@ -4519,7 +4592,7 @@ function compileScript(sfc, options) {
 function registerBinding(bindings, node, type) {
     bindings[node.name] = type;
 }
-function walkDeclaration(node, bindings, userImportAlias) {
+function walkDeclaration(node, bindings, userImportAliases) {
     if (node.type === 'VariableDeclaration') {
         const isConst = node.kind === 'const';
         // export const foo = ...
@@ -4528,7 +4601,7 @@ function walkDeclaration(node, bindings, userImportAlias) {
                 isCallOf(init, c => c === DEFINE_PROPS || c === DEFINE_EMITS || c === WITH_DEFAULTS));
             if (id.type === 'Identifier') {
                 let bindingType;
-                const userReactiveBinding = userImportAlias['reactive'] || 'reactive';
+                const userReactiveBinding = userImportAliases['reactive'];
                 if (isCallOf(init, userReactiveBinding)) {
                     // treat reactive() calls as let since it's meant to be mutable
                     bindingType = isConst
@@ -4545,7 +4618,7 @@ function walkDeclaration(node, bindings, userImportAlias) {
                         : "setup-const" /* BindingTypes.SETUP_CONST */;
                 }
                 else if (isConst) {
-                    if (isCallOf(init, userImportAlias['ref'] || 'ref')) {
+                    if (isCallOf(init, userImportAliases['ref'])) {
                         bindingType = "setup-ref" /* BindingTypes.SETUP_REF */;
                     }
                     else {
@@ -4793,6 +4866,7 @@ function genRuntimeEmits(emits) {
 }
 function isCallOf(node, test) {
     return !!(node &&
+        test &&
         node.type === 'CallExpression' &&
         node.callee.type === 'Identifier' &&
         (typeof test === 'string'
@@ -4903,15 +4977,11 @@ function analyzeBindingsFromOptions(node) {
 function getObjectExpressionKeys(node) {
     const keys = [];
     for (const prop of node.properties) {
-        if ((prop.type === 'ObjectProperty' || prop.type === 'ObjectMethod') &&
-            !prop.computed) {
-            if (prop.key.type === 'Identifier') {
-                keys.push(prop.key.name);
-            }
-            else if (prop.key.type === 'StringLiteral') {
-                keys.push(prop.key.value);
-            }
-        }
+        if (prop.type === 'SpreadElement')
+            continue;
+        const key = resolveObjectKey(prop.key, prop.computed);
+        if (key)
+            keys.push(String(key));
     }
     return keys;
 }
@@ -5036,6 +5106,17 @@ function hmrShouldReload(prevImports, next) {
     }
     return false;
 }
+function resolveObjectKey(node, computed) {
+    switch (node.type) {
+        case 'StringLiteral':
+        case 'NumericLiteral':
+            return node.value;
+        case 'Identifier':
+            if (!computed)
+                return node.name;
+    }
+    return undefined;
+}
 
 const DEFAULT_FILENAME = 'anonymous.vue';
 const sourceToSFC = createCache();
@@ -5140,6 +5221,9 @@ function parse(source, { sourceMap = true, filename = DEFAULT_FILENAME, sourceRo
                 break;
         }
     });
+    if (!descriptor.template && !descriptor.script && !descriptor.scriptSetup) {
+        errors.push(new SyntaxError(`At least one <template> or <script> is required in a single file component.`));
+    }
     if (descriptor.scriptSetup) {
         if (descriptor.scriptSetup.src) {
             errors.push(new SyntaxError(`<script setup> cannot use the "src" attribute because ` +

package/dist/compiler-sfc.d.ts

@@ -17,6 +17,7 @@ import { Result } from 'postcss';
 import { RootNode } from '@vue/compiler-core';
 import { shouldTransform as shouldTransformRef } from '@vue/reactivity-transform';
 import { SourceLocation } from '@vue/compiler-core';
+import { Statement } from '@babel/types';
 import { transform as transformRef } from '@vue/reactivity-transform';
 import { transformAST as transformRefAST } from '@vue/reactivity-transform';
 import { walkIdentifiers } from '@vue/compiler-core';
@@ -79,6 +80,7 @@ export { generateCodeFrame }
 declare interface ImportBinding {
     isType: boolean;
     imported: string;
+    local: string;
     source: string;
     isFromSetup: boolean;
     isUsedInTemplate: boolean;
@@ -160,14 +162,8 @@ export declare interface SFCScriptBlock extends SFCBlock {
     setup?: string | boolean;
     bindings?: BindingMetadata;
     imports?: Record<string, ImportBinding>;
-    /**
-     * import('\@babel/types').Statement
-     */
-    scriptAst?: any[];
-    /**
-     * import('\@babel/types').Statement
-     */
-    scriptSetupAst?: any[];
+    scriptAst?: Statement[];
+    scriptSetupAst?: Statement[];
 }
 
 export declare interface SFCScriptCompileOptions {