web extension configs with solid js

README.md

the layout is:

html pages and global css are in the pages folder
source code is in the src folder
manifest.json and icons are in the folder named root
config files are in the top level

html pages include script files from src with script tags:

<script type="module" src="../src/foo-page.ts"></script>

vite and rollup are configured with dist/unpacked as an output folder
the intent is that packed extension file will be created in the dist from unpacked

package.json has build and watch scripts

{delegateEvents: false} option for solidPlugin in vite.config.js is necessary only because there's an iframe for devtools panel, and the things are set up so that render() is called in the context of the main devtools window, but it renders DOM in the element which is inside the iframe.

package.json

{
    "name": "-",
    "version": "0.1.0",
    "description": "Solid Developer Tools Chrome Extension",
    "private": true,
    "author": "Artem Khodyush",
    "license": "MIT",
    "scripts": {
        "eslint": "eslint --ignore-path .gitignore .",
        "eslint-fix-formatting": "eslint --ignore-path .gitignore --no-eslintrc --config .eslintrc.formatting.json --fix .",
        "eslint-fix-html": "",
        "build": "npm-run-all clean -p build:*",
        "watch": "npm-run-all clean -l -p watch:*",
        "build:pages": "vite build",
        "build:scripts": "rollup -c",
        "watch:pages": "vite build --watch",
        "watch:scripts": "rollup -c --watch",
        "clean": "rm -rf dist"
    },
    "devDependencies": {
        "eslint": "^8.2.0",
        "eslint-plugin-import": "^2.25.3",
        "eslint-plugin-unicorn": "^38.0.1",
        "@typescript-eslint/parser": "^5.4.0",
        "@typescript-eslint/eslint-plugin": "^5.4.0",
        "@html-eslint/parser": "^0.12.0",
        "@html-eslint/eslint-plugin": "^0.12.0",
        "npm-run-all": "^4.1.5",  
        "rollup": "^2.59.0",
        "rollup-plugin-terser": "^7.0.2",
        "@rollup/plugin-commonjs": "^21.0.1",
        "@rollup/plugin-node-resolve": "^13.0.6",
        "@rollup/plugin-typescript": "^8.3.0",
        "typescript": ">=4.5",
        "tslib": "^2.3.1",
        "vite": "^2.7.0-beta.1",
        "vite-plugin-solid": "^2.1.1",
        "yarn": "^1.22.0",
        "@types/chrome": "0.0.153"
    },
    "dependencies": {
        "nullthrows": "^1.1.1",
        "solid-js": "^1.2.2"
    }
}

rollup.config.js

import rollupPluginCommonJS from '@rollup/plugin-commonjs';
import rollupPluginNodeResolve from '@rollup/plugin-node-resolve';
import rollupPluginTypeScript from '@rollup/plugin-typescript';
//import {terser as rollupPluginTerser} from 'rollup-plugin-terser';

const plugins = [
    rollupPluginCommonJS(),
    rollupPluginNodeResolve({browser: true}),
    rollupPluginTypeScript()
];

const commonOutputSettings = {
    format: 'iife',
    generatedCode: 'es2015'
// ? sourcemaps are of no use in chrome extension code due to the following error
// DevTools failed to load source map: Could not load content for chrome-extension://ohagojhoicbfgahanijppkommknfljje/scripts/the-hook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
//        sourcemap: true,
//        plugins: [rollupPluginTerser()]
};

export default [{
    plugins,
    input: 'src/background/background-worker.ts',
    output: {
        ...commonOutputSettings,
        file: 'dist/unpacked/scripts/background-worker.js'
    }
}, {
    plugins,
    input: 'src/inject-global-hook.ts',
    output: {
        ...commonOutputSettings,
        file: 'dist/unpacked/scripts/inject-global-hook.js'
    }
}, {
    plugins,
    input: 'src/hook/hook.ts',
    output: {
        ...commonOutputSettings,
        file: 'dist/unpacked/scripts/hook.js'
    }
}, {
    plugins,
    input: 'src/hook/hook-stub.ts',
    output: {
        ...commonOutputSettings,
        file: 'dist/unpacked/scripts/hook-stub.js'
    }
}, {
    plugins,
    input: 'src/content-script-relay.ts',
    output: {
        ...commonOutputSettings,
        file: 'dist/unpacked/scripts/content-script-relay.js'
    }
}, {
    plugins,
    input: 'src/on-panel-deactivated.ts',
    output: {
        ...commonOutputSettings,
        file: 'dist/unpacked/scripts/on-panel-deactivated.js'
    }
}];

tsconfig.json

{
    "compilerOptions": {
      "strict": true,
      "types": ["chrome"],
      "target": "esnext",
      "module": "esnext",
      "lib": ["es2018", "dom"],
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "jsx": "preserve",
      "jsxImportSource": "solid-js",
    }
}
  

vite.config.js

import {defineConfig} from 'vite';
import solidPlugin from 'vite-plugin-solid';
import * as pf from 'path';

export default defineConfig({
    publicDir: 'root', // to copy manifest.json and other stuff
    plugins: [solidPlugin({solid: {delegateEvents: false}})],
    build: {
        outDir: 'dist/unpacked',
        emptyOutDir: false, // necessary for the watch task which runs vite (for pages) and rollup (for scripts) in parallel
                           // otherwise vite will erase scripts written to output dir by rollup
        target: 'esnext',
        polyfillDynamicImport: false,
        polyfillModulePreload: false,
        rollupOptions: {
            input: {
                'devtools-page': pf.resolve(__dirname, 'pages/devtools-page.html'),
                'panel': pf.resolve(__dirname, 'pages/panel.html'),
                'popup-development': pf.resolve(__dirname, 'pages/popups/development.html'),
                'popup-production': pf.resolve(__dirname, 'pages/popups/production.html'),
                'popup-disabled': pf.resolve(__dirname, 'pages/popups/disabled.html'),
                'popup-restricted': pf.resolve(__dirname, 'pages/popups/restricted.html')
            }
        }
    }
});