build configurations

Cargo.toml

@@ -6,4 +6,5 @@ members = [
     "gaia-tmtc",
     "gaia-ccsds-c2a",
     "tmtc-c2a",
+    "tmtc-c2a/devtools_frontend/crates/wasm-interpolate"
 ]

tmtc-c2a/build.rs

@@ -1,6 +1,26 @@
 use std::process::Command;
 use std::{env, path::PathBuf};
 
+fn wasm_packages_root() -> PathBuf {
+    let out_dir = PathBuf::from(env::var("OUT_DIR").unwrap());
+    let wasm_outdir = out_dir.join("wasm_packages");
+    wasm_outdir
+}
+
+fn wasm_pack(name: &str) {
+    let pkg_outdir = wasm_packages_root().join(name).join("pkg");
+    let status = Command::new("yarn")
+        .current_dir("devtools_frontend")
+        .arg("run")
+        .arg("crate")
+        .arg(name)
+        .arg("--out-dir")
+        .arg(&pkg_outdir)
+        .status()
+        .expect("failed to build frontend");
+    assert!(status.success());
+}
+
 fn main() {
     let out_dir = PathBuf::from(env::var("OUT_DIR").unwrap());
     tonic_build::configure()
@@ -15,8 +35,12 @@ fn main() {
             .status()
             .expect("failed to build frontend");
         assert!(status.success());
+
+        wasm_pack("wasm-interpolate");
         let devtools_out_dir = out_dir.join("devtools_dist");
         let status = Command::new("yarn")
+            // vite.config.ts にwasmのビルド場所を教えるために環境変数を渡す
+            .envs([("DEVTOOLS_CRATE_ROOT", wasm_packages_root())])
             .current_dir("devtools_frontend")
             .arg("run")
             .arg("build:vite")

tmtc-c2a/devtools_frontend/src/components/TelemetryView.tsx

@@ -7,7 +7,7 @@ import { useParams } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { TelemetrySchema } from "../proto/tmtc_generic_c2a";
 
-import initInterpolate, * as interpolate from "../../crates/wasm-interpolate/pkg";
+import initInterpolate, * as interpolate from "@crate/wasm-interpolate/pkg";
 
 initInterpolate();
 

tmtc-c2a/devtools_frontend/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
     "baseUrl": "./",
+    "paths": {
+      "@crate/*": ["crates/*"]
+    },
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
     "types": ["vite/client"],

tmtc-c2a/devtools_frontend/vite.config.ts

@@ -2,8 +2,19 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import pluginRewriteAll from "vite-plugin-rewrite-all";
 
+console.log("crate root", process.env.DEVTOOLS_CRATE_ROOT);
 export default defineConfig({
-  resolve: {},
+  resolve: {
+    alias: [
+      {
+        find: "@crate/",
+        // wasmpackでrustソースから作られたpkgの場所を指定する
+        // cargo build の際はbuild.rsによってDEVTOOLS_CRATE_ROOTが指定される
+        // yarn dev している場合はrustソースのディレクトリに直接pkgを配置し、DEVTOOLS_CRATE_ROOTは指定されない
+        replacement: (process.env.DEVTOOLS_CRATE_ROOT ?? "/crates") + "/",
+      },
+    ],
+  },
   base: "/devtools/",
   plugins: [react(), pluginRewriteAll()],
   server: {