TS version of the libp2p browser-to-browser proof of concept

packages/brow-2-brow/README.md

@@ -0,0 +1,5 @@
+# Browser-to-browser connectivity demo
+
+A work in progress, for sure.
+
+Derived from https://github.com/libp2p/libp2p-webrtc-guide

packages/brow-2-brow/esbuild.js

@@ -0,0 +1,13 @@
+import { build } from 'esbuild';
+
+build({
+  entryPoints: ['./src/index.js'],
+  outfile: './dist/index.js',
+  sourcemap: 'inline',
+  minify: false,
+  bundle: true,
+  define: {
+    'process.env.NODE_DEBUG': 'false',
+    global: 'globalThis',
+  },
+});

packages/brow-2-brow/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@ocap/brow-2-brow",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Browser-to-browser libp2p communications proof of concept",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/ocap-kernel.git"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "ts-bridge --project tsconfig.build.json --clean",
+    "build:dev": "mkdir -p dist && ln -fs ../src/index.html dist/index.html",
+    "build:docs": "typedoc",
+    "changelog:validate": "../../scripts/validate-changelog.sh @ocap/brow-2-brow",
+    "clean": "rimraf --glob './*.tsbuildinfo' ./.eslintcache ./coverage ./dist",
+    "lint": "yarn lint:eslint && yarn lint:misc --check && yarn constraints && yarn lint:dependencies",
+    "lint:dependencies": "depcheck",
+    "lint:eslint": "eslint . --cache",
+    "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write && yarn constraints --fix && yarn lint:dependencies",
+    "lint:misc": "prettier --no-error-on-unmatched-pattern '**/*.json' '**/*.md' '**/*.html' '!**/CHANGELOG.old.md' '**/*.yml' '!.yarnrc.yml' '!merged-packages/**' --ignore-path ../../.gitignore",
+    "test": "vitest run --config vitest.config.ts",
+    "test:clean": "yarn test --no-cache --coverage.clean",
+    "test:dev": "yarn test --mode development",
+    "test:verbose": "yarn test --reporter verbose",
+    "test:watch": "vitest --config vitest.config.ts",
+    "start": "npm run build:dev && esbuild src/index.js --serve --sourcemap --bundle --outdir=dist --servedir=dist --external:@types/web",
+    "start:relay": "node dist/src/relay.mjs"
+  },
+  "dependencies": {
+    "@chainsafe/libp2p-noise": "^15.1.0",
+    "@chainsafe/libp2p-yamux": "^6.0.2",
+    "@libp2p/autonat": "^1.1.1",
+    "@libp2p/bootstrap": "^10.1.1",
+    "@libp2p/circuit-relay-v2": "^1.1.1",
+    "@libp2p/crypto": "^5.1.1",
+    "@libp2p/identify": "^2.1.1",
+    "@libp2p/interface": "^2.9.0",
+    "@libp2p/peer-id": "^5.1.2",
+    "@libp2p/tcp": "^9.1.1",
+    "@libp2p/webrtc": "^4.1.1",
+    "@libp2p/websockets": "^8.1.1",
+    "@libp2p/webtransport": "^4.1.1",
+    "@multiformats/multiaddr": "^12.3.0",
+    "@multiformats/multiaddr-matcher": "^1.2.4",
+    "@ts-bridge/cli": "^0.6.3",
+    "@ts-bridge/shims": "^0.1.1",
+    "@types/web": "^0",
+    "it-byte-stream": "^2.0.1",
+    "libp2p": "^1.8.0",
+    "uint8arrays": "^5.1.0"
+  },
+  "devDependencies": {
+    "@ocap/test-utils": "workspace:^",
+    "@types/node": "^22.13.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
+    "@typescript-eslint/utils": "^8.29.0",
+    "depcheck": "^1.4.7",
+    "esbuild": "^0.25.3",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-import-resolver-typescript": "^4.3.1",
+    "eslint-plugin-import-x": "^4.10.0",
+    "eslint-plugin-jsdoc": "^50.6.9",
+    "eslint-plugin-n": "^17.17.0",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-promise": "^7.2.1",
+    "prettier": "^3.5.3",
+    "rimraf": "^6.0.1",
+    "ses": "^1.12.0",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.29.0",
+    "vitest": "^3.1.1"
+  },
+  "eslintConfig": {
+    "extends": "ipfs",
+    "parserOptions": {
+      "sourceType": "module"
+    }
+  },
+  "engines": {
+    "node": "^20 || >=22"
+  },
+  "exports": {
+    "./package.json": "./package.json"
+  }
+}

