Refactor extension build process and remove vite.config.ts

Author: thetarnav

packages/extension/build.ts

@@ -1,41 +1,176 @@
-import child_process from 'node:child_process'
-import fs from 'node:fs'
-import * as vite from 'vite'
+import * as path     from 'node:path'
+import * as url      from 'node:url'
+import * as crx      from '@crxjs/vite-plugin'
+import * as vite     from 'vite'
+import      solid    from 'vite-plugin-solid'
+import      pkg      from './package.json' with {type: 'json'}
+import      main_pkg from 'solid-devtools/package.json' with {type: 'json'}
+
+import {
+    ICONS_BLUE,
+    ICONS_GRAY,
+} from './src/shared.ts'
+
+
+const filename = url.fileURLToPath(import.meta.url)
+const dirname  = path.dirname(filename)
+
+const dist_dirname = path.join(dirname, `dist`)
 
-const cwd = process.cwd()
 const args = process.argv.slice(2)
 
 type Browser = 'chrome' | 'firefox'
 
 /*
 Parse args
 */
-const browsers: Browser[] = []
-for (const arg of args) {
-    if (!arg.startsWith('--browser=')) continue
+let is_dev = false
+let browsers: Browser[] = []
 
-    const browser = arg.slice('--browser='.length)
-    if (browser !== 'chrome' && browser !== 'firefox') {
-        throw new Error('browser arg must be "chrome" or "firefox", was ' + browser)
+for (let arg of args) {
+    switch (arg) {
+    case '--watch':
+        is_dev = true
+        break
+    case '--chrome':
+    case 'chrome':
+    case '--browser=chrome':
+        if (!browsers.includes('chrome')) {
+            browsers.push('chrome')
+        }
+        break
+    case '--firefox':
+    case 'firefox':
+    case '--browser=firefox':
+        if (!browsers.includes('firefox')) {
+            browsers.push('firefox')
+        }
+        break
+    default:
+        throw Error(`Unknown arg: "${arg}"`)
     }
-    browsers.push(browser)
 }
-if (browsers.length === 0) {
-    throw new Error('No browsers specified')
+
+if (is_dev) {
+    if (browsers.length === 0) {
+        browsers.push('chrome')
+    } else if (browsers.length > 1) {
+        throw Error('Watch mode can only be used with one browser')
+    }
+} else {
+    if (browsers.length === 0) {
+        browsers.push('chrome', 'firefox')
+    }
 }
 
-/*
-Build and zip
-*/
-const dist = `${cwd}/dist`
+const manifest_version = (() => {
+    // Convert from Semver (example: 0.1.0-beta6)
+    const [major, minor, patch, label = '0'] = pkg.version
+        // can only contain digits, dots, or dash
+        .replace(/[^\d.-]+/g, '')
+        // split into version parts
+        .split(/[.-]/)
+
+    return `${major}.${minor}.${patch}.${label}`
+})()
 
-for (const browser of browsers) {
-    const dist_dir = `${dist}/${browser}`
-    const dist_zip = `${dist}/${browser}.zip`
+type Manifest_Additional_Fields = {
+    browser_specific_settings?: Record<string, Record<string, string>>
+}
+
+for (let browser of browsers) {
+
+    let is_chrome = browser === 'chrome'
+
+    const manifest: crx.ManifestV3Export & Manifest_Additional_Fields = {
+        manifest_version: 3,
+        name: `${is_dev ? '[DEV] ' : ''}Solid Devtools`,
+        description: 'Chrome Developer Tools extension for debugging SolidJS applications.',
+        homepage_url: 'https://github.com/thetarnav/solid-devtools',
+        version: manifest_version,
+        version_name: is_chrome ? pkg.version : undefined,
+        browser_specific_settings: is_chrome
+            ? undefined
+            : {gecko: {id: '{abfd162e-9948-403a-a75c-6e61184e1d47}'}},
+        author: is_chrome ? {email: 'gthetarnav@gmail.com'} : 'Damian Tarnawski' as any,
+        minimum_chrome_version: '94',
+        devtools_page: 'src/devtools.html',
+        content_scripts: [{
+            matches: ['*://*/*'],
+            js: ['src/content.ts'],
+            run_at: 'document_start',
+        }],
+        background: is_chrome
+            ? {
+                service_worker: 'src/background.ts',
+                type: 'module',
+            }
+            : {
+                scripts: ['src/background.ts'],
+                type: 'module',
+            },
+        permissions: [],
+        action: {
+            default_icon:  ICONS_GRAY,
+            default_title: 'Solid Devtools',
+            default_popup: 'src/popup.html',
+        },
+        icons: ICONS_BLUE,
+    }
 
-    process.env['BROWSER'] = browser
-    await vite.build()
+    const main_version = JSON.stringify(main_pkg.version.match(/\d+.\d+.\d+/)![0])
 
-    if (fs.existsSync(dist_zip)) fs.rmSync(dist_zip)
-    child_process.exec(`cd ${dist_dir} && zip -r ${dist_zip} .`)
+    const vite_config: vite.InlineConfig = {
+        root: dirname,
+        configFile: false,
+        server: {port: 3333},
+        resolve: {
+            conditions: ['browser'],
+        },
+        plugins: [
+            {
+                name: 'replace-version',
+                enforce: 'pre',
+                transform(code, id) {
+                    if (id.includes('solid-devtools')) {
+                        code = code.replace(/import\.meta\.env\.EXPECTED_CLIENT/g, main_version)
+                    }
+                    return code
+                },
+            },
+            solid({dev: false, hot: false}),
+            crx.crx({
+                manifest: manifest,
+                browser:  browser,
+            }),
+        ],
+        define: {
+            'import.meta.env.BROWSER': JSON.stringify(browser),
+        },
+        build: {
+            minify:        false,
+            target:        'esnext',
+            emptyOutDir:   !is_dev,
+            outDir:        path.join(dist_dirname, browser),
+            rollupOptions: {
+                input: {panel: 'src/panel.html'},
+            },
+        },
+        esbuild: {
+            dropLabels: [is_dev ? 'PROD' : 'DEV'],
+        },
+        optimizeDeps: {
+            exclude: ['@solid-devtools/debugger'],
+        },
+    }
+
+    if (is_dev) {
+        let server = await vite.createServer(vite_config)
+
+        await server.listen()
+
+        server.printUrls()
+    } else {
+        await vite.build(vite_config)
+    }
 }

packages/extension/package.json

@@ -6,10 +6,10 @@
     "author": "Damian Tarnawski <gthetarnav@gmail.com>",
     "type": "module",
     "scripts": {
-        "dev": "vite",
-        "build:chrome": "node --experimental-transform-types ./build.ts --browser=chrome",
-        "build:firefox": "node --experimental-transform-types ./build.ts --browser=firefox",
-        "build": "node --experimental-transform-types ./build.ts --browser=firefox --browser=chrome",
+        "dev": "node --experimental-transform-types ./build.ts --watch",
+        "build:chrome": "node --experimental-transform-types ./build.ts chrome",
+        "build:firefox": "node --experimental-transform-types ./build.ts firefox",
+        "build": "node --experimental-transform-types ./build.ts",
         "test:unit": "echo \"No unit tests\"",
         "test:types": "tsc --noEmit --paths null",
         "firefox-run": "pnpx web-ext run -s dist/firefox -p dev"