create-rsbuild 0.0.0-nightly-20231027160925

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# create-rsbuild
+
+## 0.0.0-nightly-20231027160925
+
+### Patch Changes
+
+- 3d261af: fix(create-rsbuild): failed to publish tsconfig of templates
+
+## 0.0.9
+
+### Patch Changes
+
+- 0fbab50: fix(create-rsbuild): failed to resolve the templates
+- e6be3a5: fix(create-rspack): skip local files for debugging

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+<p align="center">
+  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+</p>
+
+# Rsbuild
+
+Unleash the power of Rspack with the out-of-the-box build tool.
+
+## Documentation
+
+https://rsbuild.dev/
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_rslog = require("rslog");
+var import_prompts = require("@clack/prompts");
+function checkCancel(value) {
+  if ((0, import_prompts.isCancel)(value)) {
+    (0, import_prompts.cancel)("Operation cancelled.");
+    process.exit(0);
+  }
+}
+function formatTargetDir(targetDir) {
+  return targetDir.trim().replace(/\/+$/g, "");
+}
+async function main() {
+  console.log("");
+  import_rslog.logger.greet("◆  Create Rsbuild Project");
+  const cwd = process.cwd();
+  const packageRoot = import_path.default.resolve(__dirname, "..");
+  let targetDir = await (0, import_prompts.text)({
+    message: "Input target folder",
+    placeholder: "my-project",
+    validate(value) {
+      if (value.length === 0) {
+        return `Target folder is required`;
+      }
+      if (import_fs.default.existsSync(import_path.default.join(cwd, value))) {
+        return `"${value}" is not empty, please input another folder`;
+      }
+    }
+  });
+  checkCancel(targetDir);
+  targetDir = formatTargetDir(targetDir);
+  const framework = await (0, import_prompts.select)({
+    message: "Select framework",
+    options: [
+      { value: "react", label: "React" },
+      { value: "vue3", label: "Vue 3" },
+      { value: "vue2", label: "Vue 2" }
+    ]
+  });
+  checkCancel(framework);
+  const language = await (0, import_prompts.select)({
+    message: "Select language",
+    options: [
+      { value: "ts", label: "TypeScript" },
+      { value: "js", label: "JavaScript" }
+    ]
+  });
+  checkCancel(language);
+  const srcFolder = import_path.default.join(packageRoot, `template-${framework}-${language}`);
+  const commonFolder = import_path.default.join(packageRoot, `template-common`);
+  const distFolder = import_path.default.join(cwd, targetDir);
+  copyFolder(commonFolder, distFolder);
+  copyFolder(srcFolder, distFolder);
+  const nextSteps = [`cd ${targetDir}`, "npm i", "npm dev"];
+  (0, import_prompts.note)(nextSteps.join("\n"), "Next steps");
+  (0, import_prompts.outro)("Done.");
+}
+function copyFolder(src, dist) {
+  const renameFiles = {
+    gitignore: ".gitignore"
+  };
+  const skipFiles = ["node_modules", "dist"];
+  import_fs.default.mkdirSync(dist, { recursive: true });
+  for (const file of import_fs.default.readdirSync(src)) {
+    if (skipFiles.includes(file)) {
+      continue;
+    }
+    const srcFile = import_path.default.resolve(src, file);
+    const distFile = renameFiles[file] ? import_path.default.resolve(dist, renameFiles[file]) : import_path.default.resolve(dist, file);
+    const stat = import_fs.default.statSync(srcFile);
+    if (stat.isDirectory()) {
+      copyFolder(srcFile, distFile);
+    } else {
+      import_fs.default.copyFileSync(srcFile, distFile);
+    }
+  }
+}
+main();

package/modern.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '../../scripts/modern.base.config';
+
+export default baseConfig;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "create-rsbuild",
+  "description": "Create a new Rsbuild project",
+  "homepage": "https://rsbuild.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rsbuild",
+    "directory": "packages/create-rsbuild"
+  },
+  "license": "MIT",
+  "version": "0.0.0-nightly-20231027160925",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "bin": {
+    "create-rsbuild": "./dist/index.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "rslog": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "dev": "modern build --watch",
+    "build": "modern build",
+    "start": "node ./dist/index.js"
+  }
+}

package/template-common/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```
+pnpm dev
+```
+
+Build the app for production:
+
+```
+pnpm build
+```
+
+Preview the production build locally:
+
+```
+pnpm serve
+```

package/template-common/gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

package/template-react-js/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "rsbuild-react-js",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "nightly",
+    "@rsbuild/plugin-react": "nightly"
+  }
+}

package/template-react-js/rsbuild.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  html: {
+    template: './src/index.html',
+  },
+});

package/template-react-js/src/App.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+const HelloWorld = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Rsbuild + React</h1>
+
+      <div>
+        <button type="button" onClick={() => setCount(count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>App.tsx</code> to test HMR
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default HelloWorld;

package/template-react-js/src/index.css

@@ -0,0 +1,41 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 5rem;
+  text-align: center;
+}
+
+body {
+  margin: 0;
+  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: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/template-react-js/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template-react-js/src/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/template-react-ts/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "rsbuild-react-ts",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "nightly",
+    "@rsbuild/plugin-react": "nightly",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5.0.0"
+  }
+}

