Support framework frames for Preact (firefox-devtools#4296)

assets/images/Svg.js

@@ -28,6 +28,7 @@ const svg = {
   pause: require("./pause.svg"),
   "pause-exceptions": require("./pause-exceptions.svg"),
   plus: require("./plus.svg"),
+  preact: require("./preact.svg"),
   prettyPrint: require("./prettyPrint.svg"),
   react: require("./react.svg"),
   "regex-match": require("./regex-match.svg"),

src/utils/frame.js

@@ -83,6 +83,10 @@ function isDojo(frame) {
   return getFrameUrl(frame).match(/dojo/i);
 }
 
+function isPreact(frame) {
+  return getFrameUrl(frame).match(/preact/i);
+}
+
 export function getLibraryFromUrl(frame: Frame) {
   // @TODO each of these fns calls getFrameUrl, just call it once
   // (assuming there's not more complex logic to identify a lib)
@@ -95,6 +99,11 @@ export function getLibraryFromUrl(frame: Frame) {
     return "jQuery";
   }
 
+  // Needs to remain before "react", otherwise "react" can also match "preact"
+  if (isPreact(frame)) {
+    return "Preact";
+  }
+
   if (isReact(frame)) {
     return "React";
   }

src/utils/tests/frame.spec.js

@@ -3,7 +3,8 @@
 import {
   simplifyDisplayName,
   formatDisplayName,
-  formatCopyName
+  formatCopyName,
+  getLibraryFromUrl
 } from "../frame";
 
 const cases = {
@@ -99,4 +100,22 @@ describe("function names", () => {
       expect(formatCopyName(frame)).toEqual("child (todo-view.js#12)");
     });
   });
+
+  describe("getLibraryFromUrl", () => {
+    describe("When Preact is on the frame", () => {
+      it("should return Preact and not React", () => {
+        const frame = {
+          displayName: "name",
+          location: {
+            line: 12
+          },
+          source: {
+            url: "https://cdnjs.cloudflare.com/ajax/libs/preact/8.2.5/preact.js"
+          }
+        };
+
+        expect(getLibraryFromUrl(frame)).toEqual("Preact");
+      });
+    });
+  });
 });