Put web viewer on npm

.github/workflows/on_pull_request.yml

@@ -61,6 +61,14 @@ jobs:
       RRD_ARTIFACT_NAME: linux-rrd-fast
     secrets: inherit
 
+  build-js:
+    name: "Build JS"
+    if: github.event.pull_request.head.repo.owner.login == 'rerun-io'
+    uses: ./.github/workflows/reusable_build_npm.yml
+    with:
+      CONCURRENCY: pr-${{ github.event.pull_request.number }}
+    secrets: inherit
+
   build-rerun_c-and-upload:
     name: "Build & Upload rerun_c (Linux x64)"
     if: github.event.pull_request.head.repo.owner.login == 'rerun-io'

.github/workflows/release.yml

@@ -74,6 +74,10 @@ jobs:
           fetch-depth: 0
           token: ${{ secrets.RERUN_BOT_TOKEN }}
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
       - name: Set up Python
         uses: actions/setup-python@v2
         with:
@@ -130,6 +134,10 @@ jobs:
           echo "current=$current"   >> "$GITHUB_OUTPUT"
           echo "final=$final"       >> "$GITHUB_OUTPUT"
 
+      - name: Update NPM versions
+        run: |
+          node rerun_js/web-viewer/scripts/version.mjs ${{ steps.versioning.outputs.current }}
+
       - name: "Taplo fmt"
         run: taplo fmt
 
@@ -248,6 +256,15 @@ jobs:
       concurrency: ${{ github.ref_name }}
     secrets: inherit
 
+  publish-npm:
+    name: "Publish to NPM"
+    needs: [version]
+    uses: ./.github/workflows/reusable_publish_npm.yml
+    with:
+      release-commit: ${{ needs.version.outputs.release-commit }}
+      concurrency: ${{ github.ref_name }}
+    secrets: inherit
+
   update-latest-branch:
     name: "Update Latest Branch"
     if: inputs.release-type == 'final'
@@ -259,6 +276,7 @@ jobs:
         publish-web,
         publish-rerun_c,
         publish-rerun-cli,
+        publish-npm,
       ]
     runs-on: ubuntu-latest
     steps:
@@ -284,6 +302,7 @@ jobs:
         publish-web,
         publish-rerun_c,
         publish-rerun-cli,
+        publish-npm,
       ]
     runs-on: ubuntu-latest
     steps:
@@ -292,6 +311,15 @@ jobs:
         with:
           token: ${{ secrets.RERUN_BOT_TOKEN }}
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Set up Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.11
+
       - name: Install dependencies
         run: |
           python3 -m pip install -r scripts/ci/requirements-crates.txt
@@ -307,6 +335,10 @@ jobs:
           python3 scripts/ci/crates.py version --bump auto
           echo "version=$(python3 scripts/ci/crates.py get-version)" >> "$GITHUB_OUTPUT"
 
+      - name: Update NPM versions
+        run: |
+          node rerun_js/web-viewer/scripts/version.mjs ${{ steps.update-version.outputs.version }}
+
       - name: "Taplo fmt"
         run: taplo fmt
 
@@ -327,6 +359,7 @@ jobs:
         publish-web,
         publish-rerun_c,
         publish-rerun-cli,
+        publish-npm,
       ]
     runs-on: ubuntu-latest
     steps:
@@ -355,11 +388,13 @@ jobs:
           fi
           wheels_link="https://pypi.org/project/rerun-sdk/${{ needs.version.outputs.current }}"
           crates_link="https://crates.io/crates/rerun/${{ needs.version.outputs.current }}"
+          npm_link="https://www.npmjs.com/package/@rerun-io/web-viewer/v/${{ needs.version.outputs.current }}"
           rs_docs_link="https://docs.rs/rerun/${{ needs.version.outputs.current }}"
           cpp_sdk_zip_link="https://build.rerun.io/commit/$short_commit_hash/rerun_cpp_sdk.zip"
 
           pip_install="pip install rerun-sdk==${{ needs.version.outputs.current }}"
           cargo_install="cargo install rerun-cli@${{ needs.version.outputs.current }}"
+          npm_install="npm install @rerun-io/web-viewer@${{ needs.version.outputs.current }}"
 
           cat <<EOF > comment-body.txt
           Version ${{ needs.version.outputs.current }} published successfully.
@@ -369,6 +404,7 @@ jobs:
           | [web app]($web_app_link)          |                |
           | [wheels]($wheels_link)            | $pip_install   |
           | [crates]($crates_link)            | $cargo_install |