package/template-react-ts/rsbuild.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  html: {
+    template: './src/index.html',
+  },
+});

package/template-react-ts/src/App.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+const HelloWorld = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Rsbuild + React</h1>
+
+      <div>
+        <button type="button" onClick={() => setCount(count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>App.tsx</code> to test HMR
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default HelloWorld;

package/template-react-ts/src/index.css

@@ -0,0 +1,41 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 5rem;
+  text-align: center;
+}
+
+body {
+  margin: 0;
+  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: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/template-react-ts/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template-react-ts/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/template-react-ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}

package/template-vue2-js/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "rsbuild-vue2-js",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vue": "^2.7.14"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "nightly",
+    "@rsbuild/plugin-vue2": "nightly"
+  }
+}

package/template-vue2-js/rsbuild.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue2 } from '@rsbuild/plugin-vue2';
+
+export default defineConfig({
+  plugins: [pluginVue2()],
+  html: {
+    template: './src/index.html',
+  },
+});

package/template-vue2-js/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>Rsbuild + Vue</h1>
+
+    <div class="card">
+      <button type="button" @click="count++">count is {{ count }}</button>
+      <p>
+        Edit
+        <code>App.vue</code> to test HMR
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { count: 0 };
+  },
+};
+</script>
+
+<style scoped>
+.card {
+  padding: 2em;
+}
+</style>

package/template-vue2-js/src/index.css

@@ -0,0 +1,41 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 5rem;
+  text-align: center;
+}
+
+body {
+  margin: 0;
+  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: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/template-vue2-js/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template-vue2-js/src/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import './index.css';
+import App from './App.vue';
+
+new Vue({
+  el: '#root',
+  render: (h) => h(App),
+});

package/template-vue2-ts/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "rsbuild-vue2-ts",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vue": "^2.7.14"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "nightly",
+    "@rsbuild/plugin-vue2": "nightly",
+    "typescript": "^5.0.0"
+  }
+}

package/template-vue2-ts/rsbuild.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue2 } from '@rsbuild/plugin-vue2';
+
+export default defineConfig({
+  plugins: [pluginVue2()],
+  html: {
+    template: './src/index.html',
+  },
+});

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

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Rsbuild + Vue</h1>
+
+    <div class="card">
+      <button type="button" @click="count++">count is {{ count }}</button>
+      <p>
+        Edit
+        <code>App.vue</code> to test HMR
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    return { count: 0 };
+  },
+});
+</script>
+
+<style scoped>
+.card {
+  padding: 2em;
+}
+</style>

package/template-vue2-ts/src/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+
+  export default Vue;
+}

package/template-vue2-ts/src/index.css

@@ -0,0 +1,41 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 5rem;
+  text-align: center;
+}
+
+body {
+  margin: 0;
+  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: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/template-vue2-ts/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template-vue2-ts/src/index.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import './index.css';
+import App from './App.vue';
+
+new Vue({
+  el: '#root',
+  render: (h) => h(App),
+});

package/template-vue2-ts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}

package/template-vue3-js/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "rsbuild-vue3-js",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "nightly",
+    "@rsbuild/plugin-vue": "nightly"
+  }
+}

package/template-vue3-js/rsbuild.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+  html: {
+    template: './src/index.html',
+  },
+});

package/template-vue3-js/src/App.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+  msg: {
+    type: String,
+  },
+});
+
+const count = ref(0);
+</script>
+
+<template>
+  <h1>Rsbuild + Vue</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>App.vue</code> to test HMR
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  padding: 2em;
+}
+</style>

package/template-vue3-js/src/index.css

@@ -0,0 +1,41 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 5rem;
+  text-align: center;
+}
+
+body {
+  margin: 0;
+  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: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/template-vue3-js/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template-vue3-js/src/index.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import './index.css';
+import App from './App.vue';
+
+createApp(App).mount('#root');

package/template-vue3-ts/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "rsbuild-vue3-ts",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "nightly",
+    "@rsbuild/plugin-vue": "nightly",
+    "typescript": "^5.0.0"
+  }
+}

package/template-vue3-ts/rsbuild.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+  html: {
+    template: './src/index.html',
+  },
+});

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+</script>
+
+<template>
+  <h1>Rsbuild + Vue</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>App.vue</code> to test HMR
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  padding: 2em;
+}
+</style>

package/template-vue3-ts/src/env.d.ts

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

package/template-vue3-ts/src/index.css

@@ -0,0 +1,41 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 5rem;
+  text-align: center;
+}
+
+body {
+  margin: 0;
+  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: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/template-vue3-ts/src/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/template-vue3-ts/src/index.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import './index.css';
+import App from './App.vue';
+
+createApp(App).mount('#root');

package/template-vue3-ts/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@rsbuild/tsconfig/base",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "baseUrl": "./"
+  },
+  "include": ["src"]
+}