@rerun-io/web-viewer-react 0.12.0-rc.3 → 0.12.0-rc.4

package/README.md

@@ -35,7 +35,7 @@ export default function App() {
 ```
 
 The `rrd` in the snippet above should be a URL pointing to either:
-- A hosted `.rrd` file, such as <https://app.rerun.io/version/0.12.0-rc.3/examples/dna.rrd>
+- A hosted `.rrd` file, such as <https://app.rerun.io/version/0.12.0-rc.4/examples/dna.rrd>
 - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API
 
 If `rrd` is not set, the viewer will display the same welcome screen as <https://app.rerun.io>.

package/index.d.ts

@@ -4,25 +4,33 @@ declare module '@rerun-io/web-viewer-react' {
 	 *
 	 * This component creates and manages the web viewer's `canvas` element.
 	 *
-	 * The web viewer is restarted each time `rrd` changes.
-	 * Starting the web viewer is an expensive operation, so be careful with changing it too often!
-	 *
-	 * */
-	export default function WebViewer(props: Props): React.DetailedReactHTMLElement<{
-		className: string;
-		style: {
-			width: string;
-			height: string;
-			position: "relative";
-		};
-		ref: React.RefObject<HTMLDivElement>;
-	}, HTMLDivElement>;
+	 * 
+	 */
+	export default class WebViewer extends React.Component<Props, any, any> {
+		
+		constructor(props: Props);
+		componentDidMount(): void;
+		componentDidUpdate(prevProps: Props): void;
+		componentWillUnmount(): void;
+		render(): React.DetailedReactHTMLElement<{
+			className: string;
+			style: {
+				width: string;
+				height: string;
+				position: "relative";
+			};
+			ref: React.RefObject<HTMLDivElement>;
+		}, HTMLDivElement>;
+		#private;
+	}
 	export type React = typeof React;
 	export type Props = {
 		/**
-		 * URL of the `.rrd` file to load
+		 * URL(s) of the `.rrd` file(s) to load.
+		 * Changing this prop will open any new unique URLs as recordings,
+		 * and close any URLs which are not present.
 		 */
-		rrd: string;
+		rrd: string | string[];
 		/**
 		 * CSS width of the viewer's parent div
 		 */

package/index.js

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef } from "react";
+import React, { createRef } from "react";
 import * as rerun from "@rerun-io/web-viewer";
 
 /** @typedef {import("react")} React */
 
 /**
  * @typedef Props
- * @property {string} rrd URL of the `.rrd` file to load
+ * @property {string | string[]} rrd URL(s) of the `.rrd` file(s) to load.
+ *                                   Changing this prop will open any new unique URLs as recordings,
+ *                                   and close any URLs which are not present.
  * @property {string} [width] CSS width of the viewer's parent div
  * @property {string} [height] CSS height of the viewer's parent div
  */
@@ -15,48 +17,75 @@ import * as rerun from "@rerun-io/web-viewer";
  *
  * This component creates and manages the web viewer's `canvas` element.
  *
- * The web viewer is restarted each time `rrd` changes.
- * Starting the web viewer is an expensive operation, so be careful with changing it too often!
+ * @extends {React.Component<Props>}
+ */
+export default class WebViewer extends React.Component {
+  /** @type {React.RefObject<HTMLDivElement>} */
+  #parent = createRef();
+
+  /** @type {rerun.WebViewer} */
+  #handle;
+
+  /** @type {string[]} */
+  #recordings = [];
+
+  /** @param {Props} props */
+  constructor(props) {
+    super(props);
+
+    this.#handle = new rerun.WebViewer();
+    this.#recordings = toArray(props.rrd);
+  }
+
+  componentDidMount() {
+    const current = /** @type {HTMLDivElement} */ (this.#parent.current);
+    this.#handle.start(this.#recordings, current);
+  }
+
+  componentDidUpdate(/** @type {Props} */ prevProps) {
+    const prev = toArray(prevProps.rrd);
+    const current = toArray(this.props.rrd);
+    // Diff recordings when `rrd` prop changes.
+    const { added, removed } = diff(prev, current);
+    this.#handle.open(added);
+    this.#handle.close(removed);
+  }
+
+  componentWillUnmount() {
+    this.#handle.stop();
+  }
+
+  render() {
+    const { width = "100%", height = "640px" } = this.props;
+    return React.createElement("div", {
+      className: "rerun-web-viewer",
+      style: { width, height, position: "relative" },
+      ref: this.#parent,
+    });
+  }
+}
+
+/**
+ * Return the difference between the two arrays.
  *
- * @param {Props} props
+ * @param {string[]} prev
+ * @param {string[]} current
+ * @returns {{ added: string[], removed: string[] }}
+ */
+function diff(prev, current) {
+  const prevSet = new Set(prev);
+  const currentSet = new Set(current);
+  return {
+    added: current.filter((v) => !prevSet.has(v)),
+    removed: prev.filter((v) => !currentSet.has(v)),
+  };
+}
+
+/**
+ * @template T
+ * @param {T | T[]} a
+ * @returns {T[]}
  */
-export default function WebViewer(props) {
-  const { width = "100%", height = "640px", rrd } = props;
-
-  /**
-   * Parent DOM node
-   * @type {React.RefObject<HTMLDivElement>}
-   */
-  const parent = useRef(null);
-  /**
-   * Web viewer instance
-   * @type {React.MutableRefObject<rerun.WebViewer | undefined>}
-   */
-  const viewer = useRef();
-
-  useEffect(
-    () => {
-      if (parent.current) {
-        // Start the web viewer when the parent div is mounted to the DOM.
-        const w = new rerun.WebViewer();
-        w.start(rrd, parent.current);
-        viewer.current = w;
-        return () => {
-          // Stop the web viewer when the component is unmounted.
-          w.stop();
-          viewer.current = undefined;
-        };
-      }
-    },
-    // The web viewer will be restarted when:
-    // - `parent` is added/moved/removed in the DOM
-    // - `rrd` changes
-    [parent.current, rrd],
-  );
-
-  return React.createElement("div", {
-    className: "rerun-web-viewer",
-    style: { width, height, position: "relative" },
-    ref: parent,
-  });
+function toArray(a) {
+  return Array.isArray(a) ? a : [a];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rerun-io/web-viewer-react",
-  "version": "0.12.0-rc.3",
+  "version": "0.12.0-rc.4",
   "description": "Embed the Rerun web viewer in your React app",
   "private": false,
   "scripts": {
@@ -32,7 +32,7 @@
     "tsconfig.json"
   ],
   "dependencies": {
-    "@rerun-io/web-viewer": "0.12.0-rc.3",
+    "@rerun-io/web-viewer": "0.12.0-rc.4",
     "@types/react": "^18.2.33",
     "react": "^18.2.0"
   },