@zikojs/console 0.1.0 → 0.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 ZAKARIA ELALAOUI
+Copyright (c) 2025 ZAKARIA ELALAOUI
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@zikojs/console",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "src/index.js",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zikojs/console.git",
+    "directory": "packages/console"
+  },
   "keywords": [
     "zikojs",
     "console",
@@ -16,7 +21,7 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "ziko": "^2.0.0-beta.16.0"
+    "ziko": "latest"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/components/Console.js

@@ -1,28 +1,32 @@
 import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+const { div } = van.tags;
+import { nodeEntry, makeEntry } from "./nodeEntry.js";
+import { Row } from "./Row.js";
 
-import { entryNode, nodeEntry } from "../entries/entryNode.js";
+const entryNode =
+  (method) =>
+  (...args) => {
+    const e = makeEntry(method, args);
+    const node = div(
+      { class: () => "cf cf-solo " + Console.theme }, // <-- using a function or string
+      Row(e),
+    );
+    nodeEntry.set(node, e);
+    return node;
+  };
 
 export const Console = {
-  theme: van.state("light")
-};
-
-Console.log = entryNode("log", Console.theme);
-Console.info = entryNode("info", Console.theme);
-Console.debug = entryNode("debug", Console.theme);
-Console.warn = entryNode("warn", Console.theme);
-Console.error = entryNode("error", Console.theme);
-Console.table = entryNode("table", Console.theme);
-
-Console.group = entryNode("group", Console.theme);
-
-Console.groupEnd = () => {
-  const node =
-    document.createComment("groupEnd");
-
-  nodeEntry.set(node, {
-    method: "groupEnd",
-    args: []
-  });
-
-  return node;
+  theme: { val: "dark" },
+  log: entryNode("log"),
+  info: entryNode("info"),
+  debug: entryNode("debug"),
+  warn: entryNode("warn"),
+  error: entryNode("error"),
+  table: entryNode("table"),
+  group: entryNode("group"),
+  groupEnd: () => {
+    const node = document.createComment("groupEnd");
+    nodeEntry.set(node, { method: "groupEnd", args: [] });
+    return node;
+  },
 };

package/src/components/ConsoleBody.js

@@ -1,46 +1,58 @@
-import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-import { Row } from "./Row.js";
+import { tags } from "ziko/dom";
+const { div } = tags;
+import { Row, cache } from "./Row.js";
+
+export function ConsoleBody(feed) {
+  const listContainer = div();
+
+  const renderLogs = () => {
+    const visible = feed.getVisibleLogs();
+    listContainer.element.replaceChildren(
+      (
+        visible.length
+        ? div(...visible.map((e) => Row(e)))
+        : div(
+            { class: "cf-empty" },
+            "No messages yet. Anything sent to console.* shows up here.",
+          )
+      ).element
 
-const { div } = van.tags;
+    );
+  };
 
-export function ConsoleBody(visible) {
   let stick = true;
-
   const body = div(
     {
       class: "cf-body",
-
       onscroll: () => {
-        stick =
-          body.scrollHeight -
-          body.scrollTop -
-          body.clientHeight < 24;
-      }
+        stick = body.scrollHeight - body.scrollTop - body.clientHeight < 24;
+      },
     },
+    listContainer
+  ).element;
+
+  feed.addEventListener("logs-change", () => {
+    renderLogs();
+    if (stick) {
+      requestAnimationFrame(() => {
+        body.scrollTop = body.scrollHeight;
+      });
+    }
+  });
 
-    () =>
-      visible.val.length
-        ? div(
-            visible.val.map(entry =>
-              Row(entry)
-            )
-          )
-        : div(
-            { class: "cf-empty" },
-            "No messages yet. Anything sent to console.* shows up here."
-          )
-  );
-
-  van.derive(() => {
-    visible.val;
+  feed.addEventListener("clear", () => {
+    renderLogs();
+  });
 
-    requestAnimationFrame(() => {
-      if (stick) {
-        body.scrollTop =
-          body.scrollHeight;
-      }
-    });
+  feed.addEventListener("row-update", (e) => {
+    const rowEl = cache.get(e.detail);
+    if (rowEl) {
+      const badge = rowEl.querySelector(".cf-badge");
+      if (badge && badge.updateBadge) badge.updateBadge();
+    }
   });
 
+  renderLogs();
+
   return body;
 }

package/src/components/ConsoleFeed.js

@@ -1,141 +1,47 @@
 import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+const { div } = van.tags;
 
-import { createFeed } from "../feed/createFeed.js";
-import { nodeEntry } from "../entries/entryNode.js";
-
+import { isProps } from "../utils/index.js";
+import { Hook } from "../hook/index.js";
+import { createFeed } from "../feed/index.js";
+import { nodeEntry } from "./nodeEntry.js";
+import { cache } from "./Row.js";
 import { ConsoleToolbar } from "./ConsoleToolbar.js";
 import { ConsoleBody } from "./ConsoleBody.js";
 import { ConsolePrompt } from "./ConsolePrompt.js";
 
-import { Hook } from "../hook/index.js";
-import {
-  fmt,
-  safe
-} from "../utils/index.js";
-
-const { div } = van.tags;
-
-const LEVEL = {
-  log: "log",
-  dir: "log",
-  table: "log",
-  group: "log",
-
-  info: "info",
-  debug: "debug",
-  warn: "warn",
-  error: "error"
-};
-
-const LEVELS = [
-  "log",
-  "info",
-  "warn",
-  "error",
-  "debug"
-];
-
-const isProps = value =>
-  value &&
-  typeof value === "object" &&
-  !(value instanceof Node) &&
-  Object.getPrototypeOf(value) === Object.prototype;
-
 export function ConsoleFeed(...args) {
-  const [props, ...children] =
-    isProps(args[0])
-      ? args
-      : [{}, ...args];
-
+  const [props, ...kids] = isProps(args[0]) ? args : [{}, ...args];
+  const feed = props.feed || createFeed(1000, cache);
   const {
-    feed = createFeed(),
     variant = "dark",
     repl = true,
-    hook = false
+    hook = false,
   } = props;
 
-  if (hook) {
-    Hook(console, feed.push);
-  }
-
-  children
-    .flat(Infinity)
-    .forEach(child => {
-      const entry = nodeEntry.get(child);
+  if (hook) Hook(console, (e) => feed.push(e));
+  kids.flat(Infinity).forEach((c) => {
+    const e = nodeEntry.get(c);
+    if (e) feed.push(e);
+  });
 
-      if (entry) {
-        feed.push(entry);
-      }
-    });
+  const initialTheme = typeof variant === "string" ? variant : (variant.val || "dark");
+  feed.setTheme(initialTheme);
 
-  const theme =
-    typeof variant === "string"
-      ? van.state(variant)
-      : variant;
+  const bar = ConsoleToolbar(feed);
+  const body = ConsoleBody(feed);
+  const prompt = repl ? ConsolePrompt(feed) : "";
 
-  const levels = Object.fromEntries(
-    LEVELS.map(level => [
-      level,
-      van.state(true)
-    ])
+  const container = div(
+    { class: () => "cf " + feed.theme, style: "flex:1" },
+    bar,
+    body,
+    prompt,
   );
 
-  const query = van.state("");
-
-  const count = level =>
-    van.derive(() =>
-      feed.logs.val.filter(
-        entry =>
-          LEVEL[entry.method] === level
-      ).length
-    );
-
-  const visible = van.derive(() => {
-    const search =
-      query.val.toLowerCase();
-
-    return feed.logs.val.filter(entry => {
-      const level =
-        LEVEL[entry.method];
-
-      if (
-        level &&
-        !levels[level].val
-      ) {
-        return false;
-      }
-
-      if (!search) {
-        return true;
-      }
-
-      return fmt(entry.args)
-        .map(safe)
-        .join(" ")
-        .toLowerCase()
-        .includes(search);
-    });
+  feed.addEventListener("theme-change", (e) => {
+    container.className = "cf " + e.detail + " flex:1";
   });
 
-  return div(
-    {
-      class: () =>
-        "cf " + theme.val,
-
-      style: "flex:1"
-    },
-
-    ConsoleToolbar({
-      levels,
-      query,
-      count,
-      clear: feed.clear
-    }),
-
-    ConsoleBody(visible),
-
-    repl
-      ? ConsolePrompt({ feed })
-      : ""
-  );
+  return container;
 }

package/src/components/ConsolePrompt.js

@@ -1,74 +1,42 @@
-import { tags } from "ziko/dom";
-const { div, span, input } = tags;
-export function ConsolePrompt({
-  feed
-}) {
-  const history = [];
-  let index = 0;
+import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
+const { div, span, input } = van.tags;
 
-  const run = code => {
-    feed.push({
-      method: "command",
-      args: [code]
-    });
+export function ConsolePrompt(feed) {
+  const hist = [];
+  let hi = 0;
 
+  const run = (code) => {
+    feed.push({ method: "command", args: [code] });
     try {
-      feed.push({
-        method: "result",
-        args: [(0, eval)(code)]
-      });
-    } catch (error) {
-      feed.push({
-        method: "error",
-        args: [error]
-      });
+      feed.push({ method: "result", args: [(0, eval)(code)] });
+    } catch (err) {
+      feed.push({ method: "error", args: [err] });
     }
   };
 
-  const inp = input({
+  return div(
+    { class: "cf-prompt" },
+    span("\u203A"),
+    input({
       placeholder: "Run JavaScript",
       "aria-label": "Run JavaScript",
       spellcheck: false,
       autocomplete: "off",
-
-      onKeyDown: __e__ => {
-        const e = __e__.event
+      onkeydown: (e) => {
         const el = e.target;
-
-        if (
-          e.key === "Enter" &&
-          el.value.trim()
-        ) {
-          history.push(el.value);
-          index = history.length;
-
+        if (e.key === "Enter" && el.value.trim()) {
+          hist.push(el.value);
+          hi = hist.length;
           run(el.value);
-
           el.value = "";
-        }
-
-        else if (
-          e.key === "ArrowUp" &&
-          index > 0
-        ) {
-          el.value = history[--index];
+        } else if (e.key === "ArrowUp" && hi > 0) {
+          el.value = hist[--hi];
           e.preventDefault();
-        }
-
-        else if (e.key === "ArrowDown") {
+        } else if (e.key === "ArrowDown") {
           el.value =
-            index < history.length - 1
-              ? history[++index]
-              : (index = history.length, "");
+            hi < hist.length - 1 ? hist[++hi] : ((hi = hist.length), "");
         }
-      }
-    })
-
-  return div(
-    { class: "cf-prompt" },
-
-    span("\u203A"),
-    inp
-    
-  ).element;
+      },
+    }),
+  );
 }

package/src/components/ConsoleToolbar.js

@@ -1,61 +1,48 @@
 import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-
-const {
-  div,
-  button,
-  input
-} = van.tags;
-
-export function ConsoleToolbar({
-  levels,
-  query,
-  count,
-  clear
-}) {
-  const LEVELS = [
-    "log",
-    "info",
-    "warn",
-    "error",
-    "debug"
-  ];
+const { div, span, input, button } = van.tags;
+import { LEVELS } from "../utils/index.js";
+
+export function ConsoleToolbar(feed) {
+  const chipButtons = {};
+  const countSpans = {};
+
+  const updateToolbar = () => {
+    LEVELS.forEach((l) => {
+      if (chipButtons[l]) {
+        const isOn = feed.levels[l];
+        chipButtons[l].className = `cf-chip ${l}` + (isOn ? " on" : "");
+        chipButtons[l].setAttribute("aria-pressed", isOn);
+      }
+      if (countSpans[l]) {
+        countSpans[l].textContent = feed.getCount(l);
+      }
+    });
+  };
+
+  feed.addEventListener("filter-change", updateToolbar);
 
   return div(
     { class: "cf-bar" },
-
-    LEVELS.map(level =>
-      button(
+    LEVELS.map((l) => {
+      countSpans[l] = span(feed.getCount(l));
+      chipButtons[l] = button(
         {
-          class: () =>
-            `cf-chip ${level}` +
-            (levels[level].val ? " on" : ""),
-
-          "aria-pressed": () =>
-            levels[level].val,
-
-          onclick: () =>
-            levels[level].val =
-              !levels[level].val
+          class: `cf-chip ${l}` + (feed.levels[l] ? " on" : ""),
+          "aria-pressed": feed.levels[l],
+          onclick: () => feed.toggleLevel(l),
         },
-
-        level,
+        l,
         " ",
-        count(level)
-      )
-    ),
-
+        countSpans[l],
+      );
+      return chipButtons[l];
+    }),
     input({
       type: "search",
       placeholder: "Filter messages",
       "aria-label": "Filter messages",
-
-      oninput: e =>
-        query.val = e.target.value
+      oninput: (e) => feed.setQuery(e.target.value),
     }),
-
-    button(
-      { onclick: clear },
-      "Clear"
-    )
+    button({ onclick: () => feed.clear() }, "Clear"),
   );
 }

package/src/components/Row.js

@@ -1,64 +1,41 @@
 import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-
-import {
-  fmt,
-  isObj
-} from "../utils/index.js";
-
-import { Inspect } from "./Inspect.js";
-import { Table } from "./Table.js";
-
 const { div, span } = van.tags;
+import { fmt, isObj } from "../utils/index.js";
+import { Inspect, Table } from "./index.js";
 
 const cache = new WeakMap();
 
-const buildRow = entry => {
-  const [a0, ...rest] = entry.args;
-
+const buildRow = (e) => {
+  const [a0, ...rest] = e.args;
   const items =
-    entry.method === "table" && isObj(a0)
-      ? [
-          Table(a0),
-          ...rest.map(x =>
-            Inspect(x, undefined, [], true).element
-          )
-        ]
-      : fmt(entry.args).map(a =>
-          Inspect(a, undefined, [], true).element
-        );
+    e.method === "table" && isObj(a0)
+      ? [Table(a0), rest.map((x) => Inspect(x, undefined, [], true)).element]
+      : fmt(e.args).map((a) => Inspect(a, undefined, [], true).element);
+
+  const badgeSpan = span({ class: "cf-badge" }, () => (e.count > 1 ? e.count : ""));
+  const updateBadge = () => {
+    badgeSpan.textContent = e.count > 1 ? e.count : "";
+    badgeSpan.style.display = e.count > 1 ? "inline-block" : "none";
+  };
+  badgeSpan.updateBadge = updateBadge;
+  updateBadge();
 
   return div(
-    {
-      class: `cf-row ${entry.method}`,
-      style: `--d:${entry.depth}`
-    },
-
-    () =>
-      entry.count.val > 1
-        ? span(
-            { class: "cf-badge" },
-            entry.count.val
-          )
-        : "",
-
+    { class: `cf-row ${e.method}`, style: `--d:${e.depth}` },
+    badgeSpan,
     span(
       { class: "cf-time" },
-      entry.time.toLocaleTimeString([], {
-        hour12: false
-      })
+      e.time.toLocaleTimeString([], { hour12: false }),
     ),
-
-    div(
-      { class: "cf-msg" },
-      items
-    )
+    div({ class: "cf-msg" }, items),
   );
 };
 
-export const Row = entry =>
-  cache.get(entry) ||
-  (() => {
-    const node = buildRow(entry);
-    cache.set(entry, node);
-    return node;
-  })();
+export const Row = (e) => {
+  if (cache.has(e)) return cache.get(e);
+  const n = buildRow(e);
+  cache.set(e, n);
+  return n;
+};
+
+export { cache };

package/src/components/nodeEntry.js

@@ -0,0 +1,10 @@
+export const nodeEntry = new WeakMap();
+
+export const makeEntry = (method, args) => ({
+  id: 0,
+  method,
+  args,
+  depth: 0,
+  count: 1,
+  time: new Date(),
+});

package/src/feed/index.js

@@ -0,0 +1,96 @@
+import { LEVEL, LEVELS, same, fmt, safe } from "../utils/index.js";
+
+export class ConsoleStore extends EventTarget {
+  constructor(max = 1000, cacheRef = null) {
+    super();
+    this.logs = [];
+    this.max = max;
+    this.depth = 0;
+    this.id = 0;
+    this.levels = Object.fromEntries(LEVELS.map((l) => [l, true]));
+    this.query = "";
+    this.theme = "dark";
+    this.cache = cacheRef;
+  }
+
+  setTheme(theme) {
+    this.theme = theme;
+    this.dispatchEvent(new CustomEvent("theme-change", { detail: theme }));
+  }
+
+  toggleLevel(level) {
+    this.levels[level] = !this.levels[level];
+    this.dispatchEvent(new CustomEvent("filter-change"));
+  }
+
+  setQuery(query) {
+    this.query = query;
+    this.dispatchEvent(new CustomEvent("filter-change"));
+  }
+
+  push(src) {
+    const { method, args = [] } = src;
+    if (method === "clear") {
+      this.depth = 0;
+      this.logs = [];
+      this.dispatchEvent(new CustomEvent("clear"));
+      this.dispatchEvent(new CustomEvent("logs-change"));
+      return;
+    }
+    if (method === "groupEnd") {
+      this.depth = Math.max(0, this.depth - 1);
+      return;
+    }
+    const isGroup = method === "group" || method === "groupCollapsed";
+    const e = src.count
+      ? Object.assign(src, { id: ++this.id, depth: this.depth })
+      : {
+          id: ++this.id,
+          method: isGroup ? "group" : method,
+          args,
+          depth: this.depth,
+          count: 1,
+          time: new Date(),
+        };
+
+    if (src.count && this.cache) {
+      this.cache.get(e)?.style.setProperty("--d", this.depth);
+    }
+
+    const last = this.logs.at(-1);
+    if (last && !isGroup && same(last, e)) {
+      last.count++;
+      this.dispatchEvent(new CustomEvent("row-update", { detail: last }));
+      return;
+    }
+
+    this.logs.push(e);
+    if (this.logs.length > this.max) {
+      this.logs.shift();
+    }
+
+    this.dispatchEvent(new CustomEvent("logs-change", { detail: e }));
+    if (isGroup) this.depth++;
+  }
+
+  clear() {
+    this.push({ method: "clear" });
+  }
+
+  getCount(level) {
+    return this.logs.filter((e) => LEVEL[e.method] === level).length;
+  }
+
+  getVisibleLogs() {
+    const s = this.query.toLowerCase();
+    return this.logs.filter(
+      (e) =>
+        (!(e.method in LEVEL) || this.levels[LEVEL[e.method]]) &&
+        (!s || fmt(e.args).map(safe).join(" ").toLowerCase().includes(s))
+    );
+  }
+}
+
+export function createFeed(max = 1000, cache) {
+  return new ConsoleStore(max, cache);
+}

package/src/index.js

@@ -1,51 +1,45 @@
-import './index.css'
-import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js"
-import {
-  ConsoleFeed,
-  Console
-} from './components'
-import { createFeed } from './feed/createFeed'
-import { Hook } from './hook/index.js'
+import "./index.css";
+import { Hook } from "./hook/index.js";
+import { createFeed } from "./feed/index.js";
+import { ConsoleFeed, Console } from "./components/index.js";
 
-Object.assign(window, {ConsoleFeed: {Hook, createFeed, ConsoleFeed, Console}})
+Object.assign(window, {
+  ConsoleFeed: { Hook, createFeed, ConsoleFeed, Console },
+});
 
 /* =====================================================================
    Demo
    ===================================================================== */
 
-const theme = van.state("light")
-
-// 1) Declarative: children only, or props first then children
-document.body.append(
-  ConsoleFeed({variant: theme, repl: false},
-    Console.log("Hello from VanJS", 42, true, null, undefined),
-    Console.info("Server listening on :3000"),
-    Console.group("Request"),
-    Console.log("parsing"),
-    Console.warn("token expires soon"),
-    Console.groupEnd(),
-    Console.error(new Error("Something broke")),
-    Console.table([{id: 1, name: "Ada"}, {id: 2, name: "Linus"}]),
-  )
-)
-
-// 2) Standalone: a single row, no toolbar
-document.body.append(Console.log("Just one line", {a: 1, b : 1}))
-document.body.append(Console.warn("Standalone warning"))
-document.body.append(Console.table([1,2,3]))
-
-
-// 3) Live: hook the real console into a feed
-Console.theme = theme
-const feed = createFeed()
-Hook(console, e => feed.push(e))
-globalThis.c = ConsoleFeed({feed})
-document.body.append(c)
-
-console.log("Hello from VanJS", 42, true, null, undefined)
-console.log({a: 1})
-console.group("Request")
-console.log("parsing")
-console.group("Auth")
-console.warn("token expires soon")
-console.groupEnd()
+Console.theme = 'light';
+
+// 1) Declarative
+// document.body.append(
+//   ConsoleFeed(
+//     { variant: theme.val, repl: false },
+//     Console.log("Hello from VanJS", 42, true, null, undefined),
+//     Console.info("Server listening on :3000"),
+//     Console.group("Request"),
+//     Console.log("parsing"),
+//     Console.warn("token expires soon"),
+//     Console.groupEnd(),
+//     Console.error(new Error("Something broke")),
+//     Console.table([
+//       { id: 1, name: "Ada" },
+//       { id: 2, name: "Linus" },
+//     ]),
+//   ),
+// );
+
+// 2) Standalone
+document.body.append(Console.log("Just one line", { a: 1, b: 1 }));
+document.body.append(Console.warn("Standalone warning"));
+document.body.append(Console.table([1, 2, 3]));
+
+// 3) Live
+// const feed = createFeed();
+// Hook(console, (e) => feed.push(e));
+// globalThis.c = ConsoleFeed({ feed, variant: theme.val });
+// document.body.append(c);
+
+// console.log("Hello from VanJS", 42, true, null, undefined);

package/src/utils/const.js

@@ -0,0 +1,11 @@
+export const LEVEL = {
+  log: "log",
+  dir: "log",
+  table: "log",
+  group: "log",
+  info: "info",
+  debug: "debug",
+  warn: "warn",
+  error: "error",
+};
+export const LEVELS = ["log", "info", "warn", "error", "debug"];

package/src/utils/feed.js

@@ -0,0 +1,5 @@
+export const same = (a, b) =>
+    a.method === b.method &&
+    a.depth === b.depth &&
+    a.args.length === b.args.length &&
+    a.args.every((x, i) => !isObj(x) && Object.is(x, b.args[i])); // is v f

package/src/utils/index.js

@@ -1,2 +1,4 @@
 export * from './value-formatting.js'
-export * from './fmt.js'
+export * from './fmt.js'
+export * from './feed.js'
+export * from './const.js'

package/src/utils/value-formatting.js

@@ -1,4 +1,5 @@
 export const isObj = v => v !== null && typeof v === "object"
+export const isProps = a => a && typeof a === "object" && !(a instanceof Node) && Object.getPrototypeOf(a) === Object.prototype
 export const cname = v => { try { return Object.getPrototypeOf(v)?.constructor?.name || "" } catch { return "" } }
 export const prim = v => typeof v === "string" ? JSON.stringify(v) : typeof v === "bigint" ? v + "n" : String(v)
 export const primCls = v => v == null ? "nul" : typeof v === "string" ? "str" : typeof v === "boolean" ? "bool" : "num"

package/src/feed/createFeed.js

@@ -1,67 +0,0 @@
-import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-import { isObj } from "../utils/index.js";
-
-export function createFeed(max = 1000) {
-  const logs = van.state([]);
-
-  let depth = 0;
-  let id = 0;
-
-  const same = (a, b) =>
-    a.method === b.method &&
-    a.depth === b.depth &&
-    a.args.length === b.args.length &&
-    a.args.every(
-      (x, i) => !isObj(x) && Object.is(x, b.args[i])
-    );
-
-  const push = src => {
-    const { method, args = [] } = src;
-
-    if (method === "clear") {
-      depth = 0;
-      logs.val = [];
-      return;
-    }
-
-    if (method === "groupEnd") {
-      depth = Math.max(0, depth - 1);
-      return;
-    }
-
-    const isGroup =
-      method === "group" ||
-      method === "groupCollapsed";
-
-    const entry = src.count
-      ? Object.assign(src, {
-          id: ++id,
-          depth
-        })
-      : {
-          id: ++id,
-          method: isGroup ? "group" : method,
-          args,
-          depth,
-          count: van.state(1),
-          time: new Date()
-        };
-
-    const last = logs.val.at(-1);
-
-    if (last && !isGroup && same(last, entry)) {
-      last.count.val++;
-      return;
-    }
-
-    logs.val = [...logs.val, entry].slice(-max);
-
-    if (isGroup) depth++;
-  };
-
-  return {
-    logs,
-    push,
-    clear: () => push({ method: "clear" })
-  };
-}