add console

M-CreativeLab · Jan 14, 2024 · 4304483 · 4304483
1 parent 4456255
commit 4304483
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 15 deletions.
diff --git a/packages/vscode-extension/src/providers/ConsoleViewProvider.ts b/packages/vscode-extension/src/providers/ConsoleViewProvider.ts
@@ -19,18 +19,21 @@ export default class ConsoleViewProvider implements vscode.WebviewViewProvider {
     };
     webview.html = this.getWebviewContent(entryUri);
     this.webviewView = webviewView;
+
+    let isLogEntryWatched = false;
     this.webviewView.webview.onDidReceiveMessage(async (message) => {
-      const sceneViewProvider = ViewProviderManager.GetSceneViewProvider();
-      if (sceneViewProvider) {
-        const { cdpClient } = sceneViewProvider;
-        const { command, args } = message;
-        if (command === 'cdp.SpatialDOM.setTransform') {
-          cdpClient.rootSession.api.SpatialDOM.setTransform({
-            nodeId: args[0],
-            transform: args[1],
-          });
-        } else {
-          console.warn(`Unknown command: ${command}`);
+      if (message?.command === 'ready') {
+        const sceneViewProvider = ViewProviderManager.GetSceneViewProvider();
+        if (sceneViewProvider) {
+          const { cdpClient } = sceneViewProvider;
+          if (!isLogEntryWatched) {
+            cdpClient.rootSession.api.Log.onEntryAdded((params) => {
+              webview.postMessage(params.entry);
+            });
+            isLogEntryWatched = true;
+          }
+          await cdpClient.rootSession.api.Log.enable();
+          console.info(`Start listening to console logs`);
         }
       }
     });

diff --git a/packages/vscode-extension/src/views/ConsoleView/main.tsx b/packages/vscode-extension/src/views/ConsoleView/main.tsx
@@ -1,10 +1,49 @@
 import { createRoot } from 'react-dom/client';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+
+declare var acquireVsCodeApi: () => {
+  postMessage(message: any): void;
+};
+let vscode = acquireVsCodeApi();
+
+type Log = {
+  level: 'info' | 'warn' | 'error';
+  text: string;
+  source: string;
+  args: any[];
+  timestamp: number;
+}
 
 function App() {
-  // const vscodeThemeKind = document.body.getAttribute('data-vscode-theme-kind');
-  return <div>
-    <p>TODO</p>
+  const [logs, setLogs] = useState<Log[]>([]);
+
+  React.useEffect(() => {
+    vscode.postMessage({ command: 'ready' });
+    function onMessage(event: MessageEvent) {
+      const log = event.data;
+      setLogs(logs => [...logs, log]);
+    }
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+  return <div style={{
+    width: '100%',
+    height: '100%',
+    overflow: 'auto',
+    padding: '10px',
+  }}>
+    <ul style={{
+      listStyle: 'none',
+      padding: '5px 30px',
+      margin: 0,
+      fontFamily: 'monospace',
+      fontSize: '12px',
+      lineHeight: '1.5em',
+    }}>
+      {logs.map(log => <li key={log.timestamp} className={log.level}>
+        <span className="text">{log.text}</span>
+      </li>)}
+    </ul>
   </div>;
 }