@rerun-io/web-viewer-react - npm Package Compare versions

Comparing version 0.17.0 to 0.18.0-rc.1

index.d.ts

@@ -27,3 +27,3 @@ declare module '@rerun-io/web-viewer-react' {
 	}
-	export type Props = {
+	export type BaseProps = {
 		/**
@@ -43,9 +43,6 @@ * URL(s) of the `.rrd` file(s) to load.
 		height?: string | undefined;
-		/**
-		 * Whether to hide the welcome screen. Default is `false`.
-		 */
-		hide_welcome_screen?: boolean | undefined;
 	};
+	export type Props = (Omit<import("@rerun-io/web-viewer").WebViewerOptions, "allow_fullscreen" | "enable_history"> & BaseProps);
 }
 
 //# sourceMappingURL=index.d.ts.map

index.js

 import React, { createRef } from "react";
 import * as rerun from "@rerun-io/web-viewer";
 
+// NOTE: We're intentionally not exposing `allow_fullscreen` and `enable_history`.
+//       Those features are already pretty sensitive to the environment, especially
+//       so in React where all normal behavior of web APIs goes out of the window.
 /**
- * @typedef Props
+ * @typedef BaseProps
  * @property {string | string[]} rrd URL(s) of the `.rrd` file(s) to load.
@@ -11,3 +14,7 @@ *                                   Changing this prop will open any new unique URLs as recordings,
  * @property {string} [height] CSS height of the viewer's parent div
- * @property {boolean} [hide_welcome_screen] Whether to hide the welcome screen. Default is `false`.
+ *
+ * @typedef {(
+ *   Omit<import("@rerun-io/web-viewer").WebViewerOptions, "allow_fullscreen" | "enable_history">
+ *   & BaseProps
+ * )} Props
  */
@@ -29,8 +36,2 @@
 
-  /** @type {string[]} */
-  #recordings = [];
-
-  /** @type {boolean} */
-  #hide_welcome_screen = false;
-
   /** @param {Props} props */
@@ -41,22 +42,41 @@ constructor(props) {
     this.#handle = new rerun.WebViewer();
-    this.#recordings = toArray(props.rrd);
-    this.#hide_welcome_screen = props.hide_welcome_screen ?? false;
   }
 
   componentDidMount() {
-    const current = /** @type {HTMLDivElement} */ (this.#parent.current);
-    this.#handle.start(this.#recordings, current, {
-      hide_welcome_screen: this.#hide_welcome_screen,
-      width: "100%",
-      height: "100%",
-    });
+    startViewer(
+      this.#handle,
+      /** @type {HTMLDivElement} */ (this.#parent.current),
+      this.props,
+    );
   }
 
   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);
+    if (
+      keysChanged(prevProps, this.props, [
+        "hide_welcome_screen",
+        "manifest_url",
+        "render_backend",
+      ])
+    ) {
+      // We have to restart the viewer, because the above
+      // props are _startup_ options only, and we don't
+      // want to break that promise by setting them
+      // after the viewer has been started.
+      this.#handle.stop();
+
+      this.#handle = new rerun.WebViewer();
+      startViewer(
+        this.#handle,
+        /** @type {HTMLDivElement} */ (this.#parent.current),
+        this.props,
+      );
+    } else {
+      // We only need to diff the recordings.
+
+      const prev = toArray(prevProps.rrd);
+      const current = toArray(this.props.rrd);
+      const { added, removed } = diff(prev, current);
+      this.#handle.open(added);
+      this.#handle.close(removed);
+    }
   }
@@ -79,2 +99,20 @@
 /**
+ * @param {rerun.WebViewer} handle
+ * @param {HTMLElement} parent
+ * @param {Props} props
+ */
+function startViewer(handle, parent, props) {
+  handle.start(toArray(props.rrd), parent, {
+    manifest_url: props.manifest_url,
+    render_backend: props.render_backend,
+    hide_welcome_screen: props.hide_welcome_screen,
+
+    // NOTE: `width`, `height` intentionally ignored, they will
+    //       instead be used on the parent `div` element
+    width: "100%",
+    height: "100%",
+  });
+}
+
+/**
  * Return the difference between the two arrays.
@@ -96,2 +134,21 @@ *
 /**
+ * Returns `true` if any of the `keys` changed between `prev` and `curr`.
+ *
+ * The definition of "changed" is any of removed, added, value changed.
+ *
+ * @template {Record<string, any>} T
+ * @param {T} prev
+ * @param {T} curr
+ * @param {(keyof T)[]} keys
+ */
+function keysChanged(prev, curr, keys) {
+  for (const key of keys) {
+    if (prev[key] !== curr[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
  * @template T
@@ -98,0 +155,0 @@ * @param {T | T[]} a

package.json

 {
   "name": "@rerun-io/web-viewer-react",
-  "version": "0.17.0",
+  "version": "0.18.0-rc.1",
   "description": "Embed the Rerun web viewer in your React app",
@@ -42,3 +42,3 @@ "licenses": [
   "dependencies": {
-    "@rerun-io/web-viewer": "0.17.0",
+    "@rerun-io/web-viewer": "0.18.0-rc.1",
     "@types/react": "^18.2.33",
@@ -45,0 +45,0 @@ "react": "^18.2.0"

README.md

@@ -38,3 +38,3 @@ # Rerun web viewer
 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.17.0/examples/dna.rrd>
+- A hosted `.rrd` file, such as <https://app.rerun.io/version/0.18.0-rc.1/examples/dna.rrd>
 - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API
@@ -41,0 +41,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9214

increased by19.48%

Lines of code

198

increased by34.69%

Dependency changes

• + Added@rerun-io/web-viewer@0.18.0-rc.1(transitive)

• - Removed@rerun-io/web-viewer@0.17.0(transitive)

• Updated@rerun-io/web-viewer@0.18.0-rc.1