build: Build extension using Vite

rekmarks · rekmarks · commit b8ee32f03f66 · 2024-07-16T22:04:53.000+02:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -40,6 +40,14 @@ module.exports = {
       },
     },
 
+    {
+      files: ['*.mjs'],
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: '2020',
+      },
+    },
+
     {
       files: ['*.ts'],
       extends: ['@metamask/eslint-config-typescript'],
@@ -50,20 +58,6 @@ module.exports = {
       rules: {
         // Enable rules that are disabled in `@metamask/eslint-config-typescript`
         '@typescript-eslint/no-explicit-any': 'error',
-
-        // TODO: auto-fix breaks stuff
-        '@typescript-eslint/promise-function-async': 'off',
-
-        // Without the `allowAny` option, this rule causes a lot of false
-        // positives.
-        '@typescript-eslint/restrict-template-expressions': [
-          'error',
-          {
-            allowAny: true,
-            allowBoolean: true,
-            allowNumber: true,
-          },
-        ],
       },
     },
 
diff --git a/packages/ocap-skunkworks/.eslintrc.js b/packages/ocap-skunkworks/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+
+  overrides: [
+    {
+      files: ['src/extension/**/*.js'],
+      globals: { chrome: 'readonly', clients: 'readonly' },
+      rules: {
+        'jsdoc/require-jsdoc': 'off',
+      },
+    },
+  ],
+};
diff --git a/packages/ocap-skunkworks/package.json b/packages/ocap-skunkworks/package.json
@@ -11,15 +11,18 @@
     "dist/"
   ],
   "scripts": {
-    "build": "ts-bridge --project tsconfig.build.json --clean",
-    "build:docs": "typedoc",
+    "build:extension": "vite build -c vite.config.extension.mjs",
+    "build:library": "ts-bridge --project tsconfig.build.json --clean",
     "changelog:validate": "../../scripts/validate-changelog.sh @metamask/ocap-skunkworks",
     "publish:preview": "yarn npm publish --tag preview",
+    "start": "vite -c vite.config.extension.mjs",
     "test": "jest --reporters=jest-silent-reporter",
     "posttest": "jest-it-up",
     "test:clean": "jest --clearCache",
     "test:verbose": "jest --verbose",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "build": "ts-bridge --project tsconfig.build.json --clean",
+    "build:docs": "typedoc"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.15.3",
@@ -33,7 +36,9 @@
     "ts-jest": "^28.0.7",
     "typedoc": "^0.24.8",
     "typedoc-plugin-missing-exports": "^2.0.0",
-    "typescript": "~4.9.5"
+    "typescript": "~4.9.5",
+    "vite": "^5.3.4",
+    "vite-plugin-static-copy": "^1.0.6"
   },
   "engines": {
     "node": "^18.18 || >=20"
diff --git a/packages/ocap-skunkworks/src/extension/background.js b/packages/ocap-skunkworks/src/extension/background.js
@@ -2,10 +2,7 @@ const OFFSCREEN_DOCUMENT_PATH = '/offscreen.html';
 
 // Send
 chrome.action.onClicked.addListener(async () => {
-  sendMessage(
-    'greetings',
-    { name: 'Kernel' },
-  );
+  sendMessage('greetings', { name: 'Kernel' });
 });
 
 async function sendMessage(type, data) {
@@ -14,12 +11,12 @@ async function sendMessage(type, data) {
   chrome.runtime.sendMessage({
     type,
     target: 'offscreen',
-    data
+    data,
   });
 }
 
 async function provideOffScreenDocument() {
-  if (!(await hasDocument())) {
+  if (!(await chrome.offscreen.hasDocument())) {
     await chrome.offscreen.createDocument({
       url: OFFSCREEN_DOCUMENT_PATH,
       reasons: [chrome.offscreen.Reason.IFRAME_SCRIPTING],
@@ -47,18 +44,8 @@ async function handleMessage(message) {
 }
 
 async function closeOffscreenDocument() {
-  if (!(await hasDocument())) {
+  if (!(await chrome.offscreen.hasDocument())) {
     return;
   }
   await chrome.offscreen.closeDocument();
 }
-
-async function hasDocument() {
-  const allClients = await clients.matchAll();
-  for (const client of allClients) {
-    if (client.url.endsWith(OFFSCREEN_DOCUMENT_PATH)) {
-      return true;
-    }
-  }
-  return false;
-}
diff --git a/packages/ocap-skunkworks/src/extension/offscreen.html b/packages/ocap-skunkworks/src/extension/offscreen.html
@@ -1,2 +1,2 @@
 <!DOCTYPE html>
-<script src="offscreen.js"></script>
+<script src="offscreen.js" type="module"></script>
diff --git a/packages/ocap-skunkworks/src/extension/offscreen.js b/packages/ocap-skunkworks/src/extension/offscreen.js
@@ -7,11 +7,10 @@ async function handleMessage(message) {
 
   switch (message.type) {
     case 'greetings':
-      reply('salutations', `Good day to you, ${message.data.name}!`)
+      reply('salutations', `Good day to you, ${message.data.name}!`);
       break;
     default:
       console.error(`Received unexpected message type: "${message.type}"`);
-      return;
   }
 }
 
@@ -20,5 +19,5 @@ function reply(type, data) {
     data,
     target: 'background',
     type,
-  })
+  });
 }
diff --git a/packages/ocap-skunkworks/src/index.test.ts b/packages/ocap-skunkworks/src/index.test.ts
diff --git a/packages/ocap-skunkworks/src/index.ts b/packages/ocap-skunkworks/src/index.ts
diff --git a/packages/ocap-skunkworks/tsconfig.json b/packages/ocap-skunkworks/tsconfig.json
@@ -4,5 +4,5 @@
     "baseUrl": "./"
   },
   "references": [],
-  "include": ["./src"]
+  "include": []
 }
diff --git a/packages/ocap-skunkworks/vite.config.extension.mjs b/packages/ocap-skunkworks/vite.config.extension.mjs
@@ -0,0 +1,29 @@
+import path from 'path';
+import { defineConfig } from 'vite'
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const root = './src/extension';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root,
+  assetsInclude: ['**/*.json'],
+  build: {
+    emptyOutDir: true,
+    outDir: path.resolve(root, '../../dist'),
+    rollupOptions: {
+      input: {
+        background: path.resolve(root, 'background.js'),
+        offscreen: path.resolve(root, 'offscreen.html'),
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]'
+      }
+    }
+  },
+  plugins: [
+    viteStaticCopy({ targets: [{ src: 'manifest.json', dest: './' }]})
+  ]
+});
diff --git a/tsconfig.packages.json b/tsconfig.packages.json
@@ -18,6 +18,7 @@
     "paths": {
       "@metamask/*": ["../*/src"]
     },
