feat: enable dev/HMR for react template content scripts (#9)

also fix class usages in content scripts

Author: samrum

package.json

@@ -17,7 +17,8 @@
     "build": "esbuild --bundle index.js --format=cjs --platform=node --outfile=create.cjs",
     "lint": "prettier --write .",
     "prepare": "husky install",
-    "release": "standard-version --sign"
+    "release": "standard-version --sign",
+    "snapshot": "node scripts/snapshot.mjs"
   },
   "standard-version": {
     "scripts": {

template/framework/react-ts/src/entries/contentScript/primary/App.tsx

@@ -5,7 +5,7 @@ function App() {
   const logoImageUrl = new URL(logo, import.meta.url).href;
 
   return (
-    <div class="logo">
+    <div className="logo">
       <img src={logoImageUrl} height="50" alt="" />
     </div>
   );

template/framework/react-ts/src/entries/contentScript/primary/main.tsx

@@ -1,3 +1,4 @@
+import "../../enableDevHmr";
 import React from "react";
 import ReactDOM from "react-dom";
 import renderContent from "../renderContent";

template/framework/react-ts/src/entries/enableDevHmr.js

@@ -0,0 +1,8 @@
+import RefreshRuntime from "/@react-refresh";
+
+if (import.meta.hot) {
+  RefreshRuntime.injectIntoGlobalHook(window);
+  window.$RefreshReg$ = () => {};
+  window.$RefreshSig$ = () => (type) => type;
+  window.__vite_plugin_react_preamble_installed__ = true;
+}

template/framework/react-ts/src/entries/options/main.tsx

@@ -1,3 +1,4 @@
+import "../enableDevHmr";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";

template/framework/react-ts/src/entries/popup/main.tsx

@@ -1,3 +1,4 @@
+import "../enableDevHmr";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";

template/framework/react/src/entries/contentScript/enableDevHmr.js

@@ -0,0 +1,8 @@
+import RefreshRuntime from "/@react-refresh";
+
+if (import.meta.hot) {
+  RefreshRuntime.injectIntoGlobalHook(window);
+  window.$RefreshReg$ = () => {};
+  window.$RefreshSig$ = () => (type) => type;
+  window.__vite_plugin_react_preamble_installed__ = true;
+}

template/framework/react/src/entries/contentScript/primary/App.jsx

@@ -5,7 +5,7 @@ function App() {
   const logoImageUrl = new URL(logo, import.meta.url).href;
 
   return (
-    <div class="logo">
+    <div className="logo">
       <img src={logoImageUrl} height="50" alt="" />
     </div>
   );

template/framework/react/src/entries/contentScript/primary/main.jsx

@@ -1,3 +1,4 @@
+import "../enableDevHmr";
 import React from "react";
 import ReactDOM from "react-dom";
 import renderContent from "../renderContent";