diff --git a/package.json b/package.json index b3eebb567..813b1d89a 100644 --- a/package.json +++ b/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" 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.
-
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 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 diff --git a/rollup.config.js b/rollup.config.js index fbe041be2..22d0d3ec4 100644 --- a/rollup.config.js +++ b/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'), diff --git a/ts/logging.ts b/ts/logging.ts new file mode 100644 index 000000000..4eb29e43f --- /dev/null +++ b/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";