@vue/compiler-sfc 3.2.23 → 3.2.24

package/dist/compiler-sfc.cjs.js

@@ -1086,7 +1086,7 @@ function getImportsExpressionExp(path, hash, loc, context) {
         }
         else {
             name = `_imports_${context.imports.length}`;
-            exp = compilerCore.createSimpleExpression(name, false, loc, 2 /* CAN_HOIST */);
+            exp = compilerCore.createSimpleExpression(name, false, loc, 3 /* CAN_STRINGIFY */);
             context.imports.push({ exp, path });
         }
         if (!hash) {
@@ -1100,12 +1100,12 @@ function getImportsExpressionExp(path, hash, loc, context) {
                 h.content === hashExp);
         });
         if (existingHoistIndex > -1) {
-            return compilerCore.createSimpleExpression(`_hoisted_${existingHoistIndex + 1}`, false, loc, 2 /* CAN_HOIST */);
+            return compilerCore.createSimpleExpression(`_hoisted_${existingHoistIndex + 1}`, false, loc, 3 /* CAN_STRINGIFY */);
         }
-        return context.hoist(compilerCore.createSimpleExpression(hashExp, false, loc, 2 /* CAN_HOIST */));
+        return context.hoist(compilerCore.createSimpleExpression(hashExp, false, loc, 3 /* CAN_STRINGIFY */));
     }
     else {
-        return compilerCore.createSimpleExpression(`''`, false, loc, 2 /* CAN_HOIST */);
+        return compilerCore.createSimpleExpression(`''`, false, loc, 3 /* CAN_STRINGIFY */);
     }
 }
 
@@ -1134,7 +1134,7 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             .split(' ', 2);
                         return { url, descriptor };
                     });
-                    // data urls contains comma after the ecoding so we need to re-merge
+                    // data urls contains comma after the encoding so we need to re-merge
                     // them
                     for (let i = 0; i < imageCandidates.length; i++) {
                         const { url } = imageCandidates[i];
@@ -1178,17 +1178,17 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             if (path) {
                                 const existingImportsIndex = context.imports.findIndex(i => i.path === path);
                                 if (existingImportsIndex > -1) {
-                                    exp = compilerCore.createSimpleExpression(`_imports_${existingImportsIndex}`, false, attr.loc, 2 /* CAN_HOIST */);
+                                    exp = compilerCore.createSimpleExpression(`_imports_${existingImportsIndex}`, false, attr.loc, 3 /* CAN_STRINGIFY */);
                                 }
                                 else {
-                                    exp = compilerCore.createSimpleExpression(`_imports_${context.imports.length}`, false, attr.loc, 2 /* CAN_HOIST */);
+                                    exp = compilerCore.createSimpleExpression(`_imports_${context.imports.length}`, false, attr.loc, 3 /* CAN_STRINGIFY */);
                                     context.imports.push({ exp, path });
                                 }
                                 compoundExpression.children.push(exp);
                             }
                         }
                         else {
-                            const exp = compilerCore.createSimpleExpression(`"${url}"`, false, attr.loc, 2 /* CAN_HOIST */);
+                            const exp = compilerCore.createSimpleExpression(`"${url}"`, false, attr.loc, 3 /* CAN_STRINGIFY */);
                             compoundExpression.children.push(exp);
                         }
                         const isNotLast = imageCandidates.length - 1 > index;
@@ -1203,7 +1203,7 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                         }
                     });
                     const hoisted = context.hoist(compoundExpression);
