lynx-console 0.0.0

package/src/components/Tabs.css.ts

@@ -0,0 +1,66 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { typography } from "../styles/typography";
+import { vars } from "../styles/vars";
+
+export const tabs = style({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const tabHeader = style({
+  display: "flex",
+  boxShadow: `inset 0 -1px 0 0 ${vars.$color.stroke.neutralSubtle}`,
+});
+
+export const tabTriggerButton = style({
+  flex: 1,
+  color: vars.$color.fg.neutralSubtle,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "12px 0 10px 0",
+  position: "relative",
+});
+
+export const tabTriggerButtonText = recipe({
+  base: {
+    ...typography("t5", "bold"),
+    color: vars.$color.fg.neutralSubtle,
+  },
+  variants: {
+    active: {
+      true: {
+        color: vars.$color.fg.neutral,
+      },
+    },
+  },
+});
+
+export const tabTriggerIndicator = style({
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  padding: "0 16px",
+  width: "100%",
+  transition: "200ms",
+  transitionTimingFunction: "cubic-bezier(.35, 0, .35, 1)",
+});
+
+export const tabTriggerIndicatorLine = style({
+  backgroundColor: vars.$color.fg.neutral,
+  width: "100%",
+  height: "2px",
+});
+
+export const tabContents = style({
+  flex: 1,
+  width: "100%",
+});
+
+export const tabContent = style({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+});

package/src/components/Tabs.tsx

@@ -0,0 +1,81 @@
+import { type ReactNode, useRef, useState } from "@lynx-js/react";
+import type { ListSnapEvent, NodesRef } from "@lynx-js/types";
+import * as css from "./Tabs.css";
+
+type TabsProps = {
+  items: Array<{
+    key: string;
+    label: string;
+    renderContent: () => ReactNode;
+  }>;
+};
+
+export default function Tabs(props: TabsProps) {
+  const tabContentsRef = useRef<NodesRef>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <view className={css.tabs}>
+      <view className={css.tabHeader}>
+        {props.items.map((item, i) => (
+          <view
+            key={item.key}
+            className={css.tabTriggerButton}
+            bindtap={() => {
+              setActiveIndex(i);
+
+              tabContentsRef.current
+                ?.invoke({
+                  method: "scrollToPosition",
+                  params: {
+                    position: i,
+                    smooth: true,
+                  },
+                })
+                .exec();
+            }}
+          >
+            <text
+              className={css.tabTriggerButtonText({
+                active: i === activeIndex,
+              })}
+            >
+              {item.label}
+            </text>
+            {i === 0 && (
+              <view
+                className={css.tabTriggerIndicator}
+                style={{ transform: `translateX(${activeIndex * 100}%)` }}
+              >
+                <view className={css.tabTriggerIndicatorLine} />
+              </view>
+            )}
+          </view>
+        ))}
+      </view>
+
+      <list
+        ref={tabContentsRef}
+        className={css.tabContents}
+        scroll-orientation="horizontal"
+        item-snap={{ factor: 0, offset: 0 }}
+        bindsnap={(e: ListSnapEvent) => {
+          setActiveIndex(e.detail.position);
+        }}
+        bounces={false}
+        preload-buffer-count={props.items.length}
+      >
+        {props.items.map((item) => (
+          <list-item
+            key={item.key}
+            item-key={item.key}
+            recyclable={false}
+            className={css.tabContent}
+          >
+            {item.renderContent()}
+          </list-item>
+        ))}
+      </list>
+    </view>
+  );
+}

package/src/globals.d.ts

@@ -0,0 +1,9 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.css.ts" {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useConsole } from "./useConsole";
+export { useNetwork } from "./useNetwork";
+export { usePerformance } from "./usePerformance";

package/src/hooks/useConsole.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "@lynx-js/react";
+import type { LogEntry } from "../types";
+
+export const useConsole = () => {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+
+  useEffect(() => {
+    if (typeof globalThis.__LYNX_CONSOLE__?.state?.logs === "undefined") {
+      console.warn("[LynxConsole] Log monitoring not initialized");
+      return;
+    }
+
+    const state = globalThis.__LYNX_CONSOLE__.state;
+
+    setLogs([...(state.logs ?? [])]);
+
+    const updateLogs = (_entry: LogEntry) => {
+      setLogs([...(state.logs ?? [])]);
+    };
+
+    const unsubscribe = state.logSubscribe?.(updateLogs);
+
+    return unsubscribe;
+  }, []);
+
+  const clearLogs = () => {
+    if (typeof globalThis.__LYNX_CONSOLE__?.state?.logs !== "undefined") {
+      const state = globalThis.__LYNX_CONSOLE__.state;
+      state.logs = [];
+      setLogs([]);
+    }
+  };
+
+  return { logs, clearLogs };
+};

package/src/hooks/useNetwork.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "@lynx-js/react";
+import type { NetworkEntry } from "../types";
+
+export const useNetwork = () => {
+  const [networks, setNetworks] = useState<NetworkEntry[]>([]);
+
+  useEffect(() => {
+    if (typeof globalThis.__LYNX_CONSOLE__?.state?.networks === "undefined") {
+      console.warn("[LynxConsole] Network monitoring not initialized");
+      return;
+    }
+
+    const state = globalThis.__LYNX_CONSOLE__.state;
+
+    setNetworks([...(state.networks ?? [])]);
+
+    const updateNetworks = (_entry: NetworkEntry) => {
+      setNetworks([...(state.networks ?? [])]);
+    };
+
+    const unsubscribe = state.subscribeNetwork?.(updateNetworks);
+
+    return unsubscribe;
+  }, []);
+
+  const clearNetworks = () => {
+    if (typeof globalThis.__LYNX_CONSOLE__?.state?.networks !== "undefined") {
+      const state = globalThis.__LYNX_CONSOLE__.state;
+      state.networks = [];
+      state.networksMap?.clear();
+      setNetworks([]);
+    }
+  };
+
+  return { networks, clearNetworks };
+};

package/src/hooks/usePerformance.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "@lynx-js/react";
+import type { PerformanceEntryData } from "../types";
+
+export const usePerformance = () => {
+  const [performances, setPerformances] = useState<PerformanceEntryData[]>([]);
+
+  useEffect(() => {
+    if (
+      typeof globalThis.__LYNX_CONSOLE__?.state?.performances === "undefined"
+    ) {
+      console.warn("[LynxConsole] Performance monitoring not initialized");
+      return;
+    }
+
+    const state = globalThis.__LYNX_CONSOLE__.state;
+
+    setPerformances([...(state.performances ?? [])]);
+
+    const updatePerformances = (_entry: PerformanceEntryData) => {
+      setPerformances([...(state.performances ?? [])]);
+    };
+
+    const unsubscribe = state.subscribePerformance?.(updatePerformances);
+
+    return unsubscribe;
+  }, []);
+
+  const clearPerformances = () => {
+    if (
+      typeof globalThis.__LYNX_CONSOLE__?.state?.performances !== "undefined"
+    ) {
+      const state = globalThis.__LYNX_CONSOLE__.state;
+      state.performances = [];
+      setPerformances([]);
+    }
+  };
+
+  return { performances, clearPerformances };
+};

package/src/index.tsx

@@ -0,0 +1,110 @@
+import "./styles/vars/index.css";
+import {
+  type ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "@lynx-js/react";
+import BottomSheet from "./components/BottomSheet.jsx";
+import { ConsolePanel } from "./components/ConsolePanel.jsx";
+import * as floatingButtonCss from "./components/FloatingButton.css";
+import { FloatingButton } from "./components/FloatingButton.jsx";
+import { usePerformance } from "./hooks/usePerformance";
+
+export interface LynxConsoleHandle {
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
+}
+
+export interface LynxConsoleProps {
+  theme?: "light" | "dark";
+  safeAreaInsetBottom?: string;
+}
+
+interface FcpMetric {
+  name: string;
+  duration: number;
+}
+
+interface MetricFcpEntry {
+  totalFcp?: FcpMetric;
+  lynxFcp?: FcpMetric;
+  fcp?: FcpMetric;
+}
+
+const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
+  (
+    { theme = "light", safeAreaInsetBottom = "50px" },
+    ref: ForwardedRef<LynxConsoleHandle>,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [shouldClose, setShouldClose] = useState(false);
+    const { performances } = usePerformance();
+
+    const latestFcp = useMemo(() => {
+      for (let i = performances.length - 1; i >= 0; i--) {
+        const perf = performances[i];
+        if (perf && perf.entryType === "metric" && perf.name === "fcp") {
+          const metricEntry = perf.rawEntry as MetricFcpEntry | undefined;
+          // totalFcp를 먼저 시도하고, 없으면 lynxFcp 반환
+          if (metricEntry?.totalFcp?.duration !== undefined) {
+            return metricEntry.totalFcp;
+          }
+          if (metricEntry?.lynxFcp?.duration !== undefined) {
+            return metricEntry.lynxFcp;
+          }
+        }
+      }
+      return undefined;
+    }, [performances]);
+
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        setIsOpen(true);
+        setShouldClose(false);
+      },
+      close: () => {
+        setShouldClose(true);
+      },
+      isOpen: () => isOpen,
+    }));
+
+    const handleOpenBottomSheet = () => {
+      setIsOpen(true);
+      setShouldClose(false);
+    };
+
+    const handleCloseBottomSheet = () => {
+      setIsOpen(false);
+      setShouldClose(false);
+    };
+
+    const themeClass = `data-seed-color-mode__${theme}-only`;
+
+    return (
+      <view className={themeClass}>
+        <FloatingButton bindtap={handleOpenBottomSheet} isVisible={!isOpen}>
+          <text className={floatingButtonCss.title}>LynxConsole</text>
+          <text className={floatingButtonCss.subtitle}>
+            {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
+          </text>
+        </FloatingButton>
+        {isOpen && (
+          <BottomSheet
+            isOpen={isOpen}
+            shouldClose={shouldClose}
+            onClose={handleCloseBottomSheet}
+            title="Lynx Console"
+            safeAreaInsetBottom={safeAreaInsetBottom}
+          >
+            <ConsolePanel />
+          </BottomSheet>
+        )}
+      </view>
+    );
+  },
+);
+
+export default LynxConsole;

