chore: upgrade template to 0.4.0 (#4752)

* chore: upgrade template to 0.4.0 * chore: fix targets
web-infra-dev · Nov 23, 2023 · 5b9d83f · 5b9d83f
1 parent 3e38815
commit 5b9d83f
Show file tree

Hide file tree

Showing 15 changed files with 625 additions and 87 deletions.
diff --git a/packages/create-rspack/template-react-ts/package.json b/packages/create-rspack/template-react-ts/package.json
@@ -3,16 +3,17 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "rspack serve",
-    "build": "rspack build"
+    "dev": "NODE_ENV=develpoment rspack serve",
+    "build": "NODE_ENV=production rspack build"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rspack/cli": "0.3.14",
-    "@rspack/core": "0.3.14",
+    "@rspack/cli": "0.4.0",
+    "@rspack/core": "0.4.0",
+    "@rspack/plugin-react-refresh": "0.4.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
     "typescript": "^5.0.4"

diff --git a/packages/create-rspack/template-react-ts/rspack.config.js b/packages/create-rspack/template-react-ts/rspack.config.js
@@ -1,4 +1,6 @@
 const rspack = require("@rspack/core");
+const refreshPlugin = require("@rspack/plugin-react-refresh");
+const isDev = process.env.NODE_ENV === "development";
 /**
  * @type {import('@rspack/cli').Configuration}
  */
@@ -12,12 +14,49 @@ module.exports = {
 			{
 				test: /\.svg$/,
 				type: "asset"
+			},
+			{
+				test: /\.(jsx?|tsx?)$/,
+				use: [
+					{
+						loader: "builtin:swc-loader",
+						options: {
+							sourceMap: true,
+							jsc: {
+								parser: {
+									syntax: "typescript",
+									tsx: true
+								},
+								transform: {
+									react: {
+										runtime: "automatic",
+										development: isDev,
+										refresh: isDev
+									}
+								}
+							},
+							env: {
+								targets: [
+									"chrome >= 87",
+									"edge >= 88",
+									"firefox >= 78",
+									"safari >= 14"
+								]
+							}
+						}
+					}
+				]
 			}
 		]
 	},
 	plugins: [
+		new rspack.DefinePlugin({
+			"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
+		}),
+		new rspack.ProgressPlugin({}),
 		new rspack.HtmlRspackPlugin({
 			template: "./index.html"
-		})
+		}),
+		new refreshPlugin()
 	]
 };
diff --git a/packages/create-rspack/template-react/package.json b/packages/create-rspack/template-react/package.json
@@ -3,16 +3,17 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "rspack serve",
-    "build": "rspack build"
+    "dev": "NODE_ENV=develpoment rspack serve",
+    "build": "NODE_ENV=production rspack build"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rspack/cli": "0.3.14",
-    "@rspack/core": "0.3.14",
+    "@rspack/plugin-react-refresh": "0.4.0",
+    "@rspack/cli": "0.4.0",
+    "@rspack/core": "0.4.0",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8"
   }

diff --git a/packages/create-rspack/template-react/rspack.config.js b/packages/create-rspack/template-react/rspack.config.js
@@ -1,4 +1,6 @@
 const rspack = require("@rspack/core");
+const refreshPlugin = require("@rspack/plugin-react-refresh");
+const isDev = process.env.NODE_ENV === "development";
 /**
  * @type {import('@rspack/cli').Configuration}
  */
@@ -12,12 +14,49 @@ module.exports = {
 			{
 				test: /\.svg$/,
 				type: "asset"
+			},
+			{
+				test: /\.(jsx?|tsx?)$/,
+				use: [
+					{
+						loader: "builtin:swc-loader",
+						options: {
+							sourceMap: true,
+							jsc: {
+								parser: {
+									syntax: "typescript",
+									tsx: true
+								},
+								transform: {
+									react: {
+										runtime: "automatic",
+										development: isDev,
+										refresh: isDev
+									}
+								}
+							},
+							env: {
+								targets: [
+									"chrome >= 87",
+									"edge >= 88",
+									"firefox >= 78",
+									"safari >= 14"
+								]
+							}
+						}
+					}
+				]
 			}
 		]
 	},
 	plugins: [
+		new rspack.DefinePlugin({
+			"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
+		}),
+		new rspack.ProgressPlugin({}),
 		new rspack.HtmlRspackPlugin({
 			template: "./index.html"
-		})
+		}),
+		new refreshPlugin()
 	]
 };
