Add scene logs (#442)

* move bin module stdout & stderr to circular buffer

* add circular buffer for run function

* refactor window implementation

* add logs window

* add logging logic to renderer

* fix styles

* properly manage lifecycle of debugger

* scroll to bottom on new logs

* fix tests

* add button for preview options

* update @dcl/sdk

* fix prod build for debugger

* send all current logs buffer to debugger

* update to @dcl/sdk@7.7.6

* fix comments

Author: nicoecheza

package-lock.json

@@ -44,6 +44,7 @@
     "@types/semver": "^7.5.8",
     "@typescript-eslint/eslint-plugin": "7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "ansi-to-html": "^0.7.2",
     "classnames": "^2.5.1",
     "cross-env": "7.0.3",
     "decentraland-ui2": "^0.6.1",
@@ -70,7 +71,7 @@
   "dependencies": {
     "@dcl/mini-rpc": "^1.0.7",
     "@dcl/schemas": "^11.10.4",
-    "@dcl/sdk": "^7.7.5",
+    "@dcl/sdk": "^7.7.6",
     "@ethersproject/hash": "^5.7.0",
     "@segment/analytics-node": "^2.1.2",
     "cmd-shim": "^6.0.3",

package.json

@@ -1,15 +1,16 @@
 import { app } from 'electron';
-import { restoreOrCreateWindow } from '/@/mainWindow';
 import { platform } from 'node:process';
 import updater from 'electron-updater';
 import log from 'electron-log/main';
 
-import { initIpc } from './modules/ipc';
-import { deployServer, killPreview, previewCache } from './modules/cli';
-import { inspectorServer } from './modules/inspector';
-import { getAnalytics, track } from './modules/analytics';
-import './security-restrictions';
-import { runMigrations } from './modules/migrations';
+import { restoreOrCreateMainWindow } from '/@/mainWindow';
+import { initIpc } from '/@/modules/ipc';
+import { deployServer, killAllPreviews } from '/@/modules/cli';
+import { inspectorServer } from '/@/modules/inspector';
+import { getAnalytics, track } from '/@/modules/analytics';
+import { runMigrations } from '/@/modules/migrations';
+
+import '/@/security-restrictions';
 
 log.initialize();
 
@@ -21,7 +22,7 @@ if (!isSingleInstance) {
   app.quit();
   process.exit(0);
 }
-app.on('second-instance', restoreOrCreateWindow);
+app.on('second-instance', restoreOrCreateMainWindow);
 
 /**
  * Shut down background process if all windows was closed
@@ -36,7 +37,7 @@ app.on('window-all-closed', async () => {
 /**
  * @see https://www.electronjs.org/docs/latest/api/app#event-activate-macos Event: 'activate'.
  */
-app.on('activate', restoreOrCreateWindow);
+app.on('activate', restoreOrCreateMainWindow);
 
 /**
  * Create the application window when app is ready.
@@ -49,7 +50,7 @@ app
     log.info(`[App] Ready v${app.getVersion()}`);
     initIpc();
     log.info('[IPC] Ready');
-    await restoreOrCreateWindow();
+    await restoreOrCreateMainWindow();
     log.info('[BrowserWindow] Ready');
     const analytics = await getAnalytics();
     if (analytics) {
@@ -103,10 +104,7 @@ if (import.meta.env.PROD) {
 }
 
 export async function killAll() {
-  const promises: Promise<unknown>[] = [];
-  for (const key in previewCache.keys()) {
-    promises.push(killPreview(key));
-  }
+  const promises: Promise<unknown>[] = [killAllPreviews()];
   if (deployServer) {
     promises.push(deployServer.kill());
   }

packages/main/src/index.ts

@@ -1,21 +1,12 @@
-import { app, BrowserWindow } from 'electron';
-import { join } from 'node:path';
+import { type BrowserWindow } from 'electron';
 import { fileURLToPath } from 'node:url';
 
-async function createWindow() {
-  const browserWindow = new BrowserWindow({
-    show: false, // Use the 'ready-to-show' event to show the instantiated BrowserWindow.
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: true,
-      sandbox: false, // Sandbox disabled because the demo of preload script depend on the Node.js api
-      webviewTag: false, // The webview tag is not recommended. Consider alternatives like an iframe or Electron's BrowserView. @see https://www.electronjs.org/docs/latest/api/webview-tag#warning
-      preload: join(app.getAppPath(), 'packages/preload/dist/index.mjs'),
-    },
-  });
+import { createWindow, focusWindow, getWindow } from './modules/window';
 
-  browserWindow.setMenuBarVisibility(false);
-  browserWindow.maximize();
+async function createMainWindow(id: string) {
+  const window = createWindow(id);
+  window.setMenuBarVisibility(false);
+  window.maximize();
 
   /**
    * If the 'show' property of the BrowserWindow's constructor is omitted from the initialization options,
@@ -25,11 +16,11 @@ async function createWindow() {
    *
    * @see https://github.com/electron/electron/issues/25012 for the afford mentioned issue.
    */
-  browserWindow.on('ready-to-show', () => {
-    browserWindow?.show();
+  window.on('ready-to-show', () => {
+    window.show();
 
     if (import.meta.env.DEV) {
-      browserWindow?.webContents.openDevTools();
+      window?.webContents.openDevTools();
     }
   });
 
@@ -40,7 +31,7 @@ async function createWindow() {
     /**
      * Load from the Vite dev server for development.
      */
-    await browserWindow.loadURL(import.meta.env.VITE_DEV_SERVER_URL);
+    await window.loadURL(import.meta.env.VITE_DEV_SERVER_URL);
   } else {
     /**
      * Load from the local file system for production and test.
@@ -51,27 +42,35 @@ async function createWindow() {
      * @see https://github.com/nodejs/node/issues/12682
      * @see https://github.com/electron/electron/issues/6869
      */
-    await browserWindow.loadFile(
+    await window.loadFile(
       fileURLToPath(new URL('./../../renderer/dist/index.html', import.meta.url)),
     );
   }
 
-  return browserWindow;
+  return window;
 }
 
 /**
- * Restore an existing BrowserWindow or Create a new BrowserWindow.
+ * Restores an existing main window or creates a new one if none exists.
+ * This function ensures only one main window is active at a time.
+ *
+ * The function will:
+ * 1. Check if a main window already exists
+ * 2. Create a new window if none exists
+ * 3. Restore the window if it's minimized
+ * 4. Focus the window to bring it to the foreground
+ *
+ * @returns {Promise<Electron.BrowserWindow>} A promise that resolves to the main window instance
  */
-export async function restoreOrCreateWindow() {
-  let window = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
+export async function restoreOrCreateMainWindow(): Promise<BrowserWindow> {
+  const id = 'main';
+  let window = getWindow(id);
 
   if (window === undefined) {
-    window = await createWindow();
+    window = await createMainWindow(id);
   }
 
-  if (window.isMinimized()) {
-    window.restore();
-  }
+  focusWindow(window);
 
-  window.focus();
+  return window;
 }