create-rspack 0.7.6-canary-1a0d77d-20240627143904 → 1.0.0-alpha.1

package/README.md

@@ -1,6 +1,6 @@
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspack-banner-1610-dark.png">
-  <img alt="Rspack Banner" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspack-banner-1610.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://assets.rspack.dev/rspack/rspack-banner-plain-dark.png">
+  <img alt="Rspack Banner" src="https://assets.rspack.dev/rspack/rspack-banner-plain-light.png">
 </picture>
 
 # create-rspack

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "create-rspack",
-  "version": "0.7.6-canary-1a0d77d-20240627143904",
+  "version": "1.0.0-alpha.1",
   "license": "MIT",
   "main": "index.js",
   "bin": {
     "create-rspack": "index.js"
   },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "homepage": "https://rspack.dev",
   "bugs": "https://github.com/web-infra-dev/rspack/issues",
   "repository": {

package/template-react/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_ENV=development rspack serve",
-    "build": "NODE_ENV=production rspack build"
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -16,6 +16,7 @@
     "@rspack/core": "workspace:*",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "cross-env": "^7.0.3",
     "react-refresh": "^0.14.0"
   }
 }

package/template-react/{rspack.config.js → rspack.config.mjs}

@@ -1,10 +1,13 @@
-const rspack = require("@rspack/core");
-const refreshPlugin = require("@rspack/plugin-react-refresh");
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "@rspack/cli";
+import { rspack } from "@rspack/core";
+import RefreshPlugin from "@rspack/plugin-react-refresh";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const isDev = process.env.NODE_ENV === "development";
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
+
+export default defineConfig({
 	context: __dirname,
 	entry: {
 		main: "./src/main.jsx"
@@ -59,6 +62,9 @@ module.exports = {
 		new rspack.HtmlRspackPlugin({
 			template: "./index.html"
 		}),
-		isDev ? new refreshPlugin() : null
-	].filter(Boolean)
-};
+		isDev ? new RefreshPlugin() : null
+	].filter(Boolean),
+	experiments: {
+		css: true
+	}
+});

package/template-react-ts/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_ENV=development rspack serve",
-    "build": "NODE_ENV=production rspack build"
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -16,6 +16,9 @@
     "@rspack/plugin-react-refresh": "workspace:*",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "react-refresh": "^0.14.0"
+    "cross-env": "^7.0.3",
+    "react-refresh": "^0.14.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
   }
 }

package/template-react-ts/{rspack.config.js → rspack.config.ts}

@@ -1,10 +1,10 @@
-const rspack = require("@rspack/core");
-const refreshPlugin = require("@rspack/plugin-react-refresh");
+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";
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
+
+export default defineConfig({
 	context: __dirname,
 	entry: {
 		main: "./src/main.tsx"
@@ -59,6 +59,9 @@ module.exports = {
 		new rspack.HtmlRspackPlugin({
 			template: "./index.html"
 		}),
-		isDev ? new refreshPlugin() : null
-	].filter(Boolean)
-};
+		isDev ? new RefreshPlugin() : null
+	].filter(Boolean),
+	experiments: {
+		css: true
+	}
+});

package/template-react-ts/tsconfig.json

@@ -1,18 +1,22 @@
 {
   "compilerOptions": {
-    "target": "ES6",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  }
 }

package/template-vanilla/package.json

@@ -3,11 +3,12 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_ENV=development rspack serve",
-    "build": "NODE_ENV=production rspack build"
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
   },
   "devDependencies": {
     "browserify": "latest",
+    "cross-env": "^7.0.3",
     "@rspack/cli": "workspace:*",
     "@rspack/core": "workspace:*"
   }

package/template-vanilla/rspack.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from "@rspack/cli";
+import { rspack } from "@rspack/core";
+
+export default defineConfig({
+	entry: {
+		main: "./src/index.js"
+	},
+	plugins: [new rspack.HtmlRspackPlugin({ template: "./index.html" })]
+});

package/template-vue/package.json

