chore: Refactor repo to a standard monorepo (#646)

.github/workflows/release.yml

@@ -25,11 +25,14 @@ jobs:
           pnpx changelogen@latest --release
           git push
           git push --tags
+        working-directory: packages/wxt
 
       - name: NPM
         run: |
           echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
           pnpm publish
+        working-directory: packages/wxt
 
       - name: GitHub Release
         run: pnpx changelogen@latest gh release --token ${{ secrets.GITHUB_TOKEN }}
+        working-directory: packages/wxt

.github/workflows/validate.yml

@@ -13,19 +13,15 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm check
-  validate-demo:
+  build-demo:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm tsc --noEmit
-        working-directory: demo
       - run: pnpm build:all
-        working-directory: demo
+        working-directory: packages/wxt-demo
       - run: pnpm wxt zip
-        working-directory: demo
-      - run: pnpm vitest run
-        working-directory: demo
+        working-directory: packages/wxt-demo
   tests:
     runs-on: ubuntu-22.04
     steps:
@@ -57,9 +53,10 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm pack
+        working-directory: packages/wxt
       - run: npm i
         working-directory: templates/${{ matrix.template }}
-      - run: npm i -D ../../wxt-*.tgz
+      - run: npm i -D ../../packages/wxt/wxt-*.tgz
         working-directory: templates/${{ matrix.template }}
       - run: pnpm compile
         if: matrix.template != 'svelte'

.npmrc

@@ -1 +0,0 @@
-ignore-workspace-root-check=true

demo/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "demo",
-  "version": "1.0.0",
-  "description": "Demo extension for WXT",
-  "type": "module",
-  "scripts": {
-    "dev": "pnpm -w build && wxt",
-    "build": "pnpm -w build && wxt build",
-    "build:all": "pnpm -w build && run-s -s 'build:all:*'",
-    "build:all:chrome-mv3": "wxt build",
-    "build:all:chrome-mv2": "wxt build --mv2",
-    "build:all:firefox-mv3": "wxt build -b firefox --mv3",
-    "build:all:firefox-mv2": "wxt build -b firefox",
-    "test": "pnpm -w build && vitest",
-    "zip": "pnpm -w build && wxt zip",
-    "compile": "pnpm -w build && tsc --noEmit",
-    "postinstall": "pnpm -w build && wxt prepare"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vitest": "^1.2.2"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "sass": "^1.69.5",
-    "wxt": "workspace:*"
-  }
-}

docs/.vitepress/plugins/generate-cli-docs.ts

@@ -6,7 +6,7 @@ import { execaCommand } from 'execa';
 
 let hasGenerated = false;
 
-const cliDir = resolve('src/cli/commands');
+const cliDir = resolve('packages/wxt/src/cli/commands');
 const cliDirGlob = resolve(cliDir, '**');
 const cliTemplatePath = resolve('docs/.vitepress/plugins/cli.tpl.md');
 const cliPath = resolve('docs/api/cli.md');
