feat: Bundle iframe and vat worker via kernel-browser-runtime (#531)

#522 introduced the `kernel-browser-runtime` package, which bundled the
kernel Web Worker. Further experiments indicated that it would be
salutary for this package to bundle the vat worker, i.e. vat iframe, as
well.

To facilitate this, we replace `esbuild` with `vite` in
`kernel-browser-runtime`, and extract all vat iframe-related
functionality to this package. We also extract the extension's Vite
plugins into a dedicated, private package so that they can be reused.

Finally, during development, it was discovered that Vite duplicates the
`@sqlite.org/sqlite.wasm` WASM binaries. This was a preexisting issue in
the extension, when we bundled the kernel worker there. Thankfully, the
duplicate files are extraneous and can be deleted, which is done using
an inline plugin in `kernel-browser-runtime`.

Many red herrings died in the creation of this PR.

Author: rekmarks

package.json

@@ -16,7 +16,7 @@
     "build:clean": "yarn clean && yarn build",
     "build:docs": "yarn workspaces foreach --all --exclude @ocap/monorepo --exclude @ocap/extension --parallel --interlaced --verbose run build:docs",
     "build:source": "ts-bridge --project tsconfig.build.json --verbose",
-    "build:special": "yarn workspace @metamask/kernel-shims run build && yarn workspace @metamask/kernel-browser-runtime run build:kernel-worker && yarn workspace @ocap/extension run build && yarn workspace @ocap/kernel-test run build:vats",
+    "build:special": "yarn workspace @ocap/vite-plugins run build && yarn workspace @metamask/kernel-shims run build && yarn workspace @metamask/kernel-browser-runtime run build:vite && yarn workspace @ocap/extension run build && yarn workspace @ocap/kernel-test run build:vats",
     "bundle": "node ./scripts/bundle-vat.js",
     "changelog:update": "yarn workspaces foreach --all --no-private --parallel --interlaced --verbose run changelog:update",
     "changelog:validate": "yarn workspaces foreach --all --no-private --parallel --interlaced --verbose run changelog:validate",
@@ -109,15 +109,16 @@
   "lavamoat": {
     "allowScripts": {
       "$root$": true,
+      "@ocap/cli>@metamask/logger>@metamask/streams": true,
       "@lavamoat/preinstall-always-fail": false,
+      "eslint-import-resolver-typescript>unrs-resolver": false,
+      "eslint-plugin-import-x>unrs-resolver": false,
       "simple-git-hooks": false,
       "vite>esbuild": false,
       "vite>sass>@parcel/watcher": false,
       "vitest>@vitest/browser>webdriverio>@wdio/utils>edgedriver": false,
       "vitest>@vitest/browser>webdriverio>@wdio/utils>geckodriver": false,
-      "vitest>@vitest/mocker>msw": false,
-      "@ocap/cli>@metamask/logger>@metamask/streams": true,
-      "eslint-plugin-import-x>unrs-resolver": false
+      "vitest>@vitest/mocker>msw": false
     }
   },
   "resolutions": {

packages/extension/package.json

@@ -63,6 +63,7 @@
     "@metamask/eslint-config-typescript": "^14.0.0",
     "@ocap/cli": "workspace:^",
     "@ocap/test-utils": "workspace:^",
+    "@ocap/vite-plugins": "workspace:^",
     "@playwright/test": "^1.51.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -76,7 +77,6 @@
     "@typescript-eslint/utils": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/eslint-plugin": "^1.1.44",
-    "cheerio": "^1.0.0",
     "depcheck": "^1.4.7",
     "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",

packages/extension/scripts/build-constants.mjs

@@ -1,8 +1,15 @@
+// @ts-check
+
 import path from 'path';
 
 export const sourceDir = './src';
 export const buildDir = path.resolve(sourceDir, '../dist');
 
+/**
+ * @type {import('@ocap/vite-plugins').PreludeRecord}
+ */
 export const trustedPreludes = {
-  background: path.resolve(sourceDir, 'env/background-trusted-prelude.js'),
+  background: {
+    path: path.resolve(sourceDir, 'env/background-trusted-prelude.js'),
+  },
 };

packages/extension/src/manifest.json

@@ -12,7 +12,7 @@
   },
   "permissions": ["offscreen", "unlimitedStorage"],
   "sandbox": {
-    "pages": ["iframe.html"]
+    "pages": ["browser-runtime/vat/iframe.html"]
   },
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; frame-ancestors 'none';",

packages/extension/src/offscreen.ts

@@ -51,7 +51,9 @@ async function makeKernelWorker(): Promise<{
   kernelStream: DuplexStream<JsonRpcResponse, JsonRpcCall>;
   vatWorkerService: VatWorkerServer;
 }> {
-  const worker = new Worker('kernel-worker/index.mjs', { type: 'module' });
+  const worker = new Worker('browser-runtime/kernel-worker/index.js', {
+    type: 'module',
+  });
 
   const port = await initializeMessageChannel((message, transfer) =>
     worker.postMessage(message, transfer),
@@ -67,7 +69,7 @@ async function makeKernelWorker(): Promise<{
     (vatId) =>
       makeIframeVatWorker({
         id: vatId,
-        iframeUri: 'iframe.html',
+        iframeUri: 'browser-runtime/vat/iframe.html',
         getPort: initializeMessageChannel,
         logger: logger.subLogger({
           tags: ['iframe-vat-worker', vatId],

packages/extension/test/build/build-tests.mjs

@@ -7,19 +7,35 @@ import {
   trustedPreludes,
 } from '../../scripts/build-constants.mjs';
 
+const { hasOwn } = Object;
+
 const untransformedFiles = [
   {
     sourcePath: path.resolve('../kernel-shims/dist/endoify.js'),
-    builtPath: path.resolve(buildDir, 'endoify.js'),
+    buildPath: path.resolve(buildDir, 'endoify.js'),
   },
   {
     sourcePath: path.resolve(sourceDir, 'env/dev-console.js'),
-    builtPath: path.resolve(buildDir, 'dev-console.js'),
+    buildPath: path.resolve(buildDir, 'dev-console.js'),
   },
-  ...Object.values(trustedPreludes).map((preludePath) => ({
-    sourcePath: preludePath,
-    builtPath: path.join(buildDir, path.basename(preludePath)),
-  })),
+  ...Object.values(trustedPreludes).map((prelude) => {
+    if (hasOwn(prelude, 'path')) {
+      return {
+        sourcePath: prelude.path,
+        buildPath: path.join(buildDir, path.basename(prelude.path)),
+      };
+    }
+
+    const preludePath = /^import ["']([^"']+)["']/iu.exec(prelude.content)[1];
+    if (!preludePath) {
+      throw new Error('No prelude path found in content');
+    }
+
+    return {
+      sourcePath: preludePath,
+      buildPath: path.join(buildDir, path.basename(preludePath)),
+    };
+  }),
 ];
 
 await runTests();
@@ -42,16 +58,14 @@ async function runTests() {
  * Test that shims and preludes are packaged untransformed.
  */
 async function checkUntransformed() {
-  console.log('Checking if shims and preludes are packaged untransformed...');
-
-  for (const { builtPath, sourcePath } of untransformedFiles) {
+  for (const { buildPath, sourcePath } of untransformedFiles) {
     const [originalContent, builtContent] = await Promise.all([
       fs.readFile(sourcePath, 'utf8'),
-      fs.readFile(builtPath, 'utf8'),
+      fs.readFile(buildPath, 'utf8'),
     ]);
     if (originalContent.trim() !== builtContent.trim()) {
       throw new Error(
-        `The ${builtPath} is transformed or differs from the original source.`,
+        `"${buildPath}" is transformed or differs from the original source.`,
       );
     }
   }
@@ -61,15 +75,16 @@ async function checkUntransformed() {
  * Test that trusted preludes are loaded at the top of the file.
  */
 async function checkTrustedPreludes() {
-  console.log('Checking that trusted preludes are loaded at the top...');
+  for (const [outputFileName, prelude] of Object.entries(trustedPreludes)) {
+    const outputFilePath = path.join(buildDir, `${outputFileName}.js`);
+    const outputFileContent = await fs.readFile(outputFilePath, 'utf8');
+    const expectedImportStatement = hasOwn(prelude, 'path')
+      ? `import "./${path.basename(prelude.path)}";`
+      : prelude.content;
 
-  for (const [preludeName, preludePath] of Object.entries(trustedPreludes)) {
-    const expectedImport = path.basename(preludePath);
-    const builtFilePath = path.join(buildDir, `${preludeName}.js`);
-    const content = await fs.readFile(builtFilePath, 'utf8');
-    if (!content.startsWith(`import "./${expectedImport}";`)) {
+    if (!outputFileContent.startsWith(expectedImportStatement)) {
       throw new Error(
-        `The trusted prelude ${expectedImport} is not imported in the first position in ${preludeName}.js`,
+        `The trusted prelude \`${expectedImportStatement}\` is not imported in the first position in "${outputFileName}.js"`,
       );
     }
   }

packages/extension/tsconfig.json

@@ -28,7 +28,8 @@
     { "path": "../logger" },
     { "path": "../ocap-kernel" },
     { "path": "../streams" },
-    { "path": "../test-utils" }
+    { "path": "../test-utils" },
+    { "path": "../vite-plugins" }
   ],
   "include": [
     "../../vitest.config.ts",

packages/extension/vite.config.ts

@@ -1,6 +1,11 @@
 // eslint-disable-next-line spaced-comment
 /// <reference types="vitest" />
 
+import {
+  extensionDev,
+  htmlTrustedPrelude,
+  jsTrustedPrelude,
+} from '@ocap/vite-plugins';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import sourcemaps from 'rollup-plugin-sourcemaps2';
@@ -15,9 +20,6 @@ import {
   buildDir,
   trustedPreludes,
 } from './scripts/build-constants.mjs';
-import { extensionDev } from './vite-plugins/extension-dev.ts';
-import { htmlTrustedPrelude } from './vite-plugins/html-trusted-prelude.ts';
-import { jsTrustedPrelude } from './vite-plugins/js-trusted-prelude.ts';
 
 /**
  * Files that need to be statically copied to the destination directory.
@@ -28,14 +30,12 @@ const staticCopyTargets: readonly (string | Target)[] = [
   'manifest.json',
   // External modules
   'env/dev-console.js',
+  'env/background-trusted-prelude.js',
   '../../kernel-shims/dist/endoify.js',
   {
-    src: '../../kernel-browser-runtime/dist/kernel-worker/*',
-    dest: './kernel-worker',
-    // rename: 'kernel-worker.js',
+    src: '../../kernel-browser-runtime/dist/static/*',
+    dest: './browser-runtime',
   },
-  // Trusted preludes
-  ...new Set(Object.values(trustedPreludes)),
 ];
 
 // https://vitejs.dev/config/
@@ -56,7 +56,6 @@ export default defineConfig(({ mode }) => {
         input: {
           background: path.resolve(sourceDir, 'background.ts'),
           offscreen: path.resolve(sourceDir, 'offscreen.html'),
-          iframe: path.resolve(sourceDir, 'iframe.html'),
           popup: path.resolve(sourceDir, 'popup.html'),
         },
         output: {

packages/kernel-browser-runtime/package.json

@@ -39,9 +39,9 @@
     "dist/"
   ],
   "scripts": {
-    "build": "yarn build:ts && yarn build:kernel-worker",
+    "build": "yarn build:ts && yarn build:vite",
     "build:ts": "ts-bridge --project tsconfig.build.json --clean",
-    "build:kernel-worker": "node scripts/build-kernel-worker.js",
+    "build:vite": "vite build --config vite.config.ts && yarn test:build",
     "build:docs": "typedoc",
     "changelog:update": "../../scripts/update-changelog.sh @metamask/kernel-browser-runtime",
     "changelog:validate": "../../scripts/validate-changelog.sh @metamask/kernel-browser-runtime",
@@ -53,6 +53,7 @@
     "lint:misc": "prettier --no-error-on-unmatched-pattern '**/*.json' '**/*.md' '**/*.html' '!**/CHANGELOG.old.md' '**/*.yml' '!.yarnrc.yml' '!merged-packages/**' --ignore-path ../../.gitignore",
     "publish:preview": "yarn npm publish --tag preview",
     "test": "vitest run --config vitest.config.ts",
+    "test:build": "node ./test/build-tests.mjs",
     "test:clean": "yarn test --no-cache --coverage.clean",
     "test:dev": "yarn test --mode development",
     "test:verbose": "yarn test --reporter verbose",
@@ -82,14 +83,14 @@
     "@metamask/eslint-config-nodejs": "^14.0.0",
     "@metamask/eslint-config-typescript": "^14.0.0",
     "@ocap/test-utils": "workspace:^",
+    "@ocap/vite-plugins": "workspace:^",
     "@ts-bridge/cli": "^0.6.3",
     "@ts-bridge/shims": "^0.1.1",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",
     "@vitest/eslint-plugin": "^1.1.44",
     "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",
@@ -98,13 +99,15 @@
     "eslint-plugin-n": "^17.17.0",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-promise": "^7.2.1",
-    "has-flag": "^5.0.1",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
+    "rollup-plugin-sourcemaps2": "^0.5.0",
     "typedoc": "^0.28.1",
     "typescript": "~5.8.2",
     "typescript-eslint": "^8.29.0",
     "vite": "^6.3.5",
+    "vite-plugin-checker": "^0.9.1",
+    "vite-plugin-static-copy": "^2.3.0",
     "vitest": "^3.1.3"
   },
   "engines": {