@vue/compiler-sfc 3.2.23 → 3.2.27

package/dist/compiler-sfc.cjs.js

@@ -14,7 +14,7 @@ var url = require('url');
 var CompilerSSR = require('@vue/compiler-ssr');
 var fs = require('fs');
 var util$2 = require('util');
-var refTransform = require('@vue/ref-transform');
+var reactivityTransform = require('@vue/reactivity-transform');
 var _postcss = require('postcss');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
@@ -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',
@@ -3276,6 +3276,8 @@ const DEFINE_PROPS = 'defineProps';
 const DEFINE_EMITS = 'defineEmits';
 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`);
 /**
  * Compile `<script setup>`
@@ -3285,8 +3287,11 @@ const isBuiltInDir = shared.makeMap(`once,memo,if,else,else-if,slot,text,html,on
 function compileScript(sfc, options) {
     let { script, scriptSetup, source, filename } = sfc;
     // feature flags
-    const enableRefTransform = !!options.refSugar || !!options.refTransform;
-    const enablePropsTransform = !!options.propsDestructureTransform;
+    // TODO remove support for deprecated options when out of experimental
+    const enableRefTransform = !!options.reactivityTransform ||
+        !!options.refSugar ||
+        !!options.refTransform;
+    const enablePropsTransform = !!options.reactivityTransform || !!options.propsDestructureTransform;
     const isProd = !!options.isProd;
     const genSourceMap = options.sourceMap !== false;
     let refBindings;
@@ -3327,11 +3332,11 @@ function compileScript(sfc, options) {
                 sourceType: 'module'
             }).program;
             const bindings = analyzeScriptBindings(scriptAst.body);
