feat: support Vue with unplugin-vue

cspell.config.cjs

@@ -17,6 +17,7 @@ module.exports = {
     'doc_build',
     'node_modules',
     'pnpm-lock.yaml',
+    'tests/integration/vue/index.test.ts',
   ],
   flagWords: banWords,
   dictionaries: ['dictionary'],

examples/vue-component-bundle/README.md

@@ -1,3 +1,3 @@
 # @examples/vue-component
 
-This example demonstrates how to use Rslib to build a simple Vue component.
+This example demonstrates how to use Rslib to build a simple bundled Vue component.

examples/vue-component-bundle/package.json

@@ -9,8 +9,8 @@
     "build": "rslib build && vue-tsc"
   },
   "devDependencies": {
-    "@rsbuild/plugin-vue": "^1.0.7",
     "@rslib/core": "workspace:*",
+    "rsbuild-plugin-unplugin-vue": "^0.1.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.14",
     "vue-tsc": "^2.2.10"

examples/vue-component-bundle/rslib.config.ts

@@ -1,8 +1,8 @@
-import { pluginVue } from '@rsbuild/plugin-vue';
 import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
 
 export default defineConfig({
-  plugins: [pluginVue()],
+  plugins: [pluginUnpluginVue()],
   lib: [{ format: 'esm' }],
   output: {
     target: 'web',

examples/vue-component-bundle/tsconfig.json

@@ -1,20 +1,25 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "baseUrl": ".",
+    "lib": ["DOM", "ES2020"],
+    "jsx": "preserve",
+    "target": "ES2020",
+    "skipLibCheck": true,
+    "jsxImportSource": "vue",
+    "useDefineForClassFields": true,
+    "outDir": "dist",
     "declaration": true,
     "emitDeclarationOnly": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+
+    /* modules */
+    "module": "ESNext",
     "isolatedModules": true,
-    "outDir": "dist",
-    "lib": ["DOM", "ESNext"],
-    "moduleResolution": "node",
     "resolveJsonModule": true,
-    "rootDir": "src",
-    "skipLibCheck": true,
-    "strict": true
+    "moduleResolution": "bundler",
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
-  "exclude": ["**/node_modules"],
   "include": ["src"]
 }

examples/vue-component-bundleless/.storybook/main.ts

@@ -0,0 +1,40 @@
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-vue3-rsbuild';
+const require = createRequire(import.meta.url);
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: getAbsolutePath('storybook-addon-rslib'),
+    },
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-vue3-rsbuild'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    check: true,
+  },
+};
+
+export default config;

examples/vue-component-bundleless/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/vue3';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

examples/vue-component-bundleless/README.md

@@ -0,0 +1,3 @@
+# @examples/vue-component
+
+This example demonstrates how to use Rslib to build a simple bundleless Vue component.

examples/vue-component-bundleless/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@examples/vue-component-bundleless",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rslib build && vue-tsc",
+    "build:storybook": "storybook build",
+    "dev": "rslib build --watch",
+    "storybook": "storybook dev",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@rslib/core": "workspace:*",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/vue3": "^8.6.14",
+    "rsbuild-plugin-unplugin-vue": "^0.1.0",
+    "storybook": "^8.6.14",
+    "storybook-addon-rslib": "^1.0.1",
+    "storybook-vue3-rsbuild": "^1.0.1",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.14",
+    "vue-tsc": "^2.2.10"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  }
+}

examples/vue-component-bundleless/rslib.config.ts

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

examples/vue-component-bundleless/src/Counter.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h2 class="counter-text">Counter: {{ count }}</h2>
+    <counter-button @click="decrement" label="-" />
+    <counter-button @click="increment" label="+" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CounterButton from './CounterButton.vue';
+
+const count = ref(0);
+
+const increment = () => count.value++;
+const decrement = () => count.value--;
+</script>
+
+<style scoped>
+.counter-text {
+  font-size: 50px;
+}
+</style>

examples/vue-component-bundleless/src/CounterButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <button type="button" @click="onClick">{{ label }}</button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  onClick: () => void;
+}>();
+</script>
+
+<style scoped>
+.button {
+  background: yellow;
+}
+</style>

examples/vue-component-bundleless/src/index.ts

@@ -0,0 +1,3 @@
+import Counter from './Counter.vue';
+
+export { Counter };

examples/vue-component-bundleless/stories/Button.stories.ts

@@ -0,0 +1,32 @@
+import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Counter from '../dist/Counter';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Counter',
+  component: Counter,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Counter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Counter',
+  },
+};

examples/vue-component-bundleless/tsconfig.json

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