lynx-console 0.0.0

package/dist/setup.mjs

@@ -0,0 +1,374 @@
+import "./index.css";
+import { runOnBackground, runOnMainThread } from "@lynx-js/react";
+import { stringify } from "javascript-stringify";
+
+//#region src/shared/ensureConsoleStructure.ts
+const ensureConsoleStructure = () => {
+	if (!globalThis.__LYNX_CONSOLE__) globalThis.__LYNX_CONSOLE__ = {};
+	if (!globalThis.__LYNX_CONSOLE__.state) globalThis.__LYNX_CONSOLE__.state = {};
+	return {
+		lynxConsole: globalThis.__LYNX_CONSOLE__,
+		state: globalThis.__LYNX_CONSOLE__.state
+	};
+};
+
+//#endregion
+//#region src/setup/setupLogMonitor.ts
+const LOG_METHODS = [
+	"log",
+	"warn",
+	"error",
+	"info"
+];
+const LOG_ID_PREFIX = "background-thread";
+const generateLogId = () => {
+	return `${LOG_ID_PREFIX}-${Date.now()}-${Math.random()}`;
+};
+const createLogEntry = (method, args) => {
+	return {
+		id: generateLogId(),
+		level: method,
+		message: "",
+		timestamp: Date.now(),
+		args
+	};
+};
+const addLogEntry = (entry) => {
+	const state = globalThis.__LYNX_CONSOLE__?.state;
+	if (!state?.logs || !state?.logListeners) {
+		console.error("[LynxConsole] Cannot add log entry: Log monitor not initialized. Call initLogMonitor() first.");
+		return;
+	}
+	state.logs.push(entry);
+	state.logListeners.forEach((listener) => {
+		listener(entry);
+	});
+};
+const initLogMonitor = () => {
+	"background only";
+	const { lynxConsole, state } = ensureConsoleStructure();
+	if (lynxConsole.originalConsole) {
+		console.warn("[LynxConsole] Log monitor already initialized");
+		return;
+	}
+	const originalConsole = globalThis.console;
+	lynxConsole.originalConsole = {
+		log: originalConsole.log.bind(originalConsole),
+		warn: originalConsole.warn.bind(originalConsole),
+		error: originalConsole.error.bind(originalConsole),
+		info: originalConsole.info.bind(originalConsole)
+	};
+	state.logs = [];
+	state.logListeners = /* @__PURE__ */ new Set();
+	state.logSubscribe = (listener) => {
+		state.logListeners?.add(listener);
+		return () => {
+			state.logListeners?.delete(listener);
+		};
+	};
+	LOG_METHODS.forEach((method) => {
+		globalThis.console[method] = ((...args) => {
+			lynxConsole.originalConsole?.[method](...args);
+			addLogEntry(createLogEntry(method, args));
+		}).bind(globalThis.console);
+	});
+	lynxConsole.originalConsole?.log("[LynxConsole] ✅ Log monitoring initialized");
+};
+
+//#endregion
+//#region src/setup/_setupMainThreadConsole.ts
+const _setupMainThreadConsole = () => {
+	"main thread";
+	if (!globalThis.__LYNX_CONSOLE__) globalThis.__LYNX_CONSOLE__ = {};
+	const lynxConsole = globalThis.__LYNX_CONSOLE__;
+	if (lynxConsole.mainThreadInitialized) {
+		console.warn("[LynxConsole] Main thread console already initialized");
+		return;
+	}
+	const LOG_METHODS = [
+		"log",
+		"warn",
+		"error",
+		"info"
+	];
+	const LOG_ID_PREFIX = "main-thread";
+	const serializeArgs = (args) => {
+		return args.map((arg) => {
+			try {
+				JSON.stringify(arg);
+				return arg;
+			} catch {
+				return String(arg);
+			}
+		});
+	};
+	const generateLogId = () => {
+		return `${LOG_ID_PREFIX}-${Date.now()}-${Math.random()}`;
+	};
+	const sendLogToBackground = runOnBackground((entry) => {
+		const state = globalThis.__LYNX_CONSOLE__?.state;
+		if (!state) return;
+		state.logs?.push(entry);
+		state.logListeners?.forEach((listener) => {
+			listener(entry);
+		});
+	});
+	const originalConsole = globalThis.console;
+	const originalMethods = {
+		log: originalConsole.log.bind(originalConsole),
+		warn: originalConsole.warn.bind(originalConsole),
+		error: originalConsole.error.bind(originalConsole),
+		info: originalConsole.info.bind(originalConsole)
+	};
+	LOG_METHODS.forEach((method) => {
+		const original = originalMethods[method];
+		originalConsole[method] = ((...args) => {
+			original(...args);
+			const serializedArgs = serializeArgs(args);
+			const timestamp = Date.now();
+			sendLogToBackground({
+				id: generateLogId(),
+				level: method,
+				message: "",
+				timestamp,
+				args: serializedArgs
+			});
+		}).bind(originalConsole);
+	});
+	lynxConsole.mainThreadInitialized = true;
+	originalConsole.log("[LynxConsole] ✅ Main thread console initialized");
+};
+
+//#endregion
+//#region src/setup/setupMainThreadConsole.ts
+const initMainThreadConsole = async () => {
+	"background only";
+	const { lynxConsole, state } = ensureConsoleStructure();
+	if (lynxConsole.mainThreadInitialized) {
+		console.error("[LynxConsole] Main thread console already initialized");
+		return;
+	}
+	if (!state.logs) {
+		console.error("[LynxConsole] Background thread console not initialized");
+		return;
+	}
+	try {
+		await runOnMainThread(_setupMainThreadConsole)();
+	} catch (error) {
+		console.error("[LynxConsole] Failed to initialize main thread console:", error);
+	}
+};
+
+//#endregion
+//#region src/setup/setupNetworkMonitor.ts
+const generateNetworkId = () => {
+	return `network-${Date.now()}-${Math.random()}`;
+};
+const extractUrl = (input) => {
+	if (typeof input === "string") return input;
+	if (input instanceof URL) return input.href;
+	return input.url;
+};
+const extractMethod = (input, init) => {
+	if (init?.method) return init.method;
+	if (typeof input === "object" && "method" in input) return input.method;
+	return "GET";
+};
+const extractHeaders = (headers) => {
+	const result = {};
+	if (!headers) return result;
+	try {
+		if (headers instanceof Headers) headers.forEach((value, key) => {
+			result[key] = value;
+		});
+		else if (Array.isArray(headers)) headers.forEach(([key, value]) => {
+			result[key] = value;
+		});
+		else Object.entries(headers).forEach(([key, value]) => {
+			result[key] = value;
+		});
+	} catch (error) {
+		console.error("[LynxConsole] Failed to extract headers:", error);
+	}
+	return result;
+};
+const mergeRequestHeaders = (input, init) => {
+	const merged = {};
+	if (typeof input === "object" && "headers" in input) Object.assign(merged, extractHeaders(input.headers));
+	if (init?.headers) Object.assign(merged, extractHeaders(init.headers));
+	return merged;
+};
+const addNetworkEntry = (entry) => {
+	const state = globalThis.__LYNX_CONSOLE__?.state;
+	if (!state?.networks || !state?.networksMap || !state?.networkListeners) {
+		console.error("[LynxConsole] Cannot add network entry: Network monitor not initialized. Call initNetworkMonitor() first.");
+		return;
+	}
+	state.networks.push(entry);
+	state.networksMap.set(entry.id, entry);
+	state.networkListeners.forEach((listener) => {
+		listener(entry);
+	});
+};
+const updateNetworkEntry = (id, updates) => {
+	const state = globalThis.__LYNX_CONSOLE__?.state;
+	if (!state?.networks || !state?.networksMap || !state?.networkListeners) {
+		console.error("[LynxConsole] Cannot update network entry: Network monitor not initialized. Call initNetworkMonitor() first.");
+		return;
+	}
+	const existingEntry = state.networksMap.get(id);
+	if (!existingEntry) {
+		console.error(`[LynxConsole] Cannot update network entry: Entry with id '${id}' not found.`);
+		return;
+	}
+	const updatedEntry = {
+		...existingEntry,
+		...updates
+	};
+	const index = state.networks.findIndex((entry) => entry.id === id);
+	if (index !== -1) state.networks[index] = updatedEntry;
+	state.networksMap.set(id, updatedEntry);
+	state.networkListeners.forEach((listener) => {
+		listener(updatedEntry);
+	});
+};
+const initNetworkMonitor = () => {
+	if (!lynx.fetch) {
+		console.warn("[LynxConsole] lynx.fetch not available, skipping network monitor");
+		return;
+	}
+	const { state } = ensureConsoleStructure();
+	if (state.networks !== void 0) {
+		console.warn("[LynxConsole] Network monitor already initialized");
+		return;
+	}
+	state.networks = [];
+	state.networksMap = /* @__PURE__ */ new Map();
+	state.networkListeners = /* @__PURE__ */ new Set();
+	state.subscribeNetwork = (listener) => {
+		state.networkListeners?.add(listener);
+		return () => {
+			state.networkListeners?.delete(listener);
+		};
+	};
+	const originalFetch = fetch.bind(lynx);
+	const monitoredFetch = async (input, init) => {
+		const id = generateNetworkId();
+		const startTime = Date.now();
+		const url = extractUrl(input);
+		const method = extractMethod(input, init);
+		const requestHeaders = mergeRequestHeaders(input, init);
+		let requestBody;
+		if (init?.body) if (typeof init.body === "string") requestBody = init.body;
+		else if (init.body instanceof URLSearchParams) requestBody = init.body.toString();
+		else requestBody = String(init.body);
+		addNetworkEntry({
+			id,
+			url,
+			method: method || "default",
+			status: "pending",
+			startTime,
+			requestHeaders,
+			requestBody: requestBody ?? ""
+		});
+		try {
+			const response = await originalFetch(input, init);
+			const endTime = Date.now();
+			const responseHeaders = {};
+			response.headers.forEach((value, key) => {
+				responseHeaders[key] = value;
+			});
+			const clonedResponse = response.clone();
+			let responseBody;
+			try {
+				const headerMap = {};
+				response.headers.forEach((value, key) => {
+					headerMap[key.toLowerCase()] = value;
+				});
+				const contentType = headerMap["content-type"];
+				if (contentType?.includes("application/json")) responseBody = stringify(await clonedResponse.json(), null, 2, { references: true }) ?? "";
+				else if (contentType?.includes("text")) responseBody = await clonedResponse.text();
+			} catch (error) {
+				responseBody = `[Unable to read response body] ${error}`;
+				console.error("[LynxConsole] Error reading response body:", error);
+			}
+			updateNetworkEntry(id, {
+				status: "success",
+				statusCode: response.status,
+				statusText: response.statusText,
+				endTime,
+				duration: endTime - startTime,
+				responseHeaders,
+				responseBody: responseBody ?? ""
+			});
+			return response;
+		} catch (error) {
+			const endTime = Date.now();
+			updateNetworkEntry(id, {
+				status: "error",
+				endTime,
+				duration: endTime - startTime,
+				error: error instanceof Error ? error.message : String(error)
+			});
+			throw error;
+		}
+	};
+	fetch = monitoredFetch;
+	lynx.fetch = monitoredFetch;
+	console.log("[LynxConsole] ✅ Network monitoring initialized");
+};
+
+//#endregion
+//#region src/setup/setupPerformanceMonitor.ts
+const generatePerformanceId = () => {
+	return `performance-${Date.now()}-${Math.random()}`;
+};
+const addPerformanceEntry = (entry) => {
+	const state = globalThis.__LYNX_CONSOLE__?.state;
+	if (!state?.performances || !state?.performanceListeners) {
+		console.error("[LynxConsole] Cannot add performance entry: Performance monitor not initialized. Call initPerformanceMonitor() first.");
+		return;
+	}
+	state.performances.push(entry);
+	state.performanceListeners.forEach((listener) => {
+		listener(entry);
+	});
+};
+const initPerformanceMonitor = () => {
+	"background only";
+	if (!lynx.performance) {
+		console.warn("[LynxConsole] lynx.performance not available, skipping performance monitor");
+		return;
+	}
+	const { state } = ensureConsoleStructure();
+	if (state.performances !== void 0) {
+		console.warn("[LynxConsole] Performance monitor already initialized");
+		return;
+	}
+	state.performances = [];
+	state.performanceListeners = /* @__PURE__ */ new Set();
+	state.subscribePerformance = (listener) => {
+		state.performanceListeners?.add(listener);
+		return () => {
+			state.performanceListeners?.delete(listener);
+		};
+	};
+	lynx.performance.createObserver((entry) => {
+		addPerformanceEntry({
+			id: generatePerformanceId(),
+			entryType: entry.entryType,
+			name: entry.name,
+			timestamp: Date.now(),
+			rawEntry: entry
+		});
+	}).observe([
+		"pipeline",
+		"init",
+		"metric"
+	]);
+	console.log("[LynxConsole] ✅ Performance monitoring initialized");
+};
+
+//#endregion
+export { initLogMonitor, initMainThreadConsole, initNetworkMonitor, initPerformanceMonitor };
+//# sourceMappingURL=setup.mjs.map

