feat: support Vue with unplugin-vue (#995)

Co-authored-by: Timeless0911 <[email protected]>

Author: fi3ework

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