create-rspack-canary 1.7.0-canary-08772c3f-20251224173339 → 1.7.0-canary-0da65999-20251226173527

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

@@ -1,71 +1,71 @@
-import { defineConfig } from "@rspack/cli";
+import { defineConfig } from '@rspack/cli';
 import {
-	type RspackPluginFunction,
-	rspack,
-	type SwcLoaderOptions
-} from "@rspack/core";
-import { VueLoaderPlugin } from "vue-loader";
+  type RspackPluginFunction,
+  rspack,
+  type SwcLoaderOptions,
+} from '@rspack/core';
+import { VueLoaderPlugin } from 'vue-loader';
 
 // Target browsers, see: https://github.com/browserslist/browserslist
-const targets = ["last 2 versions", "> 0.2%", "not dead", "Firefox ESR"];
+const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
 
 export default defineConfig({
-	entry: {
-		main: "./src/main.ts"
-	},
-	resolve: {
-		extensions: ["...", ".ts", ".vue"]
-	},
-	module: {
-		rules: [
-			{
-				test: /\.vue$/,
-				loader: "vue-loader",
-				options: {
-					experimentalInlineMatchResource: true
-				}
-			},
-			{
-				test: /\.(js|ts)$/,
-				use: [
-					{
-						loader: "builtin:swc-loader",
-						options: {
-							jsc: {
-								parser: {
-									syntax: "typescript"
-								}
-							},
-							env: { targets }
-						} satisfies SwcLoaderOptions
-					}
-				]
-			},
-			{
-				test: /\.svg/,
-				type: "asset/resource"
-			}
-		]
-	},
-	plugins: [
-		new rspack.HtmlRspackPlugin({
-			template: "./index.html"
-		}),
-		new rspack.DefinePlugin({
-			__VUE_OPTIONS_API__: true,
-			__VUE_PROD_DEVTOOLS__: false
-		}),
-		new VueLoaderPlugin() as RspackPluginFunction
-	],
-	optimization: {
-		minimizer: [
-			new rspack.SwcJsMinimizerRspackPlugin(),
-			new rspack.LightningCssMinimizerRspackPlugin({
-				minimizerOptions: { targets }
-			})
-		]
-	},
-	experiments: {
-		css: true
-	}
+  entry: {
+    main: './src/main.ts',
+  },
+  resolve: {
+    extensions: ['...', '.ts', '.vue'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          experimentalInlineMatchResource: true,
+        },
+      },
+      {
+        test: /\.(js|ts)$/,
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                },
+              },
+              env: { targets },
+            } satisfies SwcLoaderOptions,
+          },
+        ],
+      },
+      {
+        test: /\.svg/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    new rspack.DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new VueLoaderPlugin() as RspackPluginFunction,
+  ],
+  optimization: {
+    minimizer: [
+      new rspack.SwcJsMinimizerRspackPlugin(),
+      new rspack.LightningCssMinimizerRspackPlugin({
+        minimizerOptions: { targets },
+      }),
+    ],
+  },
+  experiments: {
+    css: true,
+  },
 });

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

@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import HelloWorld from "./components/HelloWorld.vue";
+import { ref } from 'vue';
+import HelloWorld from './components/HelloWorld.vue';
 
-const title = ref<string>("Rspack + Vue");
+const title = ref<string>('Rspack + Vue');
 </script>
 
 <template>
-	<div>
-		<a href="https://rspack.rs/" target="_blank">
-			<img src="./assets/rspack.svg" class="logo" alt="Rspack logo" />
-		</a>
-		<a href="https://vuejs.org/" target="_blank">
-			<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-		</a>
-	</div>
-	<HelloWorld :msg="title" />
+  <div>
+    <a href="https://rspack.rs/" target="_blank">
+      <img src="./assets/rspack.svg" class="logo" alt="Rspack logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld :msg="title" />
 </template>
 
 <style scoped>
 .logo {
-	height: 6em;
-	padding: 1.5em;
-	will-change: filter;
-	transition: filter 300ms;
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
 }
 
 .logo:hover {
-	filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em #646cffaa);
 }
 
 .logo.vue:hover {
-	filter: drop-shadow(0 0 2em #42b883aa);
+  filter: drop-shadow(0 0 2em #42b883aa);
 }
 </style>

package/template-vue-ts/src/components/HelloWorld.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue';
 
 defineProps({
-	msg: {
-		type: String
-	}
+  msg: {
+    type: String,
+  },
 });
 const count = ref<number>(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>

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

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

package/template-vue-ts/src/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module "*.vue" {
-	import type { DefineComponent } from "vue";
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

package/template-vue-ts/src/style.css

@@ -1,90 +1,90 @@
 :root {
-	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-	font-size: 16px;
-	line-height: 24px;
-	font-weight: 400;
+  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;
+  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%;
+  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;
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
 }
 a:hover {
-	color: #535bf2;
+  color: #535bf2;
 }
 
 a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
 }
 a:hover {
-	color: #535bf2;
+  color: #535bf2;
 }
 
 body {
-	margin: 0;
-	display: flex;
-	place-items: center;
-	min-width: 320px;
-	min-height: 100vh;
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
 }
 
 h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
+  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;
+  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;
+  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
 .card {
-	padding: 2em;
+  padding: 2em;
 }
 
 #app {
-	max-width: 1280px;
-	margin: 0 auto;
-	padding: 2rem;
-	text-align: center;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
 }
 
 @media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
 }