+          | [npm]($npm_link)                  | $npm_install   |
           | [docs]($rerun_io_docs_link)       |                |
           | [py docs]($py_docs_link)          |                |
           | [rs docs]($rs_docs_link)          |                |

.github/workflows/reusable_build_npm.yml

@@ -0,0 +1,60 @@
+name: Reusable Build Web
+
+on:
+  workflow_call:
+    inputs:
+      CONCURRENCY:
+        required: true
+        type: string
+
+concurrency:
+  group: ${{ inputs.CONCURRENCY }}-build-js
+  cancel-in-progress: true
+
+env:
+  # web_sys_unstable_apis is required to enable the web_sys clipboard API which egui_web uses
+  # https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Clipboard.html
+  # https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
+  RUSTFLAGS: --cfg=web_sys_unstable_apis --deny warnings
+
+  # See https://github.com/ericseppanen/cargo-cranky/issues/8
+  RUSTDOCFLAGS: --deny warnings --deny rustdoc::missing_crate_level_docs
+
+jobs:
+  build:
+    name: Build
+    permissions:
+      contents: "read"
+      id-token: "write"
+
+    runs-on: ubuntu-latest-16-cores
+
+    container:
+      image: rerunio/ci_docker:0.10.0
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.ref || '' }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Set up Rust
+        uses: ./.github/actions/setup-rust
+        with:
+          cache_key: "build-web"
+          # Cache will be produced by `reusable_checks/rs-check-wasm`
+          save_cache: false
+          workload_identity_provider: ${{ secrets.GOOGLE_WORKLOAD_IDENTITY_PROVIDER }}
+          service_account: ${{ secrets.GOOGLE_SERVICE_ACCOUNT }}
+
+      - name: Install dependencies
+        run: |
+          node rerun_js/web-viewer/scripts/install.mjs
+
+      - name: Build package
+        run: |
+          node rerun_js/web-viewer/scripts/build.mjs
+

.github/workflows/reusable_publish_npm.yml

@@ -0,0 +1,72 @@
+name: Build and publish NPM
+
+on:
+  workflow_call:
+    inputs:
+      concurrency:
+        type: string
+        required: true
+      release-commit:
+        description: "Commit to release"
+        type: string
+        required: true
+
+concurrency:
+  group: ${{ inputs.concurrency }}-publish-npm
+  cancel-in-progress: true
+
+permissions:
+  contents: "write"
+  id-token: "write"
+
+jobs:
+  get-commit-sha:
+    name: Get Commit Sha
+    runs-on: ubuntu-latest
+    outputs:
+      short-sha: ${{ steps.get-short-sha.outputs.short-sha }}
+      full-sha: ${{ steps.get-full-sha.outputs.full-sha }}
+    steps:
+      - name: "Set short-sha"
+        id: get-short-sha
+        run: echo "short-sha=$(echo ${{ inputs.release-commit }} | cut -c1-7)" >> $GITHUB_OUTPUT
+
+      - name: "Set full-sha"
+        id: get-full-sha
+        run: echo "full-sha=${{ inputs.release-commit }}" >> $GITHUB_OUTPUT
+
+  build:
+    runs-on: ubuntu-latest-16-cores
+    needs: [get-commit-sha]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.release-commit }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Set up Rust
+        uses: ./.github/actions/setup-rust
+        with:
+          cache_key: "build-web"
+          save_cache: false
+          workload_identity_provider: ${{ secrets.GOOGLE_WORKLOAD_IDENTITY_PROVIDER }}
+          service_account: ${{ secrets.GOOGLE_SERVICE_ACCOUNT }}
+
+      - name: Install dependencies
+        run: |
+          node rerun_js/web-viewer/scripts/install.mjs
+
+      - name: Build package
+        run: |
+          node rerun_js/web-viewer/scripts/build.mjs
+
+      - name: Publish package
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          node rerun_js/web-viewer/scripts/publish.mjs
+

crates/re_build_web_viewer/src/lib.rs

@@ -3,19 +3,67 @@
 //! Build the Rerun web-viewer .wasm and generate the .js bindings for it.
 
 use anyhow::Context as _;
