Bug 1577268 - Add vue extension to list of javascript mode extensions r=jlast
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 30 Aug 2019 00:44:31 +0000
changeset 551291 7fc94ef6628b3385efbac25f44a00318bda4d7d8
parent 551290 4a4f6df85daaafbf4b656e90910b65af59821361
child 551292 4b798ea49b3a88f6b01148a66f9b9987b6fad40a
push id11865
push userbtara@mozilla.com
push dateMon, 02 Sep 2019 08:54:37 +0000
treeherdermozilla-beta@37f59c4671b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1577268
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1577268 - Add vue extension to list of javascript mode extensions r=jlast Differential Revision: https://phabricator.services.mozilla.com/D43981
devtools/client/debugger/src/utils/source.js
devtools/client/debugger/src/utils/tests/source.spec.js
--- a/devtools/client/debugger/src/utils/source.js
+++ b/devtools/client/debugger/src/utils/source.js
@@ -37,35 +37,17 @@ type transformUrlCallback = string => st
 export const sourceTypes = {
   coffee: "coffeescript",
   js: "javascript",
   jsx: "react",
   ts: "typescript",
   vue: "vue",
 };
 
-/**
- * Trims the query part or reference identifier of a url string, if necessary.
- *
- * @memberof utils/source
- * @static
- */
-function trimUrlQuery(url: string): string {
-  const length = url.length;
-  const q1 = url.indexOf("?");
-  const q2 = url.indexOf("&");
-  const q3 = url.indexOf("#");
-  const q = Math.min(
-    q1 != -1 ? q1 : length,
-    q2 != -1 ? q2 : length,
-    q3 != -1 ? q3 : length
-  );
-
-  return url.slice(0, q);
-}
+const javascriptLikeExtensions = ["marko", "es6", "vue", "jsm"];
 
 export function shouldBlackbox(source: ?Source) {
   if (!source) {
     return false;
   }
 
   if (!source.url) {
     return false;
@@ -84,20 +66,20 @@ export function shouldBlackbox(source: ?
  *
  * @return boolean
  *         True if the source is likely javascript.
  *
  * @memberof utils/source
  * @static
  */
 export function isJavaScript(source: Source, content: SourceContent): boolean {
-  const url = source.url;
+  const extension = getFileExtension(source).toLowerCase();
   const contentType = content.type === "wasm" ? null : content.contentType;
   return (
-    (url && /\.(jsm|js)?$/.test(trimUrlQuery(url))) ||
+    javascriptLikeExtensions.includes(extension) ||
     !!(contentType && contentType.includes("javascript"))
   );
 }
 
 /**
  * @memberof utils/source
  * @static
  */
@@ -305,60 +287,57 @@ export function getSourceLineCount(conte
  * @static
  */
 // eslint-disable-next-line complexity
 export function getMode(
   source: Source,
   content: SourceContent,
   symbols?: Symbols
 ): { name: string, base?: Object } {
-  const { url } = source;
+  const extension = getFileExtension(source);
 
   if (content.type !== "text") {
     return { name: "text" };
   }
 
   const { contentType, value: text } = content;
 
-  if ((url && url.match(/\.jsx$/i)) || (symbols && symbols.hasJsx)) {
+  if (extension === "jsx" || (symbols && symbols.hasJsx)) {
     if (symbols && symbols.hasTypes) {
       return { name: "text/typescript-jsx" };
     }
     return { name: "jsx" };
   }
 
   if (symbols && symbols.hasTypes) {
     if (symbols.hasJsx) {
       return { name: "text/typescript-jsx" };
     }
 
     return { name: "text/typescript" };
   }
 
   const languageMimeMap = [
-    { ext: ".c", mode: "text/x-csrc" },
-    { ext: ".kt", mode: "text/x-kotlin" },
-    { ext: ".cpp", mode: "text/x-c++src" },
-    { ext: ".m", mode: "text/x-objectivec" },
-    { ext: ".rs", mode: "text/x-rustsrc" },
-    { ext: ".hx", mode: "text/x-haxe" },
+    { ext: "c", mode: "text/x-csrc" },
+    { ext: "kt", mode: "text/x-kotlin" },
+    { ext: "cpp", mode: "text/x-c++src" },
+    { ext: "m", mode: "text/x-objectivec" },
+    { ext: "rs", mode: "text/x-rustsrc" },
+    { ext: "hx", mode: "text/x-haxe" },
   ];
 
   // check for C and other non JS languages
-  if (url) {
-    const result = languageMimeMap.find(({ ext }) => url.endsWith(ext));
-
-    if (result !== undefined) {
-      return { name: result.mode };
-    }
+  const result = languageMimeMap.find(({ ext }) => extension === ext);
+  if (result !== undefined) {
+    return { name: result.mode };
   }
 
-  // if the url ends with .marko or .es6 we set the name to Javascript so
-  // syntax highlighting works for these file extensions too
-  if (url && url.match(/\.marko|\.es6$/i)) {
+  // if the url ends with a known Javascript-like URL, provide JavaScript mode.
+  // uses the first part of the URL to ignore query string
+  if (javascriptLikeExtensions.find(ext => ext === extension)) {
     return { name: "javascript" };
   }
 
   // Use HTML mode for files in which the first non whitespace
   // character is `<` regardless of extension.
   const isHTMLLike = text.match(/^\s*</);
   if (!contentType) {
     if (isHTMLLike) {
--- a/devtools/client/debugger/src/utils/tests/source.spec.js
+++ b/devtools/client/debugger/src/utils/tests/source.spec.js
@@ -465,16 +465,26 @@ describe("sources", () => {
       const source = makeMockSourceAndContent(
         "http://localhost.com:7999/increment/sometestfile.es6",
         undefined,
         "does not matter",
         "function foo(){}"
       );
       expect(getMode(source, source.content)).toEqual({ name: "javascript" });
     });
+
+    it("vue", () => {
+      const source = makeMockSourceAndContent(
+        "http://localhost.com:7999/increment/sometestfile.vue?query=string",
+        undefined,
+        "does not matter",
+        "function foo(){}"
+      );
+      expect(getMode(source, source.content)).toEqual({ name: "javascript" });
+    });
   });
 
   describe("getSourceLineCount", () => {
     it("should give us the amount bytes for wasm source", () => {
       const { content } = makeMockWasmSourceWithContent({
         binary: "\x00asm\x01\x00\x00\x00",
       });
       expect(getSourceLineCount(content.value)).toEqual(8);