feat(rollup)!: use @vitejs/plugin-vue(-jsx) to replace rollup-plugin-…

…vue (#363)

.changeset/clever-gifts-design.md

@@ -0,0 +1,5 @@
+---
+"@pkgr/rollup": major
+---
+
+feat!: use `@vitejs/plugin-vue(-jsx)` to replace `rollup-plugin-vue`

package.json

@@ -39,17 +39,20 @@
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.6",
     "@types/node": "^20.11.4",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "jest": "^29.7.0",
     "patch-package": "^8.0.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "tsx": "^4.7.0",
     "type-coverage": "^2.27.1",
     "typescript": "^5.3.3",
+    "vue": "^3.4.15",
     "yarn-deduplicate": "^6.0.2"
   },
   "resolutions": {
-    "prettier": "^3.2.2"
+    "prettier": "^3.2.4"
   },
   "commitlint": {
     "extends": [

packages/rollup/package.json

@@ -9,7 +9,7 @@
   "funding": "https://opencollective.com/unts",
   "license": "MIT",
   "engines": {
-    "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+    "node": ">=16.0.0"
   },
   "bin": {
     "r": "lib/cli.js"
@@ -18,6 +18,18 @@
     "lib",
     "shim.d.ts"
   ],
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vitejs/plugin-vue": {
+      "optional": true
+    },
+    "@vitejs/plugin-vue-jsx": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@pkgr/es-modules": "^0.6.3",
     "@pkgr/umd-globals": "^0.8.3",
@@ -27,21 +39,17 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "builtin-modules": "^3.3.0",
     "commander": "^11.1.0",
     "core-js": "^3.34.0",
     "debug": "^4.3.4",
     "esbuild": "^0.19.10",
     "is-glob": "^4.0.3",
     "jsox": "^1.2.119",
-    "lodash-es": "^4.17.21",
     "micromatch": "^4.0.5",
     "rollup": "^4.9.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-unassert": "^0.6.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "rollup-plugin-vue-jsx-compat": "^0.0.6",
     "tslib": "^2.6.2",
     "unassert": "^2.0.2"
   },

packages/rollup/src/cli.ts

@@ -8,10 +8,9 @@ import { tryRequirePkg } from '@pkgr/utils'
 import { program } from 'commander'
 import debug from 'debug'
 import { JSOX } from 'jsox'
-import { pick } from 'lodash-es'
-import { InputOptions, OutputOptions, rollup, watch } from 'rollup'
+import { type InputOptions, type OutputOptions, rollup, watch } from 'rollup'
 
-import config, { ConfigOptions } from './config.js'
+import config, { type ConfigOptions } from './config.js'
 
 const info = debug('r:info')
 