package/dist/setup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.mjs","names":[],"sources":["../src/shared/ensureConsoleStructure.ts","../src/setup/setupLogMonitor.ts","../src/setup/_setupMainThreadConsole.ts","../src/setup/setupMainThreadConsole.ts","../src/setup/setupNetworkMonitor.ts","../src/setup/setupPerformanceMonitor.ts"],"sourcesContent":["type LynxConsole = NonNullable<typeof globalThis.__LYNX_CONSOLE__>;\ntype ConsoleState = NonNullable<LynxConsole[\"state\"]>;\n\nexport const ensureConsoleStructure = (): {\n  lynxConsole: LynxConsole;\n  state: ConsoleState;\n} => {\n  if (!globalThis.__LYNX_CONSOLE__) {\n    globalThis.__LYNX_CONSOLE__ = {};\n  }\n\n  if (!globalThis.__LYNX_CONSOLE__.state) {\n    globalThis.__LYNX_CONSOLE__.state = {};\n  }\n\n  return {\n    lynxConsole: globalThis.__LYNX_CONSOLE__,\n    state: globalThis.__LYNX_CONSOLE__.state,\n  };\n};\n","import { ensureConsoleStructure } from \"../shared/ensureConsoleStructure\";\nimport type { LogEntry, LogLevel } from \"../types\";\n\ntype LogListener = (entry: LogEntry) => void;\n\nconst LOG_METHODS: LogLevel[] = [\"log\", \"warn\", \"error\", \"info\"];\nconst LOG_ID_PREFIX = \"background-thread\";\n\nconst generateLogId = (): string => {\n  return `${LOG_ID_PREFIX}-${Date.now()}-${Math.random()}`;\n};\n\nconst createLogEntry = (method: LogLevel, args: unknown[]): LogEntry => {\n  return {\n    id: generateLogId(),\n    level: method,\n    message: \"\",\n    timestamp: Date.now(),\n    args,\n  };\n};\n\nconst addLogEntry = (entry: LogEntry): void => {\n  const state = globalThis.__LYNX_CONSOLE__?.state;\n  if (!state?.logs || !state?.logListeners) {\n    console.error(\n      \"[LynxConsole] Cannot add log entry: Log monitor not initialized. Call initLogMonitor() first.\",\n    );\n    return;\n  }\n\n  state.logs.push(entry);\n  state.logListeners.forEach((listener) => {\n    listener(entry);\n  });\n};\n\n// Background Thread: Log monitoring 초기화\nexport const initLogMonitor = () => {\n  \"background only\";\n\n  const { lynxConsole, state } = ensureConsoleStructure();\n\n  if (lynxConsole.originalConsole) {\n    console.warn(\"[LynxConsole] Log monitor already initialized\");\n    return;\n  }\n\n  const originalConsole = globalThis.console;\n  lynxConsole.originalConsole = {\n    log: originalConsole.log.bind(originalConsole),\n    warn: originalConsole.warn.bind(originalConsole),\n    error: originalConsole.error.bind(originalConsole),\n    info: originalConsole.info.bind(originalConsole),\n  };\n\n  state.logs = [];\n  state.logListeners = new Set();\n  state.logSubscribe = (listener: LogListener) => {\n    state.logListeners?.add(listener);\n    return () => {\n      state.logListeners?.delete(listener);\n    };\n  };\n\n  // Background Thread console 오버라이드\n  LOG_METHODS.forEach((method) => {\n    globalThis.console[method] = ((...args: unknown[]) => {\n      lynxConsole.originalConsole?.[method](...args);\n      const entry = createLogEntry(method, args);\n      addLogEntry(entry);\n    }).bind(globalThis.console);\n  });\n\n  lynxConsole.originalConsole?.log(\n    \"[LynxConsole] ✅ Log monitoring initialized\",\n  );\n};\n","import { runOnBackground } from \"@lynx-js/react\";\nimport type { LogEntry, LogLevel } from \"../types\";\n\nconst _setupMainThreadConsole = (): void => {\n  \"main thread\";\n\n  //IMPORTANT: do not use external functions in main thread\n  if (!globalThis.__LYNX_CONSOLE__) globalThis.__LYNX_CONSOLE__ = {};\n  const lynxConsole = globalThis.__LYNX_CONSOLE__;\n\n  if (lynxConsole.mainThreadInitialized) {\n    console.warn(\"[LynxConsole] Main thread console already initialized\");\n    return;\n  }\n\n  const LOG_METHODS: LogLevel[] = [\"log\", \"warn\", \"error\", \"info\"];\n  const LOG_ID_PREFIX = \"main-thread\";\n\n  const serializeArgs = (args: unknown[]): unknown[] => {\n    return args.map((arg) => {\n      try {\n        JSON.stringify(arg);\n        return arg;\n      } catch {\n        return String(arg);\n      }\n    });\n  };\n\n  const generateLogId = (): string => {\n    return `${LOG_ID_PREFIX}-${Date.now()}-${Math.random()}`;\n  };\n\n  // Main Thread에서 Background Thread로 로그 전송하는 함수\n  const sendLogToBackground = runOnBackground((entry: LogEntry): void => {\n    const state = globalThis.__LYNX_CONSOLE__?.state;\n    if (!state) return;\n\n    state.logs?.push(entry);\n    state.logListeners?.forEach((listener) => {\n      listener(entry);\n    });\n  });\n\n  const originalConsole = globalThis.console;\n\n  const originalMethods = {\n    log: originalConsole.log.bind(originalConsole),\n    warn: originalConsole.warn.bind(originalConsole),\n    error: originalConsole.error.bind(originalConsole),\n    info: originalConsole.info.bind(originalConsole),\n  };\n\n  // Main Thread console 오버라이드\n  LOG_METHODS.forEach((method) => {\n    const original = originalMethods[method];\n    originalConsole[method] = ((...args: unknown[]) => {\n      // 원본 console 호출\n      original(...args);\n\n      const serializedArgs = serializeArgs(args);\n      const timestamp = Date.now();\n      const id = generateLogId();\n\n      sendLogToBackground({\n        id,\n        level: method,\n        message: \"\",\n        timestamp,\n        args: serializedArgs,\n      });\n    }).bind(originalConsole);\n  });\n\n  lynxConsole.mainThreadInitialized = true;\n\n  originalConsole.log(\"[LynxConsole] ✅ Main thread console initialized\");\n};\n\nexport default _setupMainThreadConsole;\n","// both thread;\nimport \"./_setupMainThreadConsole\";\n\nimport { runOnMainThread } from \"@lynx-js/react\";\nimport { ensureConsoleStructure } from \"../shared/ensureConsoleStructure\";\nimport _setupMainThreadConsole from \"./_setupMainThreadConsole\";\n\n// Main Thread: Console 초기화\n\nexport const initMainThreadConsole = async (): Promise<void> => {\n  \"background only\";\n\n  const { lynxConsole, state } = ensureConsoleStructure();\n\n  if (lynxConsole.mainThreadInitialized) {\n    console.error(\"[LynxConsole] Main thread console already initialized\");\n    return;\n  }\n\n  if (!state.logs) {\n    console.error(\"[LynxConsole] Background thread console not initialized\");\n    return;\n  }\n\n  try {\n    const setupOnMainThread = runOnMainThread(_setupMainThreadConsole);\n    await setupOnMainThread();\n  } catch (error) {\n    console.error(\n      \"[LynxConsole] Failed to initialize main thread console:\",\n      error,\n    );\n  }\n};\n","import { stringify } from \"javascript-stringify\";\nimport { ensureConsoleStructure } from \"../shared/ensureConsoleStructure\";\nimport type { NetworkEntry } from \"../types\";\n\nconst generateNetworkId = (): string => {\n  return `network-${Date.now()}-${Math.random()}`;\n};\n\nconst extractUrl = (input: RequestInfo | URL): string => {\n  if (typeof input === \"string\") return input;\n  if (input instanceof URL) return input.href;\n  return (input as Request).url;\n};\n\nconst extractMethod = (\n  input: RequestInfo | URL,\n  init?: RequestInit,\n): string | undefined => {\n  if (init?.method) return init.method;\n  if (typeof input === \"object\" && \"method\" in input) {\n    return (input as Request).method;\n  }\n  return \"GET\";\n};\n\nconst extractHeaders = (\n  headers: HeadersInit | undefined,\n): Record<string, string> => {\n  const result: Record<string, string> = {};\n  if (!headers) return result;\n\n  try {\n    if (headers instanceof Headers) {\n      headers.forEach((value, key) => {\n        result[key] = value;\n      });\n    } else if (Array.isArray(headers)) {\n      headers.forEach(([key, value]) => {\n        result[key] = value;\n      });\n    } else {\n      Object.entries(headers).forEach(([key, value]) => {\n        result[key] = value;\n      });\n    }\n  } catch (error) {\n    console.error(\"[LynxConsole] Failed to extract headers:\", error);\n  }\n\n  return result;\n};\n\nconst mergeRequestHeaders = (\n  input: RequestInfo | URL,\n  init?: RequestInit,\n): Record<string, string> => {\n  const merged: Record<string, string> = {};\n\n  // Request 객체나 URL 객체에서 헤더 추출\n  if (typeof input === \"object\" && \"headers\" in input) {\n    Object.assign(merged, extractHeaders(input.headers as HeadersInit));\n  }\n\n  // RequestInit에서 헤더 추출 (나중 값이 우선)\n  if (init?.headers) {\n    Object.assign(merged, extractHeaders(init.headers));\n  }\n\n  return merged;\n};\n\nconst addNetworkEntry = (entry: NetworkEntry): void => {\n  const state = globalThis.__LYNX_CONSOLE__?.state;\n  if (!state?.networks || !state?.networksMap || !state?.networkListeners) {\n    console.error(\n      \"[LynxConsole] Cannot add network entry: Network monitor not initialized. Call initNetworkMonitor() first.\",\n    );\n    return;\n  }\n\n  state.networks.push(entry);\n  state.networksMap.set(entry.id, entry);\n\n  state.networkListeners.forEach((listener) => {\n    listener(entry);\n  });\n};\n\nconst updateNetworkEntry = (\n  id: string,\n  updates: Partial<NetworkEntry>,\n): void => {\n  const state = globalThis.__LYNX_CONSOLE__?.state;\n  if (!state?.networks || !state?.networksMap || !state?.networkListeners) {\n    console.error(\n      \"[LynxConsole] Cannot update network entry: Network monitor not initialized. Call initNetworkMonitor() first.\",\n    );\n    return;\n  }\n\n  const existingEntry = state.networksMap.get(id);\n  if (!existingEntry) {\n    console.error(\n      `[LynxConsole] Cannot update network entry: Entry with id '${id}' not found.`,\n    );\n    return;\n  }\n\n  const updatedEntry = { ...existingEntry, ...updates };\n\n  const index = state.networks.findIndex((entry) => entry.id === id);\n  if (index !== -1) {\n    state.networks[index] = updatedEntry;\n  }\n\n  state.networksMap.set(id, updatedEntry);\n\n  state.networkListeners.forEach((listener) => {\n    listener(updatedEntry);\n  });\n};\n\nexport const initNetworkMonitor = () => {\n  if (!lynx.fetch) {\n    console.warn(\n      \"[LynxConsole] lynx.fetch not available, skipping network monitor\",\n    );\n    return;\n  }\n\n  const { state } = ensureConsoleStructure();\n\n  if (state.networks !== undefined) {\n    console.warn(\"[LynxConsole] Network monitor already initialized\");\n    return;\n  }\n\n  type NetworkListener = (entry: NetworkEntry) => void;\n  state.networks = [];\n  state.networksMap = new Map();\n  state.networkListeners = new Set();\n  state.subscribeNetwork = (listener: NetworkListener) => {\n    state.networkListeners?.add(listener);\n    return () => {\n      state.networkListeners?.delete(listener);\n    };\n  };\n\n  const originalFetch = fetch.bind(lynx);\n\n  const monitoredFetch = async (\n    input: RequestInfo | URL,\n    init?: RequestInit,\n  ): Promise<Response> => {\n    const id = generateNetworkId();\n    const startTime = Date.now();\n    const url = extractUrl(input);\n    const method = extractMethod(input, init);\n\n    const requestHeaders = mergeRequestHeaders(input, init);\n\n    // Request body 처리\n    let requestBody: string | undefined;\n    if (init?.body) {\n      if (typeof init.body === \"string\") {\n        requestBody = init.body;\n      } else if (init.body instanceof URLSearchParams) {\n        requestBody = init.body.toString();\n      } else {\n        // Lynx가 지원하지 않는 타입이거나 알 수 없는 타입\n        requestBody = String(init.body);\n      }\n    }\n\n    addNetworkEntry({\n      id,\n      url,\n      method: method || \"default\",\n      status: \"pending\",\n      startTime,\n      requestHeaders,\n      requestBody: requestBody ?? \"\",\n    });\n\n    try {\n      const response = await originalFetch(input, init);\n      const endTime = Date.now();\n\n      const responseHeaders: Record<string, string> = {};\n      response.headers.forEach((value, key) => {\n        responseHeaders[key] = value;\n      });\n\n      const clonedResponse = response.clone();\n      let responseBody: string | undefined;\n\n      try {\n        const headerMap: Record<string, string> = {};\n        response.headers.forEach((value, key) => {\n          headerMap[key.toLowerCase()] = value;\n        });\n\n        const contentType = headerMap[\"content-type\"];\n        if (contentType?.includes(\"application/json\")) {\n          const json = await clonedResponse.json();\n          responseBody = stringify(json, null, 2, { references: true }) ?? \"\";\n        } else if (contentType?.includes(\"text\")) {\n          responseBody = await clonedResponse.text();\n        }\n      } catch (error) {\n        responseBody = `[Unable to read response body] ${error}`;\n        console.error(\"[LynxConsole] Error reading response body:\", error);\n      }\n\n      updateNetworkEntry(id, {\n        status: \"success\",\n        statusCode: response.status,\n        statusText: response.statusText,\n        endTime,\n        duration: endTime - startTime,\n        responseHeaders,\n        responseBody: responseBody ?? \"\",\n      });\n\n      return response;\n    } catch (error) {\n      const endTime = Date.now();\n      updateNetworkEntry(id, {\n        status: \"error\",\n        endTime,\n        duration: endTime - startTime,\n        error: error instanceof Error ? error.message : String(error),\n      });\n      throw error;\n    }\n  };\n\n  // biome-ignore lint/suspicious/noTsIgnore: to assign fetch to global functionfetch\n  // @ts-ignore\n  // biome-ignore lint/suspicious/noGlobalAssign: to assign fetch to global functionfetch fetch\n  fetch = monitoredFetch as typeof fetch;\n\n  //fetch 대신 lynx.fetch를 사용하는 경우에도 모니터링 되도록 설정\n  lynx.fetch = monitoredFetch as typeof lynx.fetch;\n\n  console.log(\"[LynxConsole] ✅ Network monitoring initialized\");\n};\n","import { ensureConsoleStructure } from \"../shared/ensureConsoleStructure\";\nimport type { PerformanceEntryData, PerformanceEntryType } from \"../types\";\n\ntype PerformanceListener = (entry: PerformanceEntryData) => void;\n\nconst generatePerformanceId = (): string => {\n  return `performance-${Date.now()}-${Math.random()}`;\n};\n\nconst addPerformanceEntry = (entry: PerformanceEntryData): void => {\n  const state = globalThis.__LYNX_CONSOLE__?.state;\n  if (!state?.performances || !state?.performanceListeners) {\n    console.error(\n      \"[LynxConsole] Cannot add performance entry: Performance monitor not initialized. Call initPerformanceMonitor() first.\",\n    );\n    return;\n  }\n\n  state.performances.push(entry);\n  state.performanceListeners.forEach((listener) => {\n    listener(entry);\n  });\n};\n\nexport const initPerformanceMonitor = () => {\n  \"background only\";\n\n  if (!lynx.performance) {\n    console.warn(\n      \"[LynxConsole] lynx.performance not available, skipping performance monitor\",\n    );\n    return;\n  }\n\n  const { state } = ensureConsoleStructure();\n\n  if (state.performances !== undefined) {\n    console.warn(\"[LynxConsole] Performance monitor already initialized\");\n    return;\n  }\n\n  state.performances = [];\n  state.performanceListeners = new Set();\n  state.subscribePerformance = (listener: PerformanceListener) => {\n    state.performanceListeners?.add(listener);\n    return () => {\n      state.performanceListeners?.delete(listener);\n    };\n  };\n\n  const observer = lynx.performance.createObserver((entry) => {\n    const performanceEntry: PerformanceEntryData = {\n      id: generatePerformanceId(),\n      entryType: entry.entryType as PerformanceEntryType,\n      name: entry.name,\n      timestamp: Date.now(),\n      rawEntry: entry,\n    };\n\n    addPerformanceEntry(performanceEntry);\n  });\n\n  observer.observe([\n    \"pipeline\", // LoadBundleEntry\n    \"init\", // InitLynxviewEntry\n    \"metric\", // MetricEntry\n  ]);\n\n  console.log(\"[LynxConsole] ✅ Performance monitoring initialized\");\n};\n"],"mappings":";;;;;AAGA,MAAa,+BAGR;AACH,KAAI,CAAC,WAAW,iBACd,YAAW,mBAAmB,EAAE;AAGlC,KAAI,CAAC,WAAW,iBAAiB,MAC/B,YAAW,iBAAiB,QAAQ,EAAE;AAGxC,QAAO;EACL,aAAa,WAAW;EACxB,OAAO,WAAW,iBAAiB;EACpC;;;;;ACbH,MAAM,cAA0B;CAAC;CAAO;CAAQ;CAAS;CAAO;AAChE,MAAM,gBAAgB;AAEtB,MAAM,sBAA8B;AAClC,QAAO,GAAG,cAAc,GAAG,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ;;AAGxD,MAAM,kBAAkB,QAAkB,SAA8B;AACtE,QAAO;EACL,IAAI,eAAe;EACnB,OAAO;EACP,SAAS;EACT,WAAW,KAAK,KAAK;EACrB;EACD;;AAGH,MAAM,eAAe,UAA0B;CAC7C,MAAM,QAAQ,WAAW,kBAAkB;AAC3C,KAAI,CAAC,OAAO,QAAQ,CAAC,OAAO,cAAc;AACxC,UAAQ,MACN,gGACD;AACD;;AAGF,OAAM,KAAK,KAAK,MAAM;AACtB,OAAM,aAAa,SAAS,aAAa;AACvC,WAAS,MAAM;GACf;;AAIJ,MAAa,uBAAuB;AAClC;CAEA,MAAM,EAAE,aAAa,UAAU,wBAAwB;AAEvD,KAAI,YAAY,iBAAiB;AAC/B,UAAQ,KAAK,gDAAgD;AAC7D;;CAGF,MAAM,kBAAkB,WAAW;AACnC,aAAY,kBAAkB;EAC5B,KAAK,gBAAgB,IAAI,KAAK,gBAAgB;EAC9C,MAAM,gBAAgB,KAAK,KAAK,gBAAgB;EAChD,OAAO,gBAAgB,MAAM,KAAK,gBAAgB;EAClD,MAAM,gBAAgB,KAAK,KAAK,gBAAgB;EACjD;AAED,OAAM,OAAO,EAAE;AACf,OAAM,+BAAe,IAAI,KAAK;AAC9B,OAAM,gBAAgB,aAA0B;AAC9C,QAAM,cAAc,IAAI,SAAS;AACjC,eAAa;AACX,SAAM,cAAc,OAAO,SAAS;;;AAKxC,aAAY,SAAS,WAAW;AAC9B,aAAW,QAAQ,YAAY,GAAG,SAAoB;AACpD,eAAY,kBAAkB,QAAQ,GAAG,KAAK;AAE9C,eADc,eAAe,QAAQ,KAAK,CACxB;KACjB,KAAK,WAAW,QAAQ;GAC3B;AAEF,aAAY,iBAAiB,IAC3B,6CACD;;;;;ACzEH,MAAM,gCAAsC;AAC1C;AAGA,KAAI,CAAC,WAAW,iBAAkB,YAAW,mBAAmB,EAAE;CAClE,MAAM,cAAc,WAAW;AAE/B,KAAI,YAAY,uBAAuB;AACrC,UAAQ,KAAK,wDAAwD;AACrE;;CAGF,MAAM,cAA0B;EAAC;EAAO;EAAQ;EAAS;EAAO;CAChE,MAAM,gBAAgB;CAEtB,MAAM,iBAAiB,SAA+B;AACpD,SAAO,KAAK,KAAK,QAAQ;AACvB,OAAI;AACF,SAAK,UAAU,IAAI;AACnB,WAAO;WACD;AACN,WAAO,OAAO,IAAI;;IAEpB;;CAGJ,MAAM,sBAA8B;AAClC,SAAO,GAAG,cAAc,GAAG,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ;;CAIxD,MAAM,sBAAsB,iBAAiB,UAA0B;EACrE,MAAM,QAAQ,WAAW,kBAAkB;AAC3C,MAAI,CAAC,MAAO;AAEZ,QAAM,MAAM,KAAK,MAAM;AACvB,QAAM,cAAc,SAAS,aAAa;AACxC,YAAS,MAAM;IACf;GACF;CAEF,MAAM,kBAAkB,WAAW;CAEnC,MAAM,kBAAkB;EACtB,KAAK,gBAAgB,IAAI,KAAK,gBAAgB;EAC9C,MAAM,gBAAgB,KAAK,KAAK,gBAAgB;EAChD,OAAO,gBAAgB,MAAM,KAAK,gBAAgB;EAClD,MAAM,gBAAgB,KAAK,KAAK,gBAAgB;EACjD;AAGD,aAAY,SAAS,WAAW;EAC9B,MAAM,WAAW,gBAAgB;AACjC,kBAAgB,YAAY,GAAG,SAAoB;AAEjD,YAAS,GAAG,KAAK;GAEjB,MAAM,iBAAiB,cAAc,KAAK;GAC1C,MAAM,YAAY,KAAK,KAAK;AAG5B,uBAAoB;IAClB,IAHS,eAAe;IAIxB,OAAO;IACP,SAAS;IACT;IACA,MAAM;IACP,CAAC;KACD,KAAK,gBAAgB;GACxB;AAEF,aAAY,wBAAwB;AAEpC,iBAAgB,IAAI,kDAAkD;;;;;ACnExE,MAAa,wBAAwB,YAA2B;AAC9D;CAEA,MAAM,EAAE,aAAa,UAAU,wBAAwB;AAEvD,KAAI,YAAY,uBAAuB;AACrC,UAAQ,MAAM,wDAAwD;AACtE;;AAGF,KAAI,CAAC,MAAM,MAAM;AACf,UAAQ,MAAM,0DAA0D;AACxE;;AAGF,KAAI;AAEF,QAD0B,gBAAgB,wBAAwB,EACzC;UAClB,OAAO;AACd,UAAQ,MACN,2DACA,MACD;;;;;;AC3BL,MAAM,0BAAkC;AACtC,QAAO,WAAW,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ;;AAG/C,MAAM,cAAc,UAAqC;AACvD,KAAI,OAAO,UAAU,SAAU,QAAO;AACtC,KAAI,iBAAiB,IAAK,QAAO,MAAM;AACvC,QAAQ,MAAkB;;AAG5B,MAAM,iBACJ,OACA,SACuB;AACvB,KAAI,MAAM,OAAQ,QAAO,KAAK;AAC9B,KAAI,OAAO,UAAU,YAAY,YAAY,MAC3C,QAAQ,MAAkB;AAE5B,QAAO;;AAGT,MAAM,kBACJ,YAC2B;CAC3B,MAAM,SAAiC,EAAE;AACzC,KAAI,CAAC,QAAS,QAAO;AAErB,KAAI;AACF,MAAI,mBAAmB,QACrB,SAAQ,SAAS,OAAO,QAAQ;AAC9B,UAAO,OAAO;IACd;WACO,MAAM,QAAQ,QAAQ,CAC/B,SAAQ,SAAS,CAAC,KAAK,WAAW;AAChC,UAAO,OAAO;IACd;MAEF,QAAO,QAAQ,QAAQ,CAAC,SAAS,CAAC,KAAK,WAAW;AAChD,UAAO,OAAO;IACd;UAEG,OAAO;AACd,UAAQ,MAAM,4CAA4C,MAAM;;AAGlE,QAAO;;AAGT,MAAM,uBACJ,OACA,SAC2B;CAC3B,MAAM,SAAiC,EAAE;AAGzC,KAAI,OAAO,UAAU,YAAY,aAAa,MAC5C,QAAO,OAAO,QAAQ,eAAe,MAAM,QAAuB,CAAC;AAIrE,KAAI,MAAM,QACR,QAAO,OAAO,QAAQ,eAAe,KAAK,QAAQ,CAAC;AAGrD,QAAO;;AAGT,MAAM,mBAAmB,UAA8B;CACrD,MAAM,QAAQ,WAAW,kBAAkB;AAC3C,KAAI,CAAC,OAAO,YAAY,CAAC,OAAO,eAAe,CAAC,OAAO,kBAAkB;AACvE,UAAQ,MACN,4GACD;AACD;;AAGF,OAAM,SAAS,KAAK,MAAM;AAC1B,OAAM,YAAY,IAAI,MAAM,IAAI,MAAM;AAEtC,OAAM,iBAAiB,SAAS,aAAa;AAC3C,WAAS,MAAM;GACf;;AAGJ,MAAM,sBACJ,IACA,YACS;CACT,MAAM,QAAQ,WAAW,kBAAkB;AAC3C,KAAI,CAAC,OAAO,YAAY,CAAC,OAAO,eAAe,CAAC,OAAO,kBAAkB;AACvE,UAAQ,MACN,+GACD;AACD;;CAGF,MAAM,gBAAgB,MAAM,YAAY,IAAI,GAAG;AAC/C,KAAI,CAAC,eAAe;AAClB,UAAQ,MACN,6DAA6D,GAAG,cACjE;AACD;;CAGF,MAAM,eAAe;EAAE,GAAG;EAAe,GAAG;EAAS;CAErD,MAAM,QAAQ,MAAM,SAAS,WAAW,UAAU,MAAM,OAAO,GAAG;AAClE,KAAI,UAAU,GACZ,OAAM,SAAS,SAAS;AAG1B,OAAM,YAAY,IAAI,IAAI,aAAa;AAEvC,OAAM,iBAAiB,SAAS,aAAa;AAC3C,WAAS,aAAa;GACtB;;AAGJ,MAAa,2BAA2B;AACtC,KAAI,CAAC,KAAK,OAAO;AACf,UAAQ,KACN,mEACD;AACD;;CAGF,MAAM,EAAE,UAAU,wBAAwB;AAE1C,KAAI,MAAM,aAAa,QAAW;AAChC,UAAQ,KAAK,oDAAoD;AACjE;;AAIF,OAAM,WAAW,EAAE;AACnB,OAAM,8BAAc,IAAI,KAAK;AAC7B,OAAM,mCAAmB,IAAI,KAAK;AAClC,OAAM,oBAAoB,aAA8B;AACtD,QAAM,kBAAkB,IAAI,SAAS;AACrC,eAAa;AACX,SAAM,kBAAkB,OAAO,SAAS;;;CAI5C,MAAM,gBAAgB,MAAM,KAAK,KAAK;CAEtC,MAAM,iBAAiB,OACrB,OACA,SACsB;EACtB,MAAM,KAAK,mBAAmB;EAC9B,MAAM,YAAY,KAAK,KAAK;EAC5B,MAAM,MAAM,WAAW,MAAM;EAC7B,MAAM,SAAS,cAAc,OAAO,KAAK;EAEzC,MAAM,iBAAiB,oBAAoB,OAAO,KAAK;EAGvD,IAAI;AACJ,MAAI,MAAM,KACR,KAAI,OAAO,KAAK,SAAS,SACvB,eAAc,KAAK;WACV,KAAK,gBAAgB,gBAC9B,eAAc,KAAK,KAAK,UAAU;MAGlC,eAAc,OAAO,KAAK,KAAK;AAInC,kBAAgB;GACd;GACA;GACA,QAAQ,UAAU;GAClB,QAAQ;GACR;GACA;GACA,aAAa,eAAe;GAC7B,CAAC;AAEF,MAAI;GACF,MAAM,WAAW,MAAM,cAAc,OAAO,KAAK;GACjD,MAAM,UAAU,KAAK,KAAK;GAE1B,MAAM,kBAA0C,EAAE;AAClD,YAAS,QAAQ,SAAS,OAAO,QAAQ;AACvC,oBAAgB,OAAO;KACvB;GAEF,MAAM,iBAAiB,SAAS,OAAO;GACvC,IAAI;AAEJ,OAAI;IACF,MAAM,YAAoC,EAAE;AAC5C,aAAS,QAAQ,SAAS,OAAO,QAAQ;AACvC,eAAU,IAAI,aAAa,IAAI;MAC/B;IAEF,MAAM,cAAc,UAAU;AAC9B,QAAI,aAAa,SAAS,mBAAmB,CAE3C,gBAAe,UADF,MAAM,eAAe,MAAM,EACT,MAAM,GAAG,EAAE,YAAY,MAAM,CAAC,IAAI;aACxD,aAAa,SAAS,OAAO,CACtC,gBAAe,MAAM,eAAe,MAAM;YAErC,OAAO;AACd,mBAAe,kCAAkC;AACjD,YAAQ,MAAM,8CAA8C,MAAM;;AAGpE,sBAAmB,IAAI;IACrB,QAAQ;IACR,YAAY,SAAS;IACrB,YAAY,SAAS;IACrB;IACA,UAAU,UAAU;IACpB;IACA,cAAc,gBAAgB;IAC/B,CAAC;AAEF,UAAO;WACA,OAAO;GACd,MAAM,UAAU,KAAK,KAAK;AAC1B,sBAAmB,IAAI;IACrB,QAAQ;IACR;IACA,UAAU,UAAU;IACpB,OAAO,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM;IAC9D,CAAC;AACF,SAAM;;;AAOV,SAAQ;AAGR,MAAK,QAAQ;AAEb,SAAQ,IAAI,iDAAiD;;;;;AChP/D,MAAM,8BAAsC;AAC1C,QAAO,eAAe,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ;;AAGnD,MAAM,uBAAuB,UAAsC;CACjE,MAAM,QAAQ,WAAW,kBAAkB;AAC3C,KAAI,CAAC,OAAO,gBAAgB,CAAC,OAAO,sBAAsB;AACxD,UAAQ,MACN,wHACD;AACD;;AAGF,OAAM,aAAa,KAAK,MAAM;AAC9B,OAAM,qBAAqB,SAAS,aAAa;AAC/C,WAAS,MAAM;GACf;;AAGJ,MAAa,+BAA+B;AAC1C;AAEA,KAAI,CAAC,KAAK,aAAa;AACrB,UAAQ,KACN,6EACD;AACD;;CAGF,MAAM,EAAE,UAAU,wBAAwB;AAE1C,KAAI,MAAM,iBAAiB,QAAW;AACpC,UAAQ,KAAK,wDAAwD;AACrE;;AAGF,OAAM,eAAe,EAAE;AACvB,OAAM,uCAAuB,IAAI,KAAK;AACtC,OAAM,wBAAwB,aAAkC;AAC9D,QAAM,sBAAsB,IAAI,SAAS;AACzC,eAAa;AACX,SAAM,sBAAsB,OAAO,SAAS;;;AAgBhD,CAZiB,KAAK,YAAY,gBAAgB,UAAU;AAS1D,sBAR+C;GAC7C,IAAI,uBAAuB;GAC3B,WAAW,MAAM;GACjB,MAAM,MAAM;GACZ,WAAW,KAAK,KAAK;GACrB,UAAU;GACX,CAEoC;GACrC,CAEO,QAAQ;EACf;EACA;EACA;EACD,CAAC;AAEF,SAAQ,IAAI,qDAAqD"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "lynx-console",
+  "version": "0.0.0",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "dist/index.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./setup": {
+      "types": "./dist/setup.d.mts",
+      "import": "./dist/setup.mjs",
+      "require": "./dist/setup.cjs"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "^0.114.3",
+    "@lynx-js/types": "^3.6.0",
+    "@types/react": "^18.3.28",
+    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/rollup-plugin": "^1.5.1",
+    "react": "^18.3.1",
+    "tsdown": "^0.20.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": "^0.114.3",
+    "@lynx-js/types": "^3.6.0",
+    "@types/react": "^18"
+  },
+  "dependencies": {
+    "javascript-stringify": "^2.1.0"
+  }
+}

