File writer refactor

.github/workflows/vite-plugin.yml

@@ -25,7 +25,7 @@ defaults:
 jobs:
   # Runs linter and unit tests
   checks:
-    name: Lint and Unit Tests
+    name: Lint
 
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
@@ -37,15 +37,15 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "16"
 
       - name: Setup PNPM
         # You may pin to the exact commit or the version.
         # uses: pnpm/action-setup@646cdf48217256a3d0b80361c5a50727664284f2
         uses: pnpm/action-setup@v2.2.2
         with:
           # Version of PNPM to install
-          version: 6.3.0
+          version: 7.9.5
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`
@@ -64,42 +64,34 @@ jobs:
           restore-keys: ${{ runner.os }}-${{ env.cache-name }}-
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --filter "vite-plugin"
 
       - name: Lint files
         run: pnpm lint
 
-      - name: Unit tests
-        run: pnpm test:units
-
   # Runs e2e tests in Playwright
   e2e:
     name: E2E Tests
 
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
-    strategy:
-      fail-fast: false
-      matrix:
-        type: [build, serve]
-
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v3
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "16"
 
       - name: Setup PNPM
         # You may pin to the exact commit or the version.
         # uses: pnpm/action-setup@646cdf48217256a3d0b80361c5a50727664284f2
         uses: pnpm/action-setup@v2.2.2
         with:
           # Version of PNPM to install
-          version: 6.3.0
+          version: 7.9.5
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`
@@ -120,10 +112,10 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
-      - name: Run ${{ matrix.type }} tests
+      - name: Run e2e tests
         uses: GabrielBB/xvfb-action@v1
         with:
-          run: pnpm test:ci:e2e:${{ matrix.type }}
+          run: pnpm test:ci:e2e
           working-directory: "packages/vite-plugin"
 
       - uses: actions/upload-artifact@v3
@@ -132,34 +124,29 @@ jobs:
           name: image-diff-${{ matrix.type }}
           path: ${{ github.workspace }}/tests/**/__image_snapshots__/__diff_output__/*.png
 
-  # Runs output snapshot tests
-  output:
-    name: Output Snapshot Tests
+  # Runs unit and output tests
+  unit:
+    name: Unit and Output Tests
 
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
-    strategy:
-      fail-fast: false
-      matrix:
-        type: [build, serve]
-
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v3
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "16"
 
       - name: Setup PNPM
         # You may pin to the exact commit or the version.
         # uses: pnpm/action-setup@646cdf48217256a3d0b80361c5a50727664284f2
         uses: pnpm/action-setup@v2.2.2
         with:
           # Version of PNPM to install
-          version: 6.3.0
+          version: 7.9.5
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`
@@ -180,8 +167,8 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
-      - name: Run ${{ matrix.type }} tests
-        run: pnpm test:ci:mv3:${{ matrix.type }}
+      - name: Run unit and output tests
+        run: pnpm test:ci:unit
 
       - name: Check for diff
         id: diff

.gitignore

@@ -20,4 +20,5 @@ TODOs.md
 *.local
 packages/vite/LICENSE
 types
-**/.docusaurus
+**/.docusaurus
+crxjs.code-workspace

.pnpmfile.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  hooks: {
+    readPackages(pkg) {
+      if (pkg.name === 'jest-image-snapshot') {
+        delete pkg.peerDependencies.jest
+        console.log('fixing jest-image-snapshot peer deps')
+      }
+      return pkg
+    },
+  },
+}

package.json

@@ -29,5 +29,8 @@
   },
   "engines": {
     "node": ">=14"
+  },
+  "devDependencies": {
+    "vitest": "^0.23.4"
   }
 }

packages/rollup-plugin/__tests__/e2e__mv3-playwright.test.ts

@@ -1,5 +1,5 @@
 import { remove } from 'fs-extra'
