@rerun-io/web-viewer 0.0.0

package/README.md

@@ -0,0 +1,28 @@
+# Rerun Web Viewer
+
+Embed the Rerun web viewer within your app.
+
+<p align="center">
+  <img width="800" alt="Rerun Viewer" src="https://github.com/rerun-io/rerun/assets/2624717/c4900538-fc3a-43b8-841a-8d226e7b5a2e">
+</p>
+
+## Install
+
+```sh
+npm i @rerun-io/web-viewer
+```
+
+## Example
+
+```js
+import { WebViewer } from "@rerun-io/web-viewer";
+
+const URL = "...";
+const parentElement = document.body;
+
+const viewer = new WebViewer();
+await viewer.start(URL, parentElement);
+
+// Once you're done with it, call `stop`:
+viewer.stop();
+```

package/index.d.ts

@@ -0,0 +1,10 @@
+declare module '@rerun-io/web-viewer' {
+	export class WebViewer {
+		
+		start(url: string, parent?: HTMLElement | undefined): Promise<this>;
+		stop(): void;
+		#private;
+	}
+}
+
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1,14 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [
+		"WebViewer"
+	],
+	"sources": [
+		"index.js"
+	],
+	"sourcesContent": [
+		null
+	],
+	"mappings": ";cAoBaA,SAASA"
+}

package/index.js

@@ -0,0 +1,66 @@
+/** @type {(typeof import("./re_viewer").WebHandle) | null} */
+let WebHandle = null;
+/** @returns {Promise<(typeof import("./re_viewer").WebHandle)>} */
+async function load() {
+  if (WebHandle) {
+    return WebHandle;
+  }
+  WebHandle = (await import("./re_viewer")).WebHandle;
+  return WebHandle;
+}
+
+/** @returns {string} */
+function randomId() {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes)
+    .map((byte) => byte.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+export class WebViewer {
+  /** @type {(import("./re_viewer").WebHandle) | null} */
+  #handle = null;
+
+  /** @type {HTMLCanvasElement | null} */
+  #canvas = null;
+
+  /**
+   * @param {string} url
+   * @param {HTMLElement} [parent]
+   * @returns {Promise<this>}
+   */
+  async start(url, parent = document.body) {
+    const canvas = document.createElement("canvas");
+    canvas.id = randomId();
+
+    let WebHandle_class = await load();
+    const handle = new WebHandle_class();
+    await handle.start(canvas.id, url);
+    if (handle.has_panicked()) {
+      throw new Error(`Web viewer crashed: ${handle.panic_message()}`);
+    }
+
+    parent.append(canvas);
+    this.#canvas = canvas;
+    this.#handle = handle;
+
+    return this;
+  }
+
+  stop() {
+    const canvas = this.#canvas;
+    this.#canvas = null;
+    if (canvas) {
+      canvas.remove();
+    }
+
+    const handle = this.#handle;
+    this.#handle = null;
+    if (handle) {
+      handle.destroy();
+      handle.free();
+    }
+  }
+}
+

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@rerun-io/web-viewer",
+  "version": "0.0.0",
+  "description": "Embed the Rerun web viewer in your app",
+  "private": false,
+  "scripts": {
+    "build:wasm": "cargo run -p re_build_web_viewer -- --release --module -o rerun_js/web-viewer",
+    "build:types": "dts-buddy",
+    "build": "node build:wasm && build:types",
+    "publish": "npm publish --access public",
+    "prepublishOnly": "dts-buddy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rerun-io/rerun.git"
+  },
+  "author": "rerun-io",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rerun-io/rerun/issues"
+  },
+  "homepage": "https://rerun.io",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "files": [
+    "package.json",
+    "tsconfig.json",
+    "index.d.ts",
+    "index.d.ts.map",
+    "index.js",
+    "re_viewer.js",
+    "re_viewer_bg.js",
+    "re_viewer_bg.wasm"
+  ],
+  "devDependencies": {
+    "dts-buddy": "^0.3.0"
+  }
+}
+

package/re_viewer.js

@@ -0,0 +1,4 @@
+import * as wasm from "./re_viewer_bg.wasm";
+import { __wbg_set_wasm } from "./re_viewer_bg.js";
+__wbg_set_wasm(wasm);
+export * from "./re_viewer_bg.js";