Skip to content

Commit 29af439

Browse files
9aoy9aoy
committed
feat(rstest): add rspack-adapter example
1 parent 49734fb commit 29af439

File tree

16 files changed

+579
-34
lines changed

16 files changed

+579
-34
lines changed

‎pnpm-lock.yaml‎

Lines changed: 224 additions & 34 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rstest/rspack-adapter/.gitignore‎

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

‎rstest/rspack-adapter/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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, and the app will be available at <http://localhost:8080>.
14+
15+
```bash
16+
npm run dev
17+
```
18+
19+
Build the app for production:
20+
21+
```bash
22+
npm run build
23+
```
24+
25+
Preview the production build locally:
26+
27+
```bash
28+
npm run preview
29+
```
30+
31+
## Learn more
32+
33+
To learn more about Rspack, check out the following resources:
34+
35+
- [Rspack documentation](https://rspack.rs) - explore Rspack features and APIs.
36+
- [Rspack GitHub repository](https://github.com/web-infra-dev/rspack) - your feedback and contributions are welcome!

‎rstest/rspack-adapter/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/react.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Rspack + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎rstest/rspack-adapter/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@rstest-example/rspack-adapter",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"build": "rspack build",
7+
"dev": "rspack dev",
8+
"preview": "rspack preview",
9+
"test": "rstest",
10+
"test:watch": "rstest --watch"
11+
},
12+
"dependencies": {
13+
"react": "^19.2.4",
14+
"react-dom": "^19.2.4"
15+
},
16+
"devDependencies": {
17+
"@rsbuild/plugin-react": "^1.4.5",
18+
"@rspack/cli": "2.0.0-beta.5",
19+
"@rspack/core": "2.0.0-beta.5",
20+
"@rspack/dev-server": "2.0.0-beta.5",
21+
"@rspack/plugin-react-refresh": "^1.6.1",
22+
"@rstest/core": "^0.9.1",
23+
"@testing-library/dom": "^10.4.1",
24+
"@testing-library/jest-dom": "^6.9.1",
25+
"@testing-library/react": "^16.3.2",
26+
"@types/react": "^19.2.14",
27+
"@types/react-dom": "^19.2.3",
28+
"happy-dom": "^20.8.3",
29+
"react-refresh": "^0.18.0",
30+
"typescript": "^5.9.3",
31+
"@rstest/adapter-rspack": "^0.2.0"
32+
}
33+
}

‎rstest/rspack-adapter/rspack.config.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { defineConfig } from '@rspack/cli';
2+
import { rspack, type SwcLoaderOptions } from '@rspack/core';
3+
import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
4+
5+
const isDev = process.env.NODE_ENV === 'development';
6+
7+
export default defineConfig({
8+
entry: {
9+
main: './src/main.tsx',
10+
},
11+
target: ['browserslist:last 2 versions, > 0.2%, not dead, Firefox ESR'],
12+
resolve: {
13+
extensions: ['...', '.ts', '.tsx', '.jsx'],
14+
},
15+
module: {
16+
rules: [
17+
{
18+
test: /\.svg$/,
19+
type: 'asset',
20+
},
21+
{
22+
test: /\.css$/,
23+
type: 'css/auto',
24+
},
25+
{
26+
test: /\.(jsx?|tsx?)$/,
27+
use: [
28+
{
29+
loader: 'builtin:swc-loader',
30+
options: {
31+
jsc: {
32+
parser: {
33+
syntax: 'typescript',
34+
tsx: true,
35+
},
36+
transform: {
37+
react: {
38+
runtime: 'automatic',
39+
development: isDev,
40+
refresh: isDev,
41+
},
42+
},
43+
},
44+
} satisfies SwcLoaderOptions,
45+
},
46+
],
47+
},
48+
],
49+
},
50+
plugins: [
51+
new rspack.HtmlRspackPlugin({
52+
template: './index.html',
53+
}),
54+
isDev ? new ReactRefreshRspackPlugin() : null,
55+
],
56+
});

‎rstest/rspack-adapter/rstest.config.mts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { withRspackConfig } from '@rstest/adapter-rspack';
2+
import { defineConfig } from '@rstest/core';
3+
4+
// Docs: https://rstest.rs/config/
5+
export default defineConfig({
6+
extends: withRspackConfig(),
7+
setupFiles: ['./tests/rstest.setup.ts'],
8+
});

‎rstest/rspack-adapter/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+
}

‎rstest/rspack-adapter/src/App.tsx‎

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

‎rstest/rspack-adapter/src/assets/react.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)