-import { chromium, ChromiumBrowserContext, Page } from 'playwright'
+import { chromium, ChromiumBrowserContext, Page } from 'playwright-chromium'
 import { InputOptions, OutputOptions, rollup } from 'rollup'
 import { getExtPath, getTestName, requireExtFile } from '../__fixtures__/utils'
 

packages/rollup-plugin/package.json

@@ -56,6 +56,7 @@
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "mem": "^6.0.1",
+    "playwright-chromium": "1.21.1",
     "rollup": "^2.72.1",
     "slash": "^3.0.0",
     "webextension-polyfill": "^0.9.0"
@@ -94,7 +95,6 @@
     "jest-html-reporters": "3.0.8",
     "jest-in-case": "^1.0.2",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.13.1",
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/vite-plugin/.eslintrc.js

@@ -32,7 +32,7 @@ module.exports = {
         vars: 'all',
         args: 'after-used',
         ignoreRestSiblings: true,
-        varsIgnorePattern: 'self',
+        varsIgnorePattern: 'self|debug',
       },
     ],
     'prefer-const': [
@@ -45,5 +45,6 @@ module.exports = {
     // note you must disable the base rule as it can report incorrect errors
     'no-extra-semi': 'off',
     '@typescript-eslint/no-extra-semi': 'off',
+    'no-empty': ['error', { allowEmptyCatch: true }],
   },
 }

