1 files changed, 15 insertions, 4 deletions

diff --git a/src/log.ts b/src/log.ts
index 6f8c538..3fd65fc 100644
--- a/src/log.ts
+++ b/src/log.ts
@@ -7,6 +7,7 @@ import { e } from "./element.ts"
 
 export class Logger<T = HTMLElement> {
     public element: HTMLElement = e("div", { class: "jsh-log" })
+    public bins: Map<string, HTMLElement> = new Map()
     constructor(
         private map_fn: (value: T) => HTMLElement = e => {
             if (e instanceof HTMLElement) return e;
@@ -26,23 +27,33 @@ export class Logger<T = HTMLElement> {
         return el
     }
 
-    log(value: T) {
+    log(value: T, bin?: string) {
         const el = this.add(value)
+        if (bin) {
+            const oel = this.bins.get(bin)
+            if (oel && oel.parentElement) this.element.removeChild(oel)
+            else el.classList.add("jsh-log-line-appear")
+            this.bins.set(bin, el)
+        } else {
+            el.classList.add("jsh-log-line-appear")
+        }
         el.classList.add("jsh-log-line", "jsh-log-line-timeout")
         setTimeout(() => {
             el.classList.add("jsh-log-line-disappear")
             setTimeout(() => {
-                this.element.removeChild(el)
+                if (el.parentElement)
+                    this.element.removeChild(el)
             }, this.animation_duration)
         }, this.timeout + this.animation_duration)
     }
     log_persistent(value: T): () => void {
         const el = this.add(value)
-        el.classList.add("jsh-log-line", "jsh-log-line-persistent")
+        el.classList.add("jsh-log-line", "jsh-log-line-persistent", "jsh-log-line-appear")
         return () => {
             el.classList.add("jsh-log-line-disappear")
             setTimeout(() => {
-                this.element.removeChild(el)
+                if (el.parentElement)
+                    this.element.removeChild(el)
             }, this.animation_duration)
         }
     }