@@ -1,12 +1,10 @@
 {
   "name": "rspack-vue-starter",
   "version": "1.0.0",
-  "description": "",
   "private": true,
-  "main": "index.js",
   "scripts": {
-    "dev": "rspack serve",
-    "build": "rspack build"
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
   },
   "dependencies": {
     "vue": "3.2.45"
@@ -14,9 +12,7 @@
   "devDependencies": {
     "@rspack/cli": "workspace:*",
     "@rspack/core": "workspace:*",
+    "cross-env": "^7.0.3",
     "vue-loader": "^17.2.2"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
+  }
 }

package/template-vue/{rspack.config.js → rspack.config.mjs}

@@ -1,19 +1,27 @@
-const rspack = require("@rspack/core");
-const { VueLoaderPlugin } = require("vue-loader");
-const isDev = process.env.NODE_ENV == "development";
-/** @type {import('@rspack/cli').Configuration} */
-const config = {
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "@rspack/cli";
+import { rspack } from "@rspack/core";
+import { VueLoaderPlugin } from "vue-loader";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
 	context: __dirname,
 	entry: {
 		main: "./src/main.js"
 	},
 	resolve: {
-		extensions: ["...", ".ts"]
+		extensions: ["...", ".ts", ".vue"]
 	},
 	plugins: [
 		new VueLoaderPlugin(),
 		new rspack.HtmlRspackPlugin({
 			template: "./index.html"
+		}),
+		new rspack.DefinePlugin({
+			__VUE_OPTIONS_API__: true,
+			__VUE_PROD_DEVTOOLS__: false
 		})
 	],
 	module: {
@@ -33,8 +41,7 @@ const config = {
 						options: {
 							jsc: {
 								parser: {
-									syntax: "typescript",
-									tsx: false
+									syntax: "typescript"
 								}
 							},
 							env: {
@@ -54,6 +61,8 @@ const config = {
 				type: "asset/resource"
 			}
 		]
+	},
+	experiments: {
+		css: true
 	}
-};
-module.exports = config;
+});

package/template-vue/src/main.js

@@ -1,7 +1,5 @@
 import "./style.css";
-
 import { createApp } from "vue";
-
 import App from "./App.vue";
 
 createApp(App).mount("#app");

package/template-vue-ts/package.json

@@ -1,12 +1,10 @@
 {
-  "name": "rspack-vue-starter",
+  "name": "rspack-vue-ts-starter",
   "version": "1.0.0",
-  "description": "",
   "private": true,
-  "main": "index.js",
   "scripts": {
-    "dev": "rspack serve",
-    "build": "rspack build"
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build"
   },
   "dependencies": {
     "vue": "3.4.21"
@@ -14,11 +12,9 @@
   "devDependencies": {
     "@rspack/cli": "workspace:*",
     "@rspack/core": "workspace:*",
-    "vue-loader": "^17.2.2",
+    "cross-env": "^7.0.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+    "typescript": "^5.3.3",
+    "vue-loader": "^17.2.2"
+  }
+}

package/template-vue-ts/rspack.config.ts

@@ -1,28 +1,23 @@
-import {
-	Configuration,
-	DefinePlugin,
-	HtmlRspackPlugin,
-	RspackPluginFunction
-} from "@rspack/core";
+import { defineConfig } from "@rspack/cli";
+import { type RspackPluginFunction, rspack } from "@rspack/core";
 import { VueLoaderPlugin } from "vue-loader";
 
-const isDev = process.env.NODE_ENV == "development";
-
-const config: Configuration = {
+export default defineConfig({
 	context: __dirname,
 	entry: {
 		main: "./src/main.ts"
 	},
 	resolve: {
-		extensions: ["...", ".ts"]
+		extensions: ["...", ".ts", ".vue"]
 	},
 	plugins: [
 		new VueLoaderPlugin() as RspackPluginFunction,
-		new HtmlRspackPlugin({
+		new rspack.HtmlRspackPlugin({
 			template: "./index.html"
 		}),
-		new DefinePlugin({
-			__VUE_PROD_DEVTOOLS__: isDev
+		new rspack.DefinePlugin({
+			__VUE_OPTIONS_API__: true,
+			__VUE_PROD_DEVTOOLS__: false
 		})
 	],
 	module: {
@@ -43,8 +38,7 @@ const config: Configuration = {
 							sourceMap: true,
 							jsc: {
 								parser: {
-									syntax: "typescript",
-									tsx: false
+									syntax: "typescript"
 								}
 							},
 							env: {
@@ -64,7 +58,8 @@ const config: Configuration = {
 				type: "asset/resource"
 			}
 		]
+	},
+	experiments: {
+		css: true
 	}
-};
-
-export default config;
+});

package/template-vue-ts/src/main.ts

@@ -1,7 +1,5 @@
 import "./style.css";
-
 import { createApp } from "vue";
-
 import App from "./App.vue";
 
 createApp(App).mount("#app");

package/template-vue-ts/tsconfig.json

@@ -1,20 +1,23 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": [
-      "DOM",
-      "ES2020"
-    ],
-    "module": "CommonJS",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
     "jsx": "preserve",
     "jsxImportSource": "vue",
     "strict": true,
+    "noEmit": true,
     "skipLibCheck": true,
     "isolatedModules": true,
     "resolveJsonModule": true,
-    "useDefineForClassFields": true
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  }
+}

package/template-vanilla/rspack.config.js

@@ -1,7 +0,0 @@
-const rspack = require("@rspack/core");
-module.exports = {
-	entry: {
-		main: "./src/index.js"
-	},
-	plugins: [new rspack.HtmlRspackPlugin({ template: "./index.html" })]
-};