Support callbacks in React (#10518)

Author: jprochazk

crates/viewer/re_viewer/src/event.rs

@@ -6,6 +6,7 @@
 // NOTE: Any changes to the type definitions in this file must be replicated in:
 // - rerun_js/web-viewer/index.ts (ViewerEvent)
 // - rerun_py/rerun_sdk/rerun/event.py (ViewerEvent)
+// Important: The event names defined here are transformed to `snake_case` on the JS side.
 
 use std::rc::Rc;
 

rerun_js/web-viewer-react/index.js

@@ -15,6 +15,7 @@ import * as rerun from "@rerun-io/web-viewer";
  * @typedef {(
  *   Omit<import("@rerun-io/web-viewer").WebViewerOptions, "allow_fullscreen" | "enable_history">
  *   & BaseProps
+ *   & import("./types.d.ts").ViewerEvents
  * )} Props
  */
 
@@ -43,7 +44,7 @@ export default class WebViewer extends React.Component {
     startViewer(
       this.#handle,
       /** @type {HTMLDivElement} */ (this.#parent.current),
-      this.props,
+      () => this.props,
     );
   }
 
@@ -65,7 +66,7 @@ export default class WebViewer extends React.Component {
       startViewer(
         this.#handle,
         /** @type {HTMLDivElement} */ (this.#parent.current),
-        this.props,
+        () => this.props,
       );
     } else {
       // We only need to diff the recordings.
@@ -92,12 +93,33 @@ export default class WebViewer extends React.Component {
   }
 }
 
+/** @param {string} str */
+function pascalToSnake(str) {
+  let out = "";
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+
+    // A–Z ?
+    if (code >= 65 && code <= 90) {
+      // if not first char, prepend underscore
+      if (i > 0) out += "_";
+      // convert to lowercase by adding 32
+      out += String.fromCharCode(code + 32);
+    } else {
+      // everything else (a–z, 0–9, etc.) goes straight through
+      out += String.fromCharCode(code);
+    }
+  }
+  return out;
+}
+
 /**
  * @param {rerun.WebViewer} handle
  * @param {HTMLElement} parent
- * @param {Props} props
+ * @param {() => Props} getProps
  */
-function startViewer(handle, parent, props) {
+function startViewer(handle, parent, getProps) {
+  const props = getProps();
   handle.start(toArray(props.rrd), parent, {
     manifest_url: props.manifest_url,
     render_backend: props.render_backend,
@@ -108,6 +130,16 @@ function startViewer(handle, parent, props) {
     width: "100%",
     height: "100%",
   });
+
+  for (const key of Object.keys(props)) {
+    if (key.startsWith("on")) {
+      /** @type {any} */
+      const event = pascalToSnake(key.slice(2));
+      /** @type {any} */
+      const callback = /** @type {any} */ (getProps())[key];
+      handle.on(event, callback);
+    }
+  }
 }
 
 /**

rerun_js/web-viewer-react/package.json

@@ -37,6 +37,7 @@
     "index.d.ts",
     "index.d.ts.map",
     "index.js",
+    "types.d.ts",
     "package.json",
     "tsconfig.json"
   ],
@@ -51,4 +52,4 @@
     "typedoc-github-theme": "^0.3.0",
     "typescript": "^5.2.2"
   }
-}
+}

rerun_js/web-viewer-react/types.d.ts

@@ -0,0 +1,21 @@
+
+import type { WebViewerEvents } from "@rerun-io/web-viewer";
+
+type PascalCase<S extends string> = S extends `${infer P1}_${infer P2}`
+  ? `${Capitalize<P1>}${PascalCase<P2>}`
+  : Capitalize<S>;
+
+type WithValue = {
+  [K in keyof WebViewerEvents as WebViewerEvents[K] extends void ? never : `on${PascalCase<K>}`]?: (event: WebViewerEvents[K]) => void;
+
+}
+
+type WithoutValue = {
+  [K in keyof WebViewerEvents as WebViewerEvents[K] extends void ? `on${PascalCase<K>}` : never]?: () => void;
+
+}
+
+export type ViewerEvents = WithValue & WithoutValue;
+
+
+

rerun_js/web-viewer/index.ts

@@ -126,6 +126,8 @@ export interface AppOptions extends WebViewerOptions {
 }
 
 // Types are based on `crates/viewer/re_viewer/src/event.rs`.
+// Important: The event names defined here are `snake_case` versions
+// of their `PascalCase` counterparts on the Rust side.
 /** An event produced in the Viewer. */
 export type ViewerEvent =
   | PlayEvent
@@ -351,7 +353,7 @@ export class WebViewer {
       // for notebooks/gradio, we can avoid a whole layer
       // of serde by sending over the raw json directly,
       // which will be deserialized in Python instead
-      this.#_dispatch_raw_event(event_json);
+      this.#dispatch_raw_event(event_json);
 
       // for JS users, we dispatch the parsed event
       let event: ViewerEvent = JSON.parse(event_json);
@@ -384,10 +386,9 @@ export class WebViewer {
     return;
   }
 
-  #_raw_events: Set<(event_json: string) => void> = new Set();
-
-  #_dispatch_raw_event(event_json: string) {
-    for (const callback of this.#_raw_events) {
+  #raw_events: Set<(event_json: string) => void> = new Set();
+  #dispatch_raw_event(event_json: string) {
+    for (const callback of this.#raw_events) {
       callback(event_json);
     }
   }
@@ -399,8 +400,8 @@ export class WebViewer {
   //
   // Do not change this without searching for grepping for usage!
   private _on_raw_event(callback: (event: string) => void): () => void {
-    this.#_raw_events.add(callback);
-    return () => this.#_raw_events.delete(callback);
+    this.#raw_events.add(callback);
+    return () => this.#raw_events.delete(callback);
   }
 
   #event_map: Map<