Skip to content

Commit 1ed0fad

Browse files
ScriptedAlchemyScriptedAlchemy
committed
chore: rspack direct
1 parent 56b2768 commit 1ed0fad

File tree

13 files changed

+1172
-578
lines changed

13 files changed

+1172
-578
lines changed

‎esm/remote/rsbuild.config.mjs

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export default defineConfig({
1616
rspack: {
1717
experiments: {
1818
outputModule: true,
19+
topLevelAwait: true
20+
1921
},
2022
externalsType: 'module',
2123
output: {
@@ -25,27 +27,28 @@ export default defineConfig({
2527
wasmLoading: 'fetch',
2628
library: { type: 'module' },
2729
module: true,
30+
asyncChunks: true
2831
},
29-
optimization: {
30-
runtimeChunk: 'single',
31-
},
32+
// optimization: {
33+
// runtimeChunk: 'single',
34+
// },
3235
},
3336
},
3437
plugins: [
3538
pluginReact({ splitChunks: { react: false, router: false } }),
36-
pluginModuleFederation({
37-
name: 'remote',
38-
filename: 'static/remoteEntry.js',
39-
library: {
40-
type: 'module',
41-
},
42-
exposes: {
43-
'./App': './src/App.jsx',
44-
},
45-
shared: {
46-
react: { singleton: true },
47-
'react-dom': { singleton: true },
48-
},
49-
}),
39+
// pluginModuleFederation({
40+
// name: 'remote',
41+
// filename: 'static/remoteEntry.js',
42+
// library: {
43+
// type: 'module',
44+
// },
45+
// exposes: {
46+
// './App': './src/App.jsx',
47+
// },
48+
// shared: {
49+
// react: { singleton: true },
50+
// 'react-dom': { singleton: true },
51+
// },
52+
// }),
5053
],
5154
});

‎esm/rspack/.gitignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Local
2+
.DS_Store
3+
*.local
4+
*.log*
5+
6+
# Dist
7+
node_modules
8+
dist/
9+
10+
# IDE
11+
.vscode/*
12+
!.vscode/extensions.json
13+
.idea

‎esm/rspack/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Rspack project
2+
3+
## Setup
4+
5+
Install the dependencies:
6+
7+
```bash
8+
npm install
9+
```
10+
11+
## Get started
12+
13+
Start the dev server:
14+
15+
```bash
16+
npm run dev
17+
```
18+
19+
Build the app for production:
20+
21+
```bash
22+
npm run build
23+
```

‎esm/rspack/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Rspack + React</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎esm/rspack/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "rspack",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"dev": "cross-env NODE_ENV=development rspack serve",
7+
"build": "cross-env NODE_ENV=production rspack build"
8+
},
9+
"dependencies": {
10+
"@module-federation/enhanced": "^0.9.1",
11+
"@module-federation/rspack": "^0.9.1",
12+
"react": "^19.0.0",
13+
"react-dom": "^19.0.0"
14+
},
15+
"devDependencies": {
16+
"@rspack/cli": "^1.2.6",
17+
"@rspack/core": "^1.2.6",
18+
"@rspack/plugin-react-refresh": "^1.0.1",
19+
"@types/react": "^19.0.10",
20+
"@types/react-dom": "^19.0.4",
21+
"cross-env": "^7.0.3",
22+
"react-refresh": "^0.16.0"
23+
}
24+
}

‎esm/rspack/rspack.config.mjs

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { dirname } from 'node:path';
2+
import { fileURLToPath } from 'node:url';
3+
import { defineConfig } from '@rspack/cli';
4+
import { rspack } from '@rspack/core';
5+
import RefreshPlugin from '@rspack/plugin-react-refresh';
6+
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
7+
8+
const __dirname = dirname(fileURLToPath(import.meta.url));
9+
const isDev = process.env.NODE_ENV === 'development';
10+
11+
// Target browsers, see: https://github.com/browserslist/browserslist
12+
const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
13+
14+
export default defineConfig({
15+
context: __dirname,
16+
entry: {
17+
main: './src/main.jsx',
18+
},
19+
resolve: {
20+
extensions: ['...', '.ts', '.tsx', '.jsx'],
21+
},
22+
devServer: {
23+
devMiddleware: {
24+
writeToDisk: true
25+
}
26+
},
27+
module: {
28+
rules: [
29+
{
30+
test: /\.svg$/,
31+
type: 'asset',
32+
},
33+
{
34+
test: /\.(jsx?|tsx?)$/,
35+
use: [
36+
{
37+
loader: 'builtin:swc-loader',
38+
options: {
39+
jsc: {
40+
parser: {
41+
syntax: 'typescript',
42+
tsx: true,
43+
},
44+
transform: {
45+
react: {
46+
runtime: 'automatic',
47+
development: isDev,
48+
refresh: isDev,
49+
},
50+
},
51+
},
52+
env: { targets },
53+
},
54+
},
55+
],
56+
},
57+
],
58+
},
59+
plugins: [
60+
new ModuleFederationPlugin({
61+
name: 'rspack',
62+
filename: 'remoteEntry.js',
63+
exposes: {
64+
'./tjing': './src/App.jsx'
65+
},
66+
shared: {
67+
react: {
68+
singleton: true,
69+
},
70+
},
71+
}),
72+
new rspack.HtmlRspackPlugin({
73+
template: './index.html',
74+
scriptLoading: 'module',
75+
}),
76+
isDev ? new RefreshPlugin() : null,
77+
].filter(Boolean),
78+
optimization: {
79+
minimizer: [
80+
new rspack.SwcJsMinimizerRspackPlugin(),
81+
new rspack.LightningCssMinimizerRspackPlugin({
82+
minimizerOptions: { targets },
83+
}),
84+
],
85+
},
86+
experiments: {
87+
outputModule: true,
88+
css: true,
89+
},
90+
externalsType: 'module',
91+
output: {
92+
chunkFormat: 'module',
93+
chunkLoading: 'import',
94+
workerChunkLoading: 'import',
95+
wasmLoading: 'fetch',
96+
library: { type: 'module' },
97+
module: true,
98+
},
99+
});

‎esm/rspack/src/App.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
}
13+
.logo:hover {
14+
filter: drop-shadow(0 0 2em #646cffaa);
15+
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
19+
20+
@keyframes logo-spin {
21+
from {
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
@media (prefers-reduced-motion: no-preference) {
30+
a > .logo {
31+
animation: logo-spin infinite 20s linear;
32+
}
33+
}
34+
35+
.card {
36+
padding: 2em;
37+
}
38+
39+
.read-the-docs {
40+
color: #888;
41+
}

‎esm/rspack/src/App.jsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import { useState } from "react";
3+
import reactLogo from "./assets/react.svg";
4+
import "./App.css";
5+
6+
function App() {
7+
const [count, setCount] = useState(0);
8+
9+
return (
10+
<div className="App">
11+
<div>
12+
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
13+
<img src={reactLogo} className="logo react" alt="React logo" />
14+
</a>
15+
</div>
16+
<h1>Rspack + React</h1>
17+
<div className="card">
18+
<button type="button" onClick={() => setCount(count => count + 1)}>
19+
count is {count}
20+
</button>
21+
<p>
22+
Edit <code>src/App.jsx</code> and save to test HMR
23+
</p>
24+
</div>
25+
<p className="read-the-docs">
26+
Click on the Rspack and React logos to learn more
27+
</p>
28+
</div>
29+
);
30+
}
31+
32+
export default App;

‎esm/rspack/src/assets/react.svg

Lines changed: 1 addition & 0 deletions
Loading

‎esm/rspack/src/bootstrap.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root')).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
10+
)

0 commit comments

Comments
 (0)