feat: setup pong to be working as an external module and fix otlp ext…

…ernal env var

.gitignore

@@ -96,4 +96,5 @@ npm-debug.log
 yarn-error.log
 
 trace.log
-*.sarif
+*.sarif
+out/

apps/back/src/api/media/get_media.rs

@@ -56,7 +56,17 @@ pub async fn get_media(info: web::Query<QuerryMedia>, config: web::Data<Config>)
         Some(kind) => HttpResponse::Ok()
             .content_type(kind.mime_type().to_string())
             .body(file),
-        None => HttpResponse::Ok().body(file),
+        None => {
+            let ext = path.extension().unwrap().to_str().unwrap();
+            match ext {
+                "js" => {
+                    return HttpResponse::Ok()
+                        .content_type("application/javascript")
+                        .body(file);
+                }
+                _ => HttpResponse::Ok().body(file),
+            }
+        }
     }
 }
 

apps/front/components.d.ts

@@ -8,10 +8,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('primevue/avatar')['default']
+    Button: typeof import('primevue/button')['default']
     Card: typeof import('primevue/card')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
     Chip: typeof import('primevue/chip')['default']
     Panel: typeof import('primevue/panel')['default']
+    ProgressSpinner: typeof import('primevue/progressspinner')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Timeline: typeof import('primevue/timeline')['default']

apps/front/src/stores/wasm.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+
+export interface WasmState {
+  wasmLoading: boolean;
+  loadingError?: string;
+  wasm?: unknown;
+  moduleNames?: string;
+}
+
+const getUrl = (moduleName: string, extension: string) => {
+  const url = new URL('/api/media', import.meta.env.VITE_API_URL);
+  url.searchParams.append(
+    'path',
+    `${moduleName}/${moduleName}${extension === 'wasm' ? '_bg' : ''}.${extension}`,
+  );
+  return url.toString();
+};
+
+export const useWasmStore = defineStore({
+  id: 'wasm',
+  state: (): WasmState => ({
+    wasmLoading: false,
+  }),
+  actions: {
+    fetchWasm(moduleName: string) {
+      if (this.wasmLoading) return new Promise<void>((resolve) => resolve());
+      this.wasmLoading = true;
+      this.moduleNames = moduleName;
+      const jsModuleUrl = getUrl(moduleName, 'js');
+
+      return import(/* @vite-ignore */ jsModuleUrl)
+        .then((wasm) => {
+          this.wasm = wasm;
+        })
+        .catch((err) => {
+          console.error(err);
+          this.loadingError = 'Failed to load wasm';
+          this.moduleNames = '';
+        })
+        .finally(() => {
+          this.wasmLoading = false;
+        });
+    },
+    runWasm() {
+      if (this.wasmLoading) return new Promise<void>((resolve) => resolve());
+      this.wasmLoading = true;
+      const wasmModuleUrl = getUrl(`${this.moduleNames}`, 'wasm');
+      this.wasm.default({ module_or_path: wasmModuleUrl });
+      this.wasmLoading = false;
+    },
+  },
+});

apps/front/src/views/PongView.vue

@@ -1,7 +1,25 @@
 <script lang="ts" setup>
+import { useWasmStore } from '../stores/wasm';
+
 // Import from the backend the pong wasm game
+
+
+const wasmStore = useWasmStore();
+
+const loadPong = async () => {
+  if (!wasmStore.wasmLoading && wasmStore.moduleNames !== 'pong') {
+    await wasmStore.fetchWasm('pong');
+    wasmStore.runWasm();
+  }
+};
 </script>
 
 <template>
+  <div class="min-w-full flex justify-center">
+    <div>
+      <Button v-if="wasmStore.moduleNames !== 'pong'" @click="loadPong" label="Load Pong" />
+      <ProgressSpinner v-if="wasmStore.wasmLoading" />
+    </div>
+  </div>
   <canvas id="pong-bevy" width="800" height="600"></canvas>
 </template>

apps/pong/src/main.rs

@@ -38,6 +38,7 @@ fn main() {
         .add_plugins(DefaultPlugins.set(WindowPlugin {
             primary_window: Some(Window {
                 canvas: Some("#pong-bevy".into()),
+                fit_canvas_to_parent: true,
                 ..default()
             }),
             ..default()

build/back/Containerfile

@@ -48,8 +48,9 @@ RUN strip dist/target/release/server && \
 FROM build_base AS build_wasm
 
 RUN touch apps/pong/src/main.rs
-RUN cargo build --release --bin pong --target wasm32-unknown-unknown
-RUN wasm-opt -O -ol 100 -s 100 dist/target/wasm32-unknown-unknown/release/pong.wasm -o dist/target/wasm32-unknown-unknown/release/pong-opt.wasm
+RUN cargo build --release --bin pong --target wasm32-unknown-unknown && \
+  wasm-bindgen --target web --out-dir ./out/ --out-name 'pong' ./dist/target/wasm32-unknown-unknown/release/pong.wasm && \
+  wasm-opt -O -ol 100 -s 100 ./out/pong_bg.wasm -o ./out/pong_bg.wasm
 
 FROM gcr.io/distroless/cc-debian12
 #FROM registry.hub.docker.com/library/debian:bullseye-slim
@@ -61,7 +62,9 @@ COPY --from=build_back /app/dist/target/release/swagger .
 
 COPY ./folio_content/ .
 
-COPY --from=build_wasm /app/dist/target/wasm32-unknown-unknown/release/pong-opt.wasm ./media/pong.wasm
+RUN mkdir -p media/pong/
+
+COPY --from=build_wasm /app/out/ ./media/pong/
 
 EXPOSE 5437
 

folio_content/media/.gitignore

@@ -0,0 +1 @@
+pong

libs/back/tool_tracing/src/init.rs

@@ -56,15 +56,15 @@ pub fn init_tracing(tracing_config: Vec<Tracing>, name: String) {
                 };
                 let endpoint_from_env = env::var(format!(
                     "{}_OTEL_EXPORTER_OTLP_ENDPOINT",
-                    name.to_uppercase()
+                    config.name.to_uppercase()
                 ))
                 .unwrap_or(endpoint);
                 let pod_name =
                     std::env::var("POD_NAME").unwrap_or_else(|_| "not_a_pod".to_string());
                 println!(
                     "Connecting to endpoint: {} with ENV {}",
                     endpoint_from_env.clone(),
-                    format!("{}_OTEL_EXPORTER_OTLP_ENDPOINT", name.to_uppercase())
+                    format!("{}_OTEL_EXPORTER_OTLP_ENDPOINT", config.name.to_uppercase())
                 );
                 let telemetry = opentelemetry_otlp::new_pipeline()
                     .tracing()

package.json

@@ -11,7 +11,7 @@
     "vue:test": "vitest run --coverage",
     "rust:api-lint": "spectral lint -f sarif -o ./spectral-report.sarif ./swagger.json",
     "rust:pong": "cargo run --bin pong --target wasm32-unknown-unknown",
-    "rust:pong-build": "cargo build --release --bin pong --target wasm32-unknown-unknown && wasm-bindgen --target web --out-dir ./out/ --out-name 'pong' ./dist/target/wasm32-unknown-unknown/release/pong.wasm "
+    "rust:pong-build": "cargo build --release --bin pong --target wasm32-unknown-unknown && wasm-bindgen --target web --out-dir ./folio_content/media/pong --out-name 'pong' ./dist/target/wasm32-unknown-unknown/release/pong.wasm "
   },
   "private": true,
   "dependencies": {