@vue/compiler-sfc 3.0.7 → 3.0.11

package/README.md

@@ -4,10 +4,6 @@
 
 This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader), [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue) and [vite](https://github.com/vitejs/vite).
 
-## Browser Build Notes
-
-The browser build relies on a browser-bundled build of `postcss` to be available under the global `postcss` (since it can't be properly bundled by Rollup).
-
 ## API
 
 The API is intentionally low-level due to the various considerations when integrating Vue SFCs in a build system:

package/dist/compiler-sfc.cjs.js

@@ -123,6 +123,10 @@ function warn(msg) {
     console.warn(`\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`);
 }
 function warnExperimental(feature, rfcId) {
+    // eslint-disable-next-line
+    if (typeof window !== 'undefined') {
+        return;
+    }
     warnOnce(`${feature} is still an experimental proposal.\n` +
         `Follow its status at https://github.com/vuejs/rfcs/pull/${rfcId}.`);
     warnOnce(`When using experimental features,\n` +
@@ -145,7 +149,8 @@ function parse(source, { sourceMap = true, filename = 'anonymous.vue', sourceRoo
         scriptSetup: null,
         styles: [],
         customBlocks: [],
-        cssVars: []
+        cssVars: [],
+        slotted: false
     };
     const errors = [];
     const ast = compiler.parse(source, {
@@ -245,6 +250,9 @@ function parse(source, { sourceMap = true, filename = 'anonymous.vue', sourceRoo
     if (descriptor.cssVars.length) {
         warnExperimental(`v-bind() CSS variable injection`, 231);
     }
+    // check if the SFC uses :slotted
+    const slottedRE = /(?:::v-|:)slotted\(/;
+    descriptor.slotted = descriptor.styles.some(s => s.scoped && slottedRE.test(s.content));
     const result = {
         descriptor,
         errors
@@ -529,17 +537,23 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             .split(' ', 2);
                         return { url, descriptor };
                     });
-                    // for data url need recheck url
+                    // data urls contains comma after the ecoding so we need to re-merge
+                    // them
                     for (let i = 0; i < imageCandidates.length; i++) {
-                        if (imageCandidates[i].url.trim().startsWith('data:')) {
+                        const { url } = imageCandidates[i];
+                        if (isDataUrl(url)) {
                             imageCandidates[i + 1].url =
-                                imageCandidates[i].url + ',' + imageCandidates[i + 1].url;
+                                url + ',' + imageCandidates[i + 1].url;
                             imageCandidates.splice(i, 1);
                         }
                     }
-                    // When srcset does not contain any relative URLs, skip transforming
-                    if (!options.includeAbsolute &&
-                        !imageCandidates.some(({ url }) => isRelativeUrl(url))) {
+                    const hasQualifiedUrl = imageCandidates.some(({ url }) => {
+                        return (!isExternalUrl(url) &&
+                            !isDataUrl(url) &&
+                            (options.includeAbsolute || isRelativeUrl(url)));
+                    });
+                    // When srcset does not contain any qualified URLs, skip transforming
+                    if (!hasQualifiedUrl) {
                         return;
                     }
                     if (options.base) {
@@ -582,10 +596,10 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                         }
                         const isNotLast = imageCandidates.length - 1 > index;
                         if (descriptor && isNotLast) {
-                            compoundExpression.children.push(` + '${descriptor}, ' + `);
+                            compoundExpression.children.push(` + ' ${descriptor}, ' + `);
                         }
                         else if (descriptor) {
-                            compoundExpression.children.push(` + '${descriptor}'`);
+                            compoundExpression.children.push(` + ' ${descriptor}'`);
                         }
                         else if (isNotLast) {
                             compoundExpression.children.push(` + ', ' + `);
@@ -662,7 +676,7 @@ function compileTemplate(options) {
         return doCompileTemplate(options);
     }
 }
-function doCompileTemplate({ filename, id, scoped, inMap, source, ssr = false, ssrCssVars, isProd = false, compiler = ssr ? CompilerSSR__namespace : CompilerDOM__namespace, compilerOptions = {}, transformAssetUrls }) {
+function doCompileTemplate({ filename, id, scoped, slotted, inMap, source, ssr = false, ssrCssVars, isProd = false, compiler = ssr ? CompilerSSR__namespace : CompilerDOM__namespace, compilerOptions = {}, transformAssetUrls }) {
     const errors = [];
     let nodeTransforms = [];
     if (shared.isObject(transformAssetUrls)) {
@@ -694,6 +708,7 @@ function doCompileTemplate({ filename, id, scoped, inMap, source, ssr = false, s
             ? genCssVarsFromList(ssrCssVars, shortId, isProd)
             : '',
         scopeId: scoped ? longId : undefined,
+        slotted,
         ...compilerOptions,
         nodeTransforms: nodeTransforms.concat(compilerOptions.nodeTransforms || []),
         filename,
@@ -848,7 +863,10 @@ const scopedPlugin = (id = '') => {
 };
 const processedRules = new WeakSet();
 function processRule(id, rule) {
-    if (processedRules.has(rule)) {
+    if (processedRules.has(rule) ||
+        (rule.parent &&
+            rule.parent.type === 'atrule' &&
+            /-?keyframes$/.test(rule.parent.name))) {
         return;
     }
     processedRules.add(rule);
@@ -1402,12 +1420,12 @@ function compileScript(sfc, options) {
                 }
                 const typeArg = node.typeParameters.params[0];
                 if (typeArg.type === 'TSFunctionType' ||
-                    typeArg.type === 'TSUnionType') {
+                    typeArg.type === 'TSTypeLiteral') {
                     emitTypeDecl = typeArg;
                 }
                 else {
                     error(`type argument passed to ${DEFINE_EMIT}() must be a function type ` +
-                        `or a union of function types.`, typeArg);
+                        `or a literal type with call signatures.`, typeArg);
                 }
             }
             return true;
@@ -2230,17 +2248,19 @@ function toRuntimeTypeString(types) {
             : types[0];
 }
 function extractRuntimeEmits(node, emits) {
-    if (node.type === 'TSUnionType') {
-        for (let t of node.types) {
-            if (t.type === 'TSParenthesizedType')
-                t = t.typeAnnotation;
-            if (t.type === 'TSFunctionType') {
-                extractRuntimeEmits(t, emits);
+    if (node.type === 'TSTypeLiteral') {
+        for (let t of node.members) {
+            if (t.type === 'TSCallSignatureDeclaration') {
+                extractEventNames(t.parameters[0], emits);
             }
         }
         return;
     }
-    const eventName = node.parameters[0];
+    else {
+        extractEventNames(node.parameters[0], emits);
+    }
+}
+function extractEventNames(eventName, emits) {
     if (eventName.type === 'Identifier' &&
         eventName.typeAnnotation &&
         eventName.typeAnnotation.type === 'TSTypeAnnotation') {
@@ -2264,6 +2284,19 @@ function genRuntimeEmits(emits) {
             .join(', ')}] as unknown as undefined,`
         : ``;
 }
+function markScopeIdentifier(node, child, knownIds) {
+    const { name } = child;
+    if (node.scopeIds && node.scopeIds.has(name)) {
+        return;
+    }
+    if (name in knownIds) {
+        knownIds[name]++;
+    }
+    else {
+        knownIds[name] = 1;
+    }
+    (node.scopeIds || (node.scopeIds = new Set())).add(name);
+}
 /**
  * Walk an AST and find identifiers that are variable references.
  * This is largely the same logic with `transformExpressions` in compiler-core
@@ -2283,6 +2316,19 @@ function walkIdentifiers(root, onIdentifier) {
                 }
             }
             else if (isFunction(node)) {
+                // #3445
+                // should not rewrite local variables sharing a name with a top-level ref
+                if (node.body.type === 'BlockStatement') {
+                    node.body.body.forEach(p => {
+                        if (p.type === 'VariableDeclaration') {
+                            for (const decl of p.declarations) {
+                                extractIdentifiers(decl.id).forEach(id => {
+                                    markScopeIdentifier(node, id, knownIds);
+                                });
+                            }
+                        }
+                    });
+                }
                 // walk function expressions and add its arguments to known identifiers
                 // so that we don't prefix them
                 node.params.forEach(p => estreeWalker.walk(p, {
@@ -2295,17 +2341,7 @@ function walkIdentifiers(root, onIdentifier) {
                             !(parent &&
                                 parent.type === 'AssignmentPattern' &&
                                 parent.right === child)) {
-                            const { name } = child;
-                            if (node.scopeIds && node.scopeIds.has(name)) {
-                                return;
-                            }
-                            if (name in knownIds) {
-                                knownIds[name]++;
-                            }
-                            else {
-                                knownIds[name] = 1;
-                            }
-                            (node.scopeIds || (node.scopeIds = new Set())).add(name);
+                            markScopeIdentifier(node, child, knownIds);
                         }
                     }
                 }));
@@ -2440,6 +2476,12 @@ function analyzeScriptBindings(ast) {
 }
 function analyzeBindingsFromOptions(node) {
     const bindings = {};
+    // #3270, #3275
+    // mark non-script-setup so we don't resolve components/directives from these
+    Object.defineProperty(bindings, '__isScriptSetup', {
+        enumerable: false,
+        value: false
+    });
     for (const property of node.properties) {
         if (property.type === 'ObjectProperty' &&
             !property.computed &&
@@ -2527,12 +2569,53 @@ function getObjectOrArrayExpressionKeys(value) {
         return getObjectExpressionKeys(value);
     }
     return [];
+}
+function extractIdentifiers(param, nodes = []) {
+    switch (param.type) {
+        case 'Identifier':
+            nodes.push(param);
+            break;
+        case 'MemberExpression':
+            let object = param;
+            while (object.type === 'MemberExpression') {
+                object = object.object;
+            }
+            nodes.push(object);
+            break;
+        case 'ObjectPattern':
+            param.properties.forEach(prop => {
+                if (prop.type === 'RestElement') {
+                    extractIdentifiers(prop.argument, nodes);
+                }
+                else {
+                    extractIdentifiers(prop.value, nodes);
+                }
+            });
+            break;
+        case 'ArrayPattern':
+            param.elements.forEach(element => {
+                if (element)
+                    extractIdentifiers(element, nodes);
+            });
+            break;
+        case 'RestElement':
+            extractIdentifiers(param.argument, nodes);
+            break;
+        case 'AssignmentPattern':
+            extractIdentifiers(param.left, nodes);
+            break;
+    }
+    return nodes;
 }
 
 exports.generateCodeFrame = compilerCore.generateCodeFrame;
+exports.MagicString = MagicString__default;
+exports.babelParse = parser.parse;
+exports.walk = estreeWalker.walk;
 exports.compileScript = compileScript;
 exports.compileStyle = compileStyle;
 exports.compileStyleAsync = compileStyleAsync;
 exports.compileTemplate = compileTemplate;
 exports.parse = parse;
 exports.rewriteDefault = rewriteDefault;
+exports.walkIdentifiers = walkIdentifiers;

package/dist/compiler-sfc.d.ts

@@ -1,10 +1,14 @@
+import { parse as babelParse } from '@babel/parser';
 import { BindingMetadata } from '@vue/compiler-core';
 import { CodegenResult } from '@vue/compiler-core';
 import { CompilerError } from '@vue/compiler-core';
 import { CompilerOptions } from '@vue/compiler-core';
 import { ElementNode } from '@vue/compiler-core';
 import { generateCodeFrame } from '@vue/compiler-core';
+import { Identifier } from '@babel/types';
 import { LazyResult } from 'postcss';
+import MagicString from 'magic-string';
+import { Node as Node_2 } from '@babel/types';
 import { ParserOptions } from '@vue/compiler-core';
 import { ParserPlugin } from '@babel/parser';
 import { RawSourceMap } from 'source-map';
@@ -12,6 +16,7 @@ import { Result } from 'postcss';
 import { RootNode } from '@vue/compiler-core';
 import { SourceLocation } from '@vue/compiler-core';
 import { Statement } from '@babel/types';
+import { walk } from 'estree-walker';
 
 declare interface AssetURLOptions {
     /**
@@ -29,6 +34,7 @@ declare interface AssetURLOptions {
 declare interface AssetURLTagConfig {
     [name: string]: string[];
 }
+export { babelParse }
 export { BindingMetadata }
 export { CompilerError }
 export { CompilerOptions }
@@ -59,6 +65,7 @@ declare interface CSSModulesOptions {
     globalModulePaths?: string[];
 }
 export { generateCodeFrame }
+export { MagicString }
 
 export declare function parse(source: string, { sourceMap, filename, sourceRoot, pad, compiler }?: SFCParseOptions): SFCParseResult;
 
@@ -95,6 +102,7 @@ export declare interface SFCDescriptor {
     styles: SFCStyleBlock[];
     customBlocks: SFCBlock[];
     cssVars: string[];
+    slotted: boolean;
 }
 
 export declare interface SFCParseOptions {
@@ -193,6 +201,7 @@ export declare interface SFCTemplateCompileOptions {
     filename: string;
     id: string;
     scoped?: boolean;
+    slotted?: boolean;
     isProd?: boolean;
     ssr?: boolean;
     ssrCssVars?: string[];
@@ -228,5 +237,14 @@ export declare interface TemplateCompiler {
     compile(template: string, options: CompilerOptions): CodegenResult;
     parse(template: string, options: ParserOptions): RootNode;
 }
+export { walk }
+
+/**
+ * Walk an AST and find identifiers that are variable references.
+ * This is largely the same logic with `transformExpressions` in compiler-core
+ * but with some subtle differences as this needs to handle a wider range of
+ * possible syntax.
+ */
+export declare function walkIdentifiers(root: Node_2, onIdentifier: (node: Identifier, parent: Node_2, parentStack: Node_2[]) => void): void;
 
 export { }