-                    hoisted.constType = 2 /* CAN_HOIST */;
+                    hoisted.constType = 3 /* CAN_STRINGIFY */;
                     node.props[index] = {
                         type: 7 /* DIRECTIVE */,
                         name: 'bind',
@@ -3486,7 +3486,7 @@ function compileScript(sfc, options) {
                             };
                         }
                         else if (prop.value.type === 'Identifier') {
-                            // simple destucture
+                            // simple destructure
                             propsDestructuredBindings[propKey] = {
                                 local: prop.value.name
                             };
@@ -3641,7 +3641,7 @@ function compileScript(sfc, options) {
     }
     /**
      * check defaults. If the default object is an object literal with only
-     * static properties, we can directly generate more optimzied default
+     * static properties, we can directly generate more optimized default
      * declarations. Otherwise we will have to fallback to runtime merging.
      */
     function hasStaticWithDefaults() {
@@ -4327,7 +4327,7 @@ function walkObjectPattern(node, bindings, isConst, isDefineCall = false) {
         }
         else {
             // ...rest
-            // argument can only be identifer when destructuring
+            // argument can only be identifier when destructuring
             const type = isConst ? "setup-const" /* SETUP_CONST */ : "setup-let" /* SETUP_LET */;
             registerBinding(bindings, p.argument, type);
         }
@@ -4348,7 +4348,7 @@ function walkPattern(node, bindings, isConst, isDefineCall = false) {
         registerBinding(bindings, node, type);
     }
     else if (node.type === 'RestElement') {
-        // argument can only be identifer when destructuring
+        // argument can only be identifier when destructuring
         const type = isConst ? "setup-const" /* SETUP_CONST */ : "setup-let" /* SETUP_LET */;
         registerBinding(bindings, node.argument, type);
     }

package/dist/compiler-sfc.d.ts

@@ -172,7 +172,7 @@ export declare interface SFCScriptBlock extends SFCBlock {
 
 export declare interface SFCScriptCompileOptions {
     /**
-     * Scope ID for prefixing injected CSS varialbes.
+     * Scope ID for prefixing injected CSS variables.
      * This must be consistent with the `id` passed to `compileStyle`.
      */
     id: string;
@@ -214,7 +214,7 @@ export declare interface SFCScriptCompileOptions {
     inlineTemplate?: boolean;
     /**
      * Options for template compilation when inlining. Note these are options that
-     * would normally be pased to `compiler-sfc`'s own `compileTemplate()`, not
+     * would normally be passed to `compiler-sfc`'s own `compileTemplate()`, not
      * options passed to `compiler-dom`.
      */
     templateOptions?: Partial<SFCTemplateCompileOptions>;

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

@@ -15925,7 +15925,6 @@ function getUnnormalizedProps(props, callPath = []) {
 }
 function injectProp(node, prop, context) {
     let propsWithInjection;
-    const originalProps = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2];
     /**
      * 1. mergeProps(...)
      * 2. toHandlers(...)
@@ -15934,7 +15933,7 @@ function injectProp(node, prop, context) {
      *
      * we need to get the real props before normalization
      */
-    let props = originalProps;
+    let props = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2];
     let callPath = [];
     let parentCall;
     if (props &&
@@ -16942,15 +16941,6 @@ function isSingleElementRoot(root, child) {
         !isSlotOutlet(child));
 }
 function walk(node, context, doNotHoistNode = false) {
-    // Some transforms, e.g. transformAssetUrls from @vue/compiler-sfc, replaces
-    // static bindings with expressions. These expressions are guaranteed to be
-    // constant so they are still eligible for hoisting, but they are only
-    // available at runtime and therefore cannot be evaluated ahead of time.
-    // This is only a concern for pre-stringification (via transformHoist by
-    // @vue/compiler-dom), but doing it here allows us to perform only one full
-    // walk of the AST and allow `stringifyStatic` to stop walking as soon as its
-    // stringification threshold is met.
-    let canStringify = true;
     const { children } = node;
     const originalCount = children.length;
     let hoistedCount = 0;
@@ -16963,9 +16953,6 @@ function walk(node, context, doNotHoistNode = false) {
                 ? 0 /* NOT_CONSTANT */
                 : getConstantType(child, context);
             if (constantType > 0 /* NOT_CONSTANT */) {
-                if (constantType < 3 /* CAN_STRINGIFY */) {
-                    canStringify = false;
-                }
                 if (constantType >= 2 /* CAN_HOIST */) {
                     child.codegenNode.patchFlag =
                         -1 /* HOISTED */ + (` /* HOISTED */` );
@@ -16996,17 +16983,10 @@ function walk(node, context, doNotHoistNode = false) {
                 }
             }
         }
-        else if (child.type === 12 /* TEXT_CALL */) {
-            const contentType = getConstantType(child.content, context);
-            if (contentType > 0) {
-                if (contentType < 3 /* CAN_STRINGIFY */) {
-                    canStringify = false;
-                }
-                if (contentType >= 2 /* CAN_HOIST */) {
-                    child.codegenNode = context.hoist(child.codegenNode);
-                    hoistedCount++;
-                }
-            }
+        else if (child.type === 12 /* TEXT_CALL */ &&
+            getConstantType(child.content, context) >= 2 /* CAN_HOIST */) {
+            child.codegenNode = context.hoist(child.codegenNode);
+            hoistedCount++;
         }
         // walk further
         if (child.type === 1 /* ELEMENT */) {
@@ -17030,7 +17010,7 @@ function walk(node, context, doNotHoistNode = false) {
             }
         }
     }
-    if (canStringify && hoistedCount && context.transformHoist) {
+    if (hoistedCount && context.transformHoist) {
         context.transformHoist(children, context, node);
     }
     // all children were hoisted - the entire children array is hoistable.
@@ -26893,6 +26873,11 @@ function hasMultipleChildren(node) {
 /**
  * This module is Node-only.
  */
+/**
+ * Regex for replacing placeholders for embedded constant variables
+ * (e.g. import URL string constants generated by compiler-sfc)
+ */
+const expReplaceRE = /__VUE_EXP_START__(.*?)__VUE_EXP_END__/g;
 /**
  * Turn eligible hoisted static trees into stringified static nodes, e.g.
  *
@@ -26929,7 +26914,7 @@ const stringifyStatic = (children, context, parent) => {
             ec >= 5 /* ELEMENT_WITH_BINDING_COUNT */) {
             // combine all currently eligible nodes into a single static vnode call
             const staticCall = createCallExpression(context.helper(CREATE_STATIC), [
-                JSON.stringify(currentChunk.map(node => stringifyNode(node, context)).join('')),
+                JSON.stringify(currentChunk.map(node => stringifyNode(node, context)).join('')).replace(expReplaceRE, `" + $1 + "`),
                 // the 2nd argument indicates the number of DOM nodes this static vnode
                 // will insert / hydrate
                 String(currentChunk.length)
@@ -26997,7 +26982,7 @@ const replaceHoist = (node, replacement, context) => {
 const isNonStringifiable = /*#__PURE__*/ makeMap(`caption,thead,tr,th,tbody,td,tfoot,colgroup,col`);
 /**
  * for a hoisted node, analyze it and return:
- * - false: bailed (contains runtime constant)
+ * - false: bailed (contains non-stringifiable props or runtime constant)
  * - [nc, ec] where
  *   - nc is the number of nodes inside
  *   - ec is the number of element with bindings inside
@@ -27035,6 +27020,11 @@ function analyzeNode(node) {
                         (p.arg.isStatic && !isStringifiableAttr(p.arg.content, node.ns)))) {
                     return bail();
                 }
+                if (p.exp &&
+                    (p.exp.type === 8 /* COMPOUND_EXPRESSION */ ||
+                        p.exp.constType < 3 /* CAN_STRINGIFY */)) {
+                    return bail();
+                }
             }
         }
         for (let i = 0; i < node.children.length; i++) {
@@ -27090,8 +27080,15 @@ function stringifyElement(node, context) {
             }
         }
         else if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {
+            const exp = p.exp;
+            if (exp.content[0] === '_') {
+                // internally generated string constant references
+                // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin
+                res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;
+                continue;
+            }
             // constant v-bind, e.g. :foo="1"
-            let evaluated = evaluateConstant(p.exp);
+            let evaluated = evaluateConstant(exp);
             if (evaluated != null) {
                 const arg = p.arg && p.arg.content;
                 if (arg === 'class') {
@@ -32884,7 +32881,7 @@ function getImportsExpressionExp(path, hash, loc, context) {
         }
         else {
             name = `_imports_${context.imports.length}`;
-            exp = createSimpleExpression(name, false, loc, 2 /* CAN_HOIST */);
+            exp = createSimpleExpression(name, false, loc, 3 /* CAN_STRINGIFY */);
             context.imports.push({ exp, path });
         }
         if (!hash) {
@@ -32898,12 +32895,12 @@ function getImportsExpressionExp(path, hash, loc, context) {
                 h.content === hashExp);
         });
         if (existingHoistIndex > -1) {
-            return createSimpleExpression(`_hoisted_${existingHoistIndex + 1}`, false, loc, 2 /* CAN_HOIST */);
+            return createSimpleExpression(`_hoisted_${existingHoistIndex + 1}`, false, loc, 3 /* CAN_STRINGIFY */);
         }
-        return context.hoist(createSimpleExpression(hashExp, false, loc, 2 /* CAN_HOIST */));
+        return context.hoist(createSimpleExpression(hashExp, false, loc, 3 /* CAN_STRINGIFY */));
     }
     else {
-        return createSimpleExpression(`''`, false, loc, 2 /* CAN_HOIST */);
+        return createSimpleExpression(`''`, false, loc, 3 /* CAN_STRINGIFY */);
     }
 }
 
@@ -32932,7 +32929,7 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             .split(' ', 2);
                         return { url, descriptor };
                     });
-                    // data urls contains comma after the ecoding so we need to re-merge
+                    // data urls contains comma after the encoding so we need to re-merge
                     // them
                     for (let i = 0; i < imageCandidates.length; i++) {
                         const { url } = imageCandidates[i];
@@ -32976,17 +32973,17 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                             if (path) {
                                 const existingImportsIndex = context.imports.findIndex(i => i.path === path);
                                 if (existingImportsIndex > -1) {
-                                    exp = createSimpleExpression(`_imports_${existingImportsIndex}`, false, attr.loc, 2 /* CAN_HOIST */);
+                                    exp = createSimpleExpression(`_imports_${existingImportsIndex}`, false, attr.loc, 3 /* CAN_STRINGIFY */);
                                 }
                                 else {
-                                    exp = createSimpleExpression(`_imports_${context.imports.length}`, false, attr.loc, 2 /* CAN_HOIST */);
+                                    exp = createSimpleExpression(`_imports_${context.imports.length}`, false, attr.loc, 3 /* CAN_STRINGIFY */);
                                     context.imports.push({ exp, path });
                                 }
                                 compoundExpression.children.push(exp);
                             }
                         }
                         else {
-                            const exp = createSimpleExpression(`"${url}"`, false, attr.loc, 2 /* CAN_HOIST */);
+                            const exp = createSimpleExpression(`"${url}"`, false, attr.loc, 3 /* CAN_STRINGIFY */);
                             compoundExpression.children.push(exp);
                         }
                         const isNotLast = imageCandidates.length - 1 > index;
@@ -33001,7 +32998,7 @@ const transformSrcset = (node, context, options = defaultAssetUrlOptions) => {
                         }
                     });
                     const hoisted = context.hoist(compoundExpression);
-                    hoisted.constType = 2 /* CAN_HOIST */;
+                    hoisted.constType = 3 /* CAN_STRINGIFY */;
                     node.props[index] = {
                         type: 7 /* DIRECTIVE */,
                         name: 'bind',
@@ -34975,7 +34972,7 @@ function compileScript(sfc, options) {
                             };
                         }
                         else if (prop.value.type === 'Identifier') {
-                            // simple destucture
+                            // simple destructure
                             propsDestructuredBindings[propKey] = {
                                 local: prop.value.name
                             };
@@ -35130,7 +35127,7 @@ function compileScript(sfc, options) {
     }
     /**
      * check defaults. If the default object is an object literal with only
-     * static properties, we can directly generate more optimzied default
+     * static properties, we can directly generate more optimized default
      * declarations. Otherwise we will have to fallback to runtime merging.
      */
     function hasStaticWithDefaults() {
@@ -35816,7 +35813,7 @@ function walkObjectPattern(node, bindings, isConst, isDefineCall = false) {
         }
         else {
             // ...rest
-            // argument can only be identifer when destructuring
+            // argument can only be identifier when destructuring
             const type = isConst ? "setup-const" /* SETUP_CONST */ : "setup-let" /* SETUP_LET */;
             registerBinding(bindings, p.argument, type);
         }
@@ -35837,7 +35834,7 @@ function walkPattern(node, bindings, isConst, isDefineCall = false) {
         registerBinding(bindings, node, type);
     }
     else if (node.type === 'RestElement') {
-        // argument can only be identifer when destructuring
+        // argument can only be identifier when destructuring
         const type = isConst ? "setup-const" /* SETUP_CONST */ : "setup-let" /* SETUP_LET */;
         registerBinding(bindings, node.argument, type);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.23",
+  "version": "3.2.24",
   "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/vue-next/tree/master/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.15.0",
-    "@vue/compiler-core": "3.2.23",
-    "@vue/compiler-dom": "3.2.23",
-    "@vue/compiler-ssr": "3.2.23",
-    "@vue/ref-transform": "3.2.23",
-    "@vue/shared": "3.2.23",
+    "@vue/compiler-core": "3.2.24",
+    "@vue/compiler-dom": "3.2.24",
+    "@vue/compiler-ssr": "3.2.24",
+    "@vue/ref-transform": "3.2.24",
+    "@vue/shared": "3.2.24",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",