feat: add back log view

apps/demo/components/connect.tsx

@@ -3,7 +3,7 @@ import { Adb, AdbBackend } from '@yume-chan/adb';
 import AdbWebUsbBackend, { AdbWebCredentialStore, AdbWebUsbBackendWatcher } from '@yume-chan/adb-backend-webusb';
 import AdbWsBackend from '@yume-chan/adb-backend-ws';
 import { observer } from 'mobx-react-lite';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { global, logger } from '../state';
 import { CommonStackTokens } from '../utils';
 
@@ -92,13 +92,13 @@ function _Connect(): JSX.Element | null {
     const connect = useCallback(async () => {
         try {
             if (selectedBackend) {
-                const adb = new Adb(selectedBackend, logger.logger);
+                const device = new Adb(selectedBackend, logger.logger);
                 try {
                     setConnecting(true);
-                    await adb.connect(CredentialStore);
-                    global.setCurrent(adb);
+                    await device.connect(CredentialStore);
+                    global.setDevice(device);
                 } catch (e) {
-                    adb.dispose();
+                    device.dispose();
                     throw e;
                 }
             }
@@ -111,7 +111,7 @@ function _Connect(): JSX.Element | null {
     const disconnect = useCallback(async () => {
         try {
             await global.device!.dispose();
-            global.setCurrent(undefined);
+            global.setDevice(undefined);
         } catch (e: any) {
             global.showErrorDialog(e.message);
         }

apps/demo/components/index.ts

@@ -4,4 +4,4 @@ export * from './demo-mode';
 export * from './device-view';
 export * from './error-dialog';
 export * from './external-link';
-export * from './logger';
+export * from './log-view';

apps/demo/components/log-view.tsx

@@ -2,8 +2,9 @@ import { IconButton, IListProps, List, mergeStyles, mergeStyleSets, Stack } from
 import { AdbPacketInit } from '@yume-chan/adb';
 import { decodeUtf8 } from '@yume-chan/adb-backend-webusb';
 import { DisposableList } from '@yume-chan/event';
+import { observer } from "mobx-react-lite";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { logger } from "../state";
+import { global, logger } from "../state";
 import { withDisplayName } from '../utils';
 import { CommandBar } from './command-bar';
 
@@ -44,7 +45,7 @@ function serializePacket(packet: AdbPacketInit) {
     return parts.join(' ');
 }
 
-const LoggerLine = withDisplayName('LoggerLine')(({ packet }: { packet: [string, AdbPacketInit]; }) => {
+const LogLine = withDisplayName('LoggerLine')(({ packet }: { packet: [string, AdbPacketInit]; }) => {
     const string = useMemo(() => serializePacket(packet[1]), [packet]);
 
     return (
@@ -54,43 +55,13 @@ const LoggerLine = withDisplayName('LoggerLine')(({ packet }: { packet: [string,
     );
 });
 
-export interface LoggerContextValue {
-    visible: boolean;
-    onVisibleChange: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const LoggerContext = createContext<LoggerContextValue | undefined>(undefined);
-
-export const LoggerContextProvider = withDisplayName('LoggerContextProvider')(({ children }) => {
-    const [visible, setVisible] = useState(false);
-    const contextValue = useMemo(() => ({
-        visible,
-        onVisibleChange: setVisible,
-    }), [visible, setVisible]);
-
-    return (
-        <LoggerContext.Provider value={contextValue}>
-            {children}
-        </LoggerContext.Provider>
-    );
-});
-
-export const ToggleLogger = withDisplayName('ToggleLogger')(() => {
-    const contextValue = useContext(LoggerContext);
-    const handleClick = useCallback(() => {
-        contextValue?.onVisibleChange(value => !value);
-    }, [contextValue]);
-
-    if (!contextValue) {
-        return null;
-    }
-
+export const ToggleLogView = observer(() => {
     return (
         <IconButton
-            checked={contextValue.visible}
+            checked={global.logVisible}
             iconProps={{ iconName: 'ChangeEntitlements' }}
             title="Toggle Log"
-            onClick={handleClick}
+            onClick={global.toggleLog}
         />
     );
 });
@@ -109,14 +80,13 @@ function renderCell(item?: [string, AdbPacketInit]) {
     }
 
     return (
-        <LoggerLine packet={item} />
+        <LogLine packet={item} />
     );
 }
 
-export const Logger = withDisplayName('Logger')(({
+export const LogView = observer(({
     className,
 }: LoggerProps) => {
-    const contextValue = useContext(LoggerContext);
     const [packets, setPackets] = useState<[string, AdbPacketInit][]>([]);
     const scrollerRef = useRef<HTMLDivElement | null>(null);
 
@@ -177,7 +147,7 @@ export const Logger = withDisplayName('Logger')(({
         classNames['logger-container'],
     ), [className]);
 
-    if (!contextValue?.visible) {
+    if (!global.logVisible) {
         return null;
     }
 

apps/demo/pages/_app.tsx

@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useCallback, useEffect, useState } from "react";
-import { Connect, ErrorDialogProvider, Logger, ToggleLogger } from "../components";
+import { Connect, ErrorDialogProvider, LogView, ToggleLogView } from "../components";
 import '../styles/globals.css';
 
 initializeIcons();
@@ -97,7 +97,7 @@ function MyApp({ Component, pageProps }: AppProps) {
                         <div className={classNames.title}>WebADB Demo</div>
                     </StackItem>
 
-                    <ToggleLogger />
+                    <ToggleLogView />
                 </Stack>
 
                 <Stack grow horizontal verticalFill disableShrink styles={{ root: { minHeight: 0, overflow: 'hidden', lineHeight: '1.5' } }}>
@@ -119,9 +119,9 @@ function MyApp({ Component, pageProps }: AppProps) {
                     <StackItem grow styles={{ root: { width: 0 } }}>
                         <Component {...pageProps} />
                     </StackItem>
-                </Stack>
 
-                <Logger className={classNames['right-column']} />
+                    <LogView className={classNames['right-column']} />
+                </Stack>
             </Stack>
         </ErrorDialogProvider >
     );

apps/demo/state/global.ts

@@ -6,16 +6,19 @@ export class GlobalState {
     errorDialogVisible = false;
     errorDialogMessage = '';
 
+    logVisible = false;
+
     constructor() {
         makeAutoObservable(this, {
             hideErrorDialog: action.bound,
+            toggleLog: action.bound,
         });
     }
 
-    setCurrent(device: Adb | undefined) {
+    setDevice(device: Adb | undefined) {
         this.device = device;
         device?.onDisconnected(() => {
-            this.setCurrent(undefined);
+            this.setDevice(undefined);
         });
     }
 
@@ -27,6 +30,10 @@ export class GlobalState {
     hideErrorDialog() {
         this.errorDialogVisible = false;
     }
+
+    toggleLog() {
+        this.logVisible = !this.logVisible;
+    }
 }
 
 export const global = new GlobalState();