build: parallel build (#3416)

.github/workflows/master-deploy.yml

@@ -23,7 +23,7 @@ jobs:
           version: 6.15.1
 
       - name: Install dependencies
-        run: pnpm bootstrap
+        run: pnpm i
 
       - name: Fetch Crowdin token for pulling languages
         run: pnpm docs:crowdin
@@ -44,11 +44,6 @@ jobs:
         env:
           DOC_ENV: production
 
-      # - name: Build Indices
-      #   run: pnpm build:indices
-      #   env:
-      #     ALGOLIA_KEY: ${{secrets.ALGOLIA_KEY}}
-
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@3.7.1
         with:

.github/workflows/preview-build.yml

@@ -24,13 +24,13 @@ jobs:
           version: 6.15.1
 
       - name: Install dependencies
-        run: pnpm bootstrap
+        run: pnpm i
 
       - name: Generate common locale
         run: pnpm docs:gen-locale
 
       - name: Build Element Plus
-        run: sh scripts/build.sh
+        run: pnpm build
 
       - name: Build website
         run: pnpm docs:build

.github/workflows/publish-npm.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           version: 6.15.1
       - name: Install dependencies
-        run: pnpm bootstrap
+        run: pnpm i
       - name: Lint
         run: pnpm lint
       - name: Test

.github/workflows/staging-preview.yml

@@ -25,10 +25,10 @@ jobs:
           version: 6.15.1
 
       - name: Install dependencies
-        run: pnpm bootstrap
+        run: pnpm i
 
       - name: Compile Element Plus
-        run: sh scripts/build.sh
+        run: pnpm build
 
       - name: Init Crowdin token
         run: pnpm docs:crowdin

.github/workflows/unit-test.yml

@@ -26,7 +26,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm bootstrap
+        run: pnpm i
       - name: Lint
         run: pnpm lint
       - name: Test

.vscode/settings.json

@@ -4,7 +4,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-
+  "npm.packageManager": "pnpm",
   "eslint.probe": [
     "javascript",
     "javascriptreact",

DEV_FAQ.md

@@ -5,15 +5,5 @@ Here are the problems that are easy to encounter in development.
 ## If you encounter dependency related issues
 
 ```bash
-pnpm bootstrap
+pnpm i
 ```
-
-## Test suite failed to run (jest)
-
-Can not run `pnpm test xxx`
-
-```bash
-rm -rf dist
-```
-
-Try again.

README.md

@@ -77,7 +77,7 @@ You can find the breaking change list here: [Breaking Change List](https://githu
 With command
 
 ```bash
-$ pnpm bootstrap
+$ pnpm i
 ```
 
 the project will install all dependencies

build/build-helper.ts

@@ -1,74 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import path from 'path'
-import helper from 'components-helper'
-import { epRoot } from './paths'
-
-const { name, version } = require(path.resolve(epRoot, './package.json'))
-
-const tagVer = process.env.TAG_VERSION
-const _version = tagVer
-  ? tagVer.startsWith('v')
-    ? tagVer.slice(1)
-    : tagVer
-  : version
-
-helper({
-  name,
-  version: _version,
-  entry: 'docs/en-US/component/!(datetime-picker|message-box|message).md',
-  outDir: 'dist/element-plus',
-  reComponentName,
-  reDocUrl,
-  reAttribute,
-  props: 'Attributes',
-  propsName: 'Attribute',
-  propsOptions: 'Accepted Values',
-  eventsName: 'Event Name',
-  tableRegExp:
-    '#+\\s+(.*\\s*Attributes|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)',
-})
-
-function reComponentName(title) {
-  return `el-${title
-    .replace(/\B([A-Z])/g, '-$1')
-    .replace(/[ ]+/g, '-')
-    .toLowerCase()}`
-}
-
-function reDocUrl(fileName, header) {
-  const docs = 'https://element-plus.org/#/en-US/component/'
-  const _header = header
-    ? header.replace(/[ ]+/g, '-').toLowerCase()
-    : undefined
-  return docs + fileName + (_header ? `#${_header}` : '')
-}
-
-function reAttribute(value, key /* , item */) {
-  const _value = value.match(/^\*\*(.*)\*\*$/)
-  const str = _value ? _value[1] : value
-
-  if (key === 'Name' && /^(-|—)$/.test(str)) {
-    return 'default'
-  } else if (str === '' || /^(-|—)$/.test(str)) {
-    return undefined
-  } else if (key === 'Attribute' && /v-model:(.+)/.test(str)) {
-    const _str = str.match(/v-model:(.+)/)
-    return _str ? _str[1] : undefined
-  } else if (key === 'Attribute' && /v-model/.test(str)) {
-    return 'model-value'
-  } else if (key === 'Attribute') {
-    return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
-  } else if (key === 'Type') {
-    return str
-      .replace(/\s*\/\s*/g, '|')
-      .replace(/\s*,\s*/g, '|')
-      .replace(/\(.*\)/g, '')
-      .toLowerCase()
-  } else if (key === 'Accepted Values') {
-    return /\[.+\]\(.+\)/.test(str) || /^\*$/.test(str)
-      ? undefined
-      : str.replace(/`/g, '')
-  } else {
-    return str
-  }
-}

build/build-indices.ts

@@ -1,65 +0,0 @@
-// TODO: implement this feature
-
-// import fs from 'fs'
-// import algoliasearch from 'algoliasearch'
-// import fg from 'fast-glob'
-
-// interface Index {
-//   component: string
-//   title: string
-//   anchor: string
-//   content: string
-//   sort: number
-//   path: string
-// }
-
-// const algoliaKey = process.env.ALGOLIA_KEY!
-
-// const client = algoliasearch('7DCTSU0WBW', algoliaKey)
-// const langs = {
-//   'zh-CN': 'element-zh',
-//   'en-US': 'element-en',
-//   es: 'element-es',
-//   'fr-FR': 'element-fr',
-//   jp: 'element-jp',
-// }
-// ;['zh-CN', 'en-US', 'es', 'fr-FR', 'jp'].forEach((lang) => {
-//   const indexName = langs[lang]
-//   const index = client.initIndex(indexName)
-//   index
-//     .clearObjects()
-//     .then(() => {
-//       const files = fg.sync(`website/docs/${lang}/*.md`)
-//       let indices: Index[] = []
-//       files.forEach((file) => {
-//         const regExp = new RegExp(`website\/docs\/${lang}\/(.*).md`)
-//         const pathContent = file.match(regExp)!
-//         const path = pathContent[1]
-//         const index = path.lastIndexOf('/')
-//         const names = index !== -1 ? path.split('/') : []
-//         const component = names.length ? names[names.length - 1] : path
-//         const content = fs.readFileSync(file, 'utf8')
-//         const matches = content
-//           .replace(/:::[\s\S]*?:::/g, '')
-//           .replace(/```[\s\S]*?```/g, '')
-//           .match(/#{2,4}[^#]*/g)!
-//           .map((match) =>
-//             match
-//               .replace(/\n+/g, '\n')
-//               .split('\n')
-//               .filter((part) => !!part)
-//           )
-//       })
-
-//       index
-//         .saveObjects(indices, {
-//           autoGenerateObjectIDIfNotExist: true,
-//         })
-//         .catch((e) => {
-//           console.log(e)
-//         })
-//     })
-//     .catch((e) => {
-//       console.log(e)
-//     })
-// })

build/component-types.ts

@@ -1,20 +1,22 @@
 import path from 'path'
-import fs from 'fs'
-import vueCompiler from '@vue/compiler-sfc'
+import fs from 'fs/promises'
+import * as vueCompiler from '@vue/compiler-sfc'
 import { Project } from 'ts-morph'
-import { sync as globSync } from 'fast-glob'
-import chalk from 'chalk'
+import glob from 'fast-glob'
+import { bold } from 'chalk'
+
+import { green, yellow } from './utils/log'
+import { buildOutput, compRoot, projRoot } from './utils/paths'
+
 import type { SourceFile } from 'ts-morph'
 
-const TSCONFIG_PATH = path.resolve(__dirname, '../tsconfig.json')
+const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.json')
+const outDir = path.resolve(buildOutput, 'types')
 
 /**
  * fork = require( https://github.com/egoist/vue-dts-gen/blob/main/src/index.ts
  */
-const genVueTypes = async (
-  root: string,
-  outDir = path.resolve(__dirname, '../dist/types')
-) => {
+export const genComponentTypes = async () => {
   const project = new Project({
     compilerOptions: {
       allowJs: true,
@@ -22,7 +24,7 @@ const genVueTypes = async (
       emitDeclarationOnly: true,
       noEmitOnError: true,
       outDir,
-      baseUrl: path.resolve(__dirname, '../'),
+      baseUrl: projRoot,
       paths: {
         '@element-plus/*': ['packages/*'],
       },
@@ -33,8 +35,6 @@ const genVueTypes = async (
     skipAddingFilesFromTsConfig: true,
   })
 
-  const sourceFiles: SourceFile[] = []
-
   const excludedFiles = [
     /\/demo\/\w+\.vue$/,
     /__test__|__tests__/,
@@ -47,21 +47,24 @@ const genVueTypes = async (
     '.DS_Store',
     'node_modules',
   ]
-  const filePaths = globSync('**/*', {
-    cwd: root,
-    onlyFiles: true,
-    absolute: true,
-  }).filter(
+  const filePaths = (
+    await glob('**/*', {
+      cwd: compRoot,
+      onlyFiles: true,
+      absolute: true,
+    })
+  ).filter(
     (path) =>
       !excludedFiles.some((f) =>
         f instanceof RegExp ? f.test(path) : path.includes(f)
       )
   )
 
+  const sourceFiles: SourceFile[] = []
   await Promise.all(
     filePaths.map(async (file) => {
       if (file.endsWith('.vue')) {
-        const content = await fs.promises.readFile(file, 'utf-8')
+        const content = await fs.readFile(file, 'utf-8')
         const sfc = vueCompiler.parse(content)
         const { script, scriptSetup } = sfc.descriptor
         if (script || scriptSetup) {
@@ -99,46 +102,31 @@ const genVueTypes = async (
     emitOnlyDtsFiles: true,
   })
 
-  for (const sourceFile of sourceFiles) {
-    const relativePath = path.relative(root, sourceFile.getFilePath())
-    console.log(
-      chalk.yellow(
-        `Generating definition for file: ${chalk.bold(relativePath)}`
-      )
-    )
+  const tasks = sourceFiles.map(async (sourceFile) => {
+    const relativePath = path.relative(compRoot, sourceFile.getFilePath())
+    yellow(`Generating definition for file: ${bold(relativePath)}`)
 
     const emitOutput = sourceFile.getEmitOutput()
-    for (const outputFile of emitOutput.getOutputFiles()) {
+    const tasks = emitOutput.getOutputFiles().map(async (outputFile) => {
       const filepath = outputFile.getFilePath()
-
-      await fs.promises.mkdir(path.dirname(filepath), {
+      await fs.mkdir(path.dirname(filepath), {
         recursive: true,
       })
 
-      await fs.promises.writeFile(
+      await fs.writeFile(
         filepath,
         outputFile
           .getText()
-          .replace(
-            new RegExp('@element-plus/components', 'g'),
-            'element-plus/es'
-          )
-          .replace(
-            new RegExp('@element-plus/theme-chalk', 'g'),
-            'element-plus/theme-chalk'
-          )
-          .replace(new RegExp('@element-plus', 'g'), 'element-plus/es'),
+          .replaceAll('@element-plus/components', 'element-plus/es')
+          .replaceAll('@element-plus/theme-chalk', 'element-plus/theme-chalk')
+          .replaceAll('@element-plus', 'element-plus/es'),
         'utf8'
       )
-      console.log(
-        chalk.green(
-          `Definition for file: ${chalk.bold(
-            sourceFile.getBaseName()
-          )} generated`
-        )
-      )
-    }
-  }
-}
 
-export default genVueTypes
+      green(`Definition for file: ${bold(relativePath)} generated`)
+    })
+    await Promise.all(tasks)
+  })
+
+  await Promise.all(tasks)
+}

build/components.ts

@@ -1,22 +1,30 @@
 import fs from 'fs'
 import path from 'path'
-import rollup from 'rollup'
+import { series, parallel } from 'gulp'
+import { rollup } from 'rollup'
 import vue from 'rollup-plugin-vue'
 import css from 'rollup-plugin-css-only'
-import filesize from 'rollup-plugin-filesize'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
 import { sync as globSync } from 'fast-glob'
+import filesize from 'rollup-plugin-filesize'
 
-import { compRoot, buildOutput } from './paths'
-import { errorAndExit, getExternals, yellow, green } from './utils'
-import genDefs from './gen-dts'
+import { compRoot, buildOutput } from './utils/paths'
+import { generateExternal, writeBundles } from './utils/rollup'
+import { run } from './utils/process'
+import { withTaskName } from './utils/gulp'
+import { getWorkspaceNames } from './utils/pkg'
+
+import { genComponentTypes } from './component-types'
+import { buildConfig } from './info'
 import reporter from './size-reporter'
 import { EP_PREFIX } from './constants'
 
-const outputDir = path.resolve(buildOutput, './element-plus')
+import type { OutputOptions } from 'rollup'
+import type { Module, BuildInfo } from './info'
 
+let workspacePkgs: string[] = []
 const plugins = [
   css(),
   vue({
@@ -28,47 +36,37 @@ const plugins = [
   esbuild(),
 ]
 
-;(async () => {
-  // run type diagnoses first
-  yellow('Start building types for individual components')
-  await genDefs(compRoot)
-  green('Typing generated successfully')
+const pathsRewriter = (module: Module) => (id: string) => {
+  const config = buildConfig[module]
+  if (workspacePkgs.some((pkg) => id.startsWith(pkg)))
+    return id.replace(EP_PREFIX, config.bundle.path)
+  else return ''
+}
 
-  yellow('Start building individual components')
-  await buildComponents()
-  green('Components built successfully')
-
-  yellow('Start building entry file')
-  await buildEntry()
-  green('Entry built successfully')
-
-  green('Individual component build finished')
-})().catch((e: Error) => errorAndExit(e))
+const init = async () => {
+  workspacePkgs = (await getWorkspaceNames()).filter((pkg) =>
+    pkg.startsWith(EP_PREFIX)
+  )
+}
 
 async function getComponents() {
-  const files = globSync('*', { cwd: compRoot, onlyDirectories: true })
+  const files = globSync('*', {
+    cwd: compRoot,
+    onlyDirectories: true,
+  })
   return files.map((file) => ({
     path: path.resolve(compRoot, file),
     name: file,
   }))
 }
 
-function pathsRewriter(id: string) {
-  const excludes = ['icons']
-  if (id.startsWith(`${EP_PREFIX}/components`))
-    return id.replace(`${EP_PREFIX}/components`, '..')
-  if (id.startsWith(EP_PREFIX) && excludes.every((e) => !id.endsWith(e)))
-    return id.replace(EP_PREFIX, '../..')
-  return id
-}
-
-async function buildComponents() {
+async function buildEachComponent() {
   const componentPaths = await getComponents()
-  const external = await getExternals({ full: false })
+  const external = await generateExternal({ full: false })
 
   const builds = componentPaths.map(
     async ({ path: p, name: componentName }) => {
-      const entry = path.resolve(p, './index.ts')
+      const entry = path.resolve(p, 'index.ts')
       if (!fs.existsSync(entry)) return
 
       const rollupConfig = {
@@ -76,71 +74,60 @@ async function buildComponents() {
         plugins,
         external,
       }
-      const bundle = await rollup.rollup(rollupConfig)
+      const opts = (Object.entries(buildConfig) as [Module, BuildInfo][]).map(
+        ([module, config]): OutputOptions => ({
+          format: config.format,
+          file: path.resolve(
+            config.output.path,
+            'components',
+            componentName,
+            'index.js'
+          ),
+          exports: module === 'cjs' ? 'named' : undefined,
+          paths: pathsRewriter(module),
+          plugins: [filesize({ reporter })],
+        })
+      )
 
-      // ESM
-      await bundle.write({
-        format: 'es',
-        file: `${outputDir}/es/components/${componentName}/index.js`,
-        plugins: [
-          filesize({
-            reporter,
-          }),
-        ],
-        paths: pathsRewriter,
-      })
-
-      // CJS
-      await bundle.write({
-        format: 'cjs',
-        file: `${outputDir}/lib/components/${componentName}/index.js`,
-        exports: 'named',
-        plugins: [
-          filesize({
-            reporter,
-          }),
-        ],
-        paths: pathsRewriter,
-      })
+      const bundle = await rollup(rollupConfig)
+      await writeBundles(bundle, opts)
     }
   )
-  try {
-    await Promise.all(builds)
-  } catch (e: any) {
-    errorAndExit(e)
-  }
+  await Promise.all(builds)
 }
 
-async function buildEntry() {
+async function buildComponentEntry() {
   const entry = path.resolve(compRoot, 'index.ts')
   const config = {
     input: entry,
     plugins,
     external: () => true,
   }
-
-  try {
-    const bundle = await rollup.rollup(config)
-    await bundle.write({
-      format: 'es',
-      file: `${outputDir}/es/components/index.js`,
-      plugins: [
-        filesize({
-          reporter,
-        }),
-      ],
+  const opts = Object.values(buildConfig).map(
+    (config): OutputOptions => ({
+      format: config.format,
+      file: path.resolve(config.output.path, 'components/index.js'),
+      plugins: [filesize({ reporter })],
     })
+  )
 
-    await bundle.write({
-      format: 'cjs',
-      file: `${outputDir}/lib/components/index.js`,
-      plugins: [
-        filesize({
-          reporter,
-        }),
-      ],
-    })
-  } catch (e: any) {
-    errorAndExit(e)
-  }
+  const bundle = await rollup(config)
+  await writeBundles(bundle, opts)
 }
+
+function copyTypes() {
+  const src = `${buildOutput}/types/components/`
+  const copy = (module: Module) =>
+    withTaskName(`copyTypes:${module}`, () =>
+      run(`rsync -a ${src} ${buildConfig[module].output.path}/components/`)
+    )
+
+  return parallel(copy('esm'), copy('cjs'))
+}
+
+export const buildComponents = series(
+  init,
+  parallel(genComponentTypes, buildEachComponent, buildComponentEntry),
+  copyTypes()
+)
+export { genComponentTypes, buildEachComponent, buildComponentEntry }

build/crowdin-credentials.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import fs from 'fs'
 import chalk from 'chalk'
-import { errorAndExit } from './utils'
+import { errorAndExit } from './utils/log'
 
 const credentialPlaceholder = 'API_TOKEN_PLACEHOLDER'
 

build/crowdin-generate.ts

@@ -1,9 +1,8 @@
-/* eslint-disable */
 import fs from 'fs'
 import path from 'path'
 import chalk from 'chalk'
 
-import { docRoot } from './paths'
+import { docRoot } from './utils/paths'
 
 // NB: this file is only for generating files that enables developers to develop the website.
 const componentLocaleRoot = path.resolve(docRoot, '.vitepress/crowdin')
@@ -70,6 +69,7 @@ async function traverseDir(dir, paths, targetPath) {
           path.resolve(targetPath, c.name)
         )
       } else if (c.isFile()) {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const content = require(path.resolve(dir, c.name))
 
         const contentToWrite = {
@@ -78,6 +78,7 @@ async function traverseDir(dir, paths, targetPath) {
 
         await Promise.all(
           paths.map(async (p) => {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
             const content = require(path.resolve(p.pathname, c.name))
 
             contentToWrite[p.name] = content

build/entry-types.ts

@@ -0,0 +1,76 @@
+import path from 'path'
+import fs from 'fs/promises'
+import { bold } from 'chalk'
+import glob from 'fast-glob'
+import { Project, ScriptTarget } from 'ts-morph'
+import { parallel } from 'gulp'
+import { epRoot, buildOutput, projRoot } from './utils/paths'
+import { yellow, green } from './utils/log'
+import { buildConfig } from './info'
+import { withTaskName } from './utils/gulp'
+import { run } from './utils/process'
+import type { Module } from './info'
+
+import type { SourceFile } from 'ts-morph'
+
+const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.dts.json')
+
+export const genEntryTypes = async () => {
+  const files = await glob('*.ts', {
+    cwd: epRoot,
+    absolute: true,
+  })
+  const project = new Project({
+    compilerOptions: {
+      allowJs: true,
+      declaration: true,
+      emitDeclarationOnly: true,
+      noEmitOnError: false,
+      outDir: path.resolve(buildOutput, 'entry/types'),
+      skipLibCheck: true,
+      esModuleInterop: true,
+      target: ScriptTarget.ESNext,
+      downlevelIteration: true,
+      // types: ["./typings", "esnext", "dom"],
+    },
+    skipFileDependencyResolution: true,
+    tsConfigFilePath: TSCONFIG_PATH,
+    skipAddingFilesFromTsConfig: true,
+  })
+  const sourceFiles: SourceFile[] = []
+  files.map((f) => {
+    const sourceFile = project.addSourceFileAtPath(f)
+    sourceFiles.push(sourceFile)
+  })
+
+  const tasks = sourceFiles.map(async (sourceFile) => {
+    yellow(`Emitting file: ${bold(sourceFile.getFilePath())}`)
+    await sourceFile.emit()
+    const emitOutput = sourceFile.getEmitOutput()
+    for (const outputFile of emitOutput.getOutputFiles()) {
+      const filepath = outputFile.getFilePath()
+
+      await fs.mkdir(path.dirname(filepath), {
+        recursive: true,
+      })
+      await fs.writeFile(
+        filepath,
+        outputFile.getText().replaceAll('@element-plus', '.'),
+        'utf8'
+      )
+      green(`Definition for file: ${bold(sourceFile.getBaseName())} generated`)
+    }
+  })
+
+  await Promise.all(tasks)
+}
+
+export function copyEntryTypes() {
+  const src = path.resolve(buildOutput, 'entry', 'types')
+  const copy = (module: Module) =>
+    withTaskName(`copyEntryTypes:${module}`, () =>
+      run(`rsync -a ${src}/ ${buildConfig[module].output.path}/`)
+    )
+
+  return parallel(copy('esm'), copy('cjs'))
+}

build/full-bundle.ts

@@ -1,20 +1,28 @@
 import path from 'path'
 import fs from 'fs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
-import rollup from 'rollup'
-import chalk from 'chalk'
+import { rollup } from 'rollup'
 import commonjs from '@rollup/plugin-commonjs'
 import vue from 'rollup-plugin-vue'
 import esbuild from 'rollup-plugin-esbuild'
-import replace from 'rollup-plugin-replace'
-import genDts from './gen-entry-dts'
-import RollupResolveEntryPlugin from './rollup.plugin.entry'
-import { epRoot, buildOutput } from './paths'
+import replace from '@rollup/plugin-replace'
+import { parallel, series } from 'gulp'
+import { genEntryTypes } from './entry-types'
+import { RollupResolveEntryPlugin } from './rollup-plugin-entry'
+import { epRoot, epOutput } from './utils/paths'
 import { EP_PREFIX, excludes } from './constants'
-import { getExternals } from './utils'
-;(async () => {
-  const config = {
-    input: path.resolve(epRoot, './index.ts'),
+import { yellow, green } from './utils/log'
+import { generateExternal, writeBundles } from './utils/rollup'
+import { buildConfig } from './info'
+
+import { run } from './utils/process'
+import type { RollupOptions, OutputOptions } from 'rollup'
+
+let config: RollupOptions
+
+const init = async () =>
+  (config = {
+    input: path.resolve(epRoot, 'index.ts'),
     plugins: [
       nodeResolve(),
       vue({
@@ -23,100 +31,84 @@ import { getExternals } from './utils'
         exposeFilename: false,
       }),
       commonjs(),
-      esbuild({
-        minify: false,
-      }),
+      esbuild({ minify: false }),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
       }),
     ],
-    external: await getExternals({ full: true }),
-  }
+    external: await generateExternal({ full: true }),
+  })
 
-  console.log(chalk.cyan('Start generating full bundle'))
+export const buildFull = async () => {
+  yellow('Building bundle')
 
-  const umd = {
+  // Full bundle generation
+  const bundle = await rollup({
+    ...config,
+    plugins: [...config.plugins!, RollupResolveEntryPlugin()],
+  })
+
+  yellow('Generating index.full.js')
+  await bundle.write({
     format: 'umd',
-    file: path.resolve(buildOutput, 'element-plus/dist/index.js'),
+    file: path.resolve(epOutput, 'dist/index.full.js'),
     exports: 'named',
     name: 'ElementPlus',
     globals: {
       vue: 'Vue',
     },
-  }
-
-  const umdMinified = {
-    ...umd,
-    file: path.resolve(buildOutput, 'element-plus/dist/index.full.js'),
-  }
-
-  console.log(chalk.bold(chalk.yellow('Building bundle')))
-
-  // Full bundle generation
-  const bundle = await rollup.rollup({
-    ...config,
-    plugins: [...config.plugins, RollupResolveEntryPlugin()],
   })
+  green('index.full.js generated')
+}
 
-  console.log(chalk.yellow('Generating index.full.js'))
+export const buildEntry = async () => {
+  yellow('Generating entry files without dependencies')
 
-  await bundle.write(umdMinified as any)
-
-  console.log(chalk.green('index.full.js generated'))
-
-  console.log(chalk.yellow('Generating entry files without dependencies'))
-
-  // Entry bundle generation
-
-  const entryFiles = await fs.promises.readdir(epRoot, { withFileTypes: true })
+  const entryFiles = await fs.promises.readdir(epRoot, {
+    withFileTypes: true,
+  })
 
   const entryPoints = entryFiles
     .filter((f) => f.isFile())
-    .filter((f) => {
-      return f.name !== 'package.json' && f.name !== 'README.md'
-    })
+    .filter((f) => !['package.json', 'README.md'].includes(f.name))
     .map((f) => path.resolve(epRoot, f.name))
 
-  const entryBundle = await rollup.rollup({
+  const bundle = await rollup({
     ...config,
     input: entryPoints,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    external: (_) => true,
+    external: () => true,
   })
 
-  const rewriter = (id) => {
+  const rewriter = (id: string) => {
     if (id.startsWith(`${EP_PREFIX}/components`))
       return id.replace(`${EP_PREFIX}/components`, './components')
-    if (id.startsWith(EP_PREFIX) && excludes.every((e) => !id.endsWith(e)))
+    else if (id.startsWith(EP_PREFIX) && excludes.every((e) => !id.endsWith(e)))
       return id.replace(EP_PREFIX, '.')
+    else return ''
   }
 
-  console.log(chalk.yellow('Generating cjs entry'))
+  yellow('Generating entries')
+  writeBundles(
+    bundle,
+    Object.values(buildConfig).map(
+      (config): OutputOptions => ({
+        format: config.format,
+        dir: config.output.path,
+        exports: config.format === 'cjs' ? 'named' : undefined,
+        paths: rewriter,
+      })
+    )
+  )
+  green('entries generated')
+}
 
-  await entryBundle.write({
-    format: 'cjs',
-    dir: path.resolve(buildOutput, 'element-plus/lib'),
-    exports: 'named',
-    paths: rewriter,
-  })
+export const copyFullStyle = () =>
+  Promise.all([
+    run(`cp ${epOutput}/theme-chalk/index.css ${epOutput}/dist/index.css`),
+    run(`cp -R ${epOutput}/theme-chalk/fonts ${epOutput}/dist/fonts`),
+  ])
 
-  console.log(chalk.green('cjs entry generated'))
-
-  console.log(chalk.yellow('Generating esm entry'))
-
-  await entryBundle.write({
-    format: 'esm',
-    dir: path.resolve(buildOutput, 'element-plus/es'),
-    paths: rewriter,
-  })
-
-  console.log(chalk.green('esm entry generated'))
-
-  console.log(chalk.bold(chalk.green('Full bundle generated')))
-
-  console.log(chalk.yellow('Generate entry file definitions'))
-
-  await genDts()
-
-  console.log(chalk.green('Entry file definitions generated'))
-})()
+export const buildFullBundle = series(
+  init,
+  parallel(buildFull, buildEntry, genEntryTypes)
+)

build/gen-entry-dts.ts

@@ -1,64 +0,0 @@
-import path from 'path'
-import fs from 'fs'
-import chalk from 'chalk'
-import glob from 'fast-glob'
-import { Project } from 'ts-morph'
-import { epRoot, buildOutput } from './paths'
-import type { SourceFile } from 'ts-morph'
-const TSCONFIG_PATH = path.resolve(__dirname, '../tsconfig.dts.json')
-
-const gen = async () => {
-  const files = await glob(`${epRoot}/*.ts`)
-  const project = new Project({
-    compilerOptions: {
-      allowJs: true,
-      declaration: true,
-      emitDeclarationOnly: true,
-      noEmitOnError: false,
-      outDir: path.resolve(buildOutput, 'entry/types'),
-      skipLibCheck: true,
-      esModuleInterop: true,
-      target: 99, // ESNext
-      downlevelIteration: true,
-      // types: ["./typings", "esnext", "dom"],
-    },
-    skipFileDependencyResolution: true,
-    tsConfigFilePath: TSCONFIG_PATH,
-    skipAddingFilesFromTsConfig: true,
-  })
-  const sourceFiles: SourceFile[] = []
-  files.map((f) => {
-    const sourceFile = project.addSourceFileAtPath(f)
-    sourceFiles.push(sourceFile)
-  })
-
-  for (const sourceFile of sourceFiles) {
-    console.log(
-      chalk.yellow(`Emitting file: ${chalk.bold(sourceFile.getFilePath())}`)
-    )
-    await sourceFile.emit()
-    const emitOutput = sourceFile.getEmitOutput()
-    for (const outputFile of emitOutput.getOutputFiles()) {
-      const filepath = outputFile.getFilePath()
-
-      await fs.promises.mkdir(path.dirname(filepath), {
-        recursive: true,
-      })
-      await fs.promises.writeFile(
-        filepath,
-        outputFile.getText().replace(new RegExp('@element-plus', 'g'), '.'),
-        // .replaceAll('@element-plus/theme-chalk', 'element-plus/theme-chalk'),
-        'utf8'
-      )
-      console.log(
-        chalk.green(
-          `Definition for file: ${chalk.bold(
-            sourceFile.getBaseName()
-          )} generated`
-        )
-      )
-    }
-  }
-}
-
-export default gen

build/gulp-rewriter.ts

@@ -1,6 +1,6 @@
 import through2 from 'through2'
 
-const rewriter = (rewriteTo = '../..') => {
+export const gulpRewriter = (rewriteTo = '../..') => {
   return through2.obj(function (file, _, cb) {
     const compIdentifier = new RegExp('@element-plus', 'g')
 
@@ -11,4 +11,4 @@ const rewriter = (rewriteTo = '../..') => {
   })
 }
 
-export default rewriter
+export default gulpRewriter

build/gulpfile.ts

@@ -1,58 +1,47 @@
-import path from 'path'
-import gulp from 'gulp'
-import ts from 'gulp-typescript'
-import through2 from 'through2'
+import { series, parallel } from 'gulp'
 
-const output = path.resolve(__dirname, '../dist/styles')
+import { copyStyle } from './style'
+import { copyEntryTypes } from './entry-types'
+import { run } from './utils/process'
+import { withTaskName } from './utils/gulp'
+import { epOutput, buildOutput, epPackage } from './utils/paths'
+import { copyFullStyle } from './full-bundle'
 
-const tsProject = ts.createProject('tsconfig.json', {
-  declaration: true,
-  target: 'ESNEXT',
-  skipLibCheck: true,
-  module: 'commonjs',
-})
+const runTask = (name: string) =>
+  withTaskName(name, () => run(`pnpm run build ${name}`))
 
-const rewriter = () => {
-  return through2.obj(function (file, _, cb) {
-    const compIdentifier = new RegExp('@element-plus/components', 'g')
-    const compReplacer = '../../../components'
-    const themeIdentifier = new RegExp('@element-plus/theme-chalk', 'g')
-    const themeReplacer = '../../../../theme-chalk'
-    file.contents = Buffer.from(
-      file.contents
-        .toString()
-        .replace(compIdentifier, compReplacer)
-        .replace(themeIdentifier, themeReplacer)
+const copySourceCode = () => async () => {
+  await run(`cp -R packages ${epOutput}`)
+  await run(`cp ${epPackage} ${epOutput}/package.json`)
+}
+
+const copyREADME = () => async () => {
+  await run(`cp README.md ${buildOutput}/element-plus`)
+}
+
+export default series(
+  withTaskName('clean', () => run('pnpm run clean')),
+
+  parallel(
+    runTask('buildComponents'),
+    runTask('buildStyle'),
+    runTask('buildFullBundle'),
+    runTask('buildHelper'),
+    withTaskName('buildEachPackages', () =>
+      run('pnpm run --filter ./packages --parallel --stream build')
     )
-    cb(null, file)
-  })
-}
+  ),
 
-const inputs = '../packages/components/**/style/*.ts'
+  parallel(
+    copyStyle(),
+    copyFullStyle,
+    copyEntryTypes(),
+    copySourceCode(),
+    copyREADME()
+  )
+)
 
-function compileEsm() {
-  return gulp
-    .src(inputs)
-    .pipe(rewriter())
-    .pipe(tsProject())
-    .pipe(gulp.dest(path.resolve(output, 'lib')))
-}
-
-function compileCjs() {
-  return gulp
-    .src(inputs)
-    .pipe(rewriter())
-    .pipe(
-      ts.createProject('tsconfig.json', {
-        declaration: true,
-        target: 'ESNEXT',
-        skipLibCheck: true,
-        module: 'ESNEXT',
-      })()
-    )
-    .pipe(gulp.dest(path.resolve(output, 'es')))
-}
-
-export const build = gulp.series(compileEsm, compileCjs)
-
-export default build
+export * from './components'
+export * from './style'
+export * from './full-bundle'
+export * from './helper'

build/helper.ts

@@ -0,0 +1,78 @@
+import helper from 'components-helper'
+import { epPackage, epOutput } from './utils/paths'
+import { getPackageManifest } from './utils/pkg'
+import type { TaskFunction } from 'gulp'
+import type { InstallOptions } from 'components-helper/lib/type'
+
+const reComponentName: InstallOptions['reComponentName'] = (title: string) =>
+  `el-${title
+    .replace(/\B([A-Z])/g, '-$1')
+    .replace(/[ ]+/g, '-')
+    .toLowerCase()}`
+
+const reDocUrl: InstallOptions['reDocUrl'] = (fileName, header) => {
+  const docs = 'https://element-plus.org/en-US/component/'
+  const _header = header
+    ? header.replace(/[ ]+/g, '-').toLowerCase()
+    : undefined
+  return docs + fileName + (_header ? `#${_header}` : '')
+}
+
+const reAttribute: InstallOptions['reAttribute'] = (value, key) => {
+  const _value = value.match(/^\*\*(.*)\*\*$/)
+  const str = _value ? _value[1] : value
+
+  if (key === 'Name' && /^(-|—)$/.test(str)) {
+    return 'default'
+  } else if (str === '' || /^(-|—)$/.test(str)) {
+    return undefined
+  } else if (key === 'Attribute' && /v-model:(.+)/.test(str)) {
+    const _str = str.match(/v-model:(.+)/)
+    return _str ? _str[1] : undefined
+  } else if (key === 'Attribute' && /v-model/.test(str)) {
+    return 'model-value'
+  } else if (key === 'Attribute') {
+    return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+  } else if (key === 'Type') {
+    return str
+      .replace(/\s*\/\s*/g, '|')
+      .replace(/\s*,\s*/g, '|')
+      .replace(/\(.*\)/g, '')
+      .toLowerCase()
+  } else if (key === 'Accepted Values') {
+    return /\[.+\]\(.+\)/.test(str) || /^\*$/.test(str)
+      ? undefined
+      : str.replace(/`/g, '')
+  } else {
+    return str
+  }
+}
+
+export const buildHelper: TaskFunction = (done) => {
+  const { name, version } = getPackageManifest(epPackage)
+
+  const tagVer = process.env.TAG_VERSION
+  const _version = tagVer
+    ? tagVer.startsWith('v')
+      ? tagVer.slice(1)
+      : tagVer
+    : version!
+
+  helper({
+    name: name!,
+    version: _version,
+    entry: 'docs/en-US/component/!(datetime-picker|message-box|message).md',
+    outDir: epOutput,
+    reComponentName,
+    reDocUrl,
+    reAttribute,
+    props: 'Attributes',
+    propsName: 'Attribute',
+    propsOptions: 'Accepted Values',
+    eventsName: 'Event Name',
+    tableRegExp:
+      '#+\\s+(.*\\s*Attributes|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)',
+  })
+
+  done()
+}

build/info.ts

@@ -0,0 +1,47 @@
+import path from 'path'
+import { epOutput } from './utils/paths'
+import type { ModuleFormat } from 'rollup'
+
+export const modules = ['esm', 'cjs'] as const
+export type Module = typeof modules[number]
+export interface BuildInfo {
+  module: 'ESNext' | 'CommonJS'
+  format: ModuleFormat
+  output: {
+    /** e.g: `es` */
+    name: string
+    /** e.g: `dist/element-plus/es` */
+    path: string
+  }
+
+  bundle: {
+    /** e.g: `element-plus/es` */
+    path: string
+  }
+}
+
+export const buildConfig: Record<Module, BuildInfo> = {
+  esm: {
+    module: 'ESNext',
+    format: 'esm',
+    output: {
+      name: 'es',
+      path: path.resolve(epOutput, 'es'),
+    },
+    bundle: {
+      path: 'element-plus/es',
+    },
+  },
+  cjs: {
+    module: 'CommonJS',
+    format: 'cjs',
+    output: {
+      name: 'lib',
+      path: path.resolve(epOutput, 'lib'),
+    },
+    bundle: {
+      path: 'element-plus/lib',
+    },
+  },
+}
+export type BuildConfig = typeof buildConfig

build/paths.ts

@@ -1,13 +0,0 @@
-import path from 'path'
-
-export const projRoot = path.resolve(__dirname, '../')
-export const pkgRoot = path.resolve(projRoot, './packages')
-export const compRoot = path.resolve(pkgRoot, './components')
-export const themeRoot = path.resolve(pkgRoot, './theme-chalk')
-export const hookRoot = path.resolve(pkgRoot, './hooks')
-export const localeRoot = path.resolve(pkgRoot, './locale')
-export const directiveRoot = path.resolve(pkgRoot, './directives')
-export const epRoot = path.resolve(pkgRoot, './element-plus')
-export const utilRoot = path.resolve(pkgRoot, './utils')
-export const buildOutput = path.resolve(projRoot, './dist')
-export const docRoot = path.resolve(projRoot, './docs')

build/rollup-plugin-entry.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import type { Plugin } from 'rollup'
 
-export default function entryPlugin(): Plugin {
+export function RollupResolveEntryPlugin(): Plugin {
   return {
     name: 'element-plus-entry-plugin',
     transform(code, id) {

build/size-reporter.ts

@@ -1,4 +1,5 @@
-import chalk from 'chalk'
+import { cyan, bold, yellow, green } from 'chalk'
+
 import type { FileSizeReporter } from 'rollup-plugin-filesize'
 
 const reporter: FileSizeReporter = (opt, outputOptions, info) => {
@@ -9,9 +10,9 @@ const reporter: FileSizeReporter = (opt, outputOptions, info) => {
     ...(info.minSize ? [`${info.minSize}`] : []),
   ]
 
-  return `${chalk.cyan(chalk.bold(values[0]))}: bundle size ${chalk.yellow(
+  return `${cyan(bold(values[0]))}: bundle size ${yellow(
     values[1]
-  )} -> minified ${chalk.green(values[2])}`
+  )} -> minified ${green(values[2])}`
 }
 
 export default reporter

build/style.ts

@@ -0,0 +1,61 @@
+import path from 'path'
+import { parallel, dest, src } from 'gulp'
+import ts from 'gulp-typescript'
+import through2 from 'through2'
+import { buildOutput, compRoot } from './utils/paths'
+import { buildConfig } from './info'
+import { withTaskName } from './utils/gulp'
+import { run } from './utils/process'
+import { EP_PREFIX } from './constants'
+
+import type { Module } from './info'
+
+const inputs = path.resolve(compRoot, '**/style/*.ts')
+const output = path.resolve(buildOutput, 'styles')
+
+const tsProject = (module: Module) =>
+  ts.createProject('tsconfig.json', {
+    declaration: true,
+    target: 'ESNext',
+    skipLibCheck: true,
+    module: buildConfig[module].module,
+  })()
+
+const rewriter = (module: Module) => {
+  const config = buildConfig[module]
+  return through2.obj(function (file, _, cb) {
+    file.contents = Buffer.from(
+      (file.contents.toString() as string)
+        .replaceAll(
+          `${EP_PREFIX}/components`,
+          `${config.bundle.path}/components`
+        )
+        .replaceAll(`${EP_PREFIX}/theme-chalk`, 'element-plus/theme-chalk')
+    )
+    cb(null, file)
+  })
+}
+
+const build = (module: Module) =>
+  withTaskName(`buildStyle:${module}`, () =>
+    src(inputs)
+      .pipe(rewriter(module))
+      .pipe(tsProject(module))
+      .pipe(dest(path.resolve(output, buildConfig[module].output.name)))
+  )
+
+export const buildStyle = parallel(build('esm'), build('cjs'))
+
+export const copyStyle = () => {
+  const copy = (module: Module) => {
+    const config = buildConfig[module]
+    const src = path.resolve(buildOutput, 'styles', config.output.name)
+    const dst = path.resolve(config.output.path, 'components')
+
+    return withTaskName(`copyStyle:${module}`, () =>
+      run(`rsync -a ${src}/ ${dst}/`)
+    )
+  }
+
+  return parallel(copy('esm'), copy('cjs'))
+}

build/update-version.ts

@@ -1,41 +1,33 @@
-import path from 'path'
 import fs from 'fs'
-import chalk from 'chalk'
-import { epRoot } from './paths'
+import { epPackage } from './utils/paths'
+import { cyan, red, yellow, green } from './utils/log'
+import { getPackageManifest } from './utils/pkg'
 
 const tagVersion = process.env.TAG_VERSION
 const gitHead = process.env.GIT_HEAD
 if (!tagVersion || !gitHead) {
-  console.log(
-    chalk.red(
-      'No tag version or git head were found, make sure that you set the environment variable $TAG_VERSION \n'
-    )
+  red(
+    'No tag version or git head were found, make sure that you set the environment variable $TAG_VERSION \n'
   )
   process.exit(1)
 }
 
-console.log(chalk.cyan('Start updating version'))
+cyan('Start updating version')
 
-console.log(
-  chalk.cyan(
-    ['NOTICE:', `$TAG_VERSION: ${tagVersion}`, `$GIT_HEAD: ${gitHead}`].join(
-      '\n'
-    )
-  )
+cyan(
+  ['NOTICE:', `$TAG_VERSION: ${tagVersion}`, `$GIT_HEAD: ${gitHead}`].join('\n')
 )
 ;(async () => {
-  console.log(chalk.yellow(`Updating package.json for element-plus`))
+  yellow(`Updating package.json for element-plus`)
 
-  const pkgJson = path.resolve(epRoot, './package.json')
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const json = require(pkgJson)
+  const json: Record<string, any> = getPackageManifest(epPackage)
 
   json.version = tagVersion
   json.gitHead = gitHead
 
   if (!(process.argv.includes('-d') || process.argv.includes('--dry-run'))) {
     try {
-      await fs.promises.writeFile(pkgJson, JSON.stringify(json, null, 2), {
+      await fs.promises.writeFile(epPackage, JSON.stringify(json, null, 2), {
         encoding: 'utf-8',
       })
     } catch (e) {
@@ -45,7 +37,7 @@ console.log(
     console.log(json)
   }
 
-  console.log(chalk.green(`Version updated to ${tagVersion}`))
+  green(`Version updated to ${tagVersion}`)
 
-  console.log(chalk.green(`Git head updated to ${gitHead}`))
+  green(`Git head updated to ${gitHead}`)
 })()

build/utils.ts

@@ -1,54 +0,0 @@
-import path from 'path'
-import os from 'os'
-import getWorkspacePackages from '@pnpm/find-workspace-packages'
-import chalk from 'chalk'
-
-import { compRoot, projRoot } from './paths'
-
-export const getDeps = (pkgPath: string): string[] => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const pkgJson = require(pkgPath)
-
-  const { dependencies } = pkgJson
-  return Object.keys(dependencies ?? {})
-}
-
-export const getCpuCount = () => os.cpus().length
-
-export const getPkgs = () => getWorkspacePackages(projRoot)
-
-export const getExternals = async (options: { full: boolean }) => {
-  const monoPackages = (await getPkgs())
-    .map((pkg) => pkg.manifest.name)
-    .filter((name): name is string => !!name)
-
-  return (id: string) => {
-    const packages: string[] = ['vue']
-    if (!options.full) {
-      const compPkg = path.resolve(compRoot, './package.json')
-      const depPackages = getDeps(compPkg)
-      packages.push('@vue', ...monoPackages, ...depPackages)
-    }
-
-    return [...new Set(packages)].some(
-      (pkg) => id === pkg || id.startsWith(`${pkg}/`)
-    )
-  }
-}
-
-export function yellow(str: string) {
-  console.log(chalk.cyan(str))
-}
-
-export function green(str: string) {
-  console.log(chalk.green(str))
-}
-
-export function red(str: string) {
-  console.error(chalk.red(str))
-}
-
-export function errorAndExit(e: Error) {
-  red(e.stack ?? e.message)
-  process.exit(1)
-}

build/utils/gulp.ts

@@ -0,0 +1,4 @@
+export const withTaskName = <T extends (...args: any) => any>(
+  name: string,
+  fn: T
+) => Object.assign(fn, { displayName: name })

build/utils/log.ts

@@ -0,0 +1,22 @@
+import process from 'process'
+import chalk from 'chalk'
+
+export function cyan(str: string) {
+  console.log(chalk.cyan(str))
+}
+export function yellow(str: string) {
+  console.log(chalk.yellow(str))
+}
+
+export function green(str: string) {
+  console.log(chalk.green(str))
+}
+
+export function red(str: string) {
+  console.error(chalk.red(str))
+}
+
+export function errorAndExit(e: Error): never {
+  red(e.stack ?? e.message)
+  process.exit(1)
+}

build/utils/paths.ts

@@ -0,0 +1,27 @@
+import { resolve } from 'path'
+
+export const projRoot = resolve(__dirname, '..', '..')
+export const pkgRoot = resolve(projRoot, 'packages')
+export const compRoot = resolve(pkgRoot, 'components')
+export const themeRoot = resolve(pkgRoot, 'theme-chalk')
+export const hookRoot = resolve(pkgRoot, 'hooks')
+export const localeRoot = resolve(pkgRoot, 'locale')
+export const directiveRoot = resolve(pkgRoot, 'directives')
+export const epRoot = resolve(pkgRoot, 'element-plus')
+export const utilRoot = resolve(pkgRoot, 'utils')
+export const docRoot = resolve(projRoot, 'docs')
+
+/** dist */
+export const buildOutput = resolve(projRoot, 'dist')
+/** dist/element-plus */
+export const epOutput = resolve(buildOutput, 'element-plus')
+
+export const projPackage = resolve(projRoot, 'package.json')
+export const compPackage = resolve(compRoot, 'package.json')
+export const themePackage = resolve(themeRoot, 'package.json')
+export const hookPackage = resolve(hookRoot, 'package.json')
+export const localePackage = resolve(localeRoot, 'package.json')
+export const directivePackage = resolve(directiveRoot, 'package.json')
+export const epPackage = resolve(epRoot, 'package.json')
+export const utilPackage = resolve(utilRoot, 'package.json')
+export const docPackage = resolve(docRoot, 'package.json')

build/utils/pkg.ts

@@ -0,0 +1,29 @@
+import findWorkspacePackages from '@pnpm/find-workspace-packages'
+import { projRoot } from './paths'
+import type { ProjectManifest } from '@pnpm/types'
+
+export const getWorkspacePackages = () => findWorkspacePackages(projRoot)
+export const getWorkspaceNames = async () => {
+  const pkgs = await findWorkspacePackages(projRoot)
+  return pkgs
+    .map((pkg) => pkg.manifest.name)
+    .filter((name): name is string => !!name)
+}
+export const getWorkspacePackageManifest = async (
+  name: string
+): Promise<ProjectManifest> => {
+  const packages = await getWorkspacePackages()
+  const { manifest } = packages.find((pkg) => pkg.manifest.name === name)!
+  return manifest
+}
+
+export const getPackageManifest = (pkgPath: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  return require(pkgPath) as ProjectManifest
+}
+
+export const getPackageDependencies = (pkgPath: string): string[] => {
+  const manifest = getPackageManifest(pkgPath)
+  const { dependencies } = manifest
+  return Object.keys(dependencies ?? {})
+}

build/utils/process.ts

@@ -0,0 +1,23 @@
+import { spawn } from 'child_process'
+import { green } from './log'
+import { projRoot } from './paths'
+
+export const run = async (command: string, cwd: string = projRoot) =>
+  new Promise<void>((resolve, reject) => {
+    const args = command.split(' ')
+    const cmd = args.shift()!
+
+    green(`run: ${cmd} ${args.join(' ')}`)
+    const app = spawn(cmd, args, {
+      cwd,
+      stdio: 'inherit',
+    })
+    app.on('close', (code) => {
+      if (code === 0) resolve()
+      else
+        reject(
+          new Error(`Command failed. \n Command: ${command} \n Code: ${code}`)
+        )
+    })
+    process.on('exit', () => app.kill('SIGHUP'))
+  })

build/utils/rollup.ts

@@ -0,0 +1,27 @@
+import { compPackage } from './paths'
+import { getWorkspacePackages, getPackageDependencies } from './pkg'
+
+import type { OutputOptions, RollupBuild } from 'rollup'
+
+export const generateExternal = async (options: { full: boolean }) => {
+  const monoPackages = (await getWorkspacePackages())
+    .map((pkg) => pkg.manifest.name)
+    // filter root package
+    .filter((name): name is string => !!name)
+
+  return (id: string) => {
+    const packages: string[] = ['vue']
+    if (!options.full) {
+      const depPackages = getPackageDependencies(compPackage)
+      packages.push('@vue', ...monoPackages, ...depPackages)
+    }
+
+    return [...new Set(packages)].some(
+      (pkg) => id === pkg || id.startsWith(`${pkg}/`)
+    )
+  }
+}
+
+export function writeBundles(bundle: RollupBuild, options: OutputOptions[]) {
+  return Promise.all(options.map((option) => bundle.write(option)))
+}

docs/.vitepress/config.js

@@ -68,10 +68,7 @@ const head = [
   [
     'script',
     {},
-    require('fs').readFileSync(
-      require('path').resolve(__dirname, './lang.js'),
-      'utf-8'
-    ),
+    require('fs').readFileSync(path.resolve(__dirname, './lang.js'), 'utf-8'),
   ],
 ]
 
@@ -80,7 +77,7 @@ if (features.theme) {
     'script',
     {},
     require('fs').readFileSync(
-      require('path').resolve(__dirname, './darkmode.js'),
+      path.resolve(__dirname, './darkmode.js'),
       'utf-8'
     ),
   ])
@@ -134,16 +131,16 @@ module.exports = {
             alias: [
               {
                 find: /^element-plus$/,
-                replacement: require('path').resolve(
+                replacement: path.resolve(
                   __dirname,
                   '../../dist/element-plus/es/index'
                 ),
               },
               {
-                find: /^element-plus\/lib\/utils\/(.*)/,
-                replacement: require('path').resolve(
+                find: /^element-plus\/(es|lib)\/utils\/(.*)/,
+                replacement: path.resolve(
                   __dirname,
-                  '../../dist/element-plus/es/utils/$1'
+                  '../../dist/element-plus/es/utils/$2'
                 ),
               },
             ],

jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     },
   },
   testPathIgnorePatterns: ['/node_modules/', 'dist'],
+  modulePathIgnorePatterns: ['/node_modules/', 'dist'],
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.vue$': 'vue-jest',

package.json

@@ -11,31 +11,19 @@
     "test": "jest",
     "dev": "pnpm -C play dev",
     "gen": "bash ./scripts/gc.sh",
-    "gen:version": "esno build/gen-version.ts",
-    "update:version": "esno build/update-version.ts",
-    "bootstrap": "pnpm i",
-    "clean:lib": "rimraf lib && rimraf es && rimraf dist",
-    "build": "sh scripts/build.sh",
-    "build:helper": "esno build/build-helper.ts",
-    "build:indices": "esno build/build-indices.ts",
-    "build:comps": "rimraf dist/components && esno build/components.ts",
-    "build:style": "gulp --cwd ./build",
-    "build:prod": "sh scripts/publish.sh",
-    "build:directives": "cd packages/directives && pnpm clean && pnpm build",
-    "build:hooks": "cd packages/hooks && pnpm clean && pnpm build",
-    "build:locale": "cd packages/locale && pnpm clean && pnpm build",
-    "build:theme": "cd packages/theme-chalk && pnpm clean && pnpm build",
-    "build:utils": "cd packages/utils && pnpm clean && pnpm build",
-    "build:tokens": "cd packages/tokens && pnpm clean && pnpm build",
-    "build:full-bundle": "esno build/full-bundle.ts",
+    "gen:version": "sucrase-node build/gen-version.ts",
+    "update:version": "sucrase-node build/update-version.ts",
+    "clean": "pnpm run clean:lib && pnpm run clean -r --stream",
+    "clean:lib": "rimraf dist",
+    "build": "gulp -f build/gulpfile.ts",
     "format": "prettier --write .",
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 && prettier --check .",
     "lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx && prettier --write .",
-    "docs:dev": "sh ./scripts/ifBuild.sh && pnpm docs:gen-locale && pnpm -C docs dev",
+    "docs:dev": "sh ./scripts/if-build.sh && pnpm docs:gen-locale && pnpm -C docs dev",
     "docs:build": "pnpm -C docs build",
     "docs:serve": "pnpm -C docs serve",
-    "docs:gen-locale": "rimraf docs/.vitepress/i18n && esno build/crowdin-generate.ts",
-    "docs:crowdin": "esno build/crowdin-credentials.ts",
+    "docs:gen-locale": "rimraf docs/.vitepress/i18n && sucrase-node build/crowdin-generate.ts",
+    "docs:crowdin": "sucrase-node build/crowdin-credentials.ts",
     "prepare": "husky install",
     "postinstall": "pnpm gen:version"
   },
@@ -46,7 +34,7 @@
   },
   "lint-staged": {
     "*.{vue,js,ts,jsx,tsx}": [
-      "eslint --fix",
+      "eslint --max-warnings 0 --fix",
       "prettier --write"
     ],
     "*.{scss,css,json,yaml,yml,md,html}": "prettier --write"
@@ -81,20 +69,22 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
+    "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-env": "^7.15.6",
     "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@pnpm/find-workspace-packages": "^3.1.13",
     "@pnpm/logger": "^4.0.0",
+    "@pnpm/types": "^7.4.0",
     "@rollup/plugin-alias": "^3.1.5",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-typescript": "^8.2.5",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.173",
     "@types/through2": "^2.0.36",
@@ -114,13 +104,12 @@
     "components-helper": "^1.0.4",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.12.25",
+    "esbuild": "~0.13.2",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^7.18.0",
-    "esno": "^0.9.1",
     "expect-type": "^0.12.0",
     "fast-glob": "^3.2.7",
     "file-save": "^0.2.0",
@@ -131,18 +120,16 @@
     "lint-staged": "^11.1.2",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.56.3",
-    "rollup-plugin-css-only": "^2.1.0",
+    "rollup": "^2.57.0",
+    "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-esbuild": "^4.5.0",
     "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.27.3",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.41.1",
+    "sass": "^1.42.1",
+    "sucrase": "^3.20.1",
     "through2": "^4.0.2",
-    "ts-morph": "^11.0.3",
-    "ts-node": "^10.1.0",
+    "ts-morph": "^12.0.0",
     "typescript": "^4.4.3",
     "vue": "^3.2.18",
     "vue-jest": "5.0.0-alpha.5",

packages/directives/gulpfile.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import gulp from 'gulp'
 import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/paths'
+import { buildOutput } from '../../build/utils/paths'
 import rewriter from '../../build/gulp-rewriter'
 
 export const esm = './es'

packages/hooks/gulpfile.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import gulp from 'gulp'
 import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/paths'
+import { buildOutput } from '../../build/utils/paths'
 import rewriter from '../../build/gulp-rewriter'
 
 export const esm = './es'

packages/locale/gulpfile.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import gulp from 'gulp'
 import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/paths'
+import { buildOutput } from '../../build/utils/paths'
 
 export const esm = './es'
 export const cjs = './lib'

packages/theme-chalk/gulpfile.ts

@@ -8,7 +8,7 @@ import dartSass from 'sass'
 import autoprefixer from 'gulp-autoprefixer'
 import cleanCSS from 'gulp-clean-css'
 import rename from 'gulp-rename'
-import { buildOutput } from '../../build/paths'
+import { buildOutput } from '../../build/utils/paths'
 
 const noElPrefixFile = /(index|base|display)/
 

packages/tokens/gulpfile.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import gulp from 'gulp'
 import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/paths'
+import { buildOutput } from '../../build/utils/paths'
 import rewriter from '../../build/gulp-rewriter'
 
 export const esm = './es'

packages/utils/gulpfile.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import gulp from 'gulp'
 import ts from 'gulp-typescript'
-import { buildOutput } from '../../build/paths'
+import { buildOutput } from '../../build/utils/paths'
 
 import type { Settings } from 'gulp-typescript'
 

scripts/build.sh

@@ -1,43 +0,0 @@
-#!/bin/sh
-
-set -e
-
-pnpm clean:lib
-
-# build all packages in case of error
-
-# build components
-pnpm build:comps
-rsync -a dist/types/components/ dist/element-plus/es/components/
-rsync -a dist/types/components/ dist/element-plus/lib/components/
-
-# build style
-pnpm build:style
-
-pnpm build:theme
-pnpm build:locale
-pnpm build:utils
-pnpm build:hooks
-pnpm build:directives
-pnpm build:tokens
-pnpm build:full-bundle
-
-rsync -a dist/entry/types/ dist/element-plus/es/
-rsync -a dist/entry/types/ dist/element-plus/lib/
-
-pnpm build:helper
-
-echo "copy index.css"
-cp dist/element-plus/theme-chalk/index.css dist/element-plus/dist/index.css
-cp -R dist/element-plus/theme-chalk/fonts dist/element-plus/dist/fonts
-
-echo "syncing style.js"
-rsync -a dist/styles/es/ dist/element-plus/es/components/
-rsync -a dist/styles/lib/ dist/element-plus/lib/components/
-
-echo "copying source code"
-cp -R packages dist/element-plus
-cp packages/element-plus/package.json dist/element-plus/package.json
-
-echo "copying README"
-cp README.md dist/element-plus

scripts/if-build.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
 
 if [ ! -d "dist/element-plus" ]; then
-  sh scripts/build.sh
+  pnpm build
 fi

scripts/publish.sh

@@ -2,10 +2,10 @@
 
 set -e
 
-pnpm bootstrap
+pnpm i
 pnpm update:version
 
-sh scripts/build.sh
+pnpm build
 
 find dist/element-plus/packages -type d -name node_modules -print0 | xargs -0 -I {} rm -rf {}