pw_web: Bundling for LitJS log viewer component

Change-Id: Ice07279932ba078b04216c8aac822827c15a165e
Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/150071
Reviewed-by: Luis Flores <lesprit@google.com>
Commit-Queue: Asad Memon <asadmemon@google.com>
Reviewed-by: Keir Mierle <keir@google.com>

5 files changed, 53 insertions, 37 deletions

diff --git a/pw_web/log-viewer/index.html b/pw_web/log-viewer/index.html
index 7aaf3b026..6cd849deb 100644
--- a/pw_web/log-viewer/index.html
+++ b/pw_web/log-viewer/index.html
@@ -42,7 +42,6 @@ the License.
         <!-- Uncomment line below for legacy components -->
         <!-- <fuchsia-log-viewer></fuchsia-log-viewer> -->
         <main id="log-viewer-container">
-            <log-viewer></log-viewer>
         </main>
     </body>
 </html>
diff --git a/pw_web/log-viewer/src/components/createLogViewer.ts b/pw_web/log-viewer/src/components/createLogViewer.ts
new file mode 100644
index 000000000..4e3832705
--- /dev/null
+++ b/pw_web/log-viewer/src/components/createLogViewer.ts
@@ -0,0 +1,48 @@
+// Copyright 2023 The Pigweed Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+import {LogViewer as RootComponent} from "./log-viewer";
+import {LogEntry} from "../shared/interfaces";
+
+import "@material/web/button/filled-button.js";
+import "@material/web/button/outlined-button.js";
+import "@material/web/checkbox/checkbox.js";
+import "@material/web/field/outlined-field.js";
+import "@material/web/textfield/outlined-text-field.js";
+import "@material/web/textfield/filled-text-field.js";
+import "@material/web/iconbutton/standard-icon-button.js";
+import "@material/web/icon/icon.js";
+import {LogSource} from "../log-source";
+
+export function createLogViewer(logSource: LogSource, root: HTMLElement) {
+  const logViewer = new RootComponent();
+  const logs: LogEntry[] = [];
+  root.appendChild(logViewer);
+
+
+  // Define an event listener for the 'logEntry' event
+  const logEntryListener = (logEntry: LogEntry) => {
+    logs.unshift(logEntry);
+    logViewer.logs = logs;
+    logViewer.requestUpdate("logs", []);
+  };
+
+  // Add the event listener to the LogSource instance
+  logSource.addEventListener("logEntry", logEntryListener);
+
+  // Method to destroy and unsubscribe
+  return () => {
+    logSource.removeEventListener("logEntry", logEntryListener);
+  }
+}
diff --git a/pw_web/log-viewer/src/index.ts b/pw_web/log-viewer/src/index.ts
index 7cc924a7d..5fb904692 100644
--- a/pw_web/log-viewer/src/index.ts
+++ b/pw_web/log-viewer/src/index.ts
@@ -13,49 +13,17 @@
 // the License.
 
 import { MockLogSource } from "./custom/mock-log-source";
-import { LogViewer } from "./components/log-viewer";
-
-interface LogEntry {
-    hostId: string;
-    timestamp: string;
-    fields: FieldData[];
-}
-
-interface FieldData {
-    key: string;
-    value: any;
-}
-
-import "@material/web/button/filled-button.js";
-import "@material/web/button/outlined-button.js";
-import "@material/web/checkbox/checkbox.js";
-import "@material/web/field/outlined-field.js";
-import "@material/web/textfield/outlined-text-field.js";
-import "@material/web/textfield/filled-text-field.js";
-import "@material/web/iconbutton/standard-icon-button.js";
-import "@material/web/icon/icon.js";
+import {createLogViewer} from "./components/createLogViewer";
 
 const logSource = new MockLogSource();
-const logViewer = document.querySelector("log-viewer") as LogViewer; // Get a reference to the <log-viewer> element
-const logs: LogEntry[] = [];
+const unsubscribe = createLogViewer(logSource, document.querySelector('#log-viewer-container')!);
 
 const TIMEOUT_DURATION = 5000; // ms
-
-// Define an event listener for the 'logEntry' event
-const logEntryListener = (logEntry: LogEntry) => {
-    logs.unshift(logEntry);
-    logViewer.logs = logs;
-    logViewer.requestUpdate("logs", []);
-};
-
-// Add the event listener to the LogSource instance
-logSource.addEventListener("logEntry", logEntryListener);
-
 // Start reading log data
 logSource.start();
 
 // Stop reading log data once timeout duration has elapsed
 setTimeout(() => {
     logSource.stop();
-    logSource.removeEventListener("logEntry", logEntryListener);
+  unsubscribe();
 }, TIMEOUT_DURATION);
diff --git a/pw_web/webconsole/package.json b/pw_web/webconsole/package.json
index 91b7e1f2a..eb5da8f21 100644
--- a/pw_web/webconsole/package.json
+++ b/pw_web/webconsole/package.json
@@ -19,7 +19,7 @@
     "codemirror": "^6.0.1",
     "next": "12.2.3",
     "object-path": "^0.11.8",
-    "pigweedjs": "latest",
+    "pigweedjs": "file:../../",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-virtualized": "^9.22.3",
diff --git a/pw_web/webconsole/pages/index.tsx b/pw_web/webconsole/pages/index.tsx
index 20866870b..b497393d8 100644
--- a/pw_web/webconsole/pages/index.tsx
+++ b/pw_web/webconsole/pages/index.tsx
@@ -19,6 +19,7 @@ import Log from "../components/log";
 import Repl from "../components/repl";
 import Connect from "../components/connect";
 import BtnUploadDB from '../components/uploadDb';
+
 import {WebSerial, Device} from "pigweedjs";
 import {useState} from 'react';
 type WebSerialTransport = WebSerial.WebSerialTransport