improve dev

Author: felixmosh

packages/rsbuild-plugin-web-extension/package.json

@@ -36,6 +36,9 @@
   },
   "license": "MIT",
   "type": "module",
+  "dependencies": {
+    "jiti": "^2.0.0"
+  },
   "devDependencies": {
     "@biomejs/biome": "1.6.1",
     "@rsbuild/core": "1.4.9",

packages/rsbuild-plugin-web-extension/src/index.ts

@@ -1,13 +1,30 @@
-import type { RsbuildPlugin } from "@rsbuild/core";
-import { makeManifest } from "./manifest/make-manifest.js";
+import * as fs from "node:fs";
+import path from "node:path";
+import { type RsbuildPlugin, rspack } from "@rsbuild/core";
+import { createJiti } from "jiti";
+import ManifestParser from "./manifest/parser.js";
 
 interface Options {
-  manifest: chrome.runtime.ManifestV3;
+  manifestPath: string;
 }
 
-export const pluginWebExtension = ({ manifest }: Options): RsbuildPlugin => ({
-  name: "rsbuild:plugin-web-extension",
+const pluginName = "rsbuild:plugin-web-extension";
+
+export const pluginWebExtension = ({
+  manifestPath,
+}: Options): RsbuildPlugin => ({
+  name: pluginName,
   setup: async (api) => {
+    const jiti = createJiti(api.context.rootPath, { moduleCache: false });
+
+    const manifestSourcePath = path.resolve(api.context.rootPath, manifestPath);
+    if (!fs.existsSync(manifestSourcePath)) {
+      throw new Error(`${pluginName}: Failed to read ${manifestSourcePath}`);
+    }
+
+    const manifestModule = jiti(manifestSourcePath);
+    const manifest = manifestModule.default || manifestModule.manifest;
+
     const htmlEntryPoints = Object.entries({
       popup: manifest.action?.default_popup,
       devtools: manifest.devtools_page,
@@ -60,13 +77,39 @@ export const pluginWebExtension = ({ manifest }: Options): RsbuildPlugin => ({
           },
         },
         dev: {
-          writeToDisk: true
-        }
+          writeToDisk: true,
+        },
       });
     });
 
-    api.onAfterBuild(() => {
-      makeManifest(manifest, api.context.distPath);
+    api.onAfterCreateCompiler(({ compiler }) => {
+      if (!(compiler instanceof rspack.Compiler)) {
+        return;
+      }
+
+      compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: pluginName,
+            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+          },
+          () => {
+            compilation.fileDependencies.add(manifestSourcePath);
+
+            const updatedManifestModule = jiti(manifestPath);
+            const manifest =
+              updatedManifestModule.default || updatedManifestModule.manifest;
+            const content = ManifestParser.convertManifestToString(manifest);
+
+            const { RawSource } = compiler.webpack.sources;
+
+            const source = new RawSource(content);
+            const outputFilename = "manifest.json";
+
+            compilation.emitAsset(outputFilename, source);
+          }
+        );
+      });
     });
   },
 });

packages/rsbuild-plugin-web-extension/src/manifest/make-manifest.ts

@@ -1,9 +1,9 @@
 import * as fs from "node:fs";
 import { resolve } from "node:path";
-import ManifestParser from "./parser.js";
 import { logger } from "@rsbuild/core";
+import ManifestParser from "./parser.js";
 
-export const makeManifest = async (
+export const makeManifest = (
   manifest: chrome.runtime.ManifestV3,
   to: string
 ) => {
@@ -15,7 +15,7 @@ export const makeManifest = async (
 
   fs.writeFileSync(
     toManifest,
-    ManifestParser.convertManifestToString(manifest)
+    ManifestParser.convertManifestToString(manifest.default || manifest)
   );
 
   logger.log("Manifest file created");

packages/rsbuild-plugin-web-extension/src/manifest/parser.ts

@@ -1,21 +1,18 @@
 type Manifest = chrome.runtime.ManifestV3;
 
-const getOutputFile = (file: string): string => {
-  return file
-    .replace(/\.(scss|stylus|sass)/g, ".css")
-    .replace(/\.(jsx|ts|tsx)/g, ".js");
-};
+const fixSuffixes = (file: string): string =>
+  file.replace(/\.(s[ca]ss|stylus)/g, ".css").replace(/\.(jsx|tsx?)/g, ".js");
 
 class ManifestParser {
   private constructor() {}
 
   static convertManifestToString(_manifest: Manifest): string {
-    let manifest = { ..._manifest };
+    let manifest = structuredClone(_manifest);
     if (process.env.__FIREFOX__) {
       manifest = ManifestParser.convertToFirefoxCompatibleManifest(manifest);
     }
 
-    return getOutputFile(JSON.stringify(manifest, null, 2));
+    return fixSuffixes(JSON.stringify(manifest, null, 2));
   }
 
   static convertToFirefoxCompatibleManifest(manifest: Manifest) {