packages/vite-plugin/modules.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
-declare module '*?client' {
+declare module 'client/*' {
   const code: string
   export default code
 }

packages/vite-plugin/package.json

@@ -42,6 +42,7 @@
     "client.d.ts"
   ],
   "scripts": {
+    "format": "prettier -w -c ../../.prettierrc.yaml",
     "build": "run-s build:clean build:js",
     "build:clean": "rimraf dist",
     "build:js": "rollup -c rollup.config.ts --configPlugin esbuild",
@@ -50,15 +51,11 @@
     "lint": "run-s lint:eslint lint:types",
     "lint:eslint": "eslint \"{src,test}/**/*.ts\"",
     "lint:types": "tsc --noEmit",
-    "test": "run-s test:units test:update:*",
-    "test:ci:e2e:build": "node --expose-gc ./node_modules/jest/bin/jest.js --logHeapUsage --runInBand --forceExit --testPathIgnorePatterns=\\(/node_modules/ /templates/ /mv3/\\) -t build",
-    "test:ci:e2e:serve": "npm run test:ci:e2e:serve:cmd || npm run test:ci:e2e:serve:cmd",
-    "test:ci:e2e:serve:cmd": "node --expose-gc ./node_modules/jest/bin/jest.js --logHeapUsage --runInBand --forceExit --testPathIgnorePatterns=\\(/node_modules/ /templates/ /mv3/\\) -t serve",
-    "test:ci:mv3:build": "node --expose-gc ./node_modules/jest/bin/jest.js --logHeapUsage --runInBand --forceExit --testPathIgnorePatterns=\\(/node_modules/ /templates/ /e2e/\\) --updateSnapshot build",
-    "test:ci:mv3:serve": "node --expose-gc ./node_modules/jest/bin/jest.js --logHeapUsage --runInBand --forceExit --testPathIgnorePatterns=\\(/node_modules/ /templates/ /e2e/\\) --updateSnapshot serve",
-    "test:units": "jest src",
-    "test:update:build": "jest build -u",
-    "test:update:serve": "jest serve -u"
+    "test": "vitest --mode unit",
+    "test:e2e": "vitest --mode e2e",
+    "test:ci": "run-s test:ci:*",
+    "test:ci:unit": "vitest --run --mode unit",
+    "test:ci:e2e": "vitest --run --mode e2e"
   },
   "dependencies": {
     "@rollup/pluginutils": "^4.1.2",
@@ -74,7 +71,7 @@
     "magic-string": "^0.26.0",
     "picocolors": "^1.0.0",
     "react-refresh": "^0.13.0",
-    "rollup": "^2.70.2"
+    "rollup": "2.78.1"
   },
   "devDependencies": {
     "@extend-chrome/messages": "1.2.2",
@@ -86,21 +83,22 @@
     "@types/chrome": "0.0.190",
     "@types/debug": "4.1.7",
     "@types/fs-extra": "9.0.13",
-    "@types/jest": "27.5.2",
-    "@types/jest-image-snapshot": "4.3.1",
+    "@types/jest-image-snapshot": "^5.1.0",
     "@types/jsesc": "3.0.1",
     "@types/node": "17.0.18",
     "@types/react": "17.0.44",
     "@types/react-dom": "17.0.17",
     "@typescript-eslint/eslint-plugin": "5.27.1",
     "@typescript-eslint/parser": "5.27.1",
-    "@vitejs/plugin-react": "1.3.2",
-    "@vitejs/plugin-vue": "2.3.3",
+    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-vue": "3.1.0",
+    "chokidar": "^3.5.3",
     "esbuild": "0.14.43",
     "esbuild-runner": "2.2.1",
     "eslint": "8.17.0",
-    "jest": "27.5.1",
-    "jest-image-snapshot": "5.1.0",
+    "eslint-plugin-react": "^7.29.4",
+    "jest-image-snapshot": "^5.2.0",
+    "npm-run-all": "^4.1.5",
     "playwright-chromium": "1.21.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -109,15 +107,13 @@
     "rollup-plugin-esbuild": "4.9.1",
     "rxjs": "7.5.5",
     "typescript": "^4.6.4",
-    "vite": "^2.9.5",
-    "vite-plugin-inspect": "0.5.0",
+    "vite": "^3.1.3",
+    "vite-plugin-inspect": "0.7.2",
+    "vitest": "^0.23.4",
     "vue": "3.2.36"
   },
   "peerDependencies": {
-    "vite": "^2.9.0"
-  },
-  "optionalDependencies": {
-    "@vitejs/plugin-react": ">=1.2.0"
+    "vite": "^2.9.0 <= ^3.1.3"
   },
   "engines": {
     "node": ">=14"

packages/vite-plugin/rollup.config.ts

@@ -38,31 +38,26 @@ const bundleClientCode = (): Plugin => {
       return null
     },
     resolveId(source, importer) {
-      if (importer && source.includes('?client')) return source
+      if (importer && source.endsWith('?client')) return source
     },
     async load(id) {
-      if (id.includes('?client')) {
-        const url = new URL(id, 'stub://stub')
-        const filepath = url.pathname
-        const format = path.dirname(filepath).split('/').pop() as
+      if (id.endsWith('?client')) {
+        const format = path.dirname(id).split('/').pop() as
           | 'es'
           | 'iife'
           | 'html'
+        const input = id.split('?')[0]
 
         let result: string
         if (format === 'html') {
-          result = await fs.readFile(filepath, { encoding: 'utf8' })
+          result = await fs.readFile(input, { encoding: 'utf8' })
         } else {
-          const build = await rollup({
-            ...options,
-            input: filepath,
-          })
-
+          const build = await rollup({ ...options, input })
           const { output } = await build.generate({ format })
           result = output[0].code
         }
 
-        this.addWatchFile(filepath)
+        this.addWatchFile(id)
 
         return `export default "${jsesc(result, { quotes: 'double' })}"`
       }

packages/vite-plugin/src/client/es/hmr-client-worker.ts

@@ -4,7 +4,7 @@
 declare const self: ServiceWorkerGlobalScope
 export {}
 
-import { CrxHMRPayload } from 'src/types'
+import type { CrxHMRPayload } from 'src/types'
 import type { HMRPayload } from 'vite'
 
 // injected by the hmr plugin when served

packages/vite-plugin/src/client/html/precontroller.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <title>Waiting for the extension service worker...</title>
-    <script src="%PATH%"></script>
+    <script src="%SCRIPT%"></script>
   </head>
   <body>
     <h1>Waiting for service worker</h1>