diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6302b567d..418b4635f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2337,6 +2337,28 @@ importers: specifier: 0.17.0 version: 0.17.0 + rspack/react-refresh-esm: + dependencies: + react: + specifier: ^19.1.0 + version: 19.1.0 + react-dom: + specifier: ^19.1.0 + version: 19.1.0(react@19.1.0) + devDependencies: + '@rspack/cli': + specifier: 1.4.10 + version: 1.4.10(@rspack/core@1.4.10(@swc/helpers@0.5.17)) + '@rspack/core': + specifier: 1.4.10 + version: 1.4.10(@swc/helpers@0.5.17) + '@rspack/plugin-react-refresh': + specifier: ^1.4.3 + version: 1.4.3(react-refresh@0.17.0)(webpack-hot-middleware@2.26.1) + react-refresh: + specifier: 0.17.0 + version: 0.17.0 + rspack/react-with-extract-css: dependencies: '@rspack/cli': diff --git a/rspack/library-esm/rspack.config.mjs b/rspack/library-esm/rspack.config.mjs index 98ce763d3..e17d1a1fb 100644 --- a/rspack/library-esm/rspack.config.mjs +++ b/rspack/library-esm/rspack.config.mjs @@ -12,6 +12,8 @@ export default defineConfig({ library: { type: "modern-module", }, + chunkLoading: 'import', + workerChunkLoading: 'import', }, module: { parser: { @@ -21,6 +23,8 @@ export default defineConfig({ }, }, optimization: { + concatenateModules: true, + avoidEntryIife: true, minimize: false, // no need to minify for library }, experiments: { diff --git a/rspack/react-refresh-esm/index.html b/rspack/react-refresh-esm/index.html new file mode 100644 index 000000000..1fd94734c --- /dev/null +++ b/rspack/react-refresh-esm/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + +
+ + + \ No newline at end of file diff --git a/rspack/react-refresh-esm/package.json b/rspack/react-refresh-esm/package.json new file mode 100644 index 000000000..c7f57de3d --- /dev/null +++ b/rspack/react-refresh-esm/package.json @@ -0,0 +1,21 @@ +{ + "name": "example-rspack-react-refresh-esm", + "version": "1.0.0", + "private": true, + "license": "MIT", + "main": "index.js", + "scripts": { + "build": "cross-env NODE_ENV=production rspack build", + "dev": "rspack serve " + }, + "dependencies": { + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@rspack/cli": "1.4.10", + "@rspack/core": "1.4.10", + "@rspack/plugin-react-refresh": "^1.4.3", + "react-refresh": "0.17.0" + } +} diff --git a/rspack/react-refresh-esm/rspack.config.js b/rspack/react-refresh-esm/rspack.config.js new file mode 100644 index 000000000..f27211e7a --- /dev/null +++ b/rspack/react-refresh-esm/rspack.config.js @@ -0,0 +1,55 @@ +const { rspack } = require('@rspack/core'); +const ReactRefreshPlugin = require('@rspack/plugin-react-refresh'); + +const isProduction = process.env.NODE_ENV === 'production'; + +/** @type {import('@rspack/cli').Configuration} */ +const config = { + entry: { main: './src/index.tsx' }, + devtool: 'source-map', + output: { + module: true, + chunkFormat: 'array-push', + chunkLoading: 'jsonp', + workerChunkLoading: 'import', + }, + resolve: { + extensions: ['...', '.ts', '.tsx', '.jsx'], + }, + experiments: { + css: true, + outputModule: true, + }, + module: { + rules: [ + { + test: /\.tsx$/, + use: { + loader: 'builtin:swc-loader', + options: { + sourceMap: true, + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + transform: { + react: { + runtime: 'automatic', + development: !isProduction, + refresh: !isProduction, + }, + }, + }, + }, + }, + }, + ], + }, + plugins: [ + new rspack.HtmlRspackPlugin({ template: './index.html', scriptLoading: "module" }), + !isProduction && new ReactRefreshPlugin(), + ].filter(Boolean), +}; + +module.exports = config; diff --git a/rspack/react-refresh-esm/src/App.tsx b/rspack/react-refresh-esm/src/App.tsx new file mode 100644 index 000000000..b453c2aef --- /dev/null +++ b/rspack/react-refresh-esm/src/App.tsx @@ -0,0 +1,25 @@ +import { lazy, Suspense } from 'react'; +import { ArrowFunction } from './ArrowFunction'; +import ClassDefault from './ClassDefault'; +import { ClassNamed } from './ClassNamed'; +import FunctionDefault from './FunctionDefault'; +import { FunctionNamed } from './FunctionNamed'; + +const LazyComponent = lazy(() => import('./LazyComponent')); + +function App() { + return ( +
+ + + + + + Loading}> + + +
+ ); +} + +export default App; diff --git a/rspack/react-refresh-esm/src/ArrowFunction.tsx b/rspack/react-refresh-esm/src/ArrowFunction.tsx new file mode 100644 index 000000000..608e550f3 --- /dev/null +++ b/rspack/react-refresh-esm/src/ArrowFunction.tsx @@ -0,0 +1 @@ +export const ArrowFunction = () =>

Arrow Function

; diff --git a/rspack/react-refresh-esm/src/ClassDefault.tsx b/rspack/react-refresh-esm/src/ClassDefault.tsx new file mode 100644 index 000000000..b5a90ef61 --- /dev/null +++ b/rspack/react-refresh-esm/src/ClassDefault.tsx @@ -0,0 +1,9 @@ +import { Component } from 'react'; + +class ClassDefault extends Component { + render() { + return

Default Export Class

; + } +} + +export default ClassDefault; diff --git a/rspack/react-refresh-esm/src/ClassNamed.tsx b/rspack/react-refresh-esm/src/ClassNamed.tsx new file mode 100644 index 000000000..c4ad14d01 --- /dev/null +++ b/rspack/react-refresh-esm/src/ClassNamed.tsx @@ -0,0 +1,7 @@ +import { Component } from 'react'; + +export class ClassNamed extends Component { + render() { + return

Named Export Class

; + } +} diff --git a/rspack/react-refresh-esm/src/FunctionDefault.tsx b/rspack/react-refresh-esm/src/FunctionDefault.tsx new file mode 100644 index 000000000..f886ae3e1 --- /dev/null +++ b/rspack/react-refresh-esm/src/FunctionDefault.tsx @@ -0,0 +1,5 @@ +function FunctionDefault() { + return

Default Export Function

; +} + +export default FunctionDefault; diff --git a/rspack/react-refresh-esm/src/FunctionNamed.tsx b/rspack/react-refresh-esm/src/FunctionNamed.tsx new file mode 100644 index 000000000..33d17ea49 --- /dev/null +++ b/rspack/react-refresh-esm/src/FunctionNamed.tsx @@ -0,0 +1,13 @@ +import { useEffect, useState } from 'react'; + +export function FunctionNamed() { + const [data, setData] = useState(0); + + useEffect(() => { + setInterval(() => { + setData((i) => i + 1); + }, 100); + }, []); + + return

Named Export Function {data}

; +} diff --git a/rspack/react-refresh-esm/src/LazyComponent.tsx b/rspack/react-refresh-esm/src/LazyComponent.tsx new file mode 100644 index 000000000..fe0fecab4 --- /dev/null +++ b/rspack/react-refresh-esm/src/LazyComponent.tsx @@ -0,0 +1,5 @@ +function LazyComponent() { + return

Lazy Component

; +} + +export default LazyComponent; diff --git a/rspack/react-refresh-esm/src/index.tsx b/rspack/react-refresh-esm/src/index.tsx new file mode 100644 index 000000000..0799734a3 --- /dev/null +++ b/rspack/react-refresh-esm/src/index.tsx @@ -0,0 +1,6 @@ +import { createRoot } from 'react-dom/client'; +import App from './App'; + +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render();