package/src/setup/_setupMainThreadConsole.ts

@@ -0,0 +1,80 @@
+import { runOnBackground } from "@lynx-js/react";
+import type { LogEntry, LogLevel } from "../types";
+
+const _setupMainThreadConsole = (): void => {
+  "main thread";
+
+  //IMPORTANT: do not use external functions in 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: LogLevel[] = ["log", "warn", "error", "info"];
+  const LOG_ID_PREFIX = "main-thread";
+
+  const serializeArgs = (args: unknown[]): unknown[] => {
+    return args.map((arg) => {
+      try {
+        JSON.stringify(arg);
+        return arg;
+      } catch {
+        return String(arg);
+      }
+    });
+  };
+
+  const generateLogId = (): string => {
+    return `${LOG_ID_PREFIX}-${Date.now()}-${Math.random()}`;
+  };
+
+  // Main Thread에서 Background Thread로 로그 전송하는 함수
+  const sendLogToBackground = runOnBackground((entry: LogEntry): void => {
+    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),
+  };
+
+  // Main Thread console 오버라이드
+  LOG_METHODS.forEach((method) => {
+    const original = originalMethods[method];
+    originalConsole[method] = ((...args: unknown[]) => {
+      // 원본 console 호출
+      original(...args);
+
+      const serializedArgs = serializeArgs(args);
+      const timestamp = Date.now();
+      const id = generateLogId();
+
+      sendLogToBackground({
+        id,
+        level: method,
+        message: "",
+        timestamp,
+        args: serializedArgs,
+      });
+    }).bind(originalConsole);
+  });
+
+  lynxConsole.mainThreadInitialized = true;
+
+  originalConsole.log("[LynxConsole] ✅ Main thread console initialized");
+};
+
+export default _setupMainThreadConsole;

