@expofp/debug 3.1.8 → 3.1.9

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { initDebug } from './lib/init-debug.js';
+import './lib/init-debug.js';
 export * from './lib/settings/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,2 +1,2 @@
-export { initDebug } from './lib/init-debug.js';
+import './lib/init-debug.js';
 export * from './lib/settings/index.js';

package/dist/lib/format-console-args.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+export type FormattedSegment = {
+    text: string;
+    style: CSSProperties;
+};
+export type FormattedArgs = {
+    segments: FormattedSegment[];
+    trailing: unknown[];
+};
+/**
+ * Parse a console-style format string with `%c`/`%s`/`%d`/`%i`/`%f`/`%o`/`%O`/`%%`
+ * into styled text segments plus any trailing unconsumed args. Mirrors browser
+ * DevTools formatting so colored `console.log` output can be rendered in the UI.
+ */
+export declare function formatConsoleArgs(args: unknown[]): FormattedArgs;
+//# sourceMappingURL=format-console-args.d.ts.map

package/dist/lib/format-console-args.js

@@ -0,0 +1,95 @@
+/**
+ * Parse a console-style format string with `%c`/`%s`/`%d`/`%i`/`%f`/`%o`/`%O`/`%%`
+ * into styled text segments plus any trailing unconsumed args. Mirrors browser
+ * DevTools formatting so colored `console.log` output can be rendered in the UI.
+ */
+export function formatConsoleArgs(args) {
+    const fmt = args[0];
+    if (typeof fmt !== 'string' || !fmt.includes('%')) {
+        return { segments: [], trailing: args };
+    }
+    const segments = [];
+    let style = {};
+    let buf = '';
+    let argIdx = 1;
+    let i = 0;
+    const flush = () => {
+        if (buf.length > 0) {
+            segments.push({ text: buf, style });
+            buf = '';
+        }
+    };
+    while (i < fmt.length) {
+        const ch = fmt[i];
+        if (ch !== '%' || i === fmt.length - 1) {
+            buf += ch;
+            i++;
+            continue;
+        }
+        const directive = fmt[i + 1];
+        switch (directive) {
+            case 'c': {
+                flush();
+                const css = args[argIdx++];
+                style = typeof css === 'string' ? parseCss(css) : {};
+                i += 2;
+                break;
+            }
+            case 's': {
+                buf += String(args[argIdx++] ?? '');
+                i += 2;
+                break;
+            }
+            case 'd':
+            case 'i': {
+                const n = Number(args[argIdx++]);
+                buf += Number.isNaN(n) ? 'NaN' : String(Math.trunc(n));
+                i += 2;
+                break;
+            }
+            case 'f': {
+                buf += String(Number(args[argIdx++]));
+                i += 2;
+                break;
+            }
+            case 'o':
+            case 'O': {
+                const v = args[argIdx++];
+                try {
+                    buf += JSON.stringify(v);
+                }
+                catch {
+                    buf += String(v);
+                }
+                i += 2;
+                break;
+            }
+            case '%': {
+                buf += '%';
+                i += 2;
+                break;
+            }
+            default: {
+                buf += ch;
+                i++;
+            }
+        }
+    }
+    flush();
+    return { segments, trailing: args.slice(argIdx) };
+}
+function parseCss(css) {
+    const out = {};
+    for (const decl of css.split(';')) {
+        const colonIdx = decl.indexOf(':');
+        if (colonIdx === -1)
+            continue;
+        const prop = decl.slice(0, colonIdx).trim();
+        const val = decl.slice(colonIdx + 1).trim();
+        if (!prop || !val)
+            continue;
+        const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        out[camel] = val;
+    }
+    return out;
+}

package/dist/lib/init-debug.d.ts

@@ -1,2 +1,2 @@
-export declare function initDebug(): void;
+export {};
 //# sourceMappingURL=init-debug.d.ts.map

package/dist/lib/init-debug.js