-            if (enableRefTransform && refTransform.shouldTransform(content)) {
+            if (enableRefTransform && reactivityTransform.shouldTransform(content)) {
                 const s = new MagicString__default(source);
                 const startOffset = script.loc.start.offset;
                 const endOffset = script.loc.end.offset;
-                const { importedHelpers } = refTransform.transformAST(scriptAst, s, startOffset);
+                const { importedHelpers } = reactivityTransform.transformAST(scriptAst, s, startOffset);
                 if (importedHelpers.length) {
                     s.prepend(`import { ${importedHelpers
                         .map(h => `${h} as _${h}`)
@@ -3349,9 +3354,9 @@ function compileScript(sfc, options) {
                 }
             }
             if (cssVars.length) {
-                content = rewriteDefault(content, `__default__`, plugins);
+                content = rewriteDefault(content, DEFAULT_VAR, plugins);
                 content += genNormalScriptCssVarsCode(cssVars, bindings, scopeId, isProd);
-                content += `\nexport default __default__`;
+                content += `\nexport default ${DEFAULT_VAR}`;
             }
             return Object.assign(Object.assign({}, script), { content,
                 map,
@@ -3373,7 +3378,6 @@ function compileScript(sfc, options) {
     }
     // metadata that needs to be returned
     const bindingMetadata = {};
-    const defaultTempVar = `__default__`;
     const helperImports = new Set();
     const userImports = Object.create(null);
     const userImportAlias = Object.create(null);
@@ -3486,7 +3490,7 @@ function compileScript(sfc, options) {
                             };
                         }
                         else if (prop.value.type === 'Identifier') {
-                            // simple destucture
+                            // simple destructure
                             propsDestructuredBindings[propKey] = {
                                 local: prop.value.name
                             };
@@ -3641,7 +3645,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() {
@@ -3738,7 +3742,6 @@ function compileScript(sfc, options) {
     // 1. process normal <script> first if it exists
     let scriptAst;
     if (script) {
-        // import dedupe between <script> and <script setup>
         scriptAst = parse(script.content, {
             plugins,
             sourceType: 'module'
@@ -3756,9 +3759,10 @@ function compileScript(sfc, options) {
             else if (node.type === 'ExportDefaultDeclaration') {
                 // export default
                 defaultExport = node;
+                // export default { ... } --> const __default__ = { ... }
                 const start = node.start + scriptStartOffset;
                 const end = node.declaration.start + scriptStartOffset;
-                s.overwrite(start, end, `const ${defaultTempVar} = `);
+                s.overwrite(start, end, `const ${DEFAULT_VAR} = `);
             }
             else if (node.type === 'ExportNamedDeclaration') {
                 const defaultSpecifier = node.specifiers.find(s => s.exported.type === 'Identifier' && s.exported.name === 'default');
@@ -3775,12 +3779,12 @@ function compileScript(sfc, options) {
                         // export { x as default } from './x'
                         // rewrite to `import { x as __default__ } from './x'` and
                         // add to top
-                        s.prepend(`import { ${defaultSpecifier.local.name} as ${defaultTempVar} } from '${node.source.value}'\n`);
+                        s.prepend(`import { ${defaultSpecifier.local.name} as ${DEFAULT_VAR} } from '${node.source.value}'\n`);
                     }
                     else {
                         // export { x as default }
                         // rewrite to `const __default__ = x` and move to end
-                        s.append(`\nconst ${defaultTempVar} = ${defaultSpecifier.local.name}\n`);
+                        s.appendLeft(scriptEndOffset, `\nconst ${DEFAULT_VAR} = ${defaultSpecifier.local.name}\n`);
                     }
                 }
                 if (node.declaration) {
@@ -3796,13 +3800,19 @@ function compileScript(sfc, options) {
             }
         }
         // apply ref transform
-        if (enableRefTransform && refTransform.shouldTransform(script.content)) {
-            const { rootRefs: rootVars, importedHelpers } = refTransform.transformAST(scriptAst, s, scriptStartOffset);
+        if (enableRefTransform && reactivityTransform.shouldTransform(script.content)) {
+            const { rootRefs: rootVars, importedHelpers } = reactivityTransform.transformAST(scriptAst, s, scriptStartOffset);
             refBindings = rootVars;
             for (const h of importedHelpers) {
                 helperImports.add(h);
             }
         }
+        // <script> after <script setup>
+        // we need to move the block up so that `const __default__` is
+        // declared before being used in the actual component definition
+        if (scriptStartOffset > startOffset) {
+            s.move(scriptStartOffset, scriptEndOffset, 0);
+        }
     }
     // 2. parse <script setup> and  walk over top level statements
     const scriptSetupAst = parse(scriptSetup.content, {
@@ -3978,9 +3988,9 @@ function compileScript(sfc, options) {
         }
     }
     // 3. Apply ref sugar transform
-    if ((enableRefTransform && refTransform.shouldTransform(scriptSetup.content)) ||
+    if ((enableRefTransform && reactivityTransform.shouldTransform(scriptSetup.content)) ||
         propsDestructureDecl) {
-        const { rootRefs, importedHelpers } = refTransform.transformAST(scriptSetupAst, s, startOffset, refBindings, propsDestructuredBindings, !enableRefTransform);
+        const { rootRefs, importedHelpers } = reactivityTransform.transformAST(scriptSetupAst, s, startOffset, refBindings, propsDestructuredBindings);
         refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs;
         for (const h of importedHelpers) {
             helperImports.add(h);
@@ -4205,29 +4215,24 @@ 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`;
+    // wrap setup code with function.
     if (isTS) {
         // for TS, make sure the exported type is still valid type with
         // correct props information
         // we have to use object spread for types to be merged properly
         // user's TS setting should compile it down to proper targets
-        const def = defaultExport ? `\n  ...${defaultTempVar},` : ``;
-        // wrap setup code with function.
-        // export the content of <script setup> as a named export, `setup`.
-        // this allows `import { setup } from '*.vue'` for testing purposes.
-        if (defaultExport) {
-            s.prependLeft(startOffset, `\n${hasAwait ? `async ` : ``}function setup(${args}) {\n`);
-            s.append(`\nexport default /*#__PURE__*/${helper(`defineComponent`)}({${def}${runtimeOptions}\n  setup})`);
-        }
-        else {
-            s.prependLeft(startOffset, `\nexport default /*#__PURE__*/${helper(`defineComponent`)}({${def}${runtimeOptions}\n  ${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`);
-            s.appendRight(endOffset, `})`);
-        }
+        // export default defineComponent({ ...__default__, ... })
+        const def = defaultExport ? `\n  ...${DEFAULT_VAR},` : ``;
+        s.prependLeft(startOffset, `\nexport default /*#__PURE__*/${helper(`defineComponent`)}({${def}${runtimeOptions}\n  ${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`);
+        s.appendRight(endOffset, `})`);
     }
     else {
         if (defaultExport) {
-            // can't rely on spread operator in non ts mode
-            s.prependLeft(startOffset, `\n${hasAwait ? `async ` : ``}function setup(${args}) {\n`);
-            s.append(`\nexport default /*#__PURE__*/ Object.assign(${defaultTempVar}, {${runtimeOptions}\n  setup\n})\n`);
+            // without TS, can't rely on rest spread, so we use Object.assign
+            // export default Object.assign(__default__, { ... })
+            s.prependLeft(startOffset, `\nexport default /*#__PURE__*/Object.assign(${DEFAULT_VAR}, {${runtimeOptions}\n  ` +
+                `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`);
+            s.appendRight(endOffset, `})`);
         }
         else {
             s.prependLeft(startOffset, `\nexport default {${runtimeOptions}\n  ` +
@@ -4327,7 +4332,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 +4353,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);
     }
@@ -8414,7 +8419,11 @@ var Parser = /*#__PURE__*/function () {
     }
 
     var hasClass = indexesOf(word, '.').filter(function (i) {
-      return word[i - 1] !== '\\';
+      // Allow escaped dot within class name
+      var escapedDot = word[i - 1] === '\\'; // Allow decimal numbers percent in @keyframes
+
+      var isKeyframesPercent = /^\d+\.\d+%$/.test(word);
+      return !escapedDot && !isKeyframesPercent;
     });
     var hasId = indexesOf(word, '#').filter(function (i) {
       return word[i - 1] !== '\\';
@@ -14987,6 +14996,7 @@ var parse$2 = function(input) {
         after = token;
       } else if (prev && prev.type === "div") {
         prev.after = token;
+        prev.sourceEndIndex += token.length;
       } else if (
         code === comma ||
         code === colon ||
@@ -15000,6 +15010,7 @@ var parse$2 = function(input) {
         tokens.push({
           type: "space",
           sourceIndex: pos,
+          sourceEndIndex: next,
           value: token
         });
       }
@@ -15031,22 +15042,25 @@ var parse$2 = function(input) {
         }
       } while (escape);
       token.value = value.slice(pos + 1, next);
-
+      token.sourceEndIndex = token.unclosed ? next : next + 1;
       tokens.push(token);
       pos = next + 1;
       code = value.charCodeAt(pos);
 
       // Comments
     } else if (code === slash && value.charCodeAt(pos + 1) === star) {
+      next = value.indexOf("*/", pos);
+
       token = {
         type: "comment",
-        sourceIndex: pos
+        sourceIndex: pos,
+        sourceEndIndex: next + 2
       };
 
-      next = value.indexOf("*/", pos);
       if (next === -1) {
         token.unclosed = true;
         next = value.length;
+        token.sourceEndIndex = next;
       }
 
       token.value = value.slice(pos + 2, next);
@@ -15066,6 +15080,7 @@ var parse$2 = function(input) {
       tokens.push({
         type: "word",
         sourceIndex: pos - before.length,
+        sourceEndIndex: pos + token.length,
         value: token
       });
       pos += 1;
@@ -15078,6 +15093,7 @@ var parse$2 = function(input) {
       tokens.push({
         type: "div",
         sourceIndex: pos - before.length,
+        sourceEndIndex: pos + token.length,
         value: token,
         before: before,
         after: ""
@@ -15133,6 +15149,7 @@ var parse$2 = function(input) {
               {
                 type: "word",
                 sourceIndex: pos,
+                sourceEndIndex: whitespacePos + 1,
                 value: value.slice(pos, whitespacePos + 1)
               }
             ];
@@ -15144,21 +15161,25 @@ var parse$2 = function(input) {
             token.nodes.push({
               type: "space",
               sourceIndex: whitespacePos + 1,
+              sourceEndIndex: next,
               value: value.slice(whitespacePos + 1, next)
             });
           } else {
             token.after = value.slice(whitespacePos + 1, next);
+            token.sourceEndIndex = next;
           }
         } else {
           token.after = "";
           token.nodes = [];
         }
         pos = next + 1;
+        token.sourceEndIndex = token.unclosed ? next : pos;
         code = value.charCodeAt(pos);
         tokens.push(token);
       } else {
         balanced += 1;
         token.after = "";
+        token.sourceEndIndex = pos + 1;
         tokens.push(token);
         stack.push(token);
         tokens = token.nodes = [];
@@ -15172,8 +15193,10 @@ var parse$2 = function(input) {
       code = value.charCodeAt(pos);
 
       parent.after = after;
+      parent.sourceEndIndex += after.length;
       after = "";
       balanced -= 1;
+      stack[stack.length - 1].sourceEndIndex = pos;
       stack.pop();
       parent = stack[balanced];
       tokens = parent.nodes;
@@ -15219,12 +15242,14 @@ var parse$2 = function(input) {
         tokens.push({
           type: "unicode-range",
           sourceIndex: pos,
+          sourceEndIndex: next,
           value: token
         });
       } else {
         tokens.push({
           type: "word",
           sourceIndex: pos,
+          sourceEndIndex: next,
           value: token
         });
       }
@@ -15235,6 +15260,7 @@ var parse$2 = function(input) {
 
   for (pos = stack.length - 1; pos; pos -= 1) {
     stack[pos].unclosed = true;
+    stack[pos].sourceEndIndex = value.length;
   }
 
   return stack[0].nodes;
@@ -17251,9 +17277,9 @@ exports.generateCodeFrame = compilerCore.generateCodeFrame;
 exports.isInDestructureAssignment = compilerCore.isInDestructureAssignment;
 exports.isStaticProperty = compilerCore.isStaticProperty;
 exports.walkIdentifiers = compilerCore.walkIdentifiers;
-exports.shouldTransformRef = refTransform.shouldTransform;
-exports.transformRef = refTransform.transform;
-exports.transformRefAST = refTransform.transformAST;
+exports.shouldTransformRef = reactivityTransform.shouldTransform;
+exports.transformRef = reactivityTransform.transform;
+exports.transformRefAST = reactivityTransform.transformAST;
 exports.compileScript = compileScript;
 exports.compileStyle = compileStyle;
 exports.compileStyleAsync = compileStyleAsync;

package/dist/compiler-sfc.d.ts

@@ -15,13 +15,13 @@ import { ParserPlugin } from '@babel/parser';
 import { RawSourceMap } from 'source-map';
 import { Result } from 'postcss';
 import { RootNode } from '@vue/compiler-core';
-import { shouldTransform as shouldTransformRef } from '@vue/ref-transform';
+import { shouldTransform as shouldTransformRef } from '@vue/reactivity-transform';
 import { SourceLocation } from '@vue/compiler-core';
-import { transform as transformRef } from '@vue/ref-transform';
-import { transformAST as transformRefAST } from '@vue/ref-transform';
+import { transform as transformRef } from '@vue/reactivity-transform';
+import { transformAST as transformRefAST } from '@vue/reactivity-transform';
 import { walkIdentifiers } from '@vue/compiler-core';
 
-declare interface AssetURLOptions {
+export declare interface AssetURLOptions {
     /**
      * If base is provided, instead of transforming relative asset urls into
      * imports, they will be directly rewritten to absolute urls.
@@ -34,7 +34,7 @@ declare interface AssetURLOptions {
     tags?: AssetURLTagConfig;
 }
 
-declare interface AssetURLTagConfig {
+export declare interface AssetURLTagConfig {
     [name: string]: string[];
 }
 
@@ -150,7 +150,7 @@ export declare interface SFCParseOptions {
     compiler?: TemplateCompiler;
 }
 
-declare interface SFCParseResult {
+export declare interface SFCParseResult {
     descriptor: SFCDescriptor;
     errors: (CompilerError | SyntaxError)[];
 }
@@ -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;
@@ -188,20 +188,27 @@ export declare interface SFCScriptCompileOptions {
      * https://babeljs.io/docs/en/babel-parser#plugins
      */
     babelParserPlugins?: ParserPlugin[];
+    /**
+     * (Experimental) Enable syntax transform for using refs without `.value` and
+     * using destructured props with reactivity
+     */
+    reactivityTransform?: boolean;
     /**
      * (Experimental) Enable syntax transform for using refs without `.value`
      * https://github.com/vuejs/rfcs/discussions/369
+     * @deprecated now part of `reactivityTransform`
      * @default false
      */
     refTransform?: boolean;
     /**
      * (Experimental) Enable syntax transform for destructuring from defineProps()
      * https://github.com/vuejs/rfcs/discussions/394
+     * @deprecated now part of `reactivityTransform`
      * @default false
      */
     propsDestructureTransform?: boolean;
     /**
-     * @deprecated use `refTransform` instead.
+     * @deprecated use `reactivityTransform` instead.
      */
     refSugar?: boolean;
     /**
@@ -214,7 +221,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>;