packages/brow-2-brow/src/constants.ts

@@ -0,0 +1,11 @@
+// peer ids of known bootstrap nodes
+export const bootstrapPeers = [
+  'QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
+  'QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
+  'QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
+  'QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt',
+  'QmaCpDMGvV2BGHeYERUEnRQAwe3N8SzbUtfsmvsqQLuvuJ',
+  'QmZa1sAxajnQjVM8WjWXoMbmPd7NsWhfKsPkErzpm9wGkp',
+];
+
+export const PUBSUB_PEER_DISCOVERY = 'browser-peer-discovery';

packages/brow-2-brow/src/index.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Browser-to-browser comm test</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="module" defer src="./index.js"></script>
+  </head>
+  <body class="bg-gray-100 text-gray-900 font-sans leading-relaxed">
+    <main class="container mx-auto p-6 bg-white shadow-md rounded-lg mt-10">
+      <h1 class="font-bold text-2xl text-blue-600 mb-4">
+        Browser-to-browser comm test
+      </h1>
+
+      <section class="my-4">
+        <h2 class="font-bold text-xl text-blue-600 mb-2">Node</h2>
+        <ul class="list-disc list-inside ml-4">
+          <li>
+            Peer ID:
+            <span class="font-bold" id="output-node-peer-id">Unknown</span>
+          </li>
+          <li>Status: <span id="output-node-status">Initialising</span></li>
+          <li>
+            Connections: <span id="output-peer-count">0</span>
+            <ul class="list-disc list-inside ml-6" id="output-peer-types"></ul>
+          </li>
+          <li>
+            My addresses: <span id="output-address-count">0</span>
+            <ul class="list-disc list-inside ml-6" id="output-addresses"></ul>
+          </li>
+        </ul>
+      </section>
+
+      <section class="my-6">
+        <h2 class="font-bold text-xl text-blue-600 mb-2">Peers</h2>
+        <p class="flex flex-row items-center gap-2">
+          <label
+            class="block text-gray-700 text-sm font-bold"
+            for="input-multiaddr"
+            >Multiaddr</label
+          >
+          <input
+            class="shadow appearance-none border rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="input-multiaddr"
+            type="text"
+            placeholder="/ip4/..."
+          />
+          <button
+            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            id="button-connect"
+            type="button"
+          >
+            Connect
+          </button>
+        </p>
+        <ul class="list-disc list-inside ml-4" id="output-peer-details"></ul>
+      </section>
+
+      <section class="my-6">
+        <h2 class="font-bold text-xl text-blue-600 mb-2">Message</h2>
+        <p class="flex flex-row items-center gap-2">
+          <label
+            class="block text-gray-700 text-sm font-bold"
+            for="input-target"
+            >Target</label
+          >
+          <input
+            class="shadow appearance-none border rounded w-20 py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="input-target"
+            type="text"
+            placeholder="target id"
+          />
+          <label
+            class="block text-gray-700 text-sm font-bold"
+            for="input-message"
+            >Message</label
+          >
+          <input
+            class="shadow appearance-none border rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="input-message"
+            type="text"
+            placeholder="your message here..."
+          />
+          <button
+            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+            id="button-send"
+            type="button"
+          >
+            Send
+          </button>
+        </p>
+      </section>
+
+      <h2 class="font-bold text-xl text-blue-600 mb-2">Output</h2>
+      <pre
+        class="bg-gray-100 p-4 rounded shadow-inner"
+        id="output-messages"
+      ></pre>
+
+      <hr class="my-6 border-gray-300" />
+    </main>
+  </body>
+</html>