@@ -1,14 +1,21 @@
-let debugInitialized = false;
-export function initDebug() {
-    if (debugInitialized) {
-        return;
-    }
-    debugInitialized = true;
-    // if not browser, exit
-    if (typeof window === 'undefined' && typeof document === 'undefined') {
-        return;
-    }
-    // add a simple debug button to the page (right, center, fixed position)
+import { appendLog } from './log-store.js';
+if (typeof console !== 'undefined') {
+    const wrap = (level, original) => (...args) => {
+        appendLog({ level, args, ts: Date.now() });
+        original(...args);
+    };
+    const originalLog = console.log.bind(console);
+    const originalDebug = console.debug.bind(console);
+    const originalInfo = console.info.bind(console);
+    const originalWarn = console.warn.bind(console);
+    const originalError = console.error.bind(console);
+    console.log = wrap('log', originalLog);
+    console.debug = wrap('debug', originalDebug);
+    console.info = wrap('info', originalInfo);
+    console.warn = wrap('warn', originalWarn);
+    console.error = wrap('error', originalError);
+}
+if (typeof window !== 'undefined' || typeof document !== 'undefined') {
     import('./ui/index.js')
         .then(({ renderDebugUi }) => {
         renderDebugUi();

package/dist/lib/log-store.d.ts

@@ -0,0 +1,11 @@
+export type LogLevel = 'log' | 'debug' | 'info' | 'warn' | 'error';
+export type LogEntry = {
+    level: LogLevel;
+    args: unknown[];
+    ts: number;
+};
+export declare function getLogSnapshot(): readonly LogEntry[];
+export declare function subscribeLogStore(listener: () => void): () => void;
+export declare function appendLog(entry: LogEntry): void;
+export declare function clearLogs(): void;
+//# sourceMappingURL=log-store.d.ts.map

package/dist/lib/log-store.js

@@ -0,0 +1,22 @@
+const MAX = 5000;
+let snapshot = [];
+const listeners = new Set();
+export function getLogSnapshot() {
+    return snapshot;
+}
+export function subscribeLogStore(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function appendLog(entry) {
+    snapshot = snapshot.length >= MAX ? [...snapshot.slice(1), entry] : [...snapshot, entry];
+    listeners.forEach((l) => l());
+}
+export function clearLogs() {
+    if (snapshot.length === 0)
+        return;
+    snapshot = [];
+    listeners.forEach((l) => l());
+}

package/dist/lib/settings/index.d.ts

@@ -1,4 +1,5 @@
 export * from './register-boolean-setting.js';
+export * from './register-debug-namespaces-setting.js';
 export * from './register-enum-setting.js';
 export * from './register-setting.js';
 export * from './reset-all-settings.js';

package/dist/lib/settings/index.js

@@ -1,4 +1,5 @@
 export * from './register-boolean-setting.js';
+export * from './register-debug-namespaces-setting.js';
 export * from './register-enum-setting.js';
 export * from './register-setting.js';
 export * from './reset-all-settings.js';

package/dist/lib/settings/register-debug-namespaces-setting.d.ts

@@ -0,0 +1,6 @@
+export declare const STORAGE_KEY = "debug";
+export declare const LOCAL_STORAGE_EVENT = "efp-local-storage";
+export declare function registerDebugNamespacesSetting(): void;
+export declare function getDebugNamespaces(): string;
+export declare function setDebugNamespaces(pattern: string): void;
+//# sourceMappingURL=register-debug-namespaces-setting.d.ts.map

package/dist/lib/settings/register-debug-namespaces-setting.js

@@ -0,0 +1,26 @@
+import debug from 'debug';
+import React from 'react';
+import { editors, resets } from './setting-registry.js';
+export const STORAGE_KEY = 'debug';
+export const LOCAL_STORAGE_EVENT = 'efp-local-storage';
+export function registerDebugNamespacesSetting() {
+    const DebugNamespacesEditorLazy = React.lazy(() => import('../ui/debug-namespaces-editor.js').then((mod) => ({
+        default: mod.DebugNamespacesEditor,
+    })));
+    resets.push(() => setDebugNamespaces(''));
+    editors.push(DebugNamespacesEditorLazy);
+}
+export function getDebugNamespaces() {
+    return localStorage.getItem(STORAGE_KEY) ?? '';
+}
+export function setDebugNamespaces(pattern) {
+    if (pattern) {
+        localStorage.setItem(STORAGE_KEY, pattern);
+        debug.enable(pattern);
+    }
+    else {
+        localStorage.removeItem(STORAGE_KEY);
+        debug.disable();
+    }
+    window.dispatchEvent(new CustomEvent(LOCAL_STORAGE_EVENT, { detail: { key: STORAGE_KEY } }));
+}

package/dist/lib/ui/debug-namespaces-editor.d.ts

@@ -0,0 +1,2 @@
+export declare const DebugNamespacesEditor: React.FC;
+//# sourceMappingURL=debug-namespaces-editor.d.ts.map

package/dist/lib/ui/debug-namespaces-editor.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@radix-ui/themes';
+import { useEffect, useState } from 'react';
+import { getDebugNamespaces, LOCAL_STORAGE_EVENT, setDebugNamespaces, STORAGE_KEY, } from '../settings/register-debug-namespaces-setting.js';
+import { SettingsItem } from './settings-item.js';
+export const DebugNamespacesEditor = () => {
+    const [value, setValue] = useState(getDebugNamespaces);
+    useEffect(() => {
+        const update = () => setValue(getDebugNamespaces());
+        const onLocal = (e) => {
+            const detail = e.detail;
+            if (detail?.key === STORAGE_KEY)
+                update();
+        };
+        const onStorage = (e) => {
+            if (e.key === STORAGE_KEY)
+                update();
+        };
+        window.addEventListener('storage', onStorage);
+        window.addEventListener(LOCAL_STORAGE_EVENT, onLocal);
+        return () => {
+            window.removeEventListener('storage', onStorage);
+            window.removeEventListener(LOCAL_STORAGE_EVENT, onLocal);
+        };
+    }, []);
+    return (_jsx(SettingsItem, { label: "Debug namespaces", children: _jsx(TextField.Root, { placeholder: "e.g. efp:*", value: value, onChange: (e) => {
+                const next = e.target.value;
+                setValue(next);
+                setDebugNamespaces(next);
+            }, style: { minWidth: 220 } }) }));
+};
+DebugNamespacesEditor.displayName = 'DebugNamespacesEditor';

package/dist/lib/ui/log-tab.js

@@ -1,6 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { Box, Callout } from '@radix-ui/themes';
+import { Box, Button, Callout, Code, Flex } from '@radix-ui/themes';
+import { formatConsoleArgs } from '../format-console-args.js';
+import { clearLogs } from '../log-store.js';
+import { useLogBuffer } from '../use-log-buffer.js';
 export const LogTab = () => {
-    return (_jsx(Box, { pt: "20px", children: _jsx(Box, { mb: "20px", children: _jsxs(Callout.Root, { children: [_jsx(Callout.Icon, { children: _jsx(InfoCircledIcon, {}) }), _jsx(Callout.Text, { children: "Implement to intercept console.info, console.warn and console.error and output them here when logging enabled." })] }) }) }));
+    const logs = useLogBuffer();
+    return (_jsxs(Box, { pt: "20px", children: [_jsxs(Flex, { justify: "between", align: "center", mb: "3", children: [_jsxs(Box, { children: [logs.length, " ", logs.length === 1 ? 'entry' : 'entries'] }), _jsx(Button, { size: "1", variant: "soft", onClick: clearLogs, disabled: logs.length === 0, children: "Clear" })] }), logs.length === 0 ? (_jsxs(Callout.Root, { children: [_jsx(Callout.Icon, { children: _jsx(InfoCircledIcon, {}) }), _jsx(Callout.Text, { children: "No logs yet \u2014 console.log / info / warn / error calls will appear here." })] })) : (logs.map((entry, i) => _jsx(LogRow, { entry: entry }, i)))] }));
 };
+const levelColor = {
+    log: undefined,
+    debug: 'gray',
+    info: 'blue',
+    warn: 'amber',
+    error: 'red',
+};
+const LogRow = ({ entry }) => {
+    const { segments, trailing } = formatConsoleArgs(entry.args);
+    return (_jsxs(Box, { mb: "1", style: {
+            fontFamily: 'monospace',
+            fontSize: 12,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+        }, children: [_jsx(Code, { size: "1", variant: "ghost", children: formatTime(entry.ts) }), ' ', _jsxs(Code, { size: "1", variant: "ghost", color: levelColor[entry.level], children: ["[", entry.level, "]"] }), ' ', segments.length > 0
+                ? renderFormatted(segments, trailing)
+                : entry.args.map((a, i) => (_jsxs("span", { children: [i > 0 ? ' ' : '', formatArg(a)] }, i)))] }));
+};
+function renderFormatted(segments, trailing) {
+    return (_jsxs(_Fragment, { children: [segments.map((s, i) => (_jsx("span", { style: s.style, children: s.text }, i))), trailing.map((a, i) => (_jsxs("span", { children: [" ", formatArg(a)] }, `t-${i}`)))] }));
+}
+function formatTime(ts) {
+    return new Date(ts).toISOString().slice(11, 23);
+}
+function formatArg(a) {
+    if (typeof a === 'string')
+        return a;
+    if (a instanceof Error)
+        return `${a.name}: ${a.message}`;
+    try {
+        return JSON.stringify(a);
+    }
+    catch {
+        return String(a);
+    }
+}

package/dist/lib/ui/render-debug-ui.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerBooleanSetting } from '../settings/index.js';
+import { registerDebugNamespacesSetting } from '../settings/register-debug-namespaces-setting.js';
 import { addDebugSecretListener } from '../utils/add-debug-secret-listener.js';
 let rendered = false;
 export function renderDebugUi() {
@@ -8,6 +9,7 @@ export function renderDebugUi() {
     }
     rendered = true;
     const showDebugButtonSetting = registerBooleanSetting('Show Debug Button Overlay');
+    registerDebugNamespacesSetting();
     const render = async (open) => {
         const { DebugUi } = await import('./debug-ui.js');
         const { createRoot } = await import('react-dom/client');

package/dist/lib/use-log-buffer.d.ts

@@ -0,0 +1,3 @@
+import { type LogEntry } from './log-store.js';
+export declare function useLogBuffer(): readonly LogEntry[];
+//# sourceMappingURL=use-log-buffer.d.ts.map

package/dist/lib/use-log-buffer.js

@@ -0,0 +1,5 @@
+import { useSyncExternalStore } from 'react';
+import { getLogSnapshot, subscribeLogStore } from './log-store.js';
+export function useLogBuffer() {
+    return useSyncExternalStore(subscribeLogStore, getLogSnapshot, getLogSnapshot);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/debug",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "type": "module",
   "description": "ExpoFP SDK internal: debug utilities",
   "homepage": "https://developer.expofp.com/",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
+    "debug": "^4.4.3",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {