logbubble 0.1.1 → 0.2.1

package/core/dom.ts

@@ -1,33 +0,0 @@
-// dom.ts
-// (Optional) Patch dynamic <script> and <link> loading for network logging
-
-import { logStore } from "../ui/logStore";
-
-export function patchDOM(logFn: (msg: string) => void) {
-  if (typeof window === "undefined") return;
-  const origCreateElement = document.createElement;
-  document.createElement = function (
-    this: Document,
-    tag: string,
-    options?: ElementCreationOptions,
-  ) {
-    const el = origCreateElement.call(this, tag, options);
-    if (tag === "script" || tag === "link") {
-      el.addEventListener("load", function () {
-        const src =
-          (el as HTMLScriptElement).src || (el as HTMLLinkElement).href;
-        const message = `[NET] ${tag.toUpperCase()} ${src} LOADED`;
-        logFn(message);
-        logStore.addLog(message, "dom");
-      });
-      el.addEventListener("error", function () {
-        const src =
-          (el as HTMLScriptElement).src || (el as HTMLLinkElement).href;
-        const message = `[NET] ${tag.toUpperCase()} ${src} ERROR`;
-        logFn(message);
-        logStore.addLog(message, "dom");
-      });
-    }
-    return el;
-  } as typeof document.createElement;
-}

package/core/fetch.ts

@@ -1,41 +0,0 @@
-// fetch.ts
-// Patches window.fetch to log network requests in dev mode (browser/WebView only)
-
-import { logStore } from "../ui/logStore";
-
-export function patchFetch(logFn: (msg: string) => void) {
-  if (typeof window === "undefined" || typeof window.fetch !== "function")
-    return;
-  const originalFetch = window.fetch;
-  window.fetch = async function (
-    this: typeof globalThis,
-    input: RequestInfo | URL,
-    init?: RequestInit,
-  ) {
-    const method =
-      (init && init.method) ||
-      (typeof input === "object" && "method" in input && input.method) ||
-      "GET";
-    const url =
-      typeof input === "string"
-        ? input
-        : input instanceof URL
-          ? input.href
-          : input.url;
-    const start = Date.now();
-    try {
-      const response = await originalFetch.call(this, input, init);
-      const ms = Date.now() - start;
-      const message = `[NET] ${method} ${url} ${response.status} ${ms}ms`;
-      logFn(message);
-      logStore.addLog(message, "fetch");
-      return response;
-    } catch (err) {
-      const ms = Date.now() - start;
-      const message = `[NET] ${method} ${url} ERROR ${ms}ms`;
-      logFn(message);
-      logStore.addLog(message, "fetch");
-      throw err;
-    }
-  } as typeof window.fetch;
-}

package/core/xhr.ts

@@ -1,38 +0,0 @@
-// xhr.ts
-// Patches XMLHttpRequest to log network requests in dev mode (browser/WebView only)
-
-import { logStore } from "../ui/logStore";
-
-export function patchXHR(logFn: (msg: string) => void) {
-  if (
-    typeof window === "undefined" ||
-    typeof window.XMLHttpRequest !== "function"
-  )
-    return;
-  const OriginalXHR = window.XMLHttpRequest;
-  function PatchedXHR(this: XMLHttpRequest) {
-    const xhr = new OriginalXHR();
-    let url = "";
-    let method = "";
-    let start = 0;
-    xhr.open = new Proxy(xhr.open, {
-      apply(target, thisArg, args: [string, string | URL, ...any[]]) {
-        method = args[0];
-        url = typeof args[1] === "string" ? args[1] : args[1].href;
-        return Reflect.apply(target, thisArg, args);
-      },
-    });
-    xhr.addEventListener("loadstart", () => {
-      start = Date.now();
-    });
-    xhr.addEventListener("loadend", () => {
-      const ms = Date.now() - start;
-      const message = `[NET] ${method} ${url} ${xhr.status} ${ms}ms`;
-      logFn(message);
-      logStore.addLog(message, "xhr");
-    });
-    return xhr;
-  }
-  PatchedXHR.prototype = OriginalXHR.prototype;
-  window.XMLHttpRequest = PatchedXHR as any;
-}

