u

web-infra-dev · Dec 18, 2024 · 61dcc7b · 61dcc7b
1 parent f7394ed
commit 61dcc7b
Show file tree

Hide file tree

Showing 16 changed files with 517 additions and 31 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -61,7 +61,6 @@ jobs:
     uses: ./.github/workflows/reusable-build.yml
     with:
       target: x86_64-unknown-linux-gnu
-      profile: "debug"
       native: ${{ needs.get-runner-labels.outputs.LINUX_RUNNER_LABELS == '"ubuntu-latest"' }}
       runner: ${{ needs.get-runner-labels.outputs.LINUX_RUNNER_LABELS }}
       skipable: ${{ needs.check-changed.outputs.changed != 'true' }}

diff --git a/packages/bench/fixtures/single/index.js b/packages/bench/fixtures/single/index.js
diff --git a/packages/bench/fixtures/ts-react/index.html b/packages/bench/fixtures/ts-react/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/react.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Rspack + React + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/packages/bench/fixtures/ts-react/rspack.config.ts b/packages/bench/fixtures/ts-react/rspack.config.ts
@@ -0,0 +1,67 @@
+import { defineConfig } from "@rspack/cli";
+import { rspack } from "@rspack/core";
+import * as RefreshPlugin from "@rspack/plugin-react-refresh";
+
+const isDev = process.env.NODE_ENV === "development";
+
+// Target browsers, see: https://github.com/browserslist/browserslist
+const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
+
+export default defineConfig({
+	context: __dirname,
+	entry: {
+		main: "./src/main.tsx"
+	},
+	resolve: {
+		extensions: ["...", ".ts", ".tsx", ".jsx"]
+	},
+	module: {
+		rules: [
+			{
+				test: /\.svg$/,
+				type: "asset"
+			},
+			{
+				test: /\.(jsx?|tsx?)$/,
+				use: [
+					{
+						loader: "builtin:swc-loader",
+						options: {
+							jsc: {
+								parser: {
+									syntax: "typescript",
+									tsx: true
+								},
+								transform: {
+									react: {
+										runtime: "automatic",
+										development: isDev,
+										refresh: isDev
+									}
+								}
+							},
+							env: { targets }
+						}
+					}
+				]
+			}
+		]
+	},
+	plugins: [
+		new rspack.HtmlRspackPlugin({
+			template: "./index.html"
+		}),
+		isDev ? new RefreshPlugin() : null
+	].filter(Boolean),
+	optimization: {
+		minimizer: [
+			new rspack.SwcJsMinimizerRspackPlugin(),
+			new rspack.LightningCssMinimizerRspackPlugin({
+				minimizerOptions: { targets }
+			})
+		]
+	},
+	experiments: {
+		css: true
+	}
+});
diff --git a/packages/bench/fixtures/ts-react/src/App.css b/packages/bench/fixtures/ts-react/src/App.css
@@ -0,0 +1,41 @@
+#root {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+	filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a > .logo {
+		animation: logo-spin infinite 20s linear;
+	}
+}
+
+.card {
+	padding: 2em;
+}
+
+.read-the-docs {
+	color: #888;
+}
diff --git a/packages/bench/fixtures/ts-react/src/App.tsx b/packages/bench/fixtures/ts-react/src/App.tsx
@@ -0,0 +1,31 @@
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import "./App.css";
+
+function App() {
+	const [count, setCount] = useState(0);
+
+	return (
+		<div className="App">
+			<div>
+				<a href="https://reactjs.org" target="_blank" rel="noreferrer">
+					<img src={reactLogo} className="logo react" alt="React logo" />
+				</a>
+			</div>
+			<h1>Rspack + React + TypeScript</h1>
+			<div className="card">
+				<button type="button" onClick={() => setCount(count => count + 1)}>
+					count is {count}
+				</button>
+				<p>
+					Edit <code>src/App.tsx</code> and save to test HMR
+				</p>
+			</div>
+			<p className="read-the-docs">
+				Click on the Rspack and React logos to learn more
+			</p>
+		</div>
+	);
+}
+
+export default App;
diff --git a/packages/bench/fixtures/ts-react/src/assets/react.svg b/packages/bench/fixtures/ts-react/src/assets/react.svg
diff --git a/packages/bench/fixtures/ts-react/src/index.css b/packages/bench/fixtures/ts-react/src/index.css
@@ -0,0 +1,70 @@
+:root {
+	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 400;
+
+	color-scheme: light dark;
+	color: rgba(255, 255, 255, 0.87);
+	background-color: #242424;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
+a {
+	font-weight: 500;
+	color: #646cff;
+	text-decoration: inherit;
+}
+a:hover {
+	color: #535bf2;
+}
+
+body {
+	margin: 0;
+	display: flex;
+	place-items: center;
+	min-width: 320px;
+	min-height: 100vh;
+}
+
+h1 {
+	font-size: 3.2em;
+	line-height: 1.1;
+}
+
+button {
+	border-radius: 8px;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+	background-color: #1a1a1a;
+	cursor: pointer;
+	transition: border-color 0.25s;
+}
+button:hover {
+	border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+	outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		color: #213547;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+	button {
+		background-color: #f9f9f9;
+	}
+}
diff --git a/packages/bench/fixtures/ts-react/src/index.tsx b/packages/bench/fixtures/ts-react/src/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);