feat: basic functionality

Author: fi3ework

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rsbuild-plugin-example",
-  "version": "0.0.0",
+  "name": "rsbuild-plugin-unplugin-vue",
+  "version": "0.0.1",
   "repository": "https://github.com/rspack-contrib/rsbuild-plugin-template",
   "license": "MIT",
   "type": "module",
@@ -30,15 +30,15 @@
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@playwright/test": "^1.52.0",
-    "@rsbuild/core": "^1.3.14",
-    "@rslib/core": "^0.6.8",
+    "@rsbuild/core": "^1.3.19",
+    "@rslib/core": "^0.6.9",
     "@types/node": "^22.15.3",
     "playwright": "^1.52.0",
     "simple-git-hooks": "^2.13.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "@rsbuild/core": "1.x"
+    "@rsbuild/core": ">= 1.3.19"
   },
   "peerDependenciesMeta": {
     "@rsbuild/core": {
@@ -49,5 +49,8 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "unplugin-vue": "^6.2.0"
   }
 }

playground/package.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

playground/rsbuild.config.ts

@@ -0,0 +1,19 @@
+{
+  "name": "playground-rsbuild",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "rsbuild-plugin-unplugin-vue": "workspace:*",
+    "@rsbuild/core": "^1.3.15",
+    "typescript": "^5.8.3"
+  }
+}

playground/rsbuild/.vscode/extensions.json

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  plugins: [pluginUnpluginVue()],
+});

playground/rsbuild/package.json

@@ -1,10 +1,11 @@
-body {
-  margin: 0;
-  color: #fff;
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  background-image: linear-gradient(to bottom, #020917, #101725);
-}
+<template>
+  <div class="content">
+    <h1>Rsbuild with Vue</h1>
+    <p>Start building amazing things with Rsbuild.</p>
+  </div>
+</template>
 
+<style scoped>
 .content {
   display: flex;
   min-height: 100vh;
@@ -24,3 +25,4 @@ body {
   font-weight: 400;
   opacity: 0.5;
 }
+</style>

playground/rsbuild/rsbuild.config.ts

@@ -0,0 +1,10 @@
+/// <reference types="@rsbuild/core/types" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  // biome-ignore lint/complexity/noBannedTypes: reason
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

playground/src/index.css renamed to playground/rsbuild/src/App.vue

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}

playground/rsbuild/src/env.d.ts

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

playground/rsbuild/src/index.css

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "preserve",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "jsxImportSource": "vue",
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

playground/rsbuild/src/index.ts

@@ -0,0 +1,16 @@
+{
+  "name": "playground-rslib",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "rsbuild-plugin-unplugin-vue": "workspace:*",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": "^3"
+  }
+}

playground/rsbuild/tsconfig.json

@@ -0,0 +1,32 @@
+import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  lib: [
+    {
+      // bundle
+      format: 'esm',
+      plugins: [pluginUnpluginVue()],
+      output: {
+        cleanDistPath: true,
+        distPath: {
+          root: 'dist/bundle',
+        },
+        target: 'web',
+      },
+    },
+    {
+      // bundleless
+      bundle: false,
+      format: 'esm',
+      plugins: [pluginUnpluginVue()],
+      output: {
+        cleanDistPath: true,
+        distPath: {
+          root: 'dist/bundleless',
+        },
+        target: 'web',
+      },
+    },
+  ],
+});

playground/rslib/package.json

@@ -0,0 +1,15 @@
+<script setup>
+import './style.css';
+import { ref } from 'vue';
+const button = ref('Hello World!');
+</script>
+
+<template>
+  <p class="button">{{ button }}</p>
+</template>
+
+<style>
+.button {
+  color: blue;
+}
+</style>

playground/rslib/rslib.config.ts

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue';
+const card = ref('Hello World!');
+</script>
+
+<template>
+  <p class="card">{{ card }}</p>
+</template>
+
+<style>
+.card {
+  color: red;
+  font-weight: bold;
+}
+</style>

playground/rslib/src/Button.vue

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.vue';
+export { default as Card } from './Card';

playground/rslib/src/Card.vue

@@ -0,0 +1,3 @@
+.base {
+  border-radius: 0.5rem;
+}