@vue/compiler-sfc 3.2.34 → 3.2.37

package/dist/compiler-sfc.cjs.js

@@ -109,8 +109,6 @@ function sum (o) {
 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, isSSR = false) {
     return `{\n  ${vars
         .map(key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`)
@@ -132,31 +130,89 @@ function normalizeExpression(exp) {
     }
     return exp;
 }
+const vBindRE = /v-bind\s*\(/g;
 function parseCssVars(sfc) {
     const vars = [];
     sfc.styles.forEach(style => {
         let match;
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
-        while ((match = cssVarRE.exec(content))) {
-            const variable = normalizeExpression(match[1]);
-            if (!vars.includes(variable)) {
-                vars.push(variable);
+        while ((match = vBindRE.exec(content))) {
+            const start = match.index + match[0].length;
+            const end = lexBinding(content, start);
+            if (end !== null) {
+                const variable = normalizeExpression(content.slice(start, end));
+                if (!vars.includes(variable)) {
+                    vars.push(variable);
+                }
             }
         }
     });
     return vars;
 }
+function lexBinding(content, start) {
+    let state = 0 /* inParens */;
+    let parenDepth = 0;
+    for (let i = start; i < content.length; i++) {
+        const char = content.charAt(i);
+        switch (state) {
+            case 0 /* inParens */:
+                if (char === `'`) {
+                    state = 1 /* inSingleQuoteString */;
+                }
+                else if (char === `"`) {
+                    state = 2 /* inDoubleQuoteString */;
+                }
+                else if (char === `(`) {
+                    parenDepth++;
+                }
+                else if (char === `)`) {
+                    if (parenDepth > 0) {
+                        parenDepth--;
+                    }
+                    else {
+                        return i;
+                    }
+                }
+                break;
+            case 1 /* inSingleQuoteString */:
+                if (char === `'`) {
+                    state = 0 /* inParens */;
+                }
+                break;
+            case 2 /* inDoubleQuoteString */:
+                if (char === `"`) {
+                    state = 0 /* inParens */;
+                }
+                break;
+        }
+    }
+    return null;
+}
 const cssVarsPlugin = opts => {
     const { id, isProd } = opts;
     return {
         postcssPlugin: 'vue-sfc-vars',
         Declaration(decl) {
             // rewrite CSS variables
-            if (cssVarRE.test(decl.value)) {
-                decl.value = decl.value.replace(cssVarRE, (_, $1) => {
-                    return `var(--${genVarName(id, normalizeExpression($1), isProd)})`;
-                });
+            const value = decl.value;
+            if (vBindRE.test(value)) {
+                vBindRE.lastIndex = 0;
+                let transformed = '';
+                let lastIndex = 0;
+                let match;
+                while ((match = vBindRE.exec(value))) {
+                    const start = match.index + match[0].length;
+                    const end = lexBinding(value, start);
+                    if (end !== null) {
+                        const variable = normalizeExpression(value.slice(start, end));
+                        transformed +=
+                            value.slice(lastIndex, match.index) +
+                                `var(--${genVarName(id, variable, isProd)})`;
+                        lastIndex = end + 1;
+                    }
+                }
+                decl.value = transformed + value.slice(lastIndex);
             }
         }
     };
@@ -3313,7 +3369,7 @@ function rewriteDefault(input, as, parserPlugins) {
                         }
                         else {
                             const end = specifierEnd(input, specifier.exported.end, node.end);
-                            s.prepend(`import { ${input.slice(specifier.local.start, specifier.local.end)} } from '${node.source?.value}'\n`);
+                            s.prepend(`import { ${input.slice(specifier.local.start, specifier.local.end)} } from '${node.source.value}'\n`);
                             s.overwrite(specifier.start, end, ``);
                             s.append(`\nconst ${as} = ${specifier.local.name}`);
                             continue;
@@ -3358,13 +3414,14 @@ const DEFINE_EXPOSE = 'defineExpose';
 const WITH_DEFAULTS = 'withDefaults';
 // constants
 const DEFAULT_VAR = `__default__`;
-const isBuiltInDir = shared.makeMap(`once,memo,if,else,else-if,slot,text,html,on,bind,model,show,cloak,is`);
+const isBuiltInDir = shared.makeMap(`once,memo,if,for,else,else-if,slot,text,html,on,bind,model,show,cloak,is`);
 /**
  * Compile `<script setup>`
  * It requires the whole SFC descriptor because we need to handle and merge
  * normal `<script>` + `<script setup>` if both are present.
  */
 function compileScript(sfc, options) {
+    var _a;
     let { script, scriptSetup, source, filename } = sfc;
     // feature flags
     // TODO remove support for deprecated options when out of experimental
@@ -4237,7 +4294,7 @@ function compileScript(sfc, options) {
     // 8. inject `useCssVars` calls
     if (cssVars.length &&
         // no need to do this when targeting SSR
-        !(options.inlineTemplate && options.templateOptions?.ssr)) {
+        !(options.inlineTemplate && ((_a = options.templateOptions) === null || _a === void 0 ? void 0 : _a.ssr))) {
         helperImports.add(CSS_VARS_HELPER);
         helperImports.add('unref');
         s.prependRight(startOffset, `\n${genCssVarsCode(cssVars, bindingMetadata, scopeId, isProd)}\n`);
@@ -4364,7 +4421,7 @@ function compileScript(sfc, options) {
     if (!hasDefaultExportName && filename && filename !== DEFAULT_FILENAME) {
         const match = filename.match(/([^/\\]+)\.\w+$/);
         if (match) {
-            runtimeOptions += `\n  name: '${match[1]}',`;
+            runtimeOptions += `\n  __name: '${match[1]}',`;
         }
     }
     if (hasInlinedSsrRenderFn) {
@@ -4445,8 +4502,8 @@ function compileScript(sfc, options) {
                 includeContent: true
             })
             : undefined,
-        scriptAst: scriptAst?.body,
-        scriptSetupAst: scriptSetupAst?.body
+        scriptAst: scriptAst === null || scriptAst === void 0 ? void 0 : scriptAst.body,
+        scriptSetupAst: scriptSetupAst === null || scriptSetupAst === void 0 ? void 0 : scriptSetupAst.body
     };
 }
 function registerBinding(bindings, node, type) {
@@ -4889,7 +4946,7 @@ function resolveTemplateUsageCheckString(sfc) {
                                 code += `,v${shared.capitalize(shared.camelize(prop.name))}`;
                             }
                             if (prop.exp) {
-                                code += `,${processExp(prop.exp.content)}`;
+                                code += `,${processExp(prop.exp.content, prop.name)}`;
                             }
                         }
                     }
@@ -4904,8 +4961,19 @@ function resolveTemplateUsageCheckString(sfc) {
     templateUsageCheckCache.set(content, code);
     return code;
 }
-function processExp(exp) {
-    if (/ as \w|<.*>/.test(exp)) {
+const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
+function processExp(exp, dir) {
+    if (/ as\s+\w|<.*>|:/.test(exp)) {
+        if (dir === 'slot') {
+            exp = `(${exp})=>{}`;
+        }
+        else if (dir === 'for') {
+            const inMatch = exp.match(forAliasRE);
+            if (inMatch) {
+                const [, LHS, RHS] = inMatch;
+                return processExp(`(${LHS})=>{}`) + processExp(RHS);
+            }
+        }
         let ret = '';
         // has potential type cast or generic arguments that uses types
         const ast = parser$2.parseExpression(exp, { plugins: ['typescript'] });

package/dist/compiler-sfc.esm-browser.js

@@ -17347,6 +17347,14 @@ function getConstantType(node, context) {
                 // static then they don't need to be blocks since there will be no
                 // nested updates.
                 if (codegenNode.isBlock) {
+                    // except set custom directives.
+                    for (let i = 0; i < node.props.length; i++) {
+                        const p = node.props[i];
+                        if (p.type === 7 /* DIRECTIVE */) {
+                            constantCache.set(node, 0 /* NOT_CONSTANT */);
+                            return 0 /* NOT_CONSTANT */;
+                        }
+                    }
                     context.removeHelper(OPEN_BLOCK);
                     context.removeHelper(getVNodeBlockHelper(context.inSSR, codegenNode.isComponent));
                     codegenNode.isBlock = false;
@@ -27708,8 +27716,6 @@ function sum (o) {
 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, isSSR = false) {
     return `{\n  ${vars
         .map(key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`)
@@ -27731,31 +27737,89 @@ function normalizeExpression(exp) {
     }
     return exp;
 }
+const vBindRE = /v-bind\s*\(/g;
 function parseCssVars(sfc) {
     const vars = [];
     sfc.styles.forEach(style => {
         let match;
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
-        while ((match = cssVarRE.exec(content))) {
-            const variable = normalizeExpression(match[1]);
-            if (!vars.includes(variable)) {
-                vars.push(variable);
+        while ((match = vBindRE.exec(content))) {
+            const start = match.index + match[0].length;
+            const end = lexBinding(content, start);
+            if (end !== null) {
+                const variable = normalizeExpression(content.slice(start, end));
+                if (!vars.includes(variable)) {
+                    vars.push(variable);
+                }
             }
         }
     });
     return vars;
 }
+function lexBinding(content, start) {
+    let state = 0 /* inParens */;
+    let parenDepth = 0;
+    for (let i = start; i < content.length; i++) {
+        const char = content.charAt(i);
+        switch (state) {
+            case 0 /* inParens */:
+                if (char === `'`) {
+                    state = 1 /* inSingleQuoteString */;
+                }
+                else if (char === `"`) {
+                    state = 2 /* inDoubleQuoteString */;
+                }
+                else if (char === `(`) {
+                    parenDepth++;
+                }
+                else if (char === `)`) {
+                    if (parenDepth > 0) {
+                        parenDepth--;
+                    }
+                    else {
+                        return i;
+                    }
+                }
+                break;
+            case 1 /* inSingleQuoteString */:
+                if (char === `'`) {
+                    state = 0 /* inParens */;
+                }
+                break;
+            case 2 /* inDoubleQuoteString */:
+                if (char === `"`) {
+                    state = 0 /* inParens */;
+                }
+                break;
+        }
+    }
+    return null;
+}
 const cssVarsPlugin = opts => {
     const { id, isProd } = opts;
     return {
         postcssPlugin: 'vue-sfc-vars',
         Declaration(decl) {
             // rewrite CSS variables
-            if (cssVarRE.test(decl.value)) {
-                decl.value = decl.value.replace(cssVarRE, (_, $1) => {
-                    return `var(--${genVarName(id, normalizeExpression($1), isProd)})`;
-                });
+            const value = decl.value;
+            if (vBindRE.test(value)) {
+                vBindRE.lastIndex = 0;
+                let transformed = '';
+                let lastIndex = 0;
+                let match;
+                while ((match = vBindRE.exec(value))) {
+                    const start = match.index + match[0].length;
+                    const end = lexBinding(value, start);
+                    if (end !== null) {
+                        const variable = normalizeExpression(value.slice(start, end));
+                        transformed +=
+                            value.slice(lastIndex, match.index) +
+                                `var(--${genVarName(id, variable, isProd)})`;
+                        lastIndex = end + 1;
+                    }
+                }
+                decl.value = transformed + value.slice(lastIndex);
             }
         }
     };
@@ -33476,6 +33540,10 @@ const ssrTransformSlotOutlet = (node, context) => {
             resolveComponentType(parent, context, true) === TRANSITION &&
             parent.children.filter(c => c.type === 1 /* ELEMENT */).length === 1) {
             method = SSR_RENDER_SLOT_INNER;
+            if (!(context.scopeId && context.slotted !== false)) {
+                args.push('null');
+            }
+            args.push('true');
         }
         node.ssrCodegenNode = createCallExpression(context.helper(method), args);
     }
@@ -34804,7 +34872,6 @@ function rewriteDefault(input, as, parserPlugins) {
         plugins: parserPlugins
     }).program.body;
     ast.forEach(node => {
-        var _a;
         if (node.type === 'ExportDefaultDeclaration') {
             s.overwrite(node.start, node.declaration.start, `const ${as} = `);
         }
@@ -34823,7 +34890,7 @@ function rewriteDefault(input, as, parserPlugins) {
                         }
                         else {
                             const end = specifierEnd(input, specifier.exported.end, node.end);
-                            s.prepend(`import { ${input.slice(specifier.local.start, specifier.local.end)} } from '${(_a = node.source) === null || _a === void 0 ? void 0 : _a.value}'\n`);
+                            s.prepend(`import { ${input.slice(specifier.local.start, specifier.local.end)} } from '${node.source.value}'\n`);
                             s.overwrite(specifier.start, end, ``);
                             s.append(`\nconst ${as} = ${specifier.local.name}`);
                             continue;
@@ -35385,7 +35452,7 @@ const DEFINE_EXPOSE = 'defineExpose';
 const WITH_DEFAULTS = 'withDefaults';
 // constants
 const DEFAULT_VAR = `__default__`;
-const isBuiltInDir = makeMap(`once,memo,if,else,else-if,slot,text,html,on,bind,model,show,cloak,is`);
+const isBuiltInDir = makeMap(`once,memo,if,for,else,else-if,slot,text,html,on,bind,model,show,cloak,is`);
 /**
  * Compile `<script setup>`
  * It requires the whole SFC descriptor because we need to handle and merge
@@ -36371,7 +36438,7 @@ function compileScript(sfc, options) {
     if (!hasDefaultExportName && filename && filename !== DEFAULT_FILENAME) {
         const match = filename.match(/([^/\\]+)\.\w+$/);
         if (match) {
-            runtimeOptions += `\n  name: '${match[1]}',`;
+            runtimeOptions += `\n  __name: '${match[1]}',`;
         }
     }
     if (hasInlinedSsrRenderFn) {
@@ -36888,7 +36955,7 @@ function resolveTemplateUsageCheckString(sfc) {
                                 code += `,v${capitalize(camelize(prop.name))}`;
                             }
                             if (prop.exp) {
-                                code += `,${processExp(prop.exp.content)}`;
+                                code += `,${processExp(prop.exp.content, prop.name)}`;
                             }
                         }
                     }
@@ -36903,8 +36970,19 @@ function resolveTemplateUsageCheckString(sfc) {
     templateUsageCheckCache.set(content, code);
     return code;
 }
-function processExp(exp) {
-    if (/ as \w|<.*>/.test(exp)) {
+const forAliasRE$1 = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
+function processExp(exp, dir) {
+    if (/ as\s+\w|<.*>|:/.test(exp)) {
+        if (dir === 'slot') {
+            exp = `(${exp})=>{}`;
+        }
+        else if (dir === 'for') {
+            const inMatch = exp.match(forAliasRE$1);
+            if (inMatch) {
+                const [, LHS, RHS] = inMatch;
+                return processExp(`(${LHS})=>{}`) + processExp(RHS);
+            }
+        }
         let ret = '';
         // has potential type cast or generic arguments that uses types
         const ast = parseExpression_1(exp, { plugins: ['typescript'] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.34",
+  "version": "3.2.37",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -33,11 +33,11 @@
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.16.4",
-    "@vue/compiler-core": "3.2.34",
-    "@vue/compiler-dom": "3.2.34",
-    "@vue/compiler-ssr": "3.2.34",
-    "@vue/reactivity-transform": "3.2.34",
-    "@vue/shared": "3.2.34",
+    "@vue/compiler-core": "3.2.37",
+    "@vue/compiler-dom": "3.2.37",
+    "@vue/compiler-ssr": "3.2.37",
+    "@vue/reactivity-transform": "3.2.37",
+    "@vue/shared": "3.2.37",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",