@amit_mandal/smart-logger-devtools 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/SmartLogger DevTools.md +156 -0
- package/SmartLogger.md +113 -0
- package/amit_mandal-smart-logger-devtools-1.0.0.tgz +0 -0
- package/dist/index.d.mts +55 -0
- package/dist/index.d.ts +55 -0
- package/dist/index.js +376 -0
- package/dist/index.mjs +348 -0
- package/package.json +46 -0
- package/src/SmartLoggerDevTools.tsx +49 -0
- package/src/core/eventEmitter.ts +30 -0
- package/src/core/logger.ts +114 -0
- package/src/global.d.ts +1 -0
- package/src/hooks/useLogHistory.ts +37 -0
- package/src/index.ts +6 -0
- package/src/styles/index.css +321 -0
- package/src/types.ts +22 -0
- package/src/ui/FloatingButton.tsx +24 -0
- package/src/ui/LogModal.tsx +97 -0
- package/src/utils/formatters.ts +29 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __typeError = (msg) => {
|
|
7
|
+
throw TypeError(msg);
|
|
8
|
+
};
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
23
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
24
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
25
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
26
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
27
|
+
|
|
28
|
+
// src/index.ts
|
|
29
|
+
var index_exports = {};
|
|
30
|
+
__export(index_exports, {
|
|
31
|
+
SmartLogger: () => logger_default,
|
|
32
|
+
SmartLoggerDevTools: () => SmartLoggerDevTools,
|
|
33
|
+
useLogHistory: () => useLogHistory
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(index_exports);
|
|
36
|
+
|
|
37
|
+
// src/core/eventEmitter.ts
|
|
38
|
+
var CustomEventEmitter = class {
|
|
39
|
+
constructor() {
|
|
40
|
+
this.listeners = {};
|
|
41
|
+
}
|
|
42
|
+
on(event, listener) {
|
|
43
|
+
if (!this.listeners[event]) {
|
|
44
|
+
this.listeners[event] = [];
|
|
45
|
+
}
|
|
46
|
+
this.listeners[event].push(listener);
|
|
47
|
+
return () => this.removeListener(event, listener);
|
|
48
|
+
}
|
|
49
|
+
emit(event, ...args) {
|
|
50
|
+
if (this.listeners[event]) {
|
|
51
|
+
this.listeners[event].forEach((listener) => {
|
|
52
|
+
listener(...args);
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
removeListener(event, listener) {
|
|
57
|
+
if (this.listeners[event]) {
|
|
58
|
+
this.listeners[event] = this.listeners[event].filter(
|
|
59
|
+
(l) => l !== listener
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
var eventEmitter = new CustomEventEmitter();
|
|
65
|
+
|
|
66
|
+
// src/core/logger.ts
|
|
67
|
+
var LOG_EVENT = "log";
|
|
68
|
+
var _config, _logHistory, _originalConsoleMethods, _isInitialized, _SmartLogger_static, interceptLog_fn;
|
|
69
|
+
var _SmartLogger = class _SmartLogger {
|
|
70
|
+
static getConfig() {
|
|
71
|
+
return { ...__privateGet(_SmartLogger, _config) };
|
|
72
|
+
}
|
|
73
|
+
static init(config) {
|
|
74
|
+
if (__privateGet(_SmartLogger, _isInitialized)) {
|
|
75
|
+
console.warn("SmartLogger is already initialized. Call destroy() first to re-initialize.");
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
Object.assign(__privateGet(_SmartLogger, _config), config);
|
|
79
|
+
["log", "warn", "error", "info", "debug"].forEach((level) => {
|
|
80
|
+
__privateGet(_SmartLogger, _originalConsoleMethods)[level] = console[level];
|
|
81
|
+
console[level] = (...args) => {
|
|
82
|
+
var _a;
|
|
83
|
+
return __privateMethod(_a = _SmartLogger, _SmartLogger_static, interceptLog_fn).call(_a, level, args);
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
__privateSet(_SmartLogger, _isInitialized, true);
|
|
87
|
+
}
|
|
88
|
+
static getHistory() {
|
|
89
|
+
const maxHistory = __privateGet(_SmartLogger, _config).maxHistory || 100;
|
|
90
|
+
return __privateGet(_SmartLogger, _logHistory).slice(Math.max(__privateGet(_SmartLogger, _logHistory).length - maxHistory, 0));
|
|
91
|
+
}
|
|
92
|
+
static clearHistory() {
|
|
93
|
+
__privateSet(_SmartLogger, _logHistory, []);
|
|
94
|
+
eventEmitter.emit("clearHistory");
|
|
95
|
+
}
|
|
96
|
+
static destroy() {
|
|
97
|
+
if (!__privateGet(_SmartLogger, _isInitialized)) {
|
|
98
|
+
console.warn("SmartLogger is not initialized. No need to destroy.");
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
["log", "warn", "error", "info", "debug"].forEach((level) => {
|
|
102
|
+
if (__privateGet(_SmartLogger, _originalConsoleMethods)[level]) {
|
|
103
|
+
console[level] = __privateGet(_SmartLogger, _originalConsoleMethods)[level];
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
__privateSet(_SmartLogger, _logHistory, []);
|
|
107
|
+
__privateSet(_SmartLogger, _originalConsoleMethods, {});
|
|
108
|
+
__privateSet(_SmartLogger, _isInitialized, false);
|
|
109
|
+
eventEmitter.emit("destroy");
|
|
110
|
+
}
|
|
111
|
+
static subscribeToLogs(callback) {
|
|
112
|
+
return eventEmitter.on(LOG_EVENT, callback);
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
_config = new WeakMap();
|
|
116
|
+
_logHistory = new WeakMap();
|
|
117
|
+
_originalConsoleMethods = new WeakMap();
|
|
118
|
+
_isInitialized = new WeakMap();
|
|
119
|
+
_SmartLogger_static = new WeakSet();
|
|
120
|
+
interceptLog_fn = function(level, args) {
|
|
121
|
+
if (!__privateGet(_SmartLogger, _config).enabled || !__privateGet(_SmartLogger, _config).level?.includes(level)) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
const timestamp = (/* @__PURE__ */ new Date()).toISOString();
|
|
125
|
+
let message = "";
|
|
126
|
+
let componentName = "";
|
|
127
|
+
let logArgs = [...args];
|
|
128
|
+
if (__privateGet(_SmartLogger, _config).showComponentName && typeof args[0] === "string" && args[0].startsWith("[") && args[0].endsWith("]")) {
|
|
129
|
+
componentName = args[0];
|
|
130
|
+
logArgs = args.slice(1);
|
|
131
|
+
}
|
|
132
|
+
if (typeof logArgs[0] === "string") {
|
|
133
|
+
message = logArgs[0];
|
|
134
|
+
} else if (logArgs.length > 0) {
|
|
135
|
+
message = String(logArgs[0]);
|
|
136
|
+
}
|
|
137
|
+
const formattedArgs = [];
|
|
138
|
+
if (__privateGet(_SmartLogger, _config).showTimestamp) {
|
|
139
|
+
formattedArgs.push(`%c${timestamp}`, "color: gray;");
|
|
140
|
+
}
|
|
141
|
+
if (__privateGet(_SmartLogger, _config).showComponentName && componentName) {
|
|
142
|
+
formattedArgs.push(`%c${componentName}`, "color: blue;");
|
|
143
|
+
}
|
|
144
|
+
formattedArgs.push(...logArgs);
|
|
145
|
+
if (__privateGet(_SmartLogger, _originalConsoleMethods)[level]) {
|
|
146
|
+
__privateGet(_SmartLogger, _originalConsoleMethods)[level].apply(console, formattedArgs);
|
|
147
|
+
}
|
|
148
|
+
const logEntry = {
|
|
149
|
+
id: Math.random().toString(36).substring(2, 9),
|
|
150
|
+
// Simple unique ID
|
|
151
|
+
timestamp,
|
|
152
|
+
level,
|
|
153
|
+
message,
|
|
154
|
+
args: logArgs
|
|
155
|
+
};
|
|
156
|
+
__privateGet(_SmartLogger, _logHistory).push(logEntry);
|
|
157
|
+
const maxHistory = __privateGet(_SmartLogger, _config).maxHistory || 100;
|
|
158
|
+
if (__privateGet(_SmartLogger, _logHistory).length > maxHistory) {
|
|
159
|
+
__privateSet(_SmartLogger, _logHistory, __privateGet(_SmartLogger, _logHistory).slice(__privateGet(_SmartLogger, _logHistory).length - maxHistory));
|
|
160
|
+
}
|
|
161
|
+
eventEmitter.emit(LOG_EVENT, logEntry);
|
|
162
|
+
};
|
|
163
|
+
__privateAdd(_SmartLogger, _SmartLogger_static);
|
|
164
|
+
__privateAdd(_SmartLogger, _config, {
|
|
165
|
+
enabled: typeof process !== "undefined" && process.env.NODE_ENV !== "production",
|
|
166
|
+
showTimestamp: true,
|
|
167
|
+
showComponentName: false,
|
|
168
|
+
maxHistory: 100,
|
|
169
|
+
level: ["log", "warn", "error", "info", "debug"]
|
|
170
|
+
});
|
|
171
|
+
__privateAdd(_SmartLogger, _logHistory, []);
|
|
172
|
+
__privateAdd(_SmartLogger, _originalConsoleMethods, {});
|
|
173
|
+
__privateAdd(_SmartLogger, _isInitialized, false);
|
|
174
|
+
var SmartLogger = _SmartLogger;
|
|
175
|
+
var logger_default = SmartLogger;
|
|
176
|
+
|
|
177
|
+
// src/SmartLoggerDevTools.tsx
|
|
178
|
+
var import_react4 = require("react");
|
|
179
|
+
|
|
180
|
+
// src/ui/FloatingButton.tsx
|
|
181
|
+
var import_react = require("react");
|
|
182
|
+
|
|
183
|
+
// #style-inject:#style-inject
|
|
184
|
+
function styleInject(css, { insertAt } = {}) {
|
|
185
|
+
if (!css || typeof document === "undefined") return;
|
|
186
|
+
const head = document.head || document.getElementsByTagName("head")[0];
|
|
187
|
+
const style = document.createElement("style");
|
|
188
|
+
style.type = "text/css";
|
|
189
|
+
if (insertAt === "top") {
|
|
190
|
+
if (head.firstChild) {
|
|
191
|
+
head.insertBefore(style, head.firstChild);
|
|
192
|
+
} else {
|
|
193
|
+
head.appendChild(style);
|
|
194
|
+
}
|
|
195
|
+
} else {
|
|
196
|
+
head.appendChild(style);
|
|
197
|
+
}
|
|
198
|
+
if (style.styleSheet) {
|
|
199
|
+
style.styleSheet.cssText = css;
|
|
200
|
+
} else {
|
|
201
|
+
style.appendChild(document.createTextNode(css));
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// src/styles/index.css
|
|
206
|
+
styleInject('.smart-logger-floating-button {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background:\n linear-gradient(\n 135deg,\n #667eea 0%,\n #764ba2 100%);\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n z-index: 9998;\n font-weight: bold;\n}\n.smart-logger-floating-button:hover,\n.smart-logger-floating-button.hovered {\n transform: scale(1.1);\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n}\n.smart-logger-floating-button:active {\n transform: scale(0.95);\n}\n.smart-logger-button-icon {\n position: absolute;\n font-size: 28px;\n}\n.smart-logger-button-count {\n position: absolute;\n bottom: 0;\n right: 0;\n background: #ff4757;\n color: white;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: bold;\n border: 2px solid white;\n}\n.smart-logger-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n animation: fadeIn 0.3s ease;\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.smart-logger-modal {\n background: white;\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n width: 90%;\n max-width: 900px;\n height: 80vh;\n max-height: 600px;\n display: flex;\n flex-direction: column;\n animation: slideUp 0.3s ease;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n}\n@keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n.smart-logger-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n background:\n linear-gradient(\n 135deg,\n #667eea 0%,\n #764ba2 100%);\n color: white;\n border-radius: 12px 12px 0 0;\n}\n.smart-logger-modal-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n}\n.smart-logger-close-button {\n background: transparent;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n.smart-logger-close-button:hover {\n transform: scale(1.2);\n}\n.smart-logger-modal-controls {\n display: flex;\n gap: 10px;\n padding: 15px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #f9f9f9;\n flex-wrap: wrap;\n}\n.smart-logger-search-input,\n.smart-logger-filter-select {\n padding: 8px 12px;\n border: 1px solid #d0d0d0;\n border-radius: 6px;\n font-size: 14px;\n font-family: inherit;\n transition: border-color 0.2s ease;\n}\n.smart-logger-search-input {\n flex: 1;\n min-width: 200px;\n}\n.smart-logger-search-input:focus,\n.smart-logger-filter-select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n.smart-logger-filter-select {\n min-width: 120px;\n}\n.smart-logger-clear-button {\n padding: 8px 16px;\n background: #ff4757;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n transition: background 0.2s ease;\n}\n.smart-logger-clear-button:hover {\n background: #ff3838;\n}\n.smart-logger-modal-content {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n}\n.smart-logger-log-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.smart-logger-log-item {\n padding: 12px 20px;\n border-bottom: 1px solid #f0f0f0;\n transition: background-color 0.2s ease;\n}\n.smart-logger-log-item:hover {\n background-color: #f9f9f9;\n}\n.smart-logger-log-item.error {\n background-color: #fff5f5;\n}\n.smart-logger-log-item.warn {\n background-color: #fffbf0;\n}\n.smart-logger-log-item.info {\n background-color: #f0f7ff;\n}\n.smart-logger-log-header {\n display: flex;\n gap: 10px;\n align-items: center;\n margin-bottom: 6px;\n}\n.smart-logger-log-level {\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n.smart-logger-log-timestamp {\n font-size: 12px;\n color: #999;\n font-family:\n "Monaco",\n "Courier New",\n monospace;\n}\n.smart-logger-log-message {\n font-size: 14px;\n color: #333;\n word-break: break-word;\n font-family:\n "Monaco",\n "Courier New",\n monospace;\n}\n.smart-logger-log-details {\n margin-top: 8px;\n font-size: 12px;\n}\n.smart-logger-log-details summary {\n cursor: pointer;\n color: #667eea;\n font-weight: 500;\n padding: 4px 0;\n user-select: none;\n}\n.smart-logger-log-details summary:hover {\n text-decoration: underline;\n}\n.smart-logger-log-args {\n background: #f5f5f5;\n padding: 10px;\n border-radius: 4px;\n overflow-x: auto;\n font-size: 12px;\n margin: 8px 0 0 0;\n border: 1px solid #e0e0e0;\n max-height: 200px;\n overflow-y: auto;\n}\n.smart-logger-empty-state {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #999;\n font-size: 16px;\n}\n.smart-logger-modal-footer {\n padding: 12px 20px;\n border-top: 1px solid #e0e0e0;\n background: #f9f9f9;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 0 0 12px 12px;\n}\n.smart-logger-log-count {\n font-size: 12px;\n color: #666;\n font-weight: 500;\n}\n@media (max-width: 768px) {\n .smart-logger-modal {\n width: 95%;\n max-height: 90vh;\n }\n .smart-logger-modal-controls {\n flex-direction: column;\n }\n .smart-logger-search-input,\n .smart-logger-filter-select,\n .smart-logger-clear-button {\n width: 100%;\n }\n .smart-logger-floating-button {\n bottom: 10px;\n right: 10px;\n width: 50px;\n height: 50px;\n }\n}\n.text-red-500 {\n color: #ff4757;\n}\n.text-yellow-500 {\n color: #ffa502;\n}\n.text-blue-500 {\n color: #0984e3;\n}\n.text-purple-500 {\n color: #a29bfe;\n}\n.text-gray-700 {\n color: #2d3436;\n}\n');
|
|
207
|
+
|
|
208
|
+
// src/ui/FloatingButton.tsx
|
|
209
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
210
|
+
var FloatingButton = ({ onClick, logCount }) => {
|
|
211
|
+
const [isHovered, setIsHovered] = (0, import_react.useState)(false);
|
|
212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
213
|
+
"button",
|
|
214
|
+
{
|
|
215
|
+
onClick,
|
|
216
|
+
onMouseEnter: () => setIsHovered(true),
|
|
217
|
+
onMouseLeave: () => setIsHovered(false),
|
|
218
|
+
className: `smart-logger-floating-button ${isHovered ? "hovered" : ""}`,
|
|
219
|
+
title: "Open SmartLogger DevTools",
|
|
220
|
+
children: [
|
|
221
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smart-logger-button-icon", children: "\u{1F4CB}" }),
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smart-logger-button-count", children: logCount })
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
);
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
// src/ui/LogModal.tsx
|
|
229
|
+
var import_react2 = require("react");
|
|
230
|
+
|
|
231
|
+
// src/utils/formatters.ts
|
|
232
|
+
var getLogLevelColor = (level) => {
|
|
233
|
+
switch (level) {
|
|
234
|
+
case "error":
|
|
235
|
+
return "text-red-500";
|
|
236
|
+
case "warn":
|
|
237
|
+
return "text-yellow-500";
|
|
238
|
+
case "info":
|
|
239
|
+
return "text-blue-500";
|
|
240
|
+
case "debug":
|
|
241
|
+
return "text-purple-500";
|
|
242
|
+
case "log":
|
|
243
|
+
default:
|
|
244
|
+
return "text-gray-700";
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
// src/ui/LogModal.tsx
|
|
249
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
250
|
+
var LogModal = ({ isOpen, onClose, logs, onClearLogs }) => {
|
|
251
|
+
const [selectedLevel, setSelectedLevel] = (0, import_react2.useState)("all");
|
|
252
|
+
const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
|
|
253
|
+
const filteredLogs = logs.filter((log) => {
|
|
254
|
+
const levelMatch = selectedLevel === "all" || log.level === selectedLevel;
|
|
255
|
+
const searchMatch = log.message.toLowerCase().includes(searchQuery.toLowerCase());
|
|
256
|
+
return levelMatch && searchMatch;
|
|
257
|
+
});
|
|
258
|
+
if (!isOpen) return null;
|
|
259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "smart-logger-modal-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "smart-logger-modal", onClick: (e) => e.stopPropagation(), children: [
|
|
260
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "smart-logger-modal-header", children: [
|
|
261
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: "SmartLogger DevTools" }),
|
|
262
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "smart-logger-close-button", onClick: onClose, children: "\u2715" })
|
|
263
|
+
] }),
|
|
264
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "smart-logger-modal-controls", children: [
|
|
265
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
266
|
+
"input",
|
|
267
|
+
{
|
|
268
|
+
type: "text",
|
|
269
|
+
placeholder: "Search logs...",
|
|
270
|
+
value: searchQuery,
|
|
271
|
+
onChange: (e) => setSearchQuery(e.target.value),
|
|
272
|
+
className: "smart-logger-search-input"
|
|
273
|
+
}
|
|
274
|
+
),
|
|
275
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
276
|
+
"select",
|
|
277
|
+
{
|
|
278
|
+
value: selectedLevel,
|
|
279
|
+
onChange: (e) => setSelectedLevel(e.target.value),
|
|
280
|
+
className: "smart-logger-filter-select",
|
|
281
|
+
children: [
|
|
282
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "all", children: "All Levels" }),
|
|
283
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "log", children: "Log" }),
|
|
284
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "info", children: "Info" }),
|
|
285
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "warn", children: "Warn" }),
|
|
286
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "error", children: "Error" }),
|
|
287
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "debug", children: "Debug" })
|
|
288
|
+
]
|
|
289
|
+
}
|
|
290
|
+
),
|
|
291
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "smart-logger-clear-button", onClick: onClearLogs, children: "Clear Logs" })
|
|
292
|
+
] }),
|
|
293
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "smart-logger-modal-content", children: filteredLogs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "smart-logger-empty-state", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "No logs to display" }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "smart-logger-log-list", children: filteredLogs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: `smart-logger-log-item ${log.level}`, children: [
|
|
294
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "smart-logger-log-header", children: [
|
|
295
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: `smart-logger-log-level ${getLogLevelColor(log.level)}`, children: [
|
|
296
|
+
"[",
|
|
297
|
+
log.level.toUpperCase(),
|
|
298
|
+
"]"
|
|
299
|
+
] }),
|
|
300
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "smart-logger-log-timestamp", children: log.timestamp })
|
|
301
|
+
] }),
|
|
302
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "smart-logger-log-message", children: log.message }),
|
|
303
|
+
log.args && log.args.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("details", { className: "smart-logger-log-details", children: [
|
|
304
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("summary", { children: "View Arguments" }),
|
|
305
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "smart-logger-log-args", children: JSON.stringify(log.args, null, 2) })
|
|
306
|
+
] })
|
|
307
|
+
] }, log.id)) }) }),
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "smart-logger-modal-footer", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "smart-logger-log-count", children: [
|
|
309
|
+
"Total: ",
|
|
310
|
+
filteredLogs.length,
|
|
311
|
+
" logs"
|
|
312
|
+
] }) })
|
|
313
|
+
] }) });
|
|
314
|
+
};
|
|
315
|
+
|
|
316
|
+
// src/hooks/useLogHistory.ts
|
|
317
|
+
var import_react3 = require("react");
|
|
318
|
+
var useLogHistory = () => {
|
|
319
|
+
const [history, setHistory] = (0, import_react3.useState)(logger_default.getHistory());
|
|
320
|
+
(0, import_react3.useEffect)(() => {
|
|
321
|
+
const unsubscribeLog = eventEmitter.on("log", (newLog) => {
|
|
322
|
+
setHistory((prevHistory) => {
|
|
323
|
+
const newHistory = [...prevHistory, newLog];
|
|
324
|
+
const maxHistory = logger_default.getConfig().maxHistory || 100;
|
|
325
|
+
return newHistory.slice(Math.max(newHistory.length - maxHistory, 0));
|
|
326
|
+
});
|
|
327
|
+
});
|
|
328
|
+
const unsubscribeClear = eventEmitter.on("clearHistory", () => {
|
|
329
|
+
setHistory([]);
|
|
330
|
+
});
|
|
331
|
+
const unsubscribeDestroy = eventEmitter.on("destroy", () => {
|
|
332
|
+
setHistory([]);
|
|
333
|
+
});
|
|
334
|
+
setHistory(logger_default.getHistory());
|
|
335
|
+
return () => {
|
|
336
|
+
unsubscribeLog();
|
|
337
|
+
unsubscribeClear();
|
|
338
|
+
unsubscribeDestroy();
|
|
339
|
+
};
|
|
340
|
+
}, []);
|
|
341
|
+
return history;
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
// src/SmartLoggerDevTools.tsx
|
|
345
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
346
|
+
var SmartLoggerDevTools = () => {
|
|
347
|
+
const [isModalOpen, setIsModalOpen] = (0, import_react4.useState)(false);
|
|
348
|
+
const logs = useLogHistory();
|
|
349
|
+
const handleClearLogs = () => {
|
|
350
|
+
logger_default.clearHistory();
|
|
351
|
+
};
|
|
352
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
353
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
354
|
+
FloatingButton,
|
|
355
|
+
{
|
|
356
|
+
onClick: () => setIsModalOpen(true),
|
|
357
|
+
logCount: logs.length
|
|
358
|
+
}
|
|
359
|
+
),
|
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
361
|
+
LogModal,
|
|
362
|
+
{
|
|
363
|
+
isOpen: isModalOpen,
|
|
364
|
+
onClose: () => setIsModalOpen(false),
|
|
365
|
+
logs,
|
|
366
|
+
onClearLogs: handleClearLogs
|
|
367
|
+
}
|
|
368
|
+
)
|
|
369
|
+
] });
|
|
370
|
+
};
|
|
371
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
372
|
+
0 && (module.exports = {
|
|
373
|
+
SmartLogger,
|
|
374
|
+
SmartLoggerDevTools,
|
|
375
|
+
useLogHistory
|
|
376
|
+
});
|