test: basic test

Author: fi3ework

README.md

@@ -1,48 +1,57 @@
-# rsbuild-plugin-example
+# rsbuild-plugin-unplugin-vue
 
-Example plugin for Rsbuild.
+Rsbuild and Rslib plugin for [unplugin-vue](https://github.com/unplugin/unplugin-vue).
+
+This plugin could be used with Rsbuild project as an alternative to [@rsbuild/plugin-vue](https://rsbuild.dev/guide/framework/vue).
+
+This plugin is recommended for projects using Rslib to build Vue components.
+
+> [!CAUTION]
+> HMR is not supported with Rsbuild yet. Track the issue [here](https://github.com/unplugin/unplugin-vue/issues/162). This plugin is mainly used for building Vue components with Rslib as of now.
 
 <p>
-  <a href="https://npmjs.com/package/rsbuild-plugin-example">
-   <img src="https://img.shields.io/npm/v/rsbuild-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  <a href="https://npmjs.com/package/rsbuild-plugin-unplugin-vue">
+   <img src="https://img.shields.io/npm/v/rsbuild-plugin-unplugin-vue?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
   </a>
   <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
-  <a href="https://npmcharts.com/compare/rsbuild-plugin-example?minimal=true"><img src="https://img.shields.io/npm/dm/rsbuild-plugin-example.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
+  <a href="https://npmcharts.com/compare/rsbuild-plugin-unplugin-vue?minimal=true"><img src="https://img.shields.io/npm/dm/rsbuild-plugin-unplugin-vue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
 </p>
 
 ## Usage
 
 Install:
 
 ```bash
-npm add rsbuild-plugin-example -D
+npm add rsbuild-plugin-unplugin-vue -D
 ```
 
 Add plugin to your `rsbuild.config.ts`:
 
 ```ts
-// rsbuild.config.ts
-import { pluginExample } from "rsbuild-plugin-example";
+// rsbuild.config.ts / rslib.config.ts
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue'
 
 export default {
-  plugins: [pluginExample()],
-};
+  plugins: [pluginUnpluginVue()],
+}
 ```
 
 ## Options
 
-### foo
+### unpluginVueOptions
 
 Some description.
 
-- Type: `string`
+- Type: `import('unplugin-vue/api').Options`
 - Default: `undefined`
 - Example:
 
 ```js
-pluginExample({
-  foo: "bar",
-});
+pluginUnpluginVue({
+  unpluginVueOptions: {
+    include: ['**/*.vue'],
+  },
+})
 ```
 
 ## License

package.json

@@ -14,7 +14,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",
@@ -35,7 +37,8 @@
     "@types/node": "^22.15.3",
     "playwright": "^1.52.0",
     "simple-git-hooks": "^2.13.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vue": "^3.5.13"
   },
   "peerDependencies": {
     "@rsbuild/core": ">= 1.3.19"

pnpm-lock.yaml

@@ -3,8 +3,6 @@ import type { Options } from 'unplugin-vue/api';
 import { parseVueRequest } from 'unplugin-vue/api';
 import RspackPluginVue from 'unplugin-vue/rspack';
 
-// const require = createRequire(import.meta.url);
-
 export type PluginUnpluginVueOptions = {
   unpluginVueOptions?: Options;
 };

src/index.ts

@@ -2,7 +2,7 @@ import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { expect, test } from '@playwright/test';
 import { createRsbuild } from '@rsbuild/core';
-import { pluginExample } from '../../src';
+import { pluginUnpluginVue } from '../../src';
 import { getRandomPort } from '../helper';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -11,7 +11,7 @@ test('should render page as expected', async ({ page }) => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
-      plugins: [pluginExample()],
+      plugins: [pluginUnpluginVue()],
       server: {
         port: getRandomPort(),
       },
@@ -21,7 +21,8 @@ test('should render page as expected', async ({ page }) => {
   const { server, urls } = await rsbuild.startDevServer();
 
   await page.goto(urls[0]);
-  expect(await page.evaluate('window.test')).toBe(1);
+  const h1 = page.locator('h1');
+  await expect(h1).toHaveText('Rsbuild with Vue');
 
   await server.close();
 });
@@ -30,15 +31,19 @@ test('should build succeed', async ({ page }) => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
-      plugins: [pluginExample()],
+      plugins: [pluginUnpluginVue()],
+      server: {
+        port: getRandomPort(),
+      },
     },
   });
 
   await rsbuild.build();
   const { server, urls } = await rsbuild.preview();
 
   await page.goto(urls[0]);
-  expect(await page.evaluate('window.test')).toBe(1);
+  const h1 = page.locator('h1');
+  await expect(h1).toHaveText('Rsbuild with Vue');
 
   await server.close();
 });

test/basic/index.test.ts

@@ -0,0 +1,28 @@
+<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;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
+</style>

test/basic/src/App.vue

@@ -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;
+}

test/basic/src/env.d.ts

@@ -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);
+}

test/basic/src/index.css

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