feat: add with-react examples

eungyeole · eungyeole · commit 90fa3ae1c8d0 · 2025-07-24T15:28:08.000+09:00
diff --git a/examples/with-react/manifest.ts b/examples/with-react/manifest.ts
@@ -0,0 +1,19 @@
+import fs from "fs";
+const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf8"));
+
+const manifest: chrome.runtime.ManifestV3 = {
+  manifest_version: 3,
+  name: packageJson.name,
+  version: packageJson.version,
+  description: packageJson.description || "",
+  action: {
+    default_popup: "./src/popup/index.html",
+  },
+  background: {
+    service_worker: "./src/background/index.ts",
+    type: "module",
+  },
+  devtools_page: "./src/devtools/index.html",
+};
+
+export default manifest;
diff --git a/examples/with-react/package.json b/examples/with-react/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "rsbuild-chrome-extension-boilerplate-react",
+  "description": "A boilerplate for building Chrome extensions with rsbuild and React",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build:watch": "rsbuild build --watch",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "type": "module",
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "rsbuild-plugin-web-extension": "0.0.10",
+    "@rsbuild/core": "^1.0.16",
+    "@rsbuild/plugin-react": "^1.0.5",
+    "@types/chrome": "^0.0.263",
+    "@types/node": "^20.11.28",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.4.2"
+  }
+}
diff --git a/examples/with-react/rsbuild.config.ts b/examples/with-react/rsbuild.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { pluginWebExtension } from "rsbuild-plugin-web-extension";
+import manifest from "./manifest";
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    pluginWebExtension({
+      manifest,
+    }),
+  ],
+});
diff --git a/examples/with-react/src/background/index.ts b/examples/with-react/src/background/index.ts
@@ -0,0 +1 @@
+console.log("background script");
diff --git a/examples/with-react/src/devtools/devtools.tsx b/examples/with-react/src/devtools/devtools.tsx
@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+export const DevTools = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+};
diff --git a/examples/with-react/src/devtools/index.html b/examples/with-react/src/devtools/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>DevTools</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+  <script type="module" src="./index.tsx"></script>
+</html>
diff --git a/examples/with-react/src/devtools/index.tsx b/examples/with-react/src/devtools/index.tsx
@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { DevTools } from "./devtools";
+
+const root = createRoot(document.querySelector("#root")!);
+
+root.render(<DevTools />);
diff --git a/examples/with-react/src/env.d.ts b/examples/with-react/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />
diff --git a/examples/with-react/src/popup/index.html b/examples/with-react/src/popup/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Popup</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+  <script type="module" src="./index.tsx"></script>
+</html>
diff --git a/examples/with-react/src/popup/index.tsx b/examples/with-react/src/popup/index.tsx
@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { Popup } from "./popup";
+
+const root = createRoot(document.querySelector("#root")!);
+
+root.render(<Popup />);
diff --git a/examples/with-react/src/popup/popup.tsx b/examples/with-react/src/popup/popup.tsx
@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+export const Popup = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+};
diff --git a/examples/with-react/tsconfig.json b/examples/with-react/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "baseUrl": ".",
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}
diff --git a/package.json b/package.json
@@ -10,7 +10,10 @@
     "ci:publish": "pnpm publish -r"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.6.1",
     "@changesets/cli": "^2.27.1",
-    "@biomejs/biome": "1.6.1"
-  }
+    "@types/chrome": "^0.0.263",
+    "@types/node": "^24.1.0"
+  },
+  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+/// <reference types="@rsbuild/core/types" />`