✨ add console log stacking

Author: francisashley

src/features/tray/log-item.js

@@ -1,6 +1,14 @@
 import crel from "crel";
+import { isUndefined } from "lodash";
 
-export default function LogItem({ message, filePath, fileName, lineNumber, type = "log" } = {}) {
+export default function LogItem({
+  message,
+  filePath,
+  fileName,
+  lineNumber,
+  amount,
+  type = "log"
+} = {}) {
   // figure out type
   if (type === "error") type = "error";
   else if (typeof message === "string") type = "string";
@@ -19,8 +27,11 @@ export default function LogItem({ message, filePath, fileName, lineNumber, type
   // line location
   const lineLoc = fileName + ":" + lineNumber;
 
+  // prepare amount
+  amount = isUndefined(amount) ? 1 : amount;
+
   // Prepare LogItem parts
-  const LogAmount = crel("div", { class: "mde-log-amount" });
+  const LogAmount = crel("div", { class: "mde-log-amount" }, amount === 1 ? "" : amount);
   const LogMessage = crel("div", { class: "mde-log-message" }, message);
   const LogTrace = crel("a", { class: "mde-log-trace", href: filePath, target: "_blank" }, lineLoc);
   const LogMessageFull = crel("pre", { class: "mde-log-message-full" }, message);

src/mde.js

@@ -50,7 +50,15 @@ import tracer from "./utils/tracer.js";
     }
 
     function onAddLog({ message, filePath, fileName, lineNumber, type } = {}) {
-      state.set("log", [...state.get("log"), { message, filePath, fileName, lineNumber, type }]);
+      const log = state.get("log");
+      const lastEntry = log[log.length - 1];
+
+      if (lastEntry && lastEntry.message === message) {
+        log[log.length - 1] = { ...lastEntry, amount: lastEntry.amount + 1 };
+      } else {
+        log.push({ message, filePath, fileName, lineNumber, type, amount: 1 });
+      }
+      state.set("log", log);
       render();
     }
 

src/mde.test.js

@@ -24,6 +24,10 @@ test("MDE console.log()'s to tray", () => {
 
   expect(document.querySelectorAll(".mde-log[data-type=string]").length).toBe(1);
   expect(document.querySelector(".mde-log .mde-log-message").innerHTML).toBe("works");
+
+  console.log("works");
+
+  expect(document.querySelector(".mde-log[data-type=string] .mde-log-amount").innerHTML).toBe("2");
 });
 
 test("MDE console.error()'s to tray", () => {
@@ -33,6 +37,10 @@ test("MDE console.error()'s to tray", () => {
 
   expect(document.querySelectorAll(".mde-log[data-type=error]").length).toBe(1);
   expect(document.querySelector(".mde-log .mde-log-message").innerHTML).toBe("works");
+
+  console.error("works");
+
+  expect(document.querySelector(".mde-log[data-type=error] .mde-log-amount").innerHTML).toBe("2");
 });
 
 test("MDE console.assert()'s to tray", () => {
@@ -51,4 +59,11 @@ test("MDE console.assert()'s to tray", () => {
   expect(document.querySelectorAll(".mde-log .mde-log-message")[1].innerHTML).toBe(
     "Assertion failed: console.assert"
   );
+
+  console.assert(false);
+
+  expect(
+    document.querySelectorAll(".mde-log[data-type=error]")[1].querySelector(".mde-log-amount")
+      .innerHTML
+  ).toBe("2");
 });