@vue/compiler-dom 3.1.1 → 3.1.5

package/dist/compiler-dom.global.js

@@ -48,11 +48,20 @@ var VueCompilerDOM = (function (exports) {
 
   const range = 2;
   function generateCodeFrame(source, start = 0, end = source.length) {
-      const lines = source.split(/\r?\n/);
+      // Split the content into individual lines but capture the newline sequence
+      // that separated each line. This is important because the actual sequence is
+      // needed to properly take into account the full line length for offset
+      // comparison
+      let lines = source.split(/(\r?\n)/);
+      // Separate the lines and newline sequences into separate arrays for easier referencing
+      const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);
+      lines = lines.filter((_, idx) => idx % 2 === 0);
       let count = 0;
       const res = [];
       for (let i = 0; i < lines.length; i++) {
-          count += lines[i].length + 1;
+          count +=
+              lines[i].length +
+                  ((newlineSequences[i] && newlineSequences[i].length) || 0);
           if (count >= start) {
               for (let j = i - range; j <= i + range || end > count; j++) {
                   if (j < 0 || j >= lines.length)
@@ -60,9 +69,10 @@ var VueCompilerDOM = (function (exports) {
                   const line = j + 1;
                   res.push(`${line}${' '.repeat(Math.max(3 - String(line).length, 0))}|  ${lines[j]}`);
                   const lineLength = lines[j].length;
+                  const newLineSeqLength = (newlineSequences[j] && newlineSequences[j].length) || 0;
                   if (j === i) {
                       // push underline
-                      const pad = start - (count - lineLength) + 1;
+                      const pad = start - (count - (lineLength + newLineSeqLength));
                       const length = Math.max(1, end > count ? lineLength - pad : end - start);
                       res.push(`   |  ` + ' '.repeat(pad) + '^'.repeat(length));
                   }
@@ -71,7 +81,7 @@ var VueCompilerDOM = (function (exports) {
                           const length = Math.max(Math.min(end - count, lineLength), 1);
                           res.push(`   |  ` + '^'.repeat(length));
                       }
-                      count += lineLength + 1;
+                      count += lineLength + newLineSeqLength;
                   }
               }
               break;
@@ -518,18 +528,84 @@ var VueCompilerDOM = (function (exports) {
   }
   const nonIdentifierRE = /^\d|[^\$\w]/;
   const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
-  const memberExpRE = /^[A-Za-z_$\xA0-\uFFFF][\w$\xA0-\uFFFF]*(?:\s*\.\s*[A-Za-z_$\xA0-\uFFFF][\w$\xA0-\uFFFF]*|\[(.+)\])*$/;
+  const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/;
+  const validIdentCharRE = /[\.\?\w$\xA0-\uFFFF]/;
+  const whitespaceRE = /\s+[.[]\s*|\s*[.[]\s+/g;
+  /**
+   * Simple lexer to check if an expression is a member expression. This is
+   * lax and only checks validity at the root level (i.e. does not validate exps
+   * inside square brackets), but it's ok since these are only used on template
+   * expressions and false positives are invalid expressions in the first place.
+   */
   const isMemberExpression = (path) => {
-      if (!path)
-          return false;
-      const matched = memberExpRE.exec(path.trim());
-      if (!matched)
-          return false;
-      if (!matched[1])
-          return true;
-      if (!/[\[\]]/.test(matched[1]))
-          return true;
-      return isMemberExpression(matched[1].trim());
+      // remove whitespaces around . or [ first
+      path = path.trim().replace(whitespaceRE, s => s.trim());
+      let state = 0 /* inMemberExp */;
+      let stateStack = [];
+      let currentOpenBracketCount = 0;
+      let currentOpenParensCount = 0;
+      let currentStringType = null;
+      for (let i = 0; i < path.length; i++) {
+          const char = path.charAt(i);
+          switch (state) {
+              case 0 /* inMemberExp */:
+                  if (char === '[') {
+                      stateStack.push(state);
+                      state = 1 /* inBrackets */;
+                      currentOpenBracketCount++;
+                  }
+                  else if (char === '(') {
+                      stateStack.push(state);
+                      state = 2 /* inParens */;
+                      currentOpenParensCount++;
+                  }
+                  else if (!(i === 0 ? validFirstIdentCharRE : validIdentCharRE).test(char)) {
+                      return false;
+                  }
+                  break;
+              case 1 /* inBrackets */:
+                  if (char === `'` || char === `"` || char === '`') {
+                      stateStack.push(state);
+                      state = 3 /* inString */;
+                      currentStringType = char;
+                  }
+                  else if (char === `[`) {
+                      currentOpenBracketCount++;
+                  }
+                  else if (char === `]`) {
+                      if (!--currentOpenBracketCount) {
+                          state = stateStack.pop();
+                      }
+                  }
+                  break;
+              case 2 /* inParens */:
+                  if (char === `'` || char === `"` || char === '`') {
+                      stateStack.push(state);
+                      state = 3 /* inString */;
+                      currentStringType = char;
+                  }
+                  else if (char === `(`) {
+                      currentOpenParensCount++;
+                  }
+                  else if (char === `)`) {
+                      // if the exp ends as a call then it should not be considered valid
+                      if (i === path.length - 1) {
+                          return false;
+                      }
+                      if (!--currentOpenParensCount) {
+                          state = stateStack.pop();
+                      }
+                  }
+                  break;
+              case 3 /* inString */:
+                  if (char === currentStringType) {
+                      state = stateStack.pop();
+                      currentStringType = null;
+                  }
+                  break;
+          }
+      }
+      return !currentOpenBracketCount && !currentOpenParensCount;
   };
   function getInnerRange(loc, offset, length) {
       const source = loc.source.substr(offset, length);
@@ -1098,6 +1174,10 @@ var VueCompilerDOM = (function (exports) {
       const isPreBoundary = context.inPre && !wasInPre;
       const isVPreBoundary = context.inVPre && !wasInVPre;
       if (element.isSelfClosing || context.options.isVoidTag(element.tag)) {
+          // #4030 self-closing <pre> tag
+          if (context.options.isPreTag(element.tag)) {
+              context.inPre = false;
+          }
           return element;
       }
       // Children.
@@ -1153,12 +1233,13 @@ var VueCompilerDOM = (function (exports) {
       // save current state in case we need to re-parse attributes with v-pre
       const cursor = getCursor(context);
       const currentSource = context.source;
-      // Attributes.
-      let props = parseAttributes(context, type);
       // check <pre> tag
-      if (context.options.isPreTag(tag)) {
+      const isPreTag = context.options.isPreTag(tag);
+      if (isPreTag) {
           context.inPre = true;
       }
+      // Attributes.
+      let props = parseAttributes(context, type);
       // check v-pre
       if (type === 0 /* Start */ &&
           !context.inVPre &&
@@ -1205,41 +1286,17 @@ var VueCompilerDOM = (function (exports) {
           }
       }
       let tagType = 0 /* ELEMENT */;
-      const options = context.options;
-      if (!context.inVPre && !options.isCustomElement(tag)) {
-          const hasVIs = props.some(p => {
-              if (p.name !== 'is')
-                  return;
-              // v-is="xxx" (TODO: deprecate)
-              if (p.type === 7 /* DIRECTIVE */) {
-                  return true;
-              }
-              // is="vue:xxx"
-              if (p.value && p.value.content.startsWith('vue:')) {
-                  return true;
-              }
-              // in compat mode, any is usage is considered a component
-              if (checkCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context, p.loc)) {
-                  return true;
-              }
-          });
-          if (options.isNativeTag && !hasVIs) {
-              if (!options.isNativeTag(tag))
-                  tagType = 1 /* COMPONENT */;
-          }
-          else if (hasVIs ||
-              isCoreComponent(tag) ||
-              (options.isBuiltInComponent && options.isBuiltInComponent(tag)) ||
-              /^[A-Z]/.test(tag) ||
-              tag === 'component') {
-              tagType = 1 /* COMPONENT */;
-          }
+      if (!context.inVPre) {
           if (tag === 'slot') {
               tagType = 2 /* SLOT */;
           }
-          else if (tag === 'template' &&
-              props.some(p => p.type === 7 /* DIRECTIVE */ && isSpecialTemplateDirective(p.name))) {
-              tagType = 3 /* TEMPLATE */;
+          else if (tag === 'template') {
+              if (props.some(p => p.type === 7 /* DIRECTIVE */ && isSpecialTemplateDirective(p.name))) {
+                  tagType = 3 /* TEMPLATE */;
+              }
+          }
+          else if (isComponent(tag, props, context)) {
+              tagType = 1 /* COMPONENT */;
           }
       }
       return {
@@ -1254,6 +1311,49 @@ var VueCompilerDOM = (function (exports) {
           codegenNode: undefined // to be created during transform phase
       };
   }
+  function isComponent(tag, props, context) {
+      const options = context.options;
+      if (options.isCustomElement(tag)) {
+          return false;
+      }
+      if (tag === 'component' ||
+          /^[A-Z]/.test(tag) ||
+          isCoreComponent(tag) ||
+          (options.isBuiltInComponent && options.isBuiltInComponent(tag)) ||
+          (options.isNativeTag && !options.isNativeTag(tag))) {
+          return true;
+      }
+      // at this point the tag should be a native tag, but check for potential "is"
+      // casting
+      for (let i = 0; i < props.length; i++) {
+          const p = props[i];
+          if (p.type === 6 /* ATTRIBUTE */) {
+              if (p.name === 'is' && p.value) {
+                  if (p.value.content.startsWith('vue:')) {
+                      return true;
+                  }
+                  else if (checkCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context, p.loc)) {
+                      return true;
+                  }
+              }
+          }
+          else {
+              // directive
+              // v-is (TODO Deprecate)
+              if (p.name === 'is') {
+                  return true;
+              }
+              else if (
+              // :is on plain element - only treat as component in compat mode
+              p.name === 'bind' &&
+                  isBindKey(p.arg, 'is') &&
+                  true &&
+                  checkCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context, p.loc)) {
+                  return true;
+              }
+          }
+      }
+  }
   function parseAttributes(context, type) {
       const props = [];
       const attributeNames = new Set();
@@ -2116,7 +2216,7 @@ var VueCompilerDOM = (function (exports) {
   }
 
   const PURE_ANNOTATION = `/*#__PURE__*/`;
-  function createCodegenContext(ast, { mode = 'function', prefixIdentifiers = mode === 'module', sourceMap = false, filename = `template.vue.html`, scopeId = null, optimizeImports = false, runtimeGlobalName = `Vue`, runtimeModuleName = `vue`, ssr = false }) {
+  function createCodegenContext(ast, { mode = 'function', prefixIdentifiers = mode === 'module', sourceMap = false, filename = `template.vue.html`, scopeId = null, optimizeImports = false, runtimeGlobalName = `Vue`, runtimeModuleName = `vue`, ssr = false, isTS = false }) {
       const context = {
           mode,
           prefixIdentifiers,
@@ -2127,6 +2227,7 @@ var VueCompilerDOM = (function (exports) {
           runtimeGlobalName,
           runtimeModuleName,
           ssr,
+          isTS,
           source: ast.loc.source,
           code: ``,
           column: 1,
@@ -2282,7 +2383,7 @@ var VueCompilerDOM = (function (exports) {
       newline();
       push(`return `);
   }
-  function genAssets(assets, type, { helper, push, newline }) {
+  function genAssets(assets, type, { helper, push, newline, isTS }) {
       const resolver = helper(type === 'filter'
           ? RESOLVE_FILTER
           : type === 'component'
@@ -2295,7 +2396,7 @@ var VueCompilerDOM = (function (exports) {
           if (maybeSelfReference) {
               id = id.slice(0, -6);
           }
-          push(`const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${maybeSelfReference ? `, true` : ``})`);
+          push(`const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${maybeSelfReference ? `, true` : ``})${isTS ? `!` : ``}`);
           if (i < assets.length - 1) {
               newline();
           }
@@ -3403,7 +3504,8 @@ var VueCompilerDOM = (function (exports) {
           switch (child.type) {
               case 1 /* ELEMENT */:
                   if (child.tagType === 2 /* SLOT */ ||
-                      (child.tagType === 0 /* ELEMENT */ &&
+                      ((child.tagType === 0 /* ELEMENT */ ||
+                          child.tagType === 3 /* TEMPLATE */) &&
                           hasForwardedSlots(child.children))) {
                       return true;
                   }
@@ -3567,16 +3669,10 @@ var VueCompilerDOM = (function (exports) {
       let { tag } = node;
       // 1. dynamic component
       const isExplicitDynamic = isComponentTag(tag);
-      const isProp = findProp(node, 'is') || (!isExplicitDynamic && findDir(node, 'is'));
+      const isProp = findProp(node, 'is');
       if (isProp) {
-          if (!isExplicitDynamic && isProp.type === 6 /* ATTRIBUTE */) {
-              // <button is="vue:xxx">
-              // if not <component>, only is value that starts with "vue:" will be
-              // treated as component by the parse phase and reach here, unless it's
-              // compat mode where all is values are considered components
-              tag = isProp.value.content.replace(/^vue:/, '');
-          }
-          else {
+          if (isExplicitDynamic ||
+              (isCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context))) {
               const exp = isProp.type === 6 /* ATTRIBUTE */
                   ? isProp.value && createSimpleExpression(isProp.value.content, true)
                   : isProp.exp;
@@ -3586,6 +3682,21 @@ var VueCompilerDOM = (function (exports) {
                   ]);
               }
           }
+          else if (isProp.type === 6 /* ATTRIBUTE */ &&
+              isProp.value.content.startsWith('vue:')) {
+              // <button is="vue:xxx">
+              // if not <component>, only is value that starts with "vue:" will be
+              // treated as component by the parse phase and reach here, unless it's
+              // compat mode where all is values are considered components
+              tag = isProp.value.content.slice(4);
+          }
+      }
+      // 1.5 v-is (TODO: Deprecate)
+      const isDir = !isExplicitDynamic && findDir(node, 'is');
+      if (isDir && isDir.exp) {
+          return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
+              isDir.exp
+          ]);
       }
       // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)
       const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);
@@ -3669,7 +3780,9 @@ var VueCompilerDOM = (function (exports) {
               }
               // skip is on <component>, or is="vue:xxx"
               if (name === 'is' &&
-                  (isComponentTag(tag) || (value && value.content.startsWith('vue:')))) {
+                  (isComponentTag(tag) ||
+                      (value && value.content.startsWith('vue:')) ||
+                      (isCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context)))) {
                   continue;
               }
               properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', isStatic, value ? value.loc : loc)));
@@ -3692,7 +3805,10 @@ var VueCompilerDOM = (function (exports) {
               }
               // skip v-is and :is on <component>
               if (name === 'is' ||
-                  (isVBind && isComponentTag(tag) && isBindKey(arg, 'is'))) {
+                  (isVBind &&
+                      isBindKey(arg, 'is') &&
+                      (isComponentTag(tag) ||
+                          (isCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context))))) {
                   continue;
               }
               // skip v-on in SSR compilation
@@ -4217,7 +4333,7 @@ var VueCompilerDOM = (function (exports) {
       // _unref(exp)
       context.bindingMetadata[rawExp];
       const maybeRef = !true    /* SETUP_CONST */;
-      if (!isMemberExpression(expString) && !maybeRef) {
+      if (!expString.trim() || (!isMemberExpression(expString) && !maybeRef)) {
           context.onError(createCompilerError(41 /* X_V_MODEL_MALFORMED_EXPRESSION */, exp.loc));
           return createTransformProps();
       }