package/src/components/BottomSheet.css.ts

@@ -0,0 +1,93 @@
+import { style } from "@vanilla-extract/css";
+import { typography } from "../styles/typography";
+import { vars } from "../styles/vars";
+
+export const overlay = style({
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "flex-end",
+  zIndex: 3,
+});
+
+export const backdrop = style({
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 2,
+  background: vars.$color.bg.overlay,
+  transition: `opacity ${vars.$duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
+});
+
+export const content = style({
+  position: "relative",
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  boxSizing: "border-box",
+  wordBreak: "break-all",
+  background: vars.$color.bg.layerFloating,
+  borderTopLeftRadius: vars.$radius.r6,
+  borderTopRightRadius: vars.$radius.r6,
+  transition: `transform ${vars.$duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
+  height: "500px",
+  overflow: "hidden",
+});
+
+export const handleContainer = style({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  height: "48px",
+  display: "flex",
+  justifyContent: "center",
+  zIndex: 10,
+});
+
+export const handle = style({
+  width: "36px",
+  height: 4,
+  backgroundColor: vars.$color.palette.gray400,
+  borderRadius: "9999px",
+  marginTop: "12px",
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: vars.$dimension.x2,
+  paddingTop: vars.$dimension.x6,
+  paddingBottom: vars.$dimension.x4,
+  justifyContent: "flex-start",
+  paddingLeft: vars.$dimension.spacingX.globalGutter,
+  paddingRight: "50px",
+});
+
+export const title = style({
+  ...typography("t7", "bold"),
+  color: vars.$color.fg.neutral,
+});
+
+export const body = style({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  padding: `0 ${vars.$dimension.x4}`,
+  overflow: "hidden",
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column",
+  paddingLeft: vars.$dimension.spacingX.globalGutter,
+  paddingRight: vars.$dimension.spacingX.globalGutter,
+  paddingTop: vars.$dimension.x3,
+  paddingBottom: vars.$dimension.x4,
+});