feat: Add @wxt-dev/module-react package (#729)

packages/module-react/README.md

@@ -0,0 +1,32 @@
+# `@wxt-dev/module-react`
+
+Enables the use of [React](https://react.dev/) in your web extension, in HTML pages and content scripts.
+
+This plugin makes a few changes:
+
+1. Adds `@vitejs/plugin-react` to vite
+2. Adds the [`react` preset](https://github.com/unjs/unimport/blob/main/src/presets/react.ts) to auto-imports
+
+## Usage
+
+```sh
+pnpm i react react-dom
+pnpm i -D @wxt-dev/module-react
+```
+
+Then add the module to your config:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  // Required
+  modules: ['@wxt-dev/module-react'],
+
+  // Optional: Pass options to the module:
+  react: {
+    vite: {
+      // ...
+    },
+  },
+});
+```

packages/module-react/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@wxt-dev/module-react",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm -s build-deps && unbuild",
+    "check": "pnpm -s build-deps && check",
+    "build-deps": "pnpm -ws build-deps @wxt-dev/module-react"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^5.3.0",
+    "wxt": ">=0.18.5"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "linkedom": "^0.18.3"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.3.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "publint": "^0.2.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "vite": "^5.3.0",
+    "wxt": "workspace:*"
+  }
+}

packages/module-react/src/index.ts

@@ -0,0 +1,27 @@
+import 'wxt';
+import { addImportPreset, addViteConfig, defineWxtModule } from 'wxt/modules';
+import react, { Options as PluginOptions } from '@vitejs/plugin-react';
+
+export default defineWxtModule<ReactModuleOptions>({
+  name: '@wxt-dev/module-react',
+  configKey: 'react',
+  setup(wxt, options) {
+    const { vite } = options ?? {};
+
+    addViteConfig(wxt, () => ({
+      plugins: [react(vite)],
+    }));
+
+    addImportPreset(wxt, 'react');
+  },
+});
+
+export interface ReactModuleOptions {
+  vite?: PluginOptions;
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    react?: ReactModuleOptions;
+  }
+}

packages/module-react/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}