feat: add ESM application example (#324)

fi3ework · web-flow · commit 57fe0e37d0b0 · 2025-08-08T17:59:19.000+08:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/rspack/react-refresh-esm/package.json 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
@@ -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
@@ -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 (
+    <div>
+      <ClassDefault />
+      <ClassNamed />
+      <FunctionDefault />
+      <FunctionNamed />
+      <ArrowFunction />
+      <Suspense fallback={<h1>Loading</h1>}>
+        <LazyComponent />
+      </Suspense>
+    </div>
+  );
+}
+
+export default App;
diff --git a/rspack/react-refresh-esm/src/ArrowFunction.tsx b/rspack/react-refresh-esm/src/ArrowFunction.tsx
@@ -0,0 +1 @@
+export const ArrowFunction = () => <h1>Arrow Function</h1>;
diff --git a/rspack/react-refresh-esm/src/ClassDefault.tsx b/rspack/react-refresh-esm/src/ClassDefault.tsx
@@ -0,0 +1,9 @@
+import { Component } from 'react';
+
+class ClassDefault extends Component {
+  render() {
+    return <h1>Default Export Class</h1>;
+  }
+}
+
+export default ClassDefault;
diff --git a/rspack/react-refresh-esm/src/ClassNamed.tsx b/rspack/react-refresh-esm/src/ClassNamed.tsx
@@ -0,0 +1,7 @@
+import { Component } from 'react';
+
+export class ClassNamed extends Component {
+  render() {
+    return <h1>Named Export Class</h1>;
+  }
+}
diff --git a/rspack/react-refresh-esm/src/FunctionDefault.tsx b/rspack/react-refresh-esm/src/FunctionDefault.tsx
@@ -0,0 +1,5 @@
+function FunctionDefault() {
+  return <h1>Default Export Function</h1>;
+}
+
+export default FunctionDefault;
diff --git a/rspack/react-refresh-esm/src/FunctionNamed.tsx 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 <h1>Named Export Function {data}</h1>;
+}
diff --git a/rspack/react-refresh-esm/src/LazyComponent.tsx b/rspack/react-refresh-esm/src/LazyComponent.tsx
@@ -0,0 +1,5 @@
+function LazyComponent() {
+  return <h1>Lazy Component</h1>;
+}
+
+export default LazyComponent;
diff --git a/rspack/react-refresh-esm/src/index.tsx 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(<App />);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const ArrowFunction = () => <h1>Arrow Function</h1>;`