ci: docker_tag=ext - Fix WASM compilation for web target

- Recompile sdk_client WASM with --target web for ES modules
- Update Dockerfile to build WASM in web target instead of bundler
- Modify index.html to initialize WASM before router
- Update service.ts and router.ts to use ES module imports
- Fix 'module is not defined' error in browser

Dockerfile

@@ -1,13 +1,46 @@
 # syntax=docker/dockerfile:1.4
+
+# Stage 1: Build WASM for web target
+FROM rust:1.82-alpine AS wasm-builder
+WORKDIR /build
+
+# Install dependencies for WASM compilation
+RUN apk update && apk add --no-cache git openssh-client curl nodejs npm build-base pkgconfig clang llvm musl-dev
+
+# Install wasm-bindgen-cli
+RUN cargo install wasm-bindgen-cli --version 0.2.103 --locked && rustup target add wasm32-unknown-unknown
+
+# Setup SSH for git clone
+RUN mkdir -p /root/.ssh && ssh-keyscan git.4nkweb.com >> /root/.ssh/known_hosts
+
+# Copy project files
+COPY . ihm_client/
+
+# Clone and build sdk_client for web target
+RUN --mount=type=ssh git clone -b dev ssh://git@git.4nkweb.com/4nk/sdk_client.git
+WORKDIR /build/sdk_client
+
+# Build WASM for web target (ES modules)
+RUN cargo build --target wasm32-unknown-unknown --profile dev && \
+    wasm-bindgen target/wasm32-unknown-unknown/debug/sdk_client.wasm \
+    --out-dir /build/ihm_client/pkg \
+    --typescript \
+    --target web \
+    --debug
+
+# Stage 2: Final application
 FROM node:20-alpine
 WORKDIR /app
 
 # Installation des dépendances nécessaires
 RUN apk update && apk add --no-cache git nginx
 
-# Copie du projet (incluant pkg pré-compilé)
+# Copy project files
 COPY . .
 
+# Copy the web-compiled WASM package
+COPY --from=wasm-builder /build/ihm_client/pkg ./pkg
+
 # Installation des dépendances Node.js
 RUN npm install
 

index.html

@@ -17,9 +17,23 @@
     </div>
     <!-- <script type="module" src="/src/index.ts"></script> -->
     <script type="module">
-        import { init } from '/src/router.ts';
+        // Initialize WASM first
+        import init, * as sdk from './pkg/sdk_client.js';
+
+        // Initialize the application
+        import { init as initRouter } from '/src/router.ts';
+
         (async () => {
-            await init();
+            try {
+                // Initialize WASM
+                await init();
+                console.log('WASM initialized successfully');
+
+                // Initialize the router
+                await initRouter();
+            } catch (error) {
+                console.error('Failed to initialize application:', error);
+            }
         })();
     </script>
 </body>

src/router.ts

@@ -10,7 +10,7 @@ import { prepareAndSendPairingTx } from './utils/sp-address.utils';
 import ModalService from './services/modal.service';
 import { MessageType } from './models/process.model';
 import { splitPrivateData, isValid32ByteHex } from './utils/service.utils';
-import { MerkleProofResult } from 'pkg/sdk_client';
+import { MerkleProofResult } from 'pkg/sdk_client.js';
 
 const routes: { [key: string]: string } = {
   home: '/src/pages/home/home.html',

src/services/service.ts

@@ -1,7 +1,7 @@
 import { INotification } from '~/models/notification.model';
 import { IProcess } from '~/models/process.model';
 import { initWebsocket, sendMessage } from '../websockets';
-import { ApiReturn, Device, HandshakeMessage, Member, MerkleProofResult, NewTxMessage, OutPointProcessMap, Process, ProcessState, RoleDefinition, SecretsStore, UserDiff } from '../../pkg/sdk_client';
+import { ApiReturn, Device, HandshakeMessage, Member, MerkleProofResult, NewTxMessage, OutPointProcessMap, Process, ProcessState, RoleDefinition, SecretsStore, UserDiff } from '../../pkg/sdk_client.js';
 import ModalService from './modal.service';
 import Database from './database.service';
 import { navigate } from '../router';
@@ -58,7 +58,8 @@ export default class Services {
 
   public async init(): Promise<void> {
     this.notifications = this.getNotifications();
-    this.sdkClient = await import('../../pkg/sdk_client');
+    // SDK is now imported as ES module at the top of the file
+    this.sdkClient = await import('../../pkg/sdk_client.js');
     this.sdkClient.setup();
     for (const wsurl of Object.values(BOOTSTRAPURL)) {
       this.updateRelay(wsurl, '');