@rerun-io/web-viewer-react 0.24.0-alpha.4 → 0.24.0-alpha.6

package/README.md

@@ -16,8 +16,8 @@ If you'd like to use a framework-agnostic package instead, see <https://www.npmj
 
 ## Install
 
-```
-$ npm i @rerun-io/web-viewer-react
+```sh
+npm i @rerun-io/web-viewer-react
 ```
 
 ℹ️ Note:
@@ -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.24.0-alpha.4/examples/dna.rrd>
+- A hosted `.rrd` file, such as <https://app.rerun.io/version/0.24.0-alpha.6/examples/dna.rrd>
 - A gRPC 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

@@ -1,5 +1,6 @@
 declare module '@rerun-io/web-viewer-react' {
 	import type { default as React } from 'react';
+	import type { WebViewerEvents } from '@rerun-io/web-viewer';
 	/**
 	 * Wrapper for `WebViewer` from the `@rerun-io/web-viewer`.
 	 *
@@ -40,7 +41,22 @@ declare module '@rerun-io/web-viewer-react' {
 		 */
 		height?: string | undefined;
 	};
-	export type Props = (Omit<import("@rerun-io/web-viewer").WebViewerOptions, "allow_fullscreen" | "enable_history"> & BaseProps);
+	export type Props = (Omit<import("@rerun-io/web-viewer").WebViewerOptions, "allow_fullscreen" | "enable_history"> & BaseProps & ViewerEvents);
+  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;
+
+  }
+
+  type ViewerEvents = WithValue & WithoutValue;
 }
 
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1,8 +1,14 @@
 {
 	"version": 3,
 	"file": "index.d.ts",
-	"names": [],
-	"sources": [],
-	"sourcesContent": [],
-	"mappings": ""
+	"names": [
+		"ViewerEvents"
+	],
+	"sources": [
+		"types.d.ts"
+	],
+	"sourcesContent": [
+		null
+	],
+	"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiBYA,YAAYA"
 }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rerun-io/web-viewer-react",
-  "version": "0.24.0-alpha.4",
+  "version": "0.24.0-alpha.6",
   "description": "Embed the Rerun web viewer in your React app",
   "licenses": [
     {
@@ -13,7 +13,8 @@
   "scripts": {
     "build:types": "tsc --noEmit && dts-buddy",
     "build": "npm run build:types",
-    "pack": "yarn pack --filename web-viewer-react.tar.gz"
+    "pack": "yarn pack --filename web-viewer-react.tar.gz",
+    "docs": "typedoc"
   },
   "repository": {
     "type": "git",
@@ -36,16 +37,19 @@
     "index.d.ts",
     "index.d.ts.map",
     "index.js",
+    "types.d.ts",
     "package.json",
     "tsconfig.json"
   ],
   "dependencies": {
-    "@rerun-io/web-viewer": "0.24.0-alpha.4",
+    "@rerun-io/web-viewer": "0.24.0-alpha.6",
     "@types/react": "^18.2.33",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "dts-buddy": "^0.3.0",
+    "typedoc": "^0.28.6",
+    "typedoc-github-theme": "^0.3.0",
     "typescript": "^5.2.2"
   }
 }

package/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;
+
+
+