@vue/compiler-sfc 3.2.18 → 3.2.22

package/dist/compiler-sfc.cjs.js

@@ -1211,14 +1211,20 @@ function hasSrc(node) {
  * once the empty text nodes (trimmed content) have been filtered out.
  */
 function isEmpty(node) {
-    return (node.children.filter(child => child.type !== 2 /* TEXT */ || child.content.trim() !== '').length === 0);
+    for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (child.type !== 2 /* TEXT */ || child.content.trim() !== '') {
+            return false;
+        }
+    }
+    return true;
 }
 
 function isRelativeUrl(url) {
     const firstChar = url.charAt(0);
     return firstChar === '.' || firstChar === '~' || firstChar === '@';
 }
-const externalRE = /^https?:\/\//;
+const externalRE = /^(https?:)?\/\//;
 function isExternalUrl(url) {
     return externalRE.test(url);
 }
@@ -15780,6 +15786,8 @@ function compileScript(sfc, options) {
     let { script, scriptSetup, source, filename } = sfc;
     // feature flags
     const enableRefTransform = !!options.refSugar || !!options.refTransform;
+    const enablePropsTransform = !!options.propsDestructureTransform;
+    const isProd = !!options.isProd;
     const genSourceMap = options.sourceMap !== false;
     let refBindings;
     if (!options.id) {
@@ -15795,7 +15803,7 @@ function compileScript(sfc, options) {
         scriptLang === 'tsx' ||
         scriptSetupLang === 'ts' ||
         scriptSetupLang === 'tsx';
-    const plugins = [...shared.babelParserDefaultPlugins];
+    const plugins = [];
     if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
         plugins.push('jsx');
     }
@@ -15842,7 +15850,7 @@ function compileScript(sfc, options) {
             }
             if (cssVars.length) {
                 content = rewriteDefault(content, `__default__`, plugins);
-                content += genNormalScriptCssVarsCode(cssVars, bindings, scopeId, !!options.isProd);
+                content += genNormalScriptCssVarsCode(cssVars, bindings, scopeId, isProd);
                 content += `\nexport default __default__`;
             }
             return Object.assign(Object.assign({}, script), { content,
@@ -15877,6 +15885,8 @@ function compileScript(sfc, options) {
     let hasDefineExposeCall = false;
     let propsRuntimeDecl;
     let propsRuntimeDefaults;
+    let propsDestructureDecl;
+    let propsDestructureRestId;
     let propsTypeDecl;
     let propsTypeDeclRaw;
     let propsIdentifier;
@@ -15891,6 +15901,8 @@ function compileScript(sfc, options) {
     const typeDeclaredEmits = new Set();
     // record declared types for runtime props type generation
     const declaredTypes = {};
+    // props destructure data
+    const propsDestructuredBindings = Object.create(null);
     // magic-string state
     const s = new MagicString__default(source);
     const startOffset = scriptSetup.loc.start.offset;
@@ -15932,7 +15944,7 @@ function compileScript(sfc, options) {
             isUsedInTemplate
         };
     }
-    function processDefineProps(node) {
+    function processDefineProps(node, declId) {
         if (!isCallOf(node, DEFINE_PROPS)) {
             return false;
         }
@@ -15954,17 +15966,63 @@ function compileScript(sfc, options) {
                     `or a reference to an interface or literal type.`, propsTypeDeclRaw);
             }
         }
+        if (declId) {
+            if (enablePropsTransform && declId.type === 'ObjectPattern') {
+                propsDestructureDecl = declId;
+                // props destructure - handle compilation sugar
+                for (const prop of declId.properties) {
+                    if (prop.type === 'ObjectProperty') {
+                        if (prop.computed) {
+                            error(`${DEFINE_PROPS}() destructure cannot use computed key.`, prop.key);
+                        }
+                        const propKey = prop.key.name;
+                        if (prop.value.type === 'AssignmentPattern') {
+                            // default value { foo = 123 }
+                            const { left, right } = prop.value;
+                            if (left.type !== 'Identifier') {
+                                error(`${DEFINE_PROPS}() destructure does not support nested patterns.`, left);
+                            }
+                            // store default value
+                            propsDestructuredBindings[propKey] = {
+                                local: left.name,
+                                default: right
+                            };
+                        }
+                        else if (prop.value.type === 'Identifier') {
+                            // simple destucture
+                            propsDestructuredBindings[propKey] = {
+                                local: prop.value.name
+                            };
+                        }
+                        else {
+                            error(`${DEFINE_PROPS}() destructure does not support nested patterns.`, prop.value);
+                        }
+                    }
+                    else {
+                        // rest spread
+                        propsDestructureRestId = prop.argument.name;
+                    }
+                }
+            }
+            else {
+                propsIdentifier = scriptSetup.content.slice(declId.start, declId.end);
+            }
+        }
         return true;
     }
-    function processWithDefaults(node) {
+    function processWithDefaults(node, declId) {
         if (!isCallOf(node, WITH_DEFAULTS)) {
             return false;
         }
-        if (processDefineProps(node.arguments[0])) {
+        if (processDefineProps(node.arguments[0], declId)) {
             if (propsRuntimeDecl) {
                 error(`${WITH_DEFAULTS} can only be used with type-based ` +
                     `${DEFINE_PROPS} declaration.`, node);
             }
+            if (propsDestructureDecl) {
+                error(`${WITH_DEFAULTS}() is unnecessary when using destructure with ${DEFINE_PROPS}().\n` +
+                    `Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(...).`, node.callee);
+            }
             propsRuntimeDefaults = node.arguments[1];
             if (!propsRuntimeDefaults ||
                 propsRuntimeDefaults.type !== 'ObjectExpression') {
@@ -15976,7 +16034,7 @@ function compileScript(sfc, options) {
         }
         return true;
     }
-    function processDefineEmits(node) {
+    function processDefineEmits(node, declId) {
         if (!isCallOf(node, DEFINE_EMITS)) {
             return false;
         }
@@ -15997,6 +16055,9 @@ function compileScript(sfc, options) {
                     `a literal type with call signatures, or a reference to the above types.`, emitsTypeDeclRaw);
             }
         }
+        if (declId) {
+            emitIdentifier = scriptSetup.content.slice(declId.start, declId.end);
+        }
         return true;
     }
     function resolveQualifiedType(node, qualifier) {
@@ -16048,7 +16109,7 @@ function compileScript(sfc, options) {
             if (setupBindings[id.name]) {
                 error(`\`${method}()\` in <script setup> cannot reference locally ` +
                     `declared variables because it will be hoisted outside of the ` +
-                    `setup() function. If your component options requires initialization ` +
+                    `setup() function. If your component options require initialization ` +
                     `in the module scope, use a separate normal <script> to export ` +
                     `the options instead.`, id);
             }
@@ -16086,7 +16147,7 @@ function compileScript(sfc, options) {
      * static properties, we can directly generate more optimzied default
      * declarations. Otherwise we will have to fallback to runtime merging.
      */
-    function checkStaticDefaults() {
+    function hasStaticWithDefaults() {
         return (propsRuntimeDefaults &&
             propsRuntimeDefaults.type === 'ObjectExpression' &&
             propsRuntimeDefaults.properties.every(node => (node.type === 'ObjectProperty' && !node.computed) ||
@@ -16097,13 +16158,17 @@ function compileScript(sfc, options) {
         if (!keys.length) {
             return ``;
         }
-        const hasStaticDefaults = checkStaticDefaults();
+        const hasStaticDefaults = hasStaticWithDefaults();
         const scriptSetupSource = scriptSetup.content;
         let propsDecls = `{
     ${keys
             .map(key => {
             let defaultString;
-            if (hasStaticDefaults) {
+            const destructured = genDestructuredDefaultValue(key);
+            if (destructured) {
+                defaultString = `default: ${destructured}`;
+            }
+            else if (hasStaticDefaults) {
                 const prop = propsRuntimeDefaults.properties.find((node) => node.key.name === key);
                 if (prop) {
                     if (prop.type === 'ObjectProperty') {
@@ -16115,10 +16180,18 @@ function compileScript(sfc, options) {
                     }
                 }
             }
-            {
-                const { type, required } = props[key];
+            const { type, required } = props[key];
+            if (!isProd) {
                 return `${key}: { type: ${toRuntimeTypeString(type)}, required: ${required}${defaultString ? `, ${defaultString}` : ``} }`;
             }
+            else if (type.some(el => el === 'Boolean' || (defaultString && el === 'Function'))) {
+                // #4783 production: if boolean or defaultString and function exists, should keep the type.
+                return `${key}: { type: ${toRuntimeTypeString(type)}${defaultString ? `, ${defaultString}` : ``} }`;
+            }
+            else {
+                // production: checks are useless
+                return `${key}: ${defaultString ? `{ ${defaultString} }` : 'null'}`;
+            }
         })
             .join(',\n    ')}\n  }`;
         if (propsRuntimeDefaults && !hasStaticDefaults) {
@@ -16126,9 +16199,17 @@ function compileScript(sfc, options) {
         }
         return `\n  props: ${propsDecls},`;
     }
+    function genDestructuredDefaultValue(key) {
+        const destructured = propsDestructuredBindings[key];
+        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}`;
+        }
+    }
     function genSetupPropsType(node) {
         const scriptSetupSource = scriptSetup.content;
-        if (checkStaticDefaults()) {
+        if (hasStaticWithDefaults()) {
             // if withDefaults() is used, we need to remove the optional flags
             // on props that have default values
             let res = `{ `;
@@ -16211,14 +16292,15 @@ function compileScript(sfc, options) {
             }
             else if ((node.type === 'VariableDeclaration' ||
                 node.type === 'FunctionDeclaration' ||
-                node.type === 'ClassDeclaration') &&
+                node.type === 'ClassDeclaration' ||
+                node.type === 'TSEnumDeclaration') &&
                 !node.declare) {
                 walkDeclaration(node, scriptBindings, userImportAlias);
             }
         }
         // apply ref transform
         if (enableRefTransform && refTransform.shouldTransform(script.content)) {
-            const { rootVars, importedHelpers } = refTransform.transformAST(scriptAst, s, scriptStartOffset);
+            const { rootRefs: rootVars, importedHelpers } = refTransform.transformAST(scriptAst, s, scriptStartOffset);
             refBindings = rootVars;
             for (const h of importedHelpers) {
                 helperImports.add(h);
@@ -16325,14 +16407,9 @@ function compileScript(sfc, options) {
                 const decl = node.declarations[i];
                 if (decl.init) {
                     // defineProps / defineEmits
-                    const isDefineProps = processDefineProps(decl.init) || processWithDefaults(decl.init);
-                    if (isDefineProps) {
-                        propsIdentifier = scriptSetup.content.slice(decl.id.start, decl.id.end);
-                    }
-                    const isDefineEmits = processDefineEmits(decl.init);
-                    if (isDefineEmits) {
-                        emitIdentifier = scriptSetup.content.slice(decl.id.start, decl.id.end);
-                    }
+                    const isDefineProps = processDefineProps(decl.init, decl.id) ||
+                        processWithDefaults(decl.init, decl.id);
+                    const isDefineEmits = processDefineEmits(decl.init, decl.id);
                     if (isDefineProps || isDefineEmits) {
                         if (left === 1) {
                             s.remove(node.start + startOffset, node.end + startOffset);
@@ -16404,9 +16481,10 @@ function compileScript(sfc, options) {
         }
     }
     // 3. Apply ref sugar transform
-    if (enableRefTransform && refTransform.shouldTransform(scriptSetup.content)) {
-        const { rootVars, importedHelpers } = refTransform.transformAST(scriptSetupAst, s, startOffset, refBindings);
-        refBindings = refBindings ? [...refBindings, ...rootVars] : rootVars;
+    if ((enableRefTransform && refTransform.shouldTransform(scriptSetup.content)) ||
+        propsDestructureDecl) {
+        const { rootRefs, importedHelpers } = refTransform.transformAST(scriptSetupAst, s, startOffset, refBindings, propsDestructuredBindings, !enableRefTransform);
+        refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs;
         for (const h of importedHelpers) {
             helperImports.add(h);
         }
@@ -16422,6 +16500,7 @@ function compileScript(sfc, options) {
     // variables
     checkInvalidScopeReference(propsRuntimeDecl, DEFINE_PROPS);
     checkInvalidScopeReference(propsRuntimeDefaults, DEFINE_PROPS);
+    checkInvalidScopeReference(propsDestructureDecl, DEFINE_PROPS);
     checkInvalidScopeReference(emitsRuntimeDecl, DEFINE_PROPS);
     // 6. remove non-script content
     if (script) {
@@ -16455,6 +16534,20 @@ function compileScript(sfc, options) {
     for (const key in typeDeclaredProps) {
         bindingMetadata[key] = "props" /* PROPS */;
     }
+    // props aliases
+    if (propsDestructureDecl) {
+        if (propsDestructureRestId) {
+            bindingMetadata[propsDestructureRestId] = "setup-const" /* SETUP_CONST */;
+        }
+        for (const key in propsDestructuredBindings) {
+            const { local } = propsDestructuredBindings[key];
+            if (local !== key) {
+                bindingMetadata[local] = "props-aliased" /* PROPS_ALIASED */;
+                (bindingMetadata.__propsAliases ||
+                    (bindingMetadata.__propsAliases = {}))[local] = key;
+            }
+        }
+    }
     for (const [key, { isType, imported, source }] of Object.entries(userImports)) {
         if (isType)
             continue;
@@ -16479,7 +16572,7 @@ function compileScript(sfc, options) {
     if (cssVars.length) {
         helperImports.add(CSS_VARS_HELPER);
         helperImports.add('unref');
-        s.prependRight(startOffset, `\n${genCssVarsCode(cssVars, bindingMetadata, scopeId, !!options.isProd)}\n`);
+        s.prependRight(startOffset, `\n${genCssVarsCode(cssVars, bindingMetadata, scopeId, isProd)}\n`);
     }
     // 9. finalize setup() argument signature
     let args = `__props`;
@@ -16493,12 +16586,15 @@ function compileScript(sfc, options) {
     // we use a default __props so that template expressions referencing props
     // can use it directly
     if (propsIdentifier) {
-        s.prependRight(startOffset, `\nconst ${propsIdentifier} = __props${propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``}`);
+        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`);
     }
     // inject temp variables for async context preservation
     if (hasAwait) {
         const any = isTS ? `: any` : ``;
-        s.prependRight(startOffset, `\nlet __temp${any}, __restore${any}\n`);
+        s.prependLeft(startOffset, `\nlet __temp${any}, __restore${any}\n`);
     }
     const destructureElements = hasDefineExposeCall || !options.inlineTemplate ? [`expose`] : [];
     if (emitIdentifier) {
@@ -16582,9 +16678,21 @@ function compileScript(sfc, options) {
         runtimeOptions += `\n  __ssrInlineRender: true,`;
     }
     if (propsRuntimeDecl) {
-        runtimeOptions += `\n  props: ${scriptSetup.content
+        let declCode = scriptSetup.content
             .slice(propsRuntimeDecl.start, propsRuntimeDecl.end)
-            .trim()},`;
+            .trim();
+        if (propsDestructureDecl) {
+            const defaults = [];
+            for (const key in propsDestructuredBindings) {
+                const d = genDestructuredDefaultValue(key);
+                if (d)
+                    defaults.push(`${key}: ${d}`);
+            }
+            if (defaults.length) {
+                declCode = `${helper(`mergeDefaults`)}(${declCode}, {\n  ${defaults.join(',\n  ')}\n})`;
+            }
+        }
+        runtimeOptions += `\n  props: ${declCode},`;
     }
     else if (propsTypeDecl) {
         runtimeOptions += genRuntimeProps(typeDeclaredProps);
@@ -16599,7 +16707,7 @@ function compileScript(sfc, options) {
     }
     // <script setup> components are closed by default. If the user did not
     // explicitly call `defineExpose`, call expose() with no args.
-    const exposeCall = hasDefineExposeCall || options.inlineTemplate ? `` : `  expose()\n`;
+    const exposeCall = hasDefineExposeCall || options.inlineTemplate ? `` : `  expose();\n`;
     if (isTS) {
         // for TS, make sure the exported type is still valid type with
         // correct props information
@@ -16682,15 +16790,22 @@ function walkDeclaration(node, bindings, userImportAlias) {
                 }
                 registerBinding(bindings, id, bindingType);
             }
-            else if (id.type === 'ObjectPattern') {
-                walkObjectPattern(id, bindings, isConst, isDefineCall);
-            }
-            else if (id.type === 'ArrayPattern') {
-                walkArrayPattern(id, bindings, isConst, isDefineCall);
+            else {
+                if (isCallOf(init, DEFINE_PROPS)) {
+                    // skip walking props destructure
+                    return;
+                }
+                if (id.type === 'ObjectPattern') {
+                    walkObjectPattern(id, bindings, isConst, isDefineCall);
+                }
+                else if (id.type === 'ArrayPattern') {
+                    walkArrayPattern(id, bindings, isConst, isDefineCall);
+                }
             }
         }
     }
-    else if (node.type === 'FunctionDeclaration' ||
+    else if (node.type === 'TSEnumDeclaration' ||
+        node.type === 'FunctionDeclaration' ||
         node.type === 'ClassDeclaration') {
         // export function foo() {} / export class Foo {}
         // export declarations must be named.
@@ -16771,19 +16886,17 @@ function recordType(node, declaredTypes) {
         recordType(node.declaration, declaredTypes);
     }
 }
-function extractRuntimeProps(node, props, declaredTypes) {
+function extractRuntimeProps(node, props, declaredTypes, isProd) {
     const members = node.type === 'TSTypeLiteral' ? node.members : node.body;
     for (const m of members) {
         if ((m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
             m.key.type === 'Identifier') {
             let type;
-            {
-                if (m.type === 'TSMethodSignature') {
-                    type = ['Function'];
-                }
-                else if (m.typeAnnotation) {
-                    type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes);
-                }
+            if (m.type === 'TSMethodSignature') {
+                type = ['Function'];
+            }
+            else if (m.typeAnnotation) {
+                type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes);
             }
             props[m.key.name] = {
                 key: m.key.name,

package/dist/compiler-sfc.d.ts

@@ -169,9 +169,15 @@ export declare interface SFCScriptCompileOptions {
     /**
      * (Experimental) Enable syntax transform for using refs without `.value`
      * https://github.com/vuejs/rfcs/discussions/369
-     * @default true
+     * @default false
      */
     refTransform?: boolean;
+    /**
+     * (Experimental) Enable syntax transform for destructuring from defineProps()
+     * https://github.com/vuejs/rfcs/discussions/394
+     * @default false
+     */
+    propsDestructureTransform?: boolean;
     /**
      * @deprecated use `refTransform` instead.
      */