-use cargo_metadata::camino::Utf8PathBuf;
+use cargo_metadata::camino::{Utf8Path, Utf8PathBuf};
+
+pub fn workspace_root() -> Utf8PathBuf {
+    cargo_metadata::MetadataCommand::new()
+        .manifest_path(concat!(env!("CARGO_MANIFEST_DIR"), "/Cargo.toml"))
+        .features(cargo_metadata::CargoOpt::NoDefaultFeatures)
+        .no_deps()
+        .exec()
+        .unwrap()
+        .workspace_root
+}
+
+pub fn default_build_dir() -> Utf8PathBuf {
+    workspace_root().join("web_viewer")
+}
 
 fn target_directory() -> Utf8PathBuf {
     let metadata = cargo_metadata::MetadataCommand::new()
-        .manifest_path("./Cargo.toml")
+        .manifest_path(concat!(env!("CARGO_MANIFEST_DIR"), "/Cargo.toml"))
         .features(cargo_metadata::CargoOpt::NoDefaultFeatures)
         .exec()
         .unwrap();
     metadata.target_directory
 }
 
-/// Build `re_viewer` as Wasm, generate .js bindings for it, and place it all into the `./web_viewer` folder.
-pub fn build(release: bool, webgpu: bool) -> anyhow::Result<()> {
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum Profile {
+    Release,
+    Debug,
+}
+
+impl Profile {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            Profile::Release => "release",
+            Profile::Debug => "debug",
+        }
+    }
+}
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum Backend {
+    WebGL,
+    WebGPU,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum Target {
+    Browser,
+    Module,
+}
+
+/// Build `re_viewer` as Wasm, generate .js bindings for it, and place it all into the `build_dir` folder.
+pub fn build(
+    profile: Profile,
+    backend: Backend,
+    target: Target,
+    build_dir: &Utf8Path,
+) -> anyhow::Result<()> {
+    std::env::set_current_dir(workspace_root())?;
+
     eprintln!("Building web viewer wasm…");
     eprintln!("We assume you've already run ./scripts/setup_web.sh");
 
@@ -30,8 +78,6 @@ pub fn build(release: bool, webgpu: bool) -> anyhow::Result<()> {
     let root_dir = target_wasm_dir.parent().unwrap();
 
     // Where we will place the final .wasm and .js artifacts.
-    let build_dir = root_dir.join("web_viewer");
-
     assert!(
         build_dir.exists(),
         "Failed to find dir {build_dir}. CWD: {:?}, CARGO_MANIFEST_DIR: {:?}",
@@ -63,12 +109,11 @@ pub fn build(release: bool, webgpu: bool) -> anyhow::Result<()> {
         target_wasm_dir.as_str(),
         "--no-default-features",
     ]);
-    if webgpu {
-        cmd.arg("--features=analytics");
-    } else {
-        cmd.arg("--features=analytics,webgl");
-    }
-    if release {
+    match backend {
+        Backend::WebGL => cmd.arg("--features=analytics,webgl"),
+        Backend::WebGPU => cmd.arg("--features=analytics"),
+    };
+    if profile == Profile::Release {
         cmd.arg("--release");
     }
 
@@ -95,21 +140,22 @@ pub fn build(release: bool, webgpu: bool) -> anyhow::Result<()> {
     // --------------------------------------------------------------------------------
     eprintln!("Generating JS bindings for wasm…");
 
-    let build = if release { "release" } else { "debug" };
+    let build = profile.as_str();
 
     let target_wasm_path = target_wasm_dir
         .join("wasm32-unknown-unknown")
         .join(build)
         .join(format!("{crate_name}.wasm"));
 
-    // wasm-bindgen --target web target_wasm_path --no-typescript --out-name target_name --out-dir build_dir
-    if let Err(err) = wasm_bindgen_cli_support::Bindgen::new()
-        .no_modules(true)?
+    let mut bindgen_cmd = wasm_bindgen_cli_support::Bindgen::new();
+    bindgen_cmd
         .input_path(target_wasm_path.as_str())
-        .typescript(false)
-        .out_name(crate_name)
-        .generate(build_dir.as_str())
-    {
+        .out_name(crate_name);
+    match target {
+        Target::Browser => bindgen_cmd.no_modules(true)?.typescript(false),
+        Target::Module => bindgen_cmd.no_modules(false)?.typescript(true),
+    };
+    if let Err(err) = bindgen_cmd.generate(build_dir.as_str()) {
         if err
             .to_string()
             .starts_with("cannot import from modules (`env`")
@@ -127,7 +173,7 @@ pub fn build(release: bool, webgpu: bool) -> anyhow::Result<()> {
 
     // --------------------------------------------------------------------------------
 
-    if release {
+    if profile == Profile::Release {
         eprintln!("Optimizing wasm with wasm-opt…");
 
         // to get wasm-opt:  apt/brew/dnf install binaryen