logbubble 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/logbubble.svg)](https://badge.fury.io/js/logbubble)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![GitHub](https://img.shields.io/badge/GitHub-LogBubble-blue)](https://github.com/dktiwary007/LogBubble)
+[![GitHub](https://img.shields.io/badge/GitHub-LogBubble-blue)](https://github.com/dkumar600/LogBubble)
 
 A lightweight, floating log viewer for monitoring network requests and console logs in web applications. Perfect for debugging web apps, Capacitor apps, and Progressive Web Apps (PWAs) directly on mobile devices or in production-like environments.
 
@@ -15,6 +15,10 @@ A lightweight, floating log viewer for monitoring network requests and console l
 📝 **Console Logging**: Captures `console.log`, `console.warn`, `console.error`, `console.info`, and `console.debug`  
 🔔 **Unread Badge**: Shows count of new logs since last view  
 📋 **Copy to Clipboard**: Export all logs with timestamps  
+🟢 **Draggable Bubble**: Move the log bubble to any corner of the screen  
+🟦 **Toggleable Filters**: Easily filter between console and network logs  
+🗂️ **Log Details Modal**: Click any log to open a modal with full details, timestamp, and a copy button for better readability  
+🛠️ **Built-in Vite Plugin**: Vite plugin included in this project for easy integration during development  
 🔄 **Auto-initialization**: Works out of the box with zero configuration  
 🎨 **Clean UI**: Modern, minimalist design with color-coded log types
 
@@ -44,6 +48,42 @@ import "logbubble";
 
 The floating bubble will appear in the top-right corner of your app.
 
+## Vite Plugin Integration
+
+LogBubble provides a Vite plugin for easy integration during development. This automatically injects LogBubble into your app for local debugging.
+
+### Setup
+
+1. Install LogBubble (if not already):
+
+```bash
+npm install logbubble
+```
+
+2. Add the plugin to your `vite.config.js` or `vite.config.ts`:
+
+```javascript
+// vite.config.js
+import { logbubbleVitePlugin } from "logbubble/vite-logbubble-plugin";
+
+export default {
+  plugins: [
+    logbubbleVitePlugin(),
+    // ...other plugins
+  ],
+};
+```
+
+3. Start your Vite dev server:
+
+```bash
+npm run dev
+```
+
+The LogBubble UI will appear automatically in your app during development.
+
+**Note:** The plugin is intended for development only. For production builds, import LogBubble manually as shown above.
+
 ### Manual initialization
 
 If you want more control over when LogBubble initializes:
@@ -128,6 +168,8 @@ LogBubble automatically intercepts and logs:
 
 - **Bubble**: Click to toggle the log window
 - **Badge**: Shows unread log count (disappears when window is opened)
+- **Draggable Button**: Button is draggable in all four corners of thr screen
+- **Toggleable Filter**: Toggleable Buttons to filter between consoles and network logs
 - **Clear**: Remove all logs
 - **Copy**: Copy all logs to clipboard with timestamps
 
@@ -218,7 +260,7 @@ Make sure your app is using native `fetch` or `XMLHttpRequest` APIs. Some custom
 
 ## Support
 
-For issues, feature requests, or questions, please open an issue on [GitHub](https://github.com/dktiwary007/LogBubble/issues).
+For issues, feature requests, or questions, please open an issue on [GitHub](https://github.com/dkumar600/LogBubble/issues).
 
 ## License
 
@@ -226,7 +268,7 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit issues or pull requests on [GitHub](https://github.com/dktiwary007/LogBubble).
+Contributions are welcome! Please feel free to submit issues or pull requests on [GitHub](https://github.com/dkumar600/LogBubble).
 
 ### Getting Started with Development
 
@@ -241,4 +283,4 @@ If you want to contribute to LogBubble:
 
 Built with ❤️ for developers who need better mobile debugging tools.
 
-**Made by [Deepak Kumar](https://github.com/dktiwary007)**
+**Made by [Deepak Kumar](https://github.com/dkumar600)**

package/dist/auto.js

@@ -1,4 +1,2 @@
-// auto.ts
-// Side-effect import for auto-initialization
 import { initNetworkLogger } from "./init";
 initNetworkLogger();

package/dist/core/console.js

@@ -2,9 +2,18 @@
 // Patches console methods to log to the network logger UI
 import { logStore } from "../ui/logStore";
 let isPatching = false;
+const CONSOLE_PATCH_FLAG = "__LOGBUBBLE_CONSOLE_PATCHED__";
+const CONSOLE_PATCH_PROP = "__logbubbleConsolePatched";
 export function patchConsole() {
     if (typeof window === "undefined" || typeof console === "undefined")
         return;
+    const g = globalThis;
+    if (g[CONSOLE_PATCH_FLAG])
+        return;
+    if (console[CONSOLE_PATCH_PROP])
+        return;
+    g[CONSOLE_PATCH_FLAG] = true;
+    console[CONSOLE_PATCH_PROP] = true;
     const originalLog = console.log;
     const originalWarn = console.warn;
     const originalError = console.error;
@@ -14,8 +23,8 @@ export function patchConsole() {
         originalLog.apply(console, args);
         if (!isPatching) {
             isPatching = true;
-            const message = args.map((arg) => formatArg(arg)).join(" ");
-            logStore.addLog(`[LOG] ${message}`, "plugin");
+            const payload = args.length === 1 ? args[0] : args;
+            logStore.addLog(payload, "console");
             isPatching = false;
         }
     };
@@ -23,8 +32,8 @@ export function patchConsole() {
         originalWarn.apply(console, args);
         if (!isPatching) {
             isPatching = true;
-            const message = args.map((arg) => formatArg(arg)).join(" ");
-            logStore.addLog(`[WARN] ${message}`, "plugin");
+            const payload = args.length === 1 ? args[0] : args;
+            logStore.addLog(payload, "console");
             isPatching = false;
         }
     };
@@ -32,8 +41,8 @@ export function patchConsole() {
         originalError.apply(console, args);
         if (!isPatching) {
             isPatching = true;
-            const message = args.map((arg) => formatArg(arg)).join(" ");
-            logStore.addLog(`[ERROR] ${message}`, "plugin");
+            const payload = args.length === 1 ? args[0] : args;
+            logStore.addLog(payload, "console");
             isPatching = false;
         }
     };
@@ -41,8 +50,8 @@ export function patchConsole() {
         originalInfo.apply(console, args);
         if (!isPatching) {
             isPatching = true;
-            const message = args.map((arg) => formatArg(arg)).join(" ");
-            logStore.addLog(`[INFO] ${message}`, "plugin");
+            const payload = args.length === 1 ? args[0] : args;
+            logStore.addLog(payload, "console");
             isPatching = false;
         }
     };
@@ -50,8 +59,8 @@ export function patchConsole() {
         originalDebug.apply(console, args);
         if (!isPatching) {
             isPatching = true;
-            const message = args.map((arg) => formatArg(arg)).join(" ");
-            logStore.addLog(`[DEBUG] ${message}`, "plugin");
+            const payload = args.length === 1 ? args[0] : args;
+            logStore.addLog(payload, "console");
             isPatching = false;
         }
     };

package/dist/core/dom.js

@@ -1,10 +1,17 @@
-// dom.ts
-// (Optional) Patch dynamic <script> and <link> loading for network logging
 import { logStore } from "../ui/logStore";
+const DOM_PATCH_FLAG = "__LOGBUBBLE_DOM_PATCHED__";
+const DOM_PATCH_PROP = "__logbubbleDomPatched";
 export function patchDOM(logFn) {
     if (typeof window === "undefined")
         return;
+    const g = globalThis;
+    if (g[DOM_PATCH_FLAG])
+        return;
+    if (document.createElement[DOM_PATCH_PROP])
+        return;
+    g[DOM_PATCH_FLAG] = true;
     const origCreateElement = document.createElement;
+    origCreateElement[DOM_PATCH_PROP] = true;
     document.createElement = function (tag, options) {
         const el = origCreateElement.call(this, tag, options);
         if (tag === "script" || tag === "link") {

package/dist/core/fetch.js

@@ -1,10 +1,17 @@
-// fetch.ts
-// Patches window.fetch to log network requests in dev mode (browser/WebView only)
 import { logStore } from "../ui/logStore";
+const FETCH_PATCH_FLAG = "__LOGBUBBLE_FETCH_PATCHED__";
+const FETCH_PATCH_PROP = "__logbubbleFetchPatched";
 export function patchFetch(logFn) {
     if (typeof window === "undefined" || typeof window.fetch !== "function")
         return;
+    const g = globalThis;
+    if (g[FETCH_PATCH_FLAG])
+        return;
+    if (window.fetch[FETCH_PATCH_PROP])
+        return;
+    g[FETCH_PATCH_FLAG] = true;
     const originalFetch = window.fetch;
+    originalFetch[FETCH_PATCH_PROP] = true;
     window.fetch = async function (input, init) {
         const method = (init && init.method) ||
             (typeof input === "object" && "method" in input && input.method) ||
@@ -14,6 +21,9 @@ export function patchFetch(logFn) {
             : input instanceof URL
                 ? input.href
                 : input.url;
+        if (typeof url === "string" && url.includes("/__logbubble/")) {
+            return originalFetch.call(this, input, init);
+        }
         const start = Date.now();
         try {
             const response = await originalFetch.call(this, input, init);

package/dist/core/xhr.js

@@ -1,11 +1,18 @@
-// xhr.ts
-// Patches XMLHttpRequest to log network requests in dev mode (browser/WebView only)
 import { logStore } from "../ui/logStore";
+const XHR_PATCH_FLAG = "__LOGBUBBLE_XHR_PATCHED__";
+const XHR_PATCH_PROP = "__logbubbleXhrPatched";
 export function patchXHR(logFn) {
     if (typeof window === "undefined" ||
         typeof window.XMLHttpRequest !== "function")
         return;
+    const g = globalThis;
+    if (g[XHR_PATCH_FLAG])
+        return;
+    if (window.XMLHttpRequest[XHR_PATCH_PROP])
+        return;
+    g[XHR_PATCH_FLAG] = true;
     const OriginalXHR = window.XMLHttpRequest;
+    OriginalXHR[XHR_PATCH_PROP] = true;
     function PatchedXHR() {
         const xhr = new OriginalXHR();
         let url = "";
@@ -22,6 +29,8 @@ export function patchXHR(logFn) {
             start = Date.now();
         });
         xhr.addEventListener("loadend", () => {
+            if (url && url.includes("/__logbubble/"))
+                return;
             const ms = Date.now() - start;
             const message = `[NET] ${method} ${url} ${xhr.status} ${ms}ms`;
             logFn(message);

package/dist/init.js

@@ -1,34 +1,39 @@
-// 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;
+const GLOBAL_INIT_FLAG = "__LOGBUBBLE_INITIALIZED__";
 function isDev() {
     return (typeof process !== "undefined" &&
         process.env &&
         (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "dev"));
 }
 export function initNetworkLogger() {
+    {
+        const g = globalThis;
+        if (g[GLOBAL_INIT_FLAG]) {
+            console.warn("[LogBubble] Already initialized, skipping duplicate init");
+            return;
+        }
+        g[GLOBAL_INIT_FLAG] = true;
+        if (typeof window !== "undefined") {
+            window[GLOBAL_INIT_FLAG] = true;
+        }
+    }
     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.initNetworkLogger = initNetworkLogger;
-    // Optionally auto-init in dev
-    // if (isDev()) {
     initNetworkLogger();
-    // }
 }

package/dist/ui/dragHandler.d.ts

@@ -0,0 +1,22 @@
+export declare class DragHandler {
+    private buttonEl;
+    private onSnapComplete?;
+    private onClick?;
+    private isDragging;
+    private isPointerDown;
+    private dragStartX;
+    private dragStartY;
+    private mouseDownTime;
+    private mouseDownPos;
+    private didActuallyDrag;
+    buttonX: number;
+    buttonY: number;
+    constructor(buttonEl: HTMLDivElement, onSnapComplete?: (() => void) | undefined, onClick?: (() => void) | undefined);
+    attachListeners(): void;
+    isCurrentlyDragging(): boolean;
+    private handleDragStart;
+    private handleDragMove;
+    private handleDragEnd;
+    private updateButtonPosition;
+    private snapToCorner;
+}

package/dist/ui/dragHandler.js

@@ -0,0 +1,127 @@
+export class DragHandler {
+    constructor(buttonEl, onSnapComplete, onClick) {
+        this.buttonEl = buttonEl;
+        this.onSnapComplete = onSnapComplete;
+        this.onClick = onClick;
+        this.isDragging = false;
+        this.isPointerDown = false;
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.mouseDownTime = 0;
+        this.mouseDownPos = { x: 0, y: 0 };
+        this.didActuallyDrag = false;
+        this.buttonX = 0;
+        this.buttonY = 0;
+        this.buttonX = window.innerWidth - 58;
+        this.buttonY = 10;
+        this.updateButtonPosition();
+    }
+    attachListeners() {
+        this.buttonEl.addEventListener("mousedown", (e) => this.handleDragStart(e));
+        this.buttonEl.addEventListener("touchstart", (e) => this.handleDragStart(e), {
+            passive: false,
+        });
+        document.addEventListener("mousemove", (e) => this.handleDragMove(e));
+        document.addEventListener("touchmove", (e) => this.handleDragMove(e), {
+            passive: false,
+        });
+        document.addEventListener("mouseup", () => this.handleDragEnd());
+        document.addEventListener("touchend", () => this.handleDragEnd());
+    }
+    isCurrentlyDragging() {
+        return this.isDragging;
+    }
+    handleDragStart(e) {
+        this.isDragging = false;
+        this.didActuallyDrag = false;
+        this.isPointerDown = true;
+        const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+        const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+        this.dragStartX = clientX - this.buttonX;
+        this.dragStartY = clientY - this.buttonY;
+        this.mouseDownTime = Date.now();
+        this.mouseDownPos = { x: clientX, y: clientY };
+        if (e instanceof TouchEvent) {
+            e.preventDefault();
+        }
+    }
+    handleDragMove(e) {
+        if (!this.isPointerDown)
+            return;
+        if (this.dragStartX === 0 && this.dragStartY === 0)
+            return;
+        const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+        const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+        const newX = clientX - this.dragStartX;
+        const newY = clientY - this.dragStartY;
+        const distanceMoved = Math.sqrt(Math.pow(newX - this.buttonX, 2) + Math.pow(newY - this.buttonY, 2));
+        if (distanceMoved > 5) {
+            this.isDragging = true;
+            this.didActuallyDrag = true;
+        }
+        if (!this.isDragging)
+            return;
+        const maxX = window.innerWidth - 48;
+        const maxY = window.innerHeight - 48;
+        this.buttonX = Math.max(0, Math.min(newX, maxX));
+        this.buttonY = Math.max(0, Math.min(newY, maxY));
+        this.updateButtonPosition();
+        if (e instanceof TouchEvent) {
+            e.preventDefault();
+        }
+    }
+    handleDragEnd() {
+        if (!this.isPointerDown)
+            return;
+        if (this.isDragging) {
+            this.snapToCorner();
+        }
+        else if (!this.didActuallyDrag && this.onClick) {
+            this.onClick();
+        }
+        this.isDragging = false;
+        this.isPointerDown = false;
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.mouseDownTime = 0;
+        this.mouseDownPos = { x: 0, y: 0 };
+        this.didActuallyDrag = false;
+    }
+    updateButtonPosition() {
+        this.buttonEl.style.left = `${this.buttonX}px`;
+        this.buttonEl.style.top = `${this.buttonY}px`;
+        this.buttonEl.style.right = "auto";
+    }
+    snapToCorner() {
+        const buttonSize = 48;
+        const margin = 10;
+        const centerX = this.buttonX + buttonSize / 2;
+        const centerY = this.buttonY + buttonSize / 2;
+        const isLeftHalf = centerX < window.innerWidth / 2;
+        const isTopHalf = centerY < window.innerHeight / 2;
+        if (isLeftHalf && isTopHalf) {
+            this.buttonX = margin;
+            this.buttonY = margin;
+        }
+        else if (!isLeftHalf && isTopHalf) {
+            this.buttonX = window.innerWidth - buttonSize - margin;
+            this.buttonY = margin;
+        }
+        else if (isLeftHalf && !isTopHalf) {
+            this.buttonX = margin;
+            this.buttonY = window.innerHeight - buttonSize - margin;
+        }
+        else {
+            this.buttonX = window.innerWidth - buttonSize - margin;
+            this.buttonY = window.innerHeight - buttonSize - margin;
+        }
+        this.buttonEl.style.transition = "left 0.3s ease, top 0.3s ease";
+        this.updateButtonPosition();
+        setTimeout(() => {
+            this.buttonEl.style.transition = "none";
+            if (this.onSnapComplete) {
+                this.onSnapComplete();
+            }
+        }, 300);
+    }
+}

package/dist/ui/filterManager.d.ts

@@ -0,0 +1,15 @@
+import { LogEntry } from "./logStore";
+export type FilterType = "all" | "console" | "network";
+export declare class FilterManager {
+    private consoleFilterBtn;
+    private networkFilterBtn;
+    private onFilterChange;
+    private activeFilter;
+    private perfMonitor;
+    constructor(consoleFilterBtn: HTMLButtonElement, networkFilterBtn: HTMLButtonElement, onFilterChange: (filteredLogs: LogEntry[]) => void);
+    toggleFilter(filter: "console" | "network", allLogs: LogEntry[]): void;
+    applyFilter(allLogs: LogEntry[]): LogEntry[];
+    shouldShowLog(log: LogEntry): boolean;
+    getActiveFilter(): FilterType;
+    private updateFilterButtons;
+}

package/dist/ui/filterManager.js

@@ -0,0 +1,61 @@
+export class FilterManager {
+    constructor(consoleFilterBtn, networkFilterBtn, onFilterChange) {
+        this.consoleFilterBtn = consoleFilterBtn;
+        this.networkFilterBtn = networkFilterBtn;
+        this.onFilterChange = onFilterChange;
+        this.activeFilter = "all";
+        this.perfMonitor = {
+            filterToggleStart: 0,
+        };
+    }
+    toggleFilter(filter, allLogs) {
+        this.perfMonitor.filterToggleStart = performance.now();
+        if (this.activeFilter === filter) {
+            this.activeFilter = "all";
+        }
+        else {
+            this.activeFilter = filter;
+        }
+        this.updateFilterButtons();
+        const filteredLogs = this.applyFilter(allLogs);
+        this.onFilterChange(filteredLogs);
+        const elapsed = performance.now() - this.perfMonitor.filterToggleStart;
+        if (elapsed > 16) {
+            console.warn(`[LogBubble] Filter toggle took ${elapsed.toFixed(2)}ms (target: ≤16ms)`);
+        }
+    }
+    applyFilter(allLogs) {
+        if (this.activeFilter === "all") {
+            return allLogs;
+        }
+        return allLogs.filter((log) => {
+            if (this.activeFilter === "console") {
+                return log.category === "console";
+            }
+            else if (this.activeFilter === "network") {
+                return log.category === "network";
+            }
+            return true;
+        });
+    }
+    shouldShowLog(log) {
+        if (this.activeFilter === "all")
+            return true;
+        if (this.activeFilter === "console")
+            return log.category === "console";
+        if (this.activeFilter === "network")
+            return log.category === "network";
+        return true;
+    }
+    getActiveFilter() {
+        return this.activeFilter;
+    }
+    updateFilterButtons() {
+        const consoleActive = this.activeFilter === "console";
+        const networkActive = this.activeFilter === "network";
+        this.consoleFilterBtn.classList.toggle("filter-active", consoleActive);
+        this.consoleFilterBtn.setAttribute("aria-pressed", consoleActive.toString());
+        this.networkFilterBtn.classList.toggle("filter-active", networkActive);
+        this.networkFilterBtn.setAttribute("aria-pressed", networkActive.toString());
+    }
+}

package/dist/ui/logStore.d.ts

@@ -1,14 +1,27 @@
 export interface LogEntry {
+    key: string;
     timestamp: number;
     message: string;
-    type: "fetch" | "xhr" | "dom" | "plugin";
+    type: "fetch" | "xhr" | "dom" | "plugin" | "console";
+    category: "console" | "network";
+    isCritical?: boolean;
+    count?: number;
 }
 declare class LogStore {
     private logs;
     private listeners;
     private maxLogs;
-    addLog(message: string, type?: LogEntry["type"]): void;
-    getLogs(): LogEntry[];
+    private recentNetworkLogs;
+    private nextKeyId;
+    private networkDedupeKey;
+    private shouldCollapseDuplicate;
+    /**
+     * Estimates payload size without stringifying.
+     * Handles nested objects, arrays, circular references, and deep nesting.
+     */
+    private estimatePayloadSize;
+    addLog(payload: any, type?: LogEntry["type"]): void;
+    getLogs(filterCategory?: "console" | "network"): LogEntry[];
     clearLogs(): void;
     subscribe(listener: (log: LogEntry) => void): () => void;
 }