package/src/setup/index.ts

@@ -0,0 +1,4 @@
+export { initLogMonitor } from "./setupLogMonitor";
+export { initMainThreadConsole } from "./setupMainThreadConsole";
+export { initNetworkMonitor } from "./setupNetworkMonitor";
+export { initPerformanceMonitor } from "./setupPerformanceMonitor";

package/src/setup/setupLogMonitor.ts

@@ -0,0 +1,78 @@
+import { ensureConsoleStructure } from "../shared/ensureConsoleStructure";
+import type { LogEntry, LogLevel } from "../types";
+
+type LogListener = (entry: LogEntry) => void;
+
+const LOG_METHODS: LogLevel[] = ["log", "warn", "error", "info"];
+const LOG_ID_PREFIX = "background-thread";
+
+const generateLogId = (): string => {
+  return `${LOG_ID_PREFIX}-${Date.now()}-${Math.random()}`;
+};
+
+const createLogEntry = (method: LogLevel, args: unknown[]): LogEntry => {
+  return {
+    id: generateLogId(),
+    level: method,
+    message: "",
+    timestamp: Date.now(),
+    args,
+  };
+};
+
+const addLogEntry = (entry: LogEntry): void => {
+  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);
+  });
+};
+
+// Background Thread: Log monitoring 초기화
+export 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 = new Set();
+  state.logSubscribe = (listener: LogListener) => {
+    state.logListeners?.add(listener);
+    return () => {
+      state.logListeners?.delete(listener);
+    };
+  };
+
+  // Background Thread console 오버라이드
+  LOG_METHODS.forEach((method) => {
+    globalThis.console[method] = ((...args: unknown[]) => {
+      lynxConsole.originalConsole?.[method](...args);
+      const entry = createLogEntry(method, args);
+      addLogEntry(entry);
+    }).bind(globalThis.console);
+  });
+
+  lynxConsole.originalConsole?.log(
+    "[LynxConsole] ✅ Log monitoring initialized",
+  );
+};

package/src/setup/setupMainThreadConsole.ts

@@ -0,0 +1,34 @@
+// both thread;
+import "./_setupMainThreadConsole";
+
+import { runOnMainThread } from "@lynx-js/react";
+import { ensureConsoleStructure } from "../shared/ensureConsoleStructure";
+import _setupMainThreadConsole from "./_setupMainThreadConsole";
+
+// Main Thread: Console 초기화
+
+export const initMainThreadConsole = async (): Promise<void> => {
+  "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 {
+    const setupOnMainThread = runOnMainThread(_setupMainThreadConsole);
+    await setupOnMainThread();
+  } catch (error) {
+    console.error(
+      "[LynxConsole] Failed to initialize main thread console:",
+      error,
+    );
+  }
+};