@@ -27,6 +26,46 @@ const parseArrayArgs = (curr: string, prev?: string[]) => {
 
 const jsoxParse = <T>(text: string) => JSOX.parse(text) as T
 
+const main = async () => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  const options = program.opts() as ConfigOptions
+
+  info('options: %O', options)
+
+  const startWatcher = (configs: InputOptions[]) => {
+    const watcher = watch(configs)
+    watcher.on('event', event => {
+      switch (event.code) {
+        case 'START': {
+          info('🚀 (re)starting...')
+          break
+        }
+        case 'END': {
+          info('🎉 bundled successfully.')
+          break
+        }
+        case 'ERROR': {
+          console.error(event)
+          break
+        }
+      }
+    })
+  }
+
+  const configs = await config(options)
+
+  if (options.watch) {
+    startWatcher(configs)
+  } else {
+    await Promise.allSettled(
+      configs.map(async opts => {
+        const bundle = await rollup(opts)
+        return bundle.write(opts.output as OutputOptions)
+      }),
+    )
+  }
+}
+
 program
   .version(
     tryRequirePkg<{ version: string }>(
@@ -85,71 +124,25 @@ program
     'Overrides the esbuild options for `rollup-plugin-esbuild`',
     jsoxParse,
   )
-  .option('--vue <JSOX>', 'options for `rollup-plugin-vue`', jsoxParse)
+  .option(
+    '--vue [boolean | JSOX]',
+    'options for `@vitejs/plugin-vue`, you need to install it manually',
+    jsoxParse,
+  )
+  .option(
+    '--vue-jsx [boolean | JSOX]',
+    'options for `@vitejs/plugin-vue-jsx`, you need to install it manually',
+    jsoxParse,
+  )
   .option(
     '-d, --define [boolean | JSOX]',
     'options for `@rollup/plugin-replace`, enable `__DEV__` and `__PROD__` by default',
     jsoxParse,
     true,
   )
+  .action(main)
   .option(
     '-p, --prod [boolean]',
     'whether to enable production(.min.js) bundle together at the same time',
   )
   .parse(process.argv)
-
-const options = pick(
-  program.opts(),
-  'input',
-  'exclude',
-  'outputDir',
-  'formats',
-  'monorepo',
-  'exports',
-  'external',
-  'externals',
-  'globals',
-  'aliasEntries',
-  'sourceMap',
-  'esbuild',
-  'vue',
-  'define',
-  'prod',
-) as ConfigOptions
-
-info('options: %O', options)
-
-const startWatcher = (configs: InputOptions[]) => {
-  const watcher = watch(configs)
-  watcher.on('event', event => {
-    switch (event.code) {
-      case 'START': {
-        info('🚀 (re)starting...')
-        break
-      }
-      case 'END': {
-        info('🎉 bundled successfully.')
-        break
-      }
-      case 'ERROR': {
-        console.error(event)
-        break
-      }
-    }
-  })
-}
-
-const configs = config(options)
-
-if (options.watch) {
-  startWatcher(configs)
-} else {
-  Promise.all(
-    configs.map(opts =>
-      rollup(opts).then(bundle => bundle.write(opts.output as OutputOptions)),
-    ),
-  ).catch((e: Error) => {
-    console.error(e)
-    process.exitCode = 1
-  })
-}

packages/rollup/src/config.ts

@@ -1,4 +1,5 @@
 import fs from 'node:fs'
+import { builtinModules } from 'node:module'
 import path from 'node:path'
 
 import { entries } from '@pkgr/es-modules'
@@ -28,30 +29,21 @@ import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import url from '@rollup/plugin-url'
-import builtinModules from 'builtin-modules'
+import type { Options as VuePluginOptions } from '@vitejs/plugin-vue'
+import type { Options as VueJsxPluginOptions } from '@vitejs/plugin-vue-jsx'
 import debug from 'debug'
 import isGlob from 'is-glob'
-import { flatMap } from 'lodash-es'
-import {
+import type {
   ModuleFormat,
   OutputOptions,
-  Plugin,
   RollupOptions,
   WarningHandlerWithDefault,
 } from 'rollup'
-import copy, { CopyOptions } from 'rollup-plugin-copy'
-import esbuild, { Options as EsBuildOptions } from 'rollup-plugin-esbuild'
+import copy, { type CopyOptions } from 'rollup-plugin-copy'
+import esbuild, { type Options as EsBuildOptions } from 'rollup-plugin-esbuild'
 import unassert from 'rollup-plugin-unassert'
-import vueJsx, { Options as VueJsxOptions } from 'rollup-plugin-vue-jsx-compat'
 import { defaultOptions } from 'unassert'
 
-type VuePluginOptions = import('rollup-plugin-vue').Options
-
-const vue =
-  tryRequirePkg<(opts?: Partial<VuePluginOptions>) => Plugin>(
-    'rollup-plugin-vue',
-  )
-
 const info = debug('r:info')
 
 const STYLE_EXTENSIONS = [
@@ -63,6 +55,7 @@ const STYLE_EXTENSIONS = [
   '.styl',
   '.stylus',
 ]
+
 const IMAGE_EXTENSIONS = [
   '.bmp',
   '.gif',
@@ -72,6 +65,7 @@ const IMAGE_EXTENSIONS = [
   '.svg',
   '.webp',
 ]
+
 const ASSETS_EXTENSIONS = [...STYLE_EXTENSIONS, ...IMAGE_EXTENSIONS]
 
 const resolve = ({
@@ -162,7 +156,8 @@ export interface ConfigOptions {
   copies?: CopyOptions | CopyOptions['targets'] | StringMap
   sourceMap?: boolean
   esbuild?: EsBuildOptions
-  vue?: VuePluginOptions
+  vue?: VuePluginOptions | boolean
+  vueJsx?: VueJsxPluginOptions | boolean
   define?: Record<string, string> | boolean
   prod?: boolean
   watch?: boolean
@@ -184,7 +179,10 @@ const isCopyOptions = (
     COPY_OPTIONS_KEYS.includes(key as keyof CopyOptions),
   )
 
-export const config = ({
+let vue: (typeof import('@vitejs/plugin-vue'))['default'] | undefined
+let vueJsx: (typeof import('@vitejs/plugin-vue-jsx'))['default'] | undefined
+
+export const config = async ({
   formats,
   monorepo,
   input,
@@ -199,10 +197,11 @@ export const config = ({
   sourceMap = false,
   esbuild: esbuildOptions = {},
   vue: vueOptions,
+  vueJsx: vueJsxOptions,
   define,
   prod = __PROD__,
 }: // eslint-disable-next-line sonarjs/cognitive-complexity
-ConfigOptions = {}): RollupOptions[] => {
+ConfigOptions = {}): Promise<RollupOptions[]> => {
   let pkgs =
     monorepo === false
       ? [CWD]
@@ -255,7 +254,20 @@ ConfigOptions = {}): RollupOptions[] => {
             ),
       }
 
-  const configs: RollupOptions[] = flatMap(pkgs, pkg => {
+  if (vueOptions) {
+    if (vueOptions === true) {
+      vueOptions = {}
+    }
+    ;({ default: vue } = await import('@vitejs/plugin-vue'))
+  }
+  if (vueJsxOptions) {
+    if (vueJsxOptions === true) {
+      vueJsxOptions = {}
+    }
+    ;({ default: vueJsx } = await import('@vitejs/plugin-vue-jsx'))
+  }
+
+  const configs: RollupOptions[] = pkgs.flatMap(pkg => {
     const srcPath = path.resolve(pkg, 'src')
 
     let pkgInput = input
@@ -345,8 +357,7 @@ ConfigOptions = {}): RollupOptions[] => {
     }
 
     const isTsInput = /\.tsx?/.test(pkgInput)
-    const { jsxFactory, target } = esbuildOptions
-    const esbuildVueJsx = vue && (!jsxFactory || jsxFactory === 'vueJsxCompat')
+    const { target } = esbuildOptions
 
     return pkgFormats.map(format => {
       const isEsVersion = /^es(?:\d+|m|next)$/.test(format) && format !== 'es5'
@@ -386,9 +397,9 @@ ConfigOptions = {}): RollupOptions[] => {
         onwarn,
         plugins: [
           alias(aliasOptions),
-          esbuildVueJsx && (vueJsx as (options?: VueJsxOptions) => Plugin)(),
+          vue?.(vueOptions as VuePluginOptions),
+          vueJsx?.(vueJsxOptions as VueJsxPluginOptions),
           esbuild({
-            jsxFactory: esbuildVueJsx ? 'vueJsxCompat' : undefined,
             tsconfig:
               tryFile(path.resolve(pkg, 'tsconfig.json')) ||
               tryFile('tsconfig.base.json') ||
@@ -422,7 +433,6 @@ ConfigOptions = {}): RollupOptions[] => {
           unassert({
             modules: [...defaultOptions().modules, 'uvu/assert'],
           }),
-          vue?.(vueOptions),
         ].filter(identify),
       }
     })
@@ -436,10 +446,10 @@ ConfigOptions = {}): RollupOptions[] => {
   return configs
 }
 
-export default (options: ConfigOptions = {}) => {
+export default async (options: ConfigOptions = {}) => {
   const configs = [
-    ...config(options),
-    ...(options.prod ? config({ ...options, prod: false }) : []),
+    ...(await config(options)),
+    ...(options.prod ? await config({ ...options, prod: false }) : []),
   ]
 
   info('configs: %O', configs)