@@ -23,7 +23,9 @@ export function generateCliDocs() {
   const generateDocs = async () => {
     consola.info(`Generating ${relative(process.cwd(), cliPath)}`);
     try {
-      const res = await execaCommand('pnpm -s wxt --help');
+      const res = await execaCommand('pnpm -s wxt --help', {
+        cwd: 'packages/wxt',
+      });
       const dev = splitInfo(res.stdout);
       const lines: Array<string | string[]> = [
         `## \`wxt\``,
@@ -34,7 +36,9 @@ export function generateCliDocs() {
 
       const commands = await Promise.allSettled(
         extractCommands(dev.info).map(async (command) => {
-          const res = await execaCommand(`pnpm -s wxt ${command} --help`);
+          const res = await execaCommand(`pnpm -s wxt ${command} --help`, {
+            cwd: 'packages/wxt',
+          });
           const { rest: docs } = splitInfo(res.stdout);
           return [`## \`wxt ${command}\``, '```sh', docs, '```'];
         }),

docs/guide/manifest.md

@@ -69,7 +69,7 @@ public/
 
 Icon files need to match the following regex to be automatically included in the manifest. Most design software can output icons in one of these formats
 
-<<< @/../src/core/utils/manifest.ts#snippet
+<<< @/../packages/wxt/src/core/utils/manifest.ts#snippet
 
 If you prefer to use filenames in a different format, you can add the icons manually in your `wxt.config.ts` file:
 

docs/typedoc.json

@@ -1,12 +1,7 @@
 {
-  "entryPoints": [
-    "../src",
-    "../src/client",
-    "../src/browser.ts",
-    "../src/sandbox",
-    "../src/storage.ts",
-    "../src/testing"
-  ],
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPointStrategy": "packages",
+  "entryPoints": ["../packages/wxt"],
   "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],
   "out": "./api",
   "githubPages": false,

package.json

@@ -1,97 +1,15 @@
 {
-  "name": "wxt",
+  "private": true,
   "type": "module",
-  "version": "0.17.12",
-  "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
     "pnpm": ">=8"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wxt-dev/wxt"
-  },
-  "homepage": "https://wxt.dev",
-  "keywords": [
-    "vite",
-    "chrome",
-    "web",
-    "extension",
-    "browser",
-    "bundler",
-    "framework"
-  ],
-  "author": {
-    "name": "Aaron Klinker",
-    "email": "aaronklinker1+wxt@gmail.com"
-  },
-  "license": "MIT",
-  "files": [
-    "bin",
-    "dist"
-  ],
-  "bin": {
-    "wxt": "./bin/wxt.mjs",
-    "wxt-publish-extension": "./bin/wxt-publish-extension.cjs"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js"
-    },
-    "./sandbox": {
-      "types": "./dist/sandbox.d.ts",
-      "import": "./dist/sandbox.js"
-    },
-    "./browser": {
-      "types": "./dist/browser.d.ts",
-      "import": "./dist/browser.js"
-    },
-    "./testing": {
-      "import": {
-        "types": "./dist/testing.d.ts",
-        "default": "./dist/testing.js"
-      },
-      "require": {
-        "types": "./dist/testing.d.cts",
-        "default": "./dist/testing.cjs"
-      }
-    },
-    "./storage": {
-      "import": {
-        "types": "./dist/storage.d.ts",
-        "default": "./dist/storage.js"
-      },
-      "require": {
-        "types": "./dist/storage.d.cts",
-        "default": "./dist/storage.cjs"
-      }
-    },
-    "./vite-builder-env": {
-      "types": "./dist/vite-builder-env.d.ts"
-    }
-  },
+  "packageManager": "pnpm@8.6.3",
   "scripts": {
-    "wxt": "tsx src/cli/index.ts",
-    "build": "tsx scripts/build.ts",
-    "check": "run-s -c check:*",
-    "check:default": "check",
-    "check:tsc-virtual": "tsc --noEmit -p src/virtual",
+    "check": "pnpm -r run check",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage.enabled \"--coverage.include=src/**\" \"--coverage.exclude=src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\"",
+    "test:coverage": "vitest run --coverage.enabled \"--coverage.include=packages/wxt/src/**\" \"--coverage.exclude=packages/wxt/src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\"",
     "prepare": "simple-git-hooks",
     "prepublish": "pnpm -s build",
     "docs:gen": "typedoc --options docs/typedoc.json",
@@ -100,79 +18,26 @@
     "docs:preview": "pnpm -s docs:gen && vitepress preview docs",
     "sync-releases": "pnpx changelogen@latest gh release"
   },
-  "dependencies": {
-    "@aklinker1/rollup-plugin-visualizer": "5.12.0",
-    "@types/webextension-polyfill": "^0.10.5",
-    "@webext-core/fake-browser": "^1.3.1",
-    "@webext-core/isolated-element": "^1.1.2",
-    "@webext-core/match-patterns": "^1.0.3",
-    "async-mutex": "^0.4.0",
-    "c12": "^1.5.1",
-    "cac": "^6.7.14",
-    "chokidar": "^3.5.3",
-    "ci-info": "^4.0.0",
-    "consola": "^3.2.3",
-    "defu": "^6.1.3",
-    "dequal": "^2.0.3",
-    "esbuild": "^0.19.5",
-    "fast-glob": "^3.3.1",
-    "filesize": "^10.0.8",
-    "fs-extra": "^11.1.1",
-    "get-port": "^7.0.0",
-    "giget": "^1.1.3",
-    "hookable": "^5.5.3",
-    "is-wsl": "^3.0.0",
-    "jiti": "^1.21.0",
-    "json5": "^2.2.3",
-    "jszip": "^3.10.1",
-    "linkedom": "^0.16.1",
-    "minimatch": "^9.0.3",
-    "natural-compare": "^1.4.0",
-    "normalize-path": "^3.0.0",
-    "nypm": "^0.3.6",
-    "open": "^10.1.0",
-    "ora": "^7.0.1",
-    "picocolors": "^1.0.0",
-    "prompts": "^2.4.2",
-    "publish-browser-extension": "^2.1.3",
-    "unimport": "^3.4.0",
-    "vite": "^5.2.8",
-    "web-ext-run": "^0.2.0",
-    "webextension-polyfill": "^0.10.0"
-  },
   "devDependencies": {
     "@aklinker1/check": "^1.1.1",
-    "@faker-js/faker": "^8.3.1",
-    "@types/fs-extra": "^11.0.4",
-    "@types/lodash.merge": "^4.6.9",
-    "@types/natural-compare": "^1.4.3",
-    "@types/node": "^20.10.3",
-    "@types/normalize-path": "^3.0.2",
-    "@types/prompts": "^2.4.9",
     "@vitest/coverage-v8": "^1.0.1",
+    "consola": "^3.2.3",
     "execa": "^8.0.1",
-    "extract-zip": "^2.0.1",
-    "happy-dom": "^13.3.8",
     "lint-staged": "^15.2.0",
-    "lodash.merge": "^4.6.2",
     "npm-run-all": "^4.1.5",
-    "p-map": "^7.0.0",
     "prettier": "^3.1.0",
-    "publint": "^0.2.6",
     "simple-git-hooks": "^2.9.0",
-    "tsup": "^8.0.1",
-    "tsx": "^4.6.2",
     "typedoc": "^0.25.4",
     "typedoc-plugin-markdown": "4.0.0-next.23",
     "typedoc-vitepress-theme": "1.0.0-next.3",
     "typescript": "^5.3.2",
     "vitepress": "1.0.0-rc.34",
-    "vitest": "^1.2.2",
+    "vitest": "^1.5.3",
     "vitest-mock-extended": "^1.3.1",
     "vitest-plugin-random-seed": "^1.0.2",
-    "vue": "^3.3.10"
+    "vue": "^3.3.10",
+    "wxt": "workspace:*"
   },
-  "packageManager": "pnpm@8.6.3",
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },

packages/wxt-demo/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "wxt-demo",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm build:deps && wxt",
+    "build:deps": "pnpm --filter wxt build",
+    "build": "pnpm build:deps && wxt build",
+    "build:all": "pnpm build:deps && run-s -s 'build:all:*'",
+    "build:all:chrome-mv3": "wxt build",
+    "build:all:chrome-mv2": "wxt build --mv2",
+    "build:all:firefox-mv3": "wxt build -b firefox --mv3",
+    "build:all:firefox-mv2": "wxt build -b firefox",
+    "test": "pnpm build:deps && vitest",
+    "zip": "pnpm build:deps && wxt zip",
+    "check": "pnpm build:deps && check",
+    "postinstall": "pnpm build:deps && wxt prepare"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.2",
+    "wxt": "workspace:*"
+  }
+}

packages/wxt-demo/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["../tsconfig.base.json", "./.wxt/tsconfig.json"],
+  "extends": ["../../tsconfig.base.json", "./.wxt/tsconfig.json"],
   "compilerOptions": {
     "allowImportingTsExtensions": true,
     "jsx": "react-jsx"

packages/wxt-demo/vitest.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vitest/config';
+import { defineProject } from 'vitest/config';
 import { WxtVitest } from 'wxt/testing';
 
-export default defineConfig({
+export default defineProject({
   test: {
     mockReset: true,
     restoreMocks: true,

packages/wxt/e2e/tests/init.test.ts

@@ -3,6 +3,7 @@ import { TestProject } from '../utils';
 import { execaCommand } from 'execa';
 import glob from 'fast-glob';
 import { mkdir, writeJson } from 'fs-extra';
+import { WXT_PACKAGE_DIR } from '../utils';
 
 describe('Init command', () => {
   it('should download and create a template', async () => {
@@ -11,6 +12,7 @@ describe('Init command', () => {
     await execaCommand(`pnpm -s wxt init ${project.root} -t vue --pm npm`, {
       env: { ...process.env, CI: 'true' },
       stdio: 'ignore',
+      cwd: WXT_PACKAGE_DIR,
     });
     const files = await glob('**/*', {
       cwd: project.root,
@@ -46,13 +48,14 @@ describe('Init command', () => {
 
   it('should throw an error if the directory is not empty', async () => {
     const project = new TestProject();
-    await mkdir(project.root);
+    await mkdir(project.root, { recursive: true });
     await writeJson(project.resolvePath('package.json'), {});
 
     await expect(() =>
       execaCommand(`pnpm -s wxt init ${project.root} -t vue --pm npm`, {
         env: { ...process.env, CI: 'true' },
         stdio: 'ignore',
+        cwd: WXT_PACKAGE_DIR,
       }),
     ).rejects.toThrowError('Command failed with exit code 1:');
   });

packages/wxt/e2e/tests/user-config.test.ts

@@ -119,7 +119,7 @@ describe('User Config', () => {
     project.addFile(
       'test.config.ts',
       `import { defineConfig } from 'wxt';
-      
+
       export default defineConfig({
         outDir: ".custom-output",
         srcDir: "src",

packages/wxt/e2e/utils.ts

@@ -1,5 +1,5 @@
-import { dirname, join, relative, resolve } from 'path';
-import fs from 'fs-extra';
+import { dirname, relative, resolve } from 'path';
+import fs, { mkdir } from 'fs-extra';
 import glob from 'fast-glob';
 import { execaCommand } from 'execa';
 import {
@@ -13,6 +13,13 @@ import {
 import { normalizePath } from '../src/core/utils/paths';
 import merge from 'lodash.merge';
 
+// Run "pnpm wxt" to use the "wxt" dev script, not the "wxt" binary from the
+// wxt package. This uses the TS files instead of the compiled JS package
+// files.
+export const WXT_PACKAGE_DIR = resolve(__dirname, '..');
+
+export const E2E_DIR = resolve(WXT_PACKAGE_DIR, 'e2e');
+
 export class TestProject {
   files: Array<[string, string]> = [];
   config: UserConfig | undefined;
@@ -23,7 +30,7 @@ export class TestProject {
     // file is cached and cannot be different between each test. Instead, we add a random ID to the
     // end to make each test's path unique.
     const id = Math.random().toString(32).substring(3);
-    this.root = join('e2e/dist', id);
+    this.root = resolve(E2E_DIR, 'dist', id);
     this.files.push([
       'package.json',
       JSON.stringify(
@@ -113,6 +120,9 @@ export class TestProject {
     await execaCommand('pnpm --ignore-workspace i --ignore-scripts', {
       cwd: this.root,
     });
+    await mkdir(resolve(this.root, 'public'), { recursive: true }).catch(
+      () => {},
+    );
   }
 
   /**
@@ -131,9 +141,7 @@ export class TestProject {
    * that can be used in a snapshot.
    */
   serializeWxtDir(): Promise<string> {
-    return this.serializeDir(
-      resolve(this.config?.srcDir ?? this.root, '.wxt/types'),
-    );
+    return this.serializeDir(resolve(this.root, '.wxt/types'));
   }
 
   /**

packages/wxt/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "wxt",
+  "type": "module",
+  "version": "0.17.12",
+  "description": "Next gen framework for developing web extensions",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wxt-dev/wxt"
+  },
+  "homepage": "https://wxt.dev",
+  "keywords": [
+    "vite",
+    "chrome",
+    "web",
+    "extension",
+    "browser",
+    "bundler",
+    "framework"
+  ],
+  "author": {
+    "name": "Aaron Klinker",
+    "email": "aaronklinker1+wxt@gmail.com"
+  },
+  "license": "MIT",
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "bin": {
+    "wxt": "./bin/wxt.mjs",
+    "wxt-publish-extension": "./bin/wxt-publish-extension.cjs"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
+    },
+    "./sandbox": {
+      "types": "./dist/sandbox.d.ts",
+      "import": "./dist/sandbox.js"
+    },
+    "./browser": {
+      "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.js"
+    },
+    "./testing": {
+      "import": {
+        "types": "./dist/testing.d.ts",
+        "default": "./dist/testing.js"
+      },
+      "require": {
+        "types": "./dist/testing.d.cts",
+        "default": "./dist/testing.cjs"
+      }
+    },
+    "./storage": {
+      "import": {
+        "types": "./dist/storage.d.ts",
+        "default": "./dist/storage.js"
+      },
+      "require": {
+        "types": "./dist/storage.d.cts",
+        "default": "./dist/storage.cjs"
+      }
+    },
+    "./vite-builder-env": {
+      "types": "./dist/vite-builder-env.d.ts"
+    }
+  },
+  "scripts": {
+    "wxt": "tsx src/cli/index.ts",
+    "build": "tsx scripts/build.ts",
+    "check": "run-s -c check:*",
+    "check:default": "check",
+    "check:tsc-virtual": "tsc --noEmit -p src/virtual",
+    "test": "vitest",
+    "test:e2e": "vitest -r e2e",
+    "test:e2e:2": "vitest --config e2e/vitest.config.ts"
+  },
+  "dependencies": {
+    "@aklinker1/rollup-plugin-visualizer": "5.12.0",
+    "@types/webextension-polyfill": "^0.10.5",
+    "@webext-core/fake-browser": "^1.3.1",
+    "@webext-core/isolated-element": "^1.1.2",
+    "@webext-core/match-patterns": "^1.0.3",
+    "async-mutex": "^0.4.0",
+    "c12": "^1.5.1",
+    "cac": "^6.7.14",
+    "chokidar": "^3.5.3",
+    "ci-info": "^4.0.0",
+    "defu": "^6.1.3",
+    "dequal": "^2.0.3",
+    "esbuild": "^0.19.5",
+    "fast-glob": "^3.3.1",
+    "filesize": "^10.0.8",
+    "fs-extra": "^11.1.1",
+    "get-port": "^7.0.0",
+    "giget": "^1.1.3",
+    "hookable": "^5.5.3",
+    "is-wsl": "^3.0.0",
+    "jiti": "^1.21.0",
+    "json5": "^2.2.3",
+    "jszip": "^3.10.1",
+    "linkedom": "^0.16.1",
+    "minimatch": "^9.0.3",
+    "natural-compare": "^1.4.0",
+    "normalize-path": "^3.0.0",
+    "nypm": "^0.3.6",
+    "open": "^10.1.0",
+    "ora": "^7.0.1",
+    "picocolors": "^1.0.0",
+    "prompts": "^2.4.2",
+    "publish-browser-extension": "^2.1.3",
+    "unimport": "^3.4.0",
+    "vite": "^5.2.8",
+    "web-ext-run": "^0.2.0",
+    "webextension-polyfill": "^0.10.0"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.1.1",
+    "@faker-js/faker": "^8.3.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/natural-compare": "^1.4.3",
+    "@types/node": "^20.10.3",
+    "@types/normalize-path": "^3.0.2",
+    "@types/prompts": "^2.4.9",
+    "execa": "^8.0.1",
+    "extract-zip": "^2.0.1",
+    "happy-dom": "^13.3.8",
+    "lodash.merge": "^4.6.2",
+    "p-map": "^7.0.0",
+    "publint": "^0.2.6",
+    "tsup": "^8.0.1",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.2"
+  }
+}

packages/wxt/src/core/builders/vite/plugins/bundleAnalysis.ts

@@ -6,7 +6,6 @@ import path from 'node:path';
 let increment = 0;
 
 export function bundleAnalysis(config: ResolvedConfig): vite.Plugin {
-  // @ts-expect-error: Vite/Rollup type mismatch, but it's fine.
   return visualizer({
     template: 'raw-data',
     filename: path.resolve(