diff --git a/examples/react-hmr/manifest.json b/examples/react-hmr/manifest.json index d57e9f2..0b08efb 100644 --- a/examples/react-hmr/manifest.json +++ b/examples/react-hmr/manifest.json @@ -3,7 +3,7 @@ "name": "React Web Extension HMR test", "version": "1.0.0", "background": { - "service_worker": "./sw.js" + "service_worker": "./background_generated_entry.js" }, "web_accessible_resources": [ { @@ -14,7 +14,7 @@ "content_scripts": [ { "matches": [""], - "js": ["./content.js"] + "js": ["./content_script_generated_entry.js"] } ], "permissions": ["storage", "scripting", "tabs"], diff --git a/examples/react-hmr/package.json b/examples/react-hmr/package.json index 1c7c54e..5c235b5 100755 --- a/examples/react-hmr/package.json +++ b/examples/react-hmr/package.json @@ -12,6 +12,7 @@ "@types/react": "^19.0.1", "@types/react-dom": "^19.0.1", "@types/webextension-polyfill": "^0.12.1", + "@types/webpack-env": "^1.18.8", "css-loader": "^7.1.2", "html-webpack-plugin": "^5.6.3", "react-refresh": "^0.16.0", diff --git a/examples/react-hmr/rspack.config.mjs b/examples/react-hmr/rspack.config.mjs index fe47afe..00bfb38 100755 --- a/examples/react-hmr/rspack.config.mjs +++ b/examples/react-hmr/rspack.config.mjs @@ -56,19 +56,16 @@ export default (/** @type {any} */ _, /** @type {{ mode: string; }} */ env) => { new WebExtension({ background: { serviceWorkerEntry: 'background' }, experimental_output: { - background: 'sw.js', + background: 'background_generated_entry.js', + content: 'content_script_generated_entry.js', }, }), isProduction ? null : new RefreshPlugin(), ].filter(Boolean), optimization: { minimizer: [false], - // runtimeChunk: { - // name: (entrypoint) => `runtime-${entrypoint.name}`, - // }, splitChunks: { chunks: 'all', - // minSize: 1, }, }, experiments: { css: true }, diff --git a/examples/react-hmr/src/content-script/index.tsx b/examples/react-hmr/src/content-script/index.tsx index cd46edd..c68998c 100644 --- a/examples/react-hmr/src/content-script/index.tsx +++ b/examples/react-hmr/src/content-script/index.tsx @@ -1,11 +1,18 @@ import { createRoot } from 'react-dom/client' import { App } from './App.tsx' -if (document.readyState === 'complete') initial() +let unmount: () => void +import.meta.webpackHot?.accept() +import.meta.webpackHot?.dispose(() => unmount?.()) + +console.log('Extension running!') + +if (document.readyState === 'complete') unmount = initial() else document.addEventListener('readystatechange', () => { - if (document.readyState === 'complete') initial() + if (document.readyState === 'complete') unmount = initial() }) + function initial() { const root = document.createElement('div') const shadow = root.attachShadow({ mode: 'open' }) @@ -15,17 +22,15 @@ function initial() { shadow.adoptedStyleSheets = [style] fetchCSS().then((response) => style.replace(response)) - if (import.meta.webpackHot) { - import.meta.webpackHot.accept('./style.css', () => { - fetchCSS().then((response) => style.replace(response)) - }) - } + import.meta.webpackHot?.accept('./style.css', () => { + fetchCSS().then((response) => style.replace(response)) + }) - createRoot(shadow).render() -} -declare global { - interface ImportMeta { - webpackHot?: any + const mountingPoint = createRoot(shadow) + mountingPoint.render() + return () => { + mountingPoint.unmount() + root.remove() } } diff --git a/examples/react-hmr/webpack.config.mjs b/examples/react-hmr/webpack.config.mjs index 3cf6cd6..42eb136 100755 --- a/examples/react-hmr/webpack.config.mjs +++ b/examples/react-hmr/webpack.config.mjs @@ -58,7 +58,8 @@ const config = (/** @type {any} */ _, /** @type {{ mode: string; }} */ env) => { new WebExtension({ background: { serviceWorkerEntry: 'background' }, experimental_output: { - background: 'sw.js', + background: 'background_generated_entry.js', + content: 'content_script_generated_entry.js', }, weakRuntimeCheck: true, // because of HtmlWebpackPlugin }), @@ -66,12 +67,8 @@ const config = (/** @type {any} */ _, /** @type {{ mode: string; }} */ env) => { ].filter(Boolean), optimization: { minimizer: [false], - // runtimeChunk: { - // name: (entrypoint) => `runtime-${entrypoint.name}`, - // }, splitChunks: { chunks: 'all', - // minSize: 1, }, }, experiments: { css: true }, diff --git a/examples/react-hmr/yarn.lock b/examples/react-hmr/yarn.lock index b009cfe..dc93714 100755 --- a/examples/react-hmr/yarn.lock +++ b/examples/react-hmr/yarn.lock @@ -462,6 +462,11 @@ resolved "https://registry.yarnpkg.com/@types/webextension-polyfill/-/webextension-polyfill-0.12.1.tgz#8dae244fe094cbb541005362e8e22f16671f6054" integrity sha512-xPTFWwQ8BxPevPF2IKsf4hpZNss4LxaOLZXypQH4E63BDLmcwX/RMGdI4tB4VO4Nb6xDBH3F/p4gz4wvof1o9w== +"@types/webpack-env@^1.18.8": + version "1.18.8" + resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.8.tgz#71f083718c094204d7b64443701d32f1db3989e3" + integrity sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A== + "@types/ws@^8.5.10": version "8.5.13" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.13.tgz#6414c280875e2691d0d1e080b05addbf5cb91e20"