package/init.ts

@@ -1,41 +0,0 @@
-// init.ts
-// Entry point for web-only dev-network-logger
-import { patchFetch } from "./core/fetch";
-import { patchXHR } from "./core/xhr";
-import { patchDOM } from "./core/dom";
-import { patchConsole } from "./core/console";
-import { logUI } from "./ui/logUI";
-
-let isInitialized = false;
-
-function isDev() {
-  return (
-    typeof process !== "undefined" &&
-    process.env &&
-    (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev")
-  );
-}
-
-export function initNetworkLogger() {
-  if (isInitialized) {
-    console.warn("[LogBubble] Already initialized, skipping duplicate init");
-    return;
-  }
-  isInitialized = true;
-
-  logUI.init();
-  // Patch fetch/XHR/DOM/Console in dev mode
-  patchFetch(() => {});
-  patchXHR(() => {});
-  patchDOM(() => {});
-  patchConsole();
-}
-
-// Auto-init for browser
-if (typeof window !== "undefined") {
-  (window as any).initNetworkLogger = initNetworkLogger;
-  // Optionally auto-init in dev
-  // if (isDev()) {
-  initNetworkLogger();
-  // }
-}

package/ui/logStore.ts

@@ -1,49 +0,0 @@
-// logStore.ts
-// Global log store and API for collecting logs from JS
-
-export interface LogEntry {
-  timestamp: number;
-  message: string;
-  type: "fetch" | "xhr" | "dom" | "plugin";
-}
-
-class LogStore {
-  private logs: LogEntry[] = [];
-  private listeners: Array<(log: LogEntry) => void> = [];
-  private maxLogs = 500;
-
-  addLog(message: string, type: LogEntry["type"] = "fetch") {
-    const log: LogEntry = {
-      timestamp: Date.now(),
-      message,
-      type,
-    };
-
-    this.logs.push(log);
-
-    // Keep only the last maxLogs entries
-    if (this.logs.length > this.maxLogs) {
-      this.logs.shift();
-    }
-
-    // Notify all listeners
-    this.listeners.forEach((listener) => listener(log));
-  }
-
-  getLogs(): LogEntry[] {
-    return [...this.logs];
-  }
-
-  clearLogs() {
-    this.logs = [];
-  }
-
-  subscribe(listener: (log: LogEntry) => void) {
-    this.listeners.push(listener);
-    return () => {
-      this.listeners = this.listeners.filter((l) => l !== listener);
-    };
-  }
-}
-
-export const logStore = new LogStore();

package/ui/logUI.ts

@@ -1,395 +0,0 @@
-// logUI.ts
-// Vanilla JS floating log UI
-
-import { logStore, LogEntry } from "./logStore";
-
-const UI_STYLES = `
-#dev-net-logger-root * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-#dev-net-logger-button {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: #2563eb;
-  color: white;
-  border: none;
-  font-size: 18px;
-  font-weight: bold;
-  cursor: pointer;
-  z-index: 999999;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: monospace;
-}
-
-#dev-net-logger-button:active {
-  transform: scale(0.95);
-}
-
-#dev-net-logger-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background: #ef4444;
-  color: white;
-  font-size: 10px;
-  font-weight: bold;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-  font-family: monospace;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-}
-
-#dev-net-logger-badge.visible {
-  display: flex;
-}
-
-#dev-net-logger-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 999997;
-  display: none;
-}
-
-#dev-net-logger-backdrop.visible {
-  display: block;
-}
-
-#dev-net-logger-window {
-  position: fixed;
-  top: 70px;
-  right: 10px;
-  width: calc(100vw - 20px);
-  max-width: 500px;
-  height: 60vh;
-  background: rgba(0, 0, 0, 0.95);
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-  z-index: 999998;
-  display: none;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-#dev-net-logger-window.visible {
-  display: flex;
-}
-
-#dev-net-logger-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: #1e293b;
-  border-bottom: 1px solid #334155;
-}
-
-#dev-net-logger-title {
-  color: #f1f5f9;
-  font-size: 14px;
-  font-weight: bold;
-  font-family: monospace;
-}
-
-#dev-net-logger-controls {
-  display: flex;
-  gap: 8px;
-}
-
-#dev-net-logger-controls button {
-  padding: 4px 8px;
-  font-size: 11px;
-  background: #334155;
-  color: #f1f5f9;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: monospace;
-}
-
-#dev-net-logger-controls button:active {
-  background: #475569;
-}
-
-#dev-net-logger-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-  font-family: monospace;
-  font-size: 11px;
-  line-height: 1.4;
-  color: #e2e8f0;
-}
-
-.log-entry {
-  padding: 6px 8px;
-  margin-bottom: 4px;
-  border-radius: 4px;
-  background: #0f172a;
-  border-left: 3px solid #64748b;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-}
-
-.log-entry.type-fetch {
-  border-left-color: #3b82f6;
-}
-
-.log-entry.type-xhr {
-  border-left-color: #8b5cf6;
-}
-
-.log-entry.type-dom {
-  border-left-color: #f59e0b;
-}
-
-.log-entry.type-plugin {
-  border-left-color: #ec4899;
-}
-
-.log-timestamp {
-  color: #64748b;
-  font-size: 10px;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.log-message {
-  color: #e2e8f0;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  flex: 1;
-  min-width: 0;
-}
-`;
-
-export class LogUI {
-  private rootEl: HTMLDivElement | null = null;
-  private buttonEl: HTMLDivElement | null = null;
-  private badgeEl: HTMLDivElement | null = null;
-  private backdropEl: HTMLDivElement | null = null;
-  private windowEl: HTMLDivElement | null = null;
-  private contentEl: HTMLDivElement | null = null;
-  private isVisible = false;
-  private unreadCount = 0;
-  private unsubscribe: (() => void) | null = null;
-
-  init() {
-    if (typeof window === "undefined" || typeof document === "undefined")
-      return;
-    if (this.rootEl) return; // Already initialized
-
-    this.createUI();
-    this.attachEventListeners();
-    this.subscribeToLogs();
-  }
-
-  private createUI() {
-    // Inject styles
-    const styleEl = document.createElement("style");
-    styleEl.textContent = UI_STYLES;
-    document.head.appendChild(styleEl);
-
-    // Create root container
-    this.rootEl = document.createElement("div");
-    this.rootEl.id = "dev-net-logger-root";
-
-    // Create button
-    this.buttonEl = document.createElement("div");
-    this.buttonEl.id = "dev-net-logger-button";
-    this.buttonEl.textContent = "📡";
-    this.buttonEl.title = "Network Logger";
-
-    // Create badge
-    this.badgeEl = document.createElement("div");
-    this.badgeEl.id = "dev-net-logger-badge";
-    this.buttonEl.appendChild(this.badgeEl);
-
-    // Create backdrop
-    this.backdropEl = document.createElement("div");
-    this.backdropEl.id = "dev-net-logger-backdrop";
-
-    // Create window
-    this.windowEl = document.createElement("div");
-    this.windowEl.id = "dev-net-logger-window";
-
-    // Create header
-    const headerEl = document.createElement("div");
-    headerEl.id = "dev-net-logger-header";
-
-    const titleEl = document.createElement("div");
-    titleEl.id = "dev-net-logger-title";
-    titleEl.textContent = "Network Logs";
-
-    const controlsEl = document.createElement("div");
-    controlsEl.id = "dev-net-logger-controls";
-
-    const clearBtn = document.createElement("button");
-    clearBtn.textContent = "Clear";
-    clearBtn.onclick = () => this.clearLogs();
-
-    const copyBtn = document.createElement("button");
-    copyBtn.textContent = "Copy";
-    copyBtn.onclick = () => this.copyLogs();
-
-    controlsEl.appendChild(clearBtn);
-    controlsEl.appendChild(copyBtn);
-
-    headerEl.appendChild(titleEl);
-    headerEl.appendChild(controlsEl);
-
-    // Create content area
-    this.contentEl = document.createElement("div");
-    this.contentEl.id = "dev-net-logger-content";
-
-    this.windowEl.appendChild(headerEl);
-    this.windowEl.appendChild(this.contentEl);
-
-    this.rootEl.appendChild(this.buttonEl);
-    this.rootEl.appendChild(this.backdropEl);
-    this.rootEl.appendChild(this.windowEl);
-
-    document.body.appendChild(this.rootEl);
-  }
-
-  private attachEventListeners() {
-    if (!this.buttonEl || !this.windowEl || !this.backdropEl) return;
-
-    this.buttonEl.addEventListener("click", () => {
-      this.toggleWindow();
-    });
-
-    // Close window when clicking backdrop
-    this.backdropEl.addEventListener("click", () => {
-      this.toggleWindow();
-    });
-  }
-
-  private subscribeToLogs() {
-    // Load existing logs
-    const existingLogs = logStore.getLogs();
-    existingLogs.forEach((log) => this.addLogToUI(log));
-
-    // Subscribe to new logs
-    this.unsubscribe = logStore.subscribe((log) => {
-      this.addLogToUI(log);
-    });
-  }
-
-  private addLogToUI(log: LogEntry) {
-    if (!this.contentEl) return;
-
-    // Increment unread count if window is closed
-    if (!this.isVisible) {
-      this.unreadCount++;
-      this.updateBadge();
-    }
-
-    const logEl = document.createElement("div");
-    logEl.className = `log-entry type-${log.type}`;
-
-    const timestampEl = document.createElement("span");
-    timestampEl.className = "log-timestamp";
-    const date = new Date(log.timestamp);
-    timestampEl.textContent = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
-
-    const messageEl = document.createElement("span");
-    messageEl.className = "log-message";
-    messageEl.textContent = log.message;
-
-    logEl.appendChild(timestampEl);
-    logEl.appendChild(messageEl);
-
-    this.contentEl.appendChild(logEl);
-
-    // Auto-scroll to bottom
-    this.contentEl.scrollTop = this.contentEl.scrollHeight;
-  }
-
-  private toggleWindow() {
-    if (!this.windowEl || !this.backdropEl) return;
-    this.isVisible = !this.isVisible;
-    if (this.isVisible) {
-      this.windowEl.classList.add("visible");
-      this.backdropEl.classList.add("visible");
-      // Prevent body scroll
-      document.body.style.overflow = "hidden";
-      // Reset unread count when opening
-      this.unreadCount = 0;
-      this.updateBadge();
-    } else {
-      this.windowEl.classList.remove("visible");
-      this.backdropEl.classList.remove("visible");
-      // Restore body scroll
-      document.body.style.overflow = "";
-    }
-  }
-
-  private updateBadge() {
-    if (!this.badgeEl) return;
-    if (this.unreadCount > 0) {
-      this.badgeEl.textContent =
-        this.unreadCount > 99 ? "99+" : String(this.unreadCount);
-      this.badgeEl.classList.add("visible");
-    } else {
-      this.badgeEl.classList.remove("visible");
-    }
-  }
-
-  private clearLogs() {
-    if (!this.contentEl) return;
-    logStore.clearLogs();
-    this.contentEl.innerHTML = "";
-    this.unreadCount = 0;
-    this.updateBadge();
-  }
-
-  private copyLogs() {
-    const logs = logStore.getLogs();
-    const text = logs
-      .map((log) => {
-        const date = new Date(log.timestamp);
-        const time = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
-        return `[${time}] ${log.message}`;
-      })
-      .join("\n");
-
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(text).then(() => {
-        alert("Logs copied to clipboard!");
-      });
-    }
-  }
-
-  destroy() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-    if (this.rootEl) {
-      this.rootEl.remove();
-    }
-  }
-}
-
-export const logUI = new LogUI();