diff --git a/packages/create-rspack/template-vanilla/_gitignore b/packages/create-rspack/template-vanilla/_gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/create-rspack/template-vanilla/index.html b/packages/create-rspack/template-vanilla/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Rspack</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/packages/create-rspack/template-vanilla/package.json b/packages/create-rspack/template-vanilla/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "rspack-vanilla-starter",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "NODE_ENV=develpoment rspack serve",
+    "build": "NODE_ENV=production rspack build"
+  },
+  "devDependencies": {
+    "browserify": "latest",
+    "@rspack/cli": "0.4.0",
+    "@rspack/core": "0.4.0"
+  }
+}
diff --git a/packages/create-rspack/template-vanilla/rspack.config.js b/packages/create-rspack/template-vanilla/rspack.config.js
@@ -0,0 +1,7 @@
+const rspack = require("@rspack/core");
+module.exports = {
+	entry: {
+		main: "./src/index.js"
+	},
+	plugins: [new rspack.HtmlRspackPlugin({ template: "./index.html" })]
+};
diff --git a/packages/create-rspack/template-vanilla/src/index.js b/packages/create-rspack/template-vanilla/src/index.js
@@ -0,0 +1,7 @@
+import { message } from "./message";
+function render() {
+	const container = document.getElementById("root");
+	console.log({ container });
+	container.innerHTML = `Hello ${message}`;
+}
+render();
diff --git a/packages/create-rspack/template-vanilla/src/message.js b/packages/create-rspack/template-vanilla/src/message.js
@@ -0,0 +1 @@
+export const message = "Rspack";
diff --git a/packages/create-rspack/template-vue/package.json b/packages/create-rspack/template-vue/package.json
@@ -12,8 +12,8 @@
     "vue": "3.2.45"
   },
   "devDependencies": {
-    "@rspack/cli": "0.3.14",
-    "@rspack/core": "0.3.14",
+    "@rspack/cli": "0.4.0",
+    "@rspack/core": "0.4.0",
     "vue-loader": "^17.2.2"
   },
   "keywords": [],

diff --git a/packages/create-rspack/template-vue/rspack.config.js b/packages/create-rspack/template-vue/rspack.config.js
@@ -1,6 +1,6 @@
 const rspack = require("@rspack/core");
 const { VueLoaderPlugin } = require("vue-loader");
-
+const isDev = process.env.NODE_ENV == "development";
 /** @type {import('@rspack/cli').Configuration} */
 const config = {
 	context: __dirname,
@@ -22,6 +22,31 @@ const config = {
 					experimentalInlineMatchResource: true
 				}
 			},
+			{
+				test: /\.(js|ts)$/,
+				use: [
+					{
+						loader: "builtin:swc-loader",
+						options: {
+							sourceMap: true,
+							jsc: {
+								parser: {
+									syntax: "typescript",
+									tsx: false
+								}
+							},
+							env: {
+								targets: [
+									"chrome >= 87",
+									"edge >= 88",
+									"firefox >= 78",
+									"safari >= 14"
+								]
+							}
+						}
+					}
+				]
+			},
 			{
 				test: /\.svg/,
 				type: "asset/resource"

diff --git a/packages/create-rspack/template-vue/src/components/HelloWorld.vue b/packages/create-rspack/template-vue/src/components/HelloWorld.vue
@@ -2,37 +2,35 @@
 import { ref } from "vue";
 
 defineProps({
-  msg: {
-    type: String,
-  }
-})
+	msg: {
+		type: String
+	}
+});
 const count = ref(0);
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
+	<h1>{{ msg }}</h1>
 
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
+	<div class="card">
+		<button type="button" @click="count++">count is {{ count }}</button>
+		<p>
+			Edit
+			<code>components/HelloWorld.vue</code> to test HMR
+		</p>
+	</div>
 
-  <p>
-    Check out Rspack which support Vue
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Rspack and Vue logos to learn more</p>
+	<p>Check out Rspack which support Vue</p>
+	<p>
+		Install
+		<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+		in your IDE for a better DX
+	</p>
+	<p class="read-the-docs">Click on the Rspack and Vue logos to learn more</p>
 </template>
 
 <style scoped>
 .read-the-docs {
-  color: #888;
+	color: #888;
 }
 </style>