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>

package.json

@@ -8,7 +8,8 @@
   "exports": {
     ".": "./dist/index.mjs",
     "./protos": "./dist/protos/collection.umd.js",
-    "./protos/*": "./dist/protos/*"
+    "./protos/*": "./dist/protos/*",
+    "./logging": "./dist/logging.mjs"
   },
   "bin": {
     "pw_protobuf_compiler": "./dist/bin/pw_protobuf_compiler.js"

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>

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);
+  }
+}

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);

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",

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

rollup.config.js

@@ -86,6 +86,33 @@ export default [
         [{file: path.join('dist', 'protos', 'collection.d.ts'), format: 'es'}],
     plugins: [dts({compilerOptions: tsConfig.compilerOptions})]
   },
+  // Bundle Pigweed log component and modules
+  {
+    input: path.join('ts', 'logging.ts'),
+    output: [
+      {
+        file: path.join('dist', 'logging.umd.js'),
+        format: 'umd',
+        sourcemap: true,
+        name: 'PigweedLogging',
+      },
+      {
+        file: path.join('dist', 'logging.mjs'),
+        format: 'esm',
+        sourcemap: true,
+      }
+    ],
+    plugins: [
+      pluginTypescript(
+          {tsconfig: './tsconfig.json', exclude: ['**/*_test.ts']}),
+      nodePolyfills(),
+      resolve(),
+      commonjs(),
+
+      // Resolve source maps to the original source
+      sourceMaps()
+    ]
+  },
   // Bundle Pigweed modules
   {
     input: path.join('ts', 'index.ts'),

ts/logging.ts

@@ -0,0 +1,19 @@
+// 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.
+
+export {LogSource} from "../pw_web/log-viewer/src/log-source";
+export {MockLogSource} from "../pw_web/log-viewer/src/custom/mock-log-source";
+export {LogViewer} from "../pw_web/log-viewer/src/components/log-viewer";
+export {createLogViewer} from "../pw_web/log-viewer/src/components/createLogViewer";
+export {LogEntry, FieldData} from "../pw_web/log-viewer/src/shared/interfaces";