dev-inspector 1.0.5 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-inspector",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "In-page devtools-style logger panel for web apps (console + network).",
   "repository": {
     "type": "git",
@@ -16,7 +16,8 @@
     "lint-staged": "lint-staged",
     "demo": "vite demo --open",
     "demo:build": "vite build demo",
-    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf lib",
+    "build": "npm run clean && tsc -p tsconfig.json",
     "lint": "eslint \"src/**/*.{ts,tsx,js}\"",
     "prepublishOnly": "npm run build"
   },

package/lib/ui/logList/networkDetails.d.ts

@@ -1,2 +0,0 @@
-import type { NetworkLogEntry } from "../../utils/types";
-export declare function createNetworkDetails(doc: Document, entry: NetworkLogEntry): HTMLElement | null;

package/lib/ui/logList/networkDetails.js

@@ -1,227 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNetworkDetails = createNetworkDetails;
-const jsonViewer_1 = require("../jsonViewer");
-function tryParseJson(text) {
-    const t = text.trim();
-    if (t.length < 2)
-        return undefined;
-    const looksLikeObject = t.startsWith("{") && t.endsWith("}");
-    const looksLikeArray = t.startsWith("[") && t.endsWith("]");
-    if (!looksLikeObject && !looksLikeArray)
-        return undefined;
-    try {
-        return JSON.parse(t);
-    }
-    catch (_a) {
-        return undefined;
-    }
-}
-function safeStringify(value) {
-    const seen = new WeakSet();
-    const replacer = (_key, v) => {
-        if (typeof v === "object" && v !== null) {
-            const o = v;
-            if (seen.has(o))
-                return "[circular]";
-            seen.add(o);
-        }
-        return v;
-    };
-    try {
-        return JSON.stringify(value, replacer, 2);
-    }
-    catch (_a) {
-        try {
-            return String(value);
-        }
-        catch (_b) {
-            return "[unserializable]";
-        }
-    }
-}
-async function copyText(text) {
-    var _a, _b;
-    try {
-        const nav = globalThis;
-        const fn = (_b = (_a = nav.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText;
-        if (typeof fn === "function") {
-            await fn(text);
-            return true;
-        }
-    }
-    catch (_c) {
-        void 0;
-    }
-    try {
-        if (typeof document === "undefined")
-            return false;
-        const ta = document.createElement("textarea");
-        ta.value = text;
-        ta.setAttribute("readonly", "true");
-        ta.style.position = "fixed";
-        ta.style.left = "-9999px";
-        ta.style.top = "0";
-        document.body.append(ta);
-        ta.select();
-        const ok = document.execCommand("copy");
-        ta.remove();
-        return ok;
-    }
-    catch (_d) {
-        return false;
-    }
-}
-function prefersReducedMotion() {
-    var _a, _b;
-    try {
-        const mm = globalThis;
-        return ((_b = (_a = mm.matchMedia) === null || _a === void 0 ? void 0 : _a.call(mm, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches) === true;
-    }
-    catch (_c) {
-        return false;
-    }
-}
-function rand(min, max) {
-    return min + Math.random() * (max - min);
-}
-function launchMiniConfetti(anchor) {
-    if (prefersReducedMotion())
-        return;
-    if (typeof document === "undefined")
-        return;
-    const rect = anchor.getBoundingClientRect();
-    const cx = rect.left + rect.width / 2;
-    const cy = rect.top + rect.height / 2;
-    const root = document.createElement("div");
-    root.style.position = "fixed";
-    root.style.left = "0";
-    root.style.top = "0";
-    root.style.width = "0";
-    root.style.height = "0";
-    root.style.pointerEvents = "none";
-    root.style.zIndex = "2147483647";
-    document.body.append(root);
-    const colors = ["#a7ff00", "#7c5cff", "#00c4ff", "#ff9030", "#ef4444"];
-    const n = 14;
-    const duration = 520;
-    for (let i = 0; i < n; i += 1) {
-        const p = document.createElement("span");
-        const size = Math.round(rand(3, 6));
-        p.style.position = "fixed";
-        p.style.left = `${cx}px`;
-        p.style.top = `${cy}px`;
-        p.style.width = `${size}px`;
-        p.style.height = `${size}px`;
-        p.style.borderRadius = Math.random() < 0.35 ? "999px" : "2px";
-        p.style.background = colors[i % colors.length];
-        p.style.opacity = "1";
-        p.style.willChange = "transform, opacity";
-        root.append(p);
-        const angle = rand(0, Math.PI * 2);
-        const dist = rand(18, 46);
-        const dx = Math.cos(angle) * dist;
-        const dy = Math.sin(angle) * dist + rand(8, 16);
-        const rot = rand(-220, 220);
-        const delay = Math.round(rand(0, 60));
-        try {
-            const anim = p.animate([
-                { transform: `translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1)`, opacity: 1 },
-                { transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(0.9)`, opacity: 0 },
-            ], { duration, delay, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)", fill: "forwards" });
-            anim.addEventListener("finish", () => p.remove());
-        }
-        catch (_a) {
-            globalThis.setTimeout(() => p.remove(), duration + delay + 50);
-        }
-    }
-    globalThis.setTimeout(() => root.remove(), duration + 120);
-}
-function valueToElement(doc, value) {
-    if (typeof value === "string") {
-        const parsed = tryParseJson(value);
-        if (parsed && typeof parsed === "object") {
-            return (0, jsonViewer_1.createJsonViewer)(doc, parsed, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
-        }
-        const el = doc.createElement("div");
-        el.className = "di-netBodyText";
-        el.textContent = value;
-        return el;
-    }
-    if (value instanceof Error) {
-        const el = doc.createElement("div");
-        el.className = "di-netBodyText";
-        el.textContent = `${value.name}: ${value.message}`;
-        return el;
-    }
-    if (value === null || typeof value !== "object") {
-        const el = doc.createElement("div");
-        el.className = "di-netBodyText";
-        el.textContent = String(value);
-        return el;
-    }
-    return (0, jsonViewer_1.createJsonViewer)(doc, value, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
-}
-function valueToCopyText(value) {
-    if (typeof value === "string")
-        return value;
-    if (value instanceof Error)
-        return `${value.name}: ${value.message}`;
-    return safeStringify(value);
-}
-function createBodyDetails(doc, title, value, truncated, maxLen) {
-    const details = doc.createElement("details");
-    details.className = "di-details di-netBodyDetails";
-    const summary = doc.createElement("summary");
-    summary.className = "di-detailsSummary di-netDetailsSummary";
-    const titleEl = doc.createElement("span");
-    titleEl.className = "di-netDetailsTitle";
-    titleEl.textContent = title;
-    const copyBtn = doc.createElement("button");
-    copyBtn.type = "button";
-    copyBtn.className = "di-copyBtn";
-    copyBtn.textContent = "Copy";
-    copyBtn.setAttribute("aria-label", `Copy ${title.toLowerCase()}`);
-    copyBtn.addEventListener("click", (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const txt = valueToCopyText(value);
-        void copyText(txt).then((ok) => {
-            if (!ok)
-                return;
-            launchMiniConfetti(copyBtn);
-            const prev = copyBtn.textContent;
-            copyBtn.textContent = "Copied";
-            globalThis.setTimeout(() => {
-                copyBtn.textContent = prev !== null && prev !== void 0 ? prev : "Copy";
-            }, 900);
-        });
-    });
-    summary.append(titleEl, copyBtn);
-    const body = doc.createElement("div");
-    body.className = "di-detailsBody";
-    if (truncated) {
-        const warn = doc.createElement("div");
-        warn.className = "di-netTrunc";
-        warn.textContent = typeof maxLen === "number" ? `Truncated to first ${maxLen} characters.` : "Truncated.";
-        body.append(warn);
-    }
-    body.append(valueToElement(doc, value));
-    details.append(summary, body);
-    return details;
-}
-function createNetworkDetails(doc, entry) {
-    const hasReq = typeof entry.requestBody !== "undefined";
-    const hasRes = typeof entry.responseBody !== "undefined";
-    if (!hasReq && !hasRes)
-        return null;
-    const wrap = doc.createElement("div");
-    wrap.className = "di-netDetailsWrap";
-    if (hasReq) {
-        wrap.append(createBodyDetails(doc, "Request", entry.requestBody, entry.requestBodyTruncated === true, entry.bodyMaxLength));
-    }
-    if (hasRes) {
-        wrap.append(createBodyDetails(doc, "Response", entry.responseBody, entry.responseBodyTruncated === true, entry.bodyMaxLength));
-    }
-    return wrap;
-}

package/lib/ui/logList.d.ts

@@ -1,7 +0,0 @@
-import type { LogEntry } from "../utils/types";
-export type LogList = {
-    el: HTMLUListElement;
-    append: (entry: LogEntry) => void;
-    clear: () => void;
-};
-export declare function createLogList(doc: Document): LogList;

package/lib/ui/logList.js

@@ -1,117 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createLogList = createLogList;
-const jsonViewer_1 = require("./jsonViewer");
-const networkDetails_1 = require("./logList/networkDetails");
-function fmtTime(ts) {
-    const d = new Date(ts);
-    const hh = String(d.getHours()).padStart(2, "0");
-    const mm = String(d.getMinutes()).padStart(2, "0");
-    const ss = String(d.getSeconds()).padStart(2, "0");
-    return `${hh}:${mm}:${ss}`;
-}
-function toneForEntry(entry) {
-    if (entry.source === "console") {
-        if (entry.level === "error")
-            return "error";
-        if (entry.level === "warn")
-            return "warning";
-        return "neutral";
-    }
-    const s = entry.status;
-    if (typeof s !== "number")
-        return "error";
-    if (s >= 400)
-        return "error";
-    if (s >= 300)
-        return "warning";
-    return "success";
-}
-function classForTone(tone) {
-    if (tone === "error")
-        return "di-itemToneError";
-    if (tone === "warning")
-        return "di-itemToneWarning";
-    if (tone === "success")
-        return "di-itemToneSuccess";
-    return "di-itemToneNeutral";
-}
-function isNetworkFailure(entry) {
-    if (entry.source !== "network")
-        return false;
-    return typeof entry.status !== "number" || entry.status >= 400;
-}
-function isInspectableValue(value) {
-    if (typeof value !== "object" || value === null)
-        return false;
-    if (value instanceof Error)
-        return false;
-    if (value instanceof Date)
-        return false;
-    if (value instanceof RegExp)
-        return false;
-    return true;
-}
-function getInspectableArgs(args) {
-    return args.filter(isInspectableValue);
-}
-function createLogList(doc) {
-    const el = doc.createElement("ul");
-    el.className = "di-list";
-    const append = (entry) => {
-        const li = doc.createElement("li");
-        const tone = toneForEntry(entry);
-        li.className = `di-item ${classForTone(tone)}`;
-        const meta = doc.createElement("div");
-        meta.className = "di-meta";
-        const time = doc.createElement("span");
-        time.textContent = fmtTime(entry.timestamp);
-        const source = doc.createElement("span");
-        source.textContent = entry.source;
-        const detail = doc.createElement("span");
-        if (entry.source === "console") {
-            detail.textContent = entry.level;
-        }
-        else {
-            detail.className = `di-statusChip ${isNetworkFailure(entry) ? "di-statusChipError" : "di-statusChipSuccess"}`;
-            detail.textContent = typeof entry.status === "number" ? String(entry.status) : "ERR";
-        }
-        meta.append(time, source, detail);
-        li.append(meta);
-        if (entry.message && entry.message.trim().length > 0) {
-            const msg = doc.createElement("div");
-            msg.className = "di-msg";
-            msg.textContent = entry.message;
-            li.append(msg);
-        }
-        if (entry.source === "console") {
-            const inspectable = getInspectableArgs(entry.args);
-            if (inspectable.length > 0) {
-                const details = doc.createElement("details");
-                details.className = "di-details";
-                const summary = doc.createElement("summary");
-                summary.className = "di-detailsSummary";
-                summary.textContent = "Inspect";
-                const viewerWrap = doc.createElement("div");
-                viewerWrap.className = "di-detailsBody";
-                viewerWrap.append((0, jsonViewer_1.createJsonViewer)(doc, inspectable.length === 1 ? inspectable[0] : inspectable, {
-                    maxDepth: 6,
-                    maxKeys: 200,
-                    maxNodes: 2000,
-                }));
-                details.append(summary, viewerWrap);
-                li.append(details);
-            }
-        }
-        if (entry.source === "network") {
-            const details = (0, networkDetails_1.createNetworkDetails)(doc, entry);
-            if (details)
-                li.append(details);
-        }
-        el.append(li);
-    };
-    const clear = () => {
-        el.replaceChildren();
-    };
-    return { el, append, clear };
-}

package/lib/ui/panel.d.ts

@@ -1,15 +0,0 @@
-import type { LogStorage } from "../storage/logStorage";
-export type PanelOptions = {
-    storage: LogStorage;
-    title?: string;
-    initiallyOpen?: boolean;
-    mount?: HTMLElement;
-};
-export type PanelHandle = {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    destroy: () => void;
-    isOpen: () => boolean;
-};
-export declare function createPanel(options: PanelOptions): PanelHandle;