feat: enhance wokwi-client-js with browser bundling support

Author: JakubAndrysek

packages/wokwi-client-js/package.json

@@ -10,6 +10,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./browser": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/wokwi-client-js.browser.js"
+    },
     "./transport/MessagePortTransport.js": {
       "types": "./dist/transport/MessagePortTransport.d.ts",
       "import": "./dist/transport/MessagePortTransport.js"
@@ -24,7 +28,8 @@
   ],
   "scripts": {
     "prebuild": "pnpm run clean",
-    "build": "tsc",
+    "build": "tsc && pnpm run build:browser",
+    "build:browser": "node tools/bundle-browser.js",
     "clean": "rimraf dist",
     "lint": "eslint src/**/*.ts",
     "lint:fix": "eslint src/**/*.ts --fix"
@@ -49,6 +54,7 @@
   },
   "devDependencies": {
     "@types/ws": "^8.18.1",
+    "esbuild": "^0.25.2",
     "rimraf": "^5.0.0",
     "typescript": "^5.2.2"
   }

packages/wokwi-client-js/tools/bundle-browser.js

@@ -0,0 +1,35 @@
+import { build } from 'esbuild';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const rootDir = join(__dirname, '..');
+
+const options = {
+  entryPoints: [join(rootDir, 'src/index.ts')],
+  outfile: join(rootDir, 'dist/wokwi-client-js.browser.js'),
+  bundle: true,
+  platform: 'browser',
+  format: 'esm',
+  target: 'es2020',
+  // Explicitly mark Node.js-only packages as external
+  external: ['ws', 'stream', 'buffer'],
+  banner: {
+    js: `// Browser bundle of wokwi-client-js
+// Note: serialMonitorWritable() requires Node.js and won't work in browsers
+// Use MessagePortTransport for browser communication with Wokwi Simulator
+`,
+  },
+};
+
+// Build the browser bundle
+build(options)
+  .then(() => {
+    console.log('✓ Browser bundle created: dist/wokwi-client-js.browser.js');
+  })
+  .catch((error) => {
+    console.error('✗ Browser bundle failed:', error);
+    process.exit(1);
+  });
+