+    "resolveJsonModule": true,
     "strict": true,
     "target": "ES2020",
     "useUnknownInCatchVariables": true
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`<!DOCTYPE html>`
`2`		`-<script src="offscreen.js"></script>`
	`2`	`+<script src="offscreen.js" type="module"></script>`
Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,10 @@ async function handleMessage(message) {`
`7`	`7`
`8`	`8`	`switch (message.type) {`
`9`	`9`	`case 'greetings':`
`10`		- reply('salutations', `Good day to you, ${message.data.name}!`)
	`10`	+ reply('salutations', `Good day to you, ${message.data.name}!`);
`11`	`11`	`break;`
`12`	`12`	`default:`
`13`	`13`	console.error(`Received unexpected message type: "${message.type}"`);
`14`		`- return;`
`15`	`14`	`}`
`16`	`15`	`}`
`17`	`16`
`@@ -20,5 +19,5 @@ function reply(type, data) {`
`20`	`19`	`data,`
`21`	`20`	`target: 'background',`
`22`	`21`	`type,`
`23`		`- })`
	`22`	`+ });`
`24`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@`
`4`	`4`	`"baseUrl": "./"`
`5`	`5`	`},`
`6`	`6`	`"references": [],`
`7`		`- "include": ["./src"]`
	`7`	`+ "include": []`
`8`	`8`	`}`