From 907f4d36723006640ea28fc64e5ea9d1464254c1 Mon Sep 17 00:00:00 2001
From: Aaron <aaronklinker1@gmail.com>
Date: Thu, 13 Jun 2024 22:53:40 -0500
Subject: [PATCH]  feat: Add `@wxt-dev/module-react` package (#729)

---
 packages/module-react/README.md     | 32 ++++++++++++++++++
 packages/module-react/package.json  | 50 +++++++++++++++++++++++++++++
 packages/module-react/src/index.ts  | 27 ++++++++++++++++
 packages/module-react/tsconfig.json |  4 +++
 4 files changed, 113 insertions(+)
 create mode 100644 packages/module-react/README.md
 create mode 100644 packages/module-react/package.json
 create mode 100644 packages/module-react/src/index.ts
 create mode 100644 packages/module-react/tsconfig.json

diff --git a/packages/module-react/README.md b/packages/module-react/README.md
new file mode 100644
index 00000000..838d1b51
--- /dev/null
+++ b/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: {
+      // ...
+    },
+  },
+});
+```
diff --git a/packages/module-react/package.json b/packages/module-react/package.json
new file mode 100644
index 00000000..cdd25fde
--- /dev/null
+++ b/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:*"
+  }
+}
diff --git a/packages/module-react/src/index.ts b/packages/module-react/src/index.ts
new file mode 100644
index 00000000..5ed81587
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/module-react/tsconfig.json b/packages/module-react/tsconfig.json
new file mode 100644
index 00000000..9b2dc061
--- /dev/null
+++ b/packages/module-react/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}