From 764ebb8616130798114eb1fa873c2cd888c03558 Mon Sep 17 00:00:00 2001
From: Tomer Ohana <tomero@wix.com>
Date: Thu, 5 Oct 2017 19:47:50 +0300
Subject: [PATCH] Support framework frames for Preact (#4296)

---
 assets/images/Svg.js          |  1 +
 assets/images/preact.svg      |  9 +++++++++
 src/utils/frame.js            |  9 +++++++++
 src/utils/tests/frame.spec.js | 21 ++++++++++++++++++++-
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 assets/images/preact.svg

diff --git a/assets/images/Svg.js b/assets/images/Svg.js
index 0b99e414d8..47ea4e2549 100644
--- a/assets/images/Svg.js
+++ b/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"),
diff --git a/assets/images/preact.svg b/assets/images/preact.svg
new file mode 100644
index 0000000000..dd2015dfe5
--- /dev/null
+++ b/assets/images/preact.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="296px" viewBox="0 0 256 296" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<polygon fill="#673AB8" points="128 0 256 73.8999491 256 221.699847 128 295.599796 0 221.699847 0 73.8999491"></polygon>
+		<path d="M34.8647584,220.478469 C51.8814262,242.25881 105.959701,225.662965 157.014868,185.774297 C208.070035,145.885628 237.255632,97.428608 220.238964,75.6482664 C203.222296,53.8679249 149.144022,70.4637701 98.0888543,110.352439 C47.0336869,150.241107 17.8480906,198.698127 34.8647584,220.478469 Z M42.1343351,214.798853 C36.4908625,207.575537 38.9565723,193.395881 49.7081913,175.544904 C61.0297348,156.747677 80.2490923,135.997367 103.76847,117.622015 C127.287848,99.2466634 152.071368,85.6181573 173.049166,79.1803727 C192.970945,73.066665 207.325915,74.1045667 212.969387,81.3278822 C218.61286,88.5511977 216.14715,102.730854 205.395531,120.581832 C194.073987,139.379058 174.85463,160.129368 151.335252,178.50472 C127.815874,196.880072 103.032354,210.508578 82.054556,216.946362 C62.1327769,223.06007 47.7778077,222.022168 42.1343351,214.798853 Z" fill="#FFFFFF"></path>
+		<path d="M220.238964,220.478469 C237.255632,198.698127 208.070035,150.241107 157.014868,110.352439 C105.959701,70.4637701 51.8814262,53.8679249 34.8647584,75.6482664 C17.8480906,97.428608 47.0336869,145.885628 98.0888543,185.774297 C149.144022,225.662965 203.222296,242.25881 220.238964,220.478469 Z M212.969387,214.798853 C207.325915,222.022168 192.970945,223.06007 173.049166,216.946362 C152.071368,210.508578 127.287848,196.880072 103.76847,178.50472 C80.2490923,160.129368 61.0297348,139.379058 49.7081913,120.581832 C38.9565723,102.730854 36.4908625,88.5511977 42.1343351,81.3278822 C47.7778077,74.1045667 62.1327769,73.066665 82.054556,79.1803727 C103.032354,85.6181573 127.815874,99.2466634 151.335252,117.622015 C174.85463,135.997367 194.073987,156.747677 205.395531,175.544904 C216.14715,193.395881 218.61286,207.575537 212.969387,214.798853 Z" fill="#FFFFFF"></path>
+		<path d="M127.551861,167.666971 C138.378632,167.666971 147.155465,158.890139 147.155465,148.063368 C147.155465,137.236596 138.378632,128.459764 127.551861,128.459764 C116.72509,128.459764 107.948257,137.236596 107.948257,148.063368 C107.948257,158.890139 116.72509,167.666971 127.551861,167.666971 L127.551861,167.666971 Z" fill="#FFFFFF"></path>
+	</g>
+</svg>
diff --git a/src/utils/frame.js b/src/utils/frame.js
index 7a0c77b3df..546ac9be6b 100644
--- a/src/utils/frame.js
+++ b/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";
   }
diff --git a/src/utils/tests/frame.spec.js b/src/utils/tests/frame.spec.js
index e58b35dc19..8261477dc2 100644
--- a/src/utils/tests/frame.spec.js
+++ b/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");
+      });
+    });
+  });
 });