chore: use unbuild to bundle plugins (#8139)

Author: antfu

.eslintignore

@@ -0,0 +1,4 @@
+dist
+playground-temp
+temp
+

.eslintrc.cjs

@@ -125,7 +125,7 @@ module.exports = defineConfig({
       }
     },
     {
-      files: ['packages/create-vite/template-*/**'],
+      files: ['packages/create-vite/template-*/**', '**/build.config.ts'],
       rules: {
         'node/no-missing-import': 'off'
       }

.github/workflows/ci.yml

@@ -66,14 +66,8 @@ jobs:
       - name: Install Playwright
         run: pnpm playwright install
 
-      - name: Build vite
-        run: pnpm run ci-build-vite
-
-      - name: Build plugin-vue
-        run: pnpm run build-plugin-vue
-
-      - name: Build plugin-react
-        run: pnpm run build-plugin-react
+      - name: Build
+        run: pnpm run build
 
       - name: Test unit
         run: pnpm run test-unit
@@ -107,11 +101,8 @@ jobs:
         env:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
 
-      - name: Prepare
-        run: |
-          pnpm run ci-build-vite
-          pnpm run build-plugin-vue
-          pnpm run build-plugin-react
+      - name: Build
+        run: pnpm run build
 
       - name: Lint
         run: pnpm run lint

.prettierignore

@@ -1,12 +1,8 @@
-docs/.vitepress/dist/
-packages/vite/dist/
-packages/vite/temp/
-packages/plugin-react/dist/
-packages/plugin-vue/dist/
 packages/*/CHANGELOG.md
 playground-temp/
+dist/
+temp/
 LICENSE.md
-.prettierignore
 pnpm-lock.yaml
 pnpm-workspace.yaml
 playground/tsconfig-json-load-error/has-error/tsconfig.json

package.json

@@ -16,28 +16,26 @@
     "preinstall": "npx only-allow pnpm",
     "format": "prettier --write .",
     "lint": "eslint packages/*/{src,types}/** playground/**/__tests__/** scripts/**",
+    "typecheck": "tsc -p scripts --noEmit && tsc -p playground --noEmit",
     "test": "run-s test-unit test-serve test-build",
     "test-serve": "vitest run -c vitest.config.e2e.ts",
     "test-build": "cross-env VITE_TEST_BUILD=1 vitest run -c vitest.config.e2e.ts",
     "test-unit": "vitest run",
     "debug-serve": "cross-env VITE_DEBUG_SERVE=1 vitest run -c vitest.config.e2e.ts",
     "debug-build": "cross-env VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 vitest run -c vitest.config.e2e.ts",
     "docs": "vitepress dev docs",
-    "build-docs": "vitepress build docs",
-    "serve-docs": "vitepress serve docs",
+    "docs-build": "vitepress build docs",
+    "docs-serve": "vitepress serve docs",
+    "build": "pnpm -r --filter=./packages/* run build",
+    "dev": "pnpm -r --parallel --filter=./packages/* run dev",
     "release": "ts-node scripts/release.ts",
     "ci-publish": "ts-node scripts/publishCI.ts",
-    "typecheck": "tsc -p scripts --noEmit && tsc -p playground --noEmit",
-    "build": "run-s build-vite build-plugin-vue build-plugin-react",
-    "build-vite": "cd packages/vite && npm run build",
-    "build-plugin-vue": "cd packages/plugin-vue && npm run build",
-    "build-plugin-react": "cd packages/plugin-react && npm run build",
-    "ci-build-vite": "cd packages/vite && npm run ci-build",
-    "ci-docs": "run-s build-vite build-plugin-vue build-docs"
+    "ci-docs": "run-s build docs-build"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.23.1",
     "@types/babel__core": "^7.1.19",
+    "@types/babel__standalone": "^7.1.4",
     "@types/convert-source-map": "^1.5.2",
     "@types/cross-spawn": "^6.0.2",
     "@types/debug": "^4.1.7",
@@ -83,6 +81,7 @@
     "sirv": "^2.0.2",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.4",
+    "unbuild": "^0.7.4",
     "vite": "workspace:*",
     "vitepress": "^0.22.4",
     "vitest": "^0.12.4",

packages/plugin-vue-jsx/build.config.ts

@@ -0,0 +1,10 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: ['src/index'],
+  clean: true,
+  declaration: true,
+  rollup: {
+    emitCJS: true
+  }
+})

packages/plugin-vue-jsx/index.d.ts

@@ -4,11 +4,24 @@
   "license": "MIT",
   "author": "Evan You",
   "files": [
-    "index.js",
-    "index.d.ts"
+    "dist"
   ],
-  "main": "index.js",
-  "types": "index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "unbuild --stub",
+    "build": "unbuild && pnpm run patch-cjs",
+    "patch-cjs": "ts-node ../../scripts/patchCJS.ts",
+    "prepublishOnly": "npm run build"
+  },
   "engines": {
     "node": ">=14.6.0"
   },
@@ -28,6 +41,9 @@
     "@rollup/pluginutils": "^4.2.1",
     "@vue/babel-plugin-jsx": "^1.1.1"
   },
+  "devDependencies": {
+    "vite": "workspace:*"
+  },
   "peerDependencies": {
     "vite": "^2.0.0",
     "vue": "^3.0.0"

packages/plugin-vue-jsx/package.json

@@ -1,10 +1,16 @@
-// @ts-check
-const babel = require('@babel/core')
-const jsx = require('@vue/babel-plugin-jsx')
-const importMeta = require('@babel/plugin-syntax-import-meta')
-const { createFilter, normalizePath } = require('@rollup/pluginutils')
-const { createHash } = require('crypto')
-const path = require('path')
+import { createHash } from 'crypto'
+import path from 'path'
+import type { types } from '@babel/core'
+import babel from '@babel/core'
+import jsx from '@vue/babel-plugin-jsx'
+// @ts-expect-error missing type
+import importMeta from '@babel/plugin-syntax-import-meta'
+import { createFilter, normalizePath } from '@rollup/pluginutils'
+import type { ComponentOptions } from 'vue'
+import type { Plugin } from 'vite'
+import type { Options } from './types'
+
+export * from './types'
 
 const ssrRegisterHelperId = '/__vue-jsx-ssr-register-helper'
 const ssrRegisterHelperCode =
@@ -14,10 +20,8 @@ const ssrRegisterHelperCode =
 /**
  * This function is serialized with toString() and evaluated as a virtual
  * module during SSR
- * @param {import('vue').ComponentOptions} comp
- * @param {string} filename
  */
-function ssrRegisterHelper(comp, filename) {
+function ssrRegisterHelper(comp: ComponentOptions, filename: string) {
   const setup = comp.setup
   comp.setup = (props, ctx) => {
     // @ts-ignore
@@ -29,17 +33,7 @@ function ssrRegisterHelper(comp, filename) {
   }
 }
 
-/**
- * @typedef { import('@rollup/pluginutils').FilterPattern} FilterPattern
- * @typedef { { include?: FilterPattern, exclude?: FilterPattern, babelPlugins?: any[] } } CommonOptions
- */
-
-/**
- *
- * @param {import('@vue/babel-plugin-jsx').VueJSXPluginOptions & CommonOptions} options
- * @returns {import('vite').Plugin}
- */
-function vueJsxPlugin(options = {}) {
+function vueJsxPlugin(options: Options = {}): Plugin {
   let root = ''
   let needHmr = false
   let needSourceMap = true
@@ -110,31 +104,28 @@ function vueJsxPlugin(options = {}) {
           sourceMaps: needSourceMap,
           sourceFileName: id,
           configFile: false
-        })
+        })!
 
         if (!ssr && !needHmr) {
+          if (!result.code) return
           return {
             code: result.code,
             map: result.map
           }
         }
 
+        interface HotComponent {
+          local: string
+          exported: string
+          id: string
+        }
+
         // check for hmr injection
-        /**
-         * @type {{ name: string }[]}
-         */
-        const declaredComponents = []
-        /**
-         * @type {{
-         *  local: string,
-         *  exported: string,
-         *  id: string,
-         * }[]}
-         */
-        const hotComponents = []
+        const declaredComponents: { name: string }[] = []
+        const hotComponents: HotComponent[] = []
         let hasDefault = false
 
-        for (const node of result.ast.program.body) {
+        for (const node of result.ast!.program.body) {
           if (node.type === 'VariableDeclaration') {
             const names = parseComponentDecls(node, code)
             if (names.length) {
@@ -204,7 +195,7 @@ function vueJsxPlugin(options = {}) {
         if (hotComponents.length) {
           if (hasDefault && (needHmr || ssr)) {
             result.code =
-              result.code.replace(
+              result.code!.replace(
                 /export default defineComponent/g,
                 `const __default__ = defineComponent`
               ) + `\nexport default __default__`
@@ -239,6 +230,7 @@ function vueJsxPlugin(options = {}) {
           }
         }
 
+        if (!result.code) return
         return {
           code: result.code,
           map: result.map
@@ -248,11 +240,7 @@ function vueJsxPlugin(options = {}) {
   }
 }
 
-/**
- * @param {import('@babel/core').types.VariableDeclaration} node
- * @param {string} source
- */
-function parseComponentDecls(node, source) {
+function parseComponentDecls(node: types.VariableDeclaration, source: string) {
   const names = []
   for (const decl of node.declarations) {
     if (decl.id.type === 'Identifier' && isDefineComponentCall(decl.init)) {
@@ -264,10 +252,7 @@ function parseComponentDecls(node, source) {
   return names
 }
 
-/**
- * @param {import('@babel/core').types.Node} node
- */
-function isDefineComponentCall(node) {
+function isDefineComponentCall(node?: types.Node | null) {
   return (
     node &&
     node.type === 'CallExpression' &&
@@ -276,13 +261,8 @@ function isDefineComponentCall(node) {
   )
 }
 
-/**
- * @param {string} text
- * @returns {string}
- */
-function getHash(text) {
+function getHash(text: string) {
   return createHash('sha256').update(text).digest('hex').substring(0, 8)
 }
 
-module.exports = vueJsxPlugin
-vueJsxPlugin.default = vueJsxPlugin
+export default vueJsxPlugin

packages/plugin-vue-jsx/index.js packages/plugin-vue-jsx/src/index.ts

@@ -0,0 +1,10 @@
+import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
+import type { FilterPattern } from '@rollup/pluginutils'
+
+export interface FilterOptions {
+  include?: FilterPattern
+  exclude?: FilterPattern
+}
+
+export type Options = VueJSXPluginOptions &
+  FilterOptions & { babelPlugins?: any[] }

packages/plugin-vue-jsx/src/types.ts

@@ -0,0 +1,19 @@
+{
+  "include": ["src"],
+  "exclude": ["**/*.spec.ts"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2018",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "paths": {
+      "types/*": ["../vite/types/*"],
+      "vite": ["../vite/src/node/index.js"]
+    }
+  }
+}