@vue/compiler-sfc 3.2.24 → 3.2.28

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; }
@@ -109,7 +109,7 @@ function sum (o) {
 var hashSum = sum;
 
 const CSS_VARS_HELPER = `useCssVars`;
-const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g;
+const cssVarRE = /\bv-bind\s*\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g;
 function genCssVarsFromList(vars, id, isProd) {
     return `{\n  ${vars
         .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
@@ -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 enableReactivityTransform = !!options.reactivityTransform ||
+        !!options.refSugar ||
+        !!options.refTransform;
+    const enablePropsTransform = !!options.reactivityTransform || !!options.propsDestructureTransform;
     const isProd = !!options.isProd;
     const genSourceMap = options.sourceMap !== false;
     let refBindings;
@@ -3303,6 +3308,7 @@ function compileScript(sfc, options) {
         scriptLang === 'tsx' ||
         scriptSetupLang === 'ts' ||
         scriptSetupLang === 'tsx';
+    // resolve parser plugins
     const plugins = [];
     if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
         plugins.push('jsx');
@@ -3327,11 +3333,11 @@ function compileScript(sfc, options) {
                 sourceType: 'module'
             }).program;
             const bindings = analyzeScriptBindings(scriptAst.body);
-            if (enableRefTransform && refTransform.shouldTransform(content)) {
+            if (enableReactivityTransform && 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 +3355,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 +3379,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);
@@ -3738,7 +3743,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 +3760,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 +3780,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) {
@@ -3795,14 +3800,20 @@ function compileScript(sfc, options) {
                 walkDeclaration(node, scriptBindings, userImportAlias);
             }
         }
-        // apply ref transform
-        if (enableRefTransform && refTransform.shouldTransform(script.content)) {
-            const { rootRefs: rootVars, importedHelpers } = refTransform.transformAST(scriptAst, s, scriptStartOffset);
-            refBindings = rootVars;
+        // apply reactivity transform
+        if (enableReactivityTransform && reactivityTransform.shouldTransform(script.content)) {
+            const { rootRefs, importedHelpers } = reactivityTransform.transformAST(scriptAst, s, scriptStartOffset);
+            refBindings = rootRefs;
             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, {
@@ -3977,10 +3988,12 @@ function compileScript(sfc, options) {
             }
         }
     }
-    // 3. Apply ref sugar transform
-    if ((enableRefTransform && refTransform.shouldTransform(scriptSetup.content)) ||
+    // 3. Apply reactivity transform
+    if ((enableReactivityTransform &&
+        // normal <script> had ref bindings that maybe used in <script setup>
+        (refBindings || 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 +4218,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  ` +
@@ -8414,7 +8422,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 +14999,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 +15013,7 @@ var parse$2 = function(input) {
         tokens.push({
           type: "space",
           sourceIndex: pos,
+          sourceEndIndex: next,
           value: token
         });
       }
@@ -15031,22 +15045,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 +15083,7 @@ var parse$2 = function(input) {
       tokens.push({
         type: "word",
         sourceIndex: pos - before.length,
+        sourceEndIndex: pos + token.length,
         value: token
       });
       pos += 1;
@@ -15078,6 +15096,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 +15152,7 @@ var parse$2 = function(input) {
               {
                 type: "word",
                 sourceIndex: pos,
+                sourceEndIndex: whitespacePos + 1,
                 value: value.slice(pos, whitespacePos + 1)
               }
             ];
@@ -15144,21 +15164,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 +15196,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 +15245,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 +15263,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 +17280,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)[];
 }
@@ -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;
     /**