refactor(build): move to internal package (#6585)

* refactor(build): move to internal package

* ci: fix

* chore: fix

* fix: docs

* chore: add fast-glob to root package

* chore: fix PR comments

* build: add tsx

* refactor: re-organize

* refactor: improve log

build/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-console": "off"
-  }
-}

build/plugins/size-reporter.ts

@@ -1,11 +0,0 @@
-import { cyan, bold, yellow, green } from 'chalk'
-import { command } from '../utils/log'
-import type { FileSizeReporter } from 'rollup-plugin-filesize'
-
-export const reporter: FileSizeReporter = (opt, outputOptions, info) => {
-  return command(
-    `${cyan(bold(info.fileName))}: bundle size ${yellow(
-      info.bundleSize
-    )} -> minified ${green(info.minSize)}`
-  )
-}

build/utils/log.ts

@@ -1,36 +0,0 @@
-import process from 'process'
-import chalk from 'chalk'
-
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-const [command, info, error] = ['command', 'info', 'error'].map(
-  (symbol: string) => {
-    return (msg: string) => `[${symbol}] ${msg}`
-  }
-)
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-const [group, endGroup] = ['group', 'endgroup'].map((symbol) => {
-  return (groupMsg: string) => `##[${symbol}] ${groupMsg}`
-})
-
-export function cyan(str: string) {
-  console.log(command(chalk.cyan(str)))
-}
-
-export function yellow(str: string) {
-  console.log(command(chalk.yellow(str)))
-}
-
-export function green(str: string) {
-  console.log(command(chalk.green(str)))
-}
-
-export function red(str: string) {
-  console.log(error(chalk.red(str)))
-}
-
-export function errorAndExit(e: Error): never {
-  red(e.stack ?? e.message)
-  process.exit(1)
-}
-
-export { command, info, error, group, endGroup }

docs/.vitepress/build/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-console": "off"
-  }
-}

docs/.vitepress/build/crowdin-credentials.ts

@@ -1,8 +1,8 @@
 import path from 'path'
 import fs from 'fs/promises'
 import chalk from 'chalk'
-import { errorAndExit } from '../../../build/utils/log'
-import { docRoot } from '../utils/paths'
+import consola from 'consola'
+import { errorAndExit, docRoot } from '@element-plus/build'
 
 const credentialPlaceholder = 'API_TOKEN_PLACEHOLDER'
 
@@ -12,7 +12,7 @@ if (!CREDENTIAL) {
 }
 
 ;(async () => {
-  console.info(chalk.cyan('Fetching Crowdin credential'))
+  consola.debug(chalk.cyan('Fetching Crowdin credential'))
   const configPath = path.resolve(docRoot, 'crowdin.yml')
   try {
     const file = await fs.readFile(configPath, {
@@ -22,7 +22,7 @@ if (!CREDENTIAL) {
       configPath,
       file.replace(credentialPlaceholder, CREDENTIAL)
     )
-    console.info(chalk.green('Crowdin credential update successfully'))
+    consola.success(chalk.green('Crowdin credential update successfully'))
   } catch (e: any) {
     errorAndExit(e)
   }

docs/.vitepress/build/crowdin-generate.ts

@@ -1,9 +1,8 @@
 import fs from 'fs'
 import path from 'path'
 import chalk from 'chalk'
-
-import { docRoot } from '../utils/paths'
-import { errorAndExit } from '../../../build/utils/log'
+import consola from 'consola'
+import { errorAndExit, docRoot } from '@element-plus/build'
 
 // NB: this file is only for generating files that enables developers to develop the website.
 const componentLocaleRoot = path.resolve(docRoot, '.vitepress/crowdin')
@@ -16,7 +15,7 @@ async function main() {
     throw new Error(exists)
   }
 
-  console.log(chalk.cyan('Starting for build doc for developing'))
+  consola.trace(chalk.cyan('Starting for build doc for developing'))
   // all language should be identical since it is mirrored from crowdin.
   const dirs = await fs.promises.readdir(componentLocaleRoot, {
     withFileTypes: true,
@@ -44,7 +43,7 @@ async function main() {
     }
   })
 
-  console.log(languagePaths)
+  consola.debug(languagePaths)
   await traverseDir(enUS, languagePaths, localeOutput)
 }
 
@@ -103,7 +102,7 @@ async function traverseDir(
 
 main()
   .then(() => {
-    console.log(chalk.green('Locale for website development generated'))
+    consola.success(chalk.green('Locale for website development generated'))
   })
   .catch((err) => {
     if (err.message === exists) {

docs/.vitepress/config.ts

@@ -1,3 +1,4 @@
+import consola from 'consola'
 import { languages } from './utils/lang'
 import { head } from './config/head'
 import { sidebars } from './config/sidebars'
@@ -32,8 +33,7 @@ const buildTransformers = () => {
   return transformers
 }
 
-// eslint-disable-next-line no-console
-console.log(`DOC_ENV: ${process.env.DOC_ENV}`)
+consola.debug(`DOC_ENV: ${process.env.DOC_ENV}`)
 
 const locales = {}
 languages.forEach((lang) => {

docs/.vitepress/config/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-console": "off"
-  }
-}

docs/.vitepress/config/head.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
+import { vpRoot } from '@element-plus/build'
 import { languages } from '../utils/lang'
-import { vpRoot } from '../utils/paths'
 import { features } from './features'
 import type { HeadConfig } from 'vitepress'
 

docs/.vitepress/config/plugins.ts

@@ -2,8 +2,8 @@ import path from 'path'
 import fs from 'fs'
 import MarkdownIt from 'markdown-it'
 import mdContainer from 'markdown-it-container'
+import { docRoot } from '@element-plus/build'
 import { highlight } from '../utils/highlight'
-import { docRoot } from '../utils/paths'
 import type Token from 'markdown-it/lib/token'
 import type Renderer from 'markdown-it/lib/renderer'
 

docs/.vitepress/utils/highlight.ts

@@ -2,6 +2,7 @@
 import chalk from 'chalk'
 import escapeHtml from 'escape-html'
 import prism from 'prismjs'
+import consola from 'consola'
 
 // prism is listed as actual dep so it's ok to require
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -40,7 +41,7 @@ export const highlight = (str: string, lang: string) => {
       loadLanguages([lang])
     } catch {
       // eslint-disable-next-line no-console
-      console.warn(
+      consola.warn(
         chalk.yellow(
           `[vitepress] Syntax highlight for language "${lang}" is not supported.`
         )

docs/.vitepress/utils/paths.ts

@@ -1,5 +0,0 @@
-import path from 'path'
-
-export const vpRoot = path.resolve(__dirname, '..')
-export const docRoot = path.resolve(vpRoot, '..')
-export const projRoot = path.resolve(docRoot, '..')

docs/package.json

@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@crowdin/cli": "^3.7.8",
+    "@element-plus/build": "workspace:*",
     "@iconify-json/ri": "^1.1.1",
     "@types/markdown-it": "^12.2.3",
     "cross-env": "^7.0.3",

docs/vite.config.ts

@@ -6,14 +6,14 @@ import WindiCSS from 'vite-plugin-windicss'
 import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-
 import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
-
-import { getPackageDependencies } from '../build/utils/pkg'
-import { epPackage } from '../build/utils/paths'
-import { projRoot } from './.vitepress/utils/paths'
+import {
+  epPackage,
+  getPackageDependencies,
+  projRoot,
+} from '@element-plus/build'
 import type { Alias } from 'vite'
 
 const alias: Alias[] = []

internal/build/build.config.ts

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

internal/build/gulpfile.ts

@@ -2,12 +2,18 @@ import path from 'path'
 import { mkdir, copyFile } from 'fs/promises'
 import { copy } from 'fs-extra'
 import { series, parallel } from 'gulp'
-import { run } from './utils/process'
-import { runTask, withTaskName } from './utils/gulp'
-import { buildOutput, epOutput, epPackage, projRoot } from './utils/paths'
-import { buildConfig } from './build-info'
+import {
+  run,
+  runTask,
+  withTaskName,
+  buildOutput,
+  epOutput,
+  epPackage,
+  projRoot,
+  buildConfig,
+} from './src'
 import type { TaskFunction } from 'gulp'
-import type { Module } from './build-info'
+import type { Module } from './src'
 
 export const copyFiles = () =>
   Promise.all([
@@ -51,7 +57,7 @@ export default series(
     runTask('buildHelper'),
     series(
       withTaskName('buildThemeChalk', () =>
-        run('pnpm run -C packages/theme-chalk build')
+        run('pnpm run --filter ./packages/ build --parallel')
       ),
       copyFullStyle
     )
@@ -60,7 +66,4 @@ export default series(
   parallel(copyTypesDefinitions, copyFiles)
 )
 
-export * from './types-definitions'
-export * from './modules'
-export * from './full-bundle'
-export * from './helper'
+export * from './src'

internal/build/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@element-plus/build",
+  "private": true,
+  "version": "0.0.1",
+  "description": "Build Toolchain for Element Plus",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "start": "gulp --require sucrase/register/ts -f gulpfile.ts",
+    "dev": "pnpm run stub",
+    "stub": "unbuild --stub"
+  },
+  "dependencies": {
+    "@pnpm/find-workspace-packages": "^3.1.42",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@vitejs/plugin-vue": "^2.2.4",
+    "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "chalk": "^4.1.2",
+    "components-helper": "^2.0.0",
+    "consola": "^2.15.3",
+    "esbuild": "^0.14.25",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.0.1",
+    "gulp": "^4.0.2",
+    "lodash": "^4.17.21",
+    "rollup": "^2.70.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-esbuild": "^4.8.2",
+    "ts-morph": "^14.0.0",
+    "unplugin-vue-define-options": "^0.4.0",
+    "vue": "^3.2.31"
+  },
+  "devDependencies": {
+    "@pnpm/types": "^7.10.0",
+    "@types/rollup-plugin-css-only": "^3.1.0",
+    "unbuild": "^0.7.0"
+  }
+}

internal/build/src/build-info.ts

@@ -1,6 +1,6 @@
 import path from 'path'
-import { epOutput } from './utils/paths'
-import { EP_PKG } from './utils/constants'
+import { epOutput } from './utils'
+import { EP_PKG } from './constants'
 import type { ModuleFormat } from 'rollup'
 
 export const modules = ['esm', 'cjs'] as const

internal/build/src/index.ts

@@ -0,0 +1,5 @@
+export * from './tasks'
+export * from './utils'
+export * from './build-info'
+export * from './constants'
+export { default as typeSafe } from './type-safe.json'

internal/build/src/plugins/element-plus-alias.ts

@@ -1,4 +1,5 @@
-import { EP_PKG, EP_PREFIX } from '../utils/constants'
+import { EP_PKG, EP_PREFIX } from '../constants'
+
 import type { Plugin } from 'rollup'
 
 export function ElementPlusAlias(): Plugin {

internal/build/src/tasks/full-bundle.ts

@@ -6,22 +6,23 @@ import vue from '@vitejs/plugin-vue'
 import DefineOptions from 'unplugin-vue-define-options/rollup'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import esbuild from 'rollup-plugin-esbuild'
-import filesize from 'rollup-plugin-filesize'
 import { parallel } from 'gulp'
 import glob from 'fast-glob'
 import { camelCase, upperFirst } from 'lodash'
-import { version } from '../packages/element-plus/version'
-import { reporter } from './plugins/size-reporter'
-import { ElementPlusAlias } from './plugins/element-plus-alias'
-import { epRoot, epOutput, localeRoot } from './utils/paths'
+import { version } from '../../../../packages/element-plus/version'
+import { ElementPlusAlias } from '../plugins/element-plus-alias'
 import {
+  epRoot,
+  epOutput,
+  localeRoot,
   formatBundleFilename,
   generateExternal,
   writeBundles,
-} from './utils/rollup'
-import { withTaskName } from './utils/gulp'
-import { EP_BRAND_NAME } from './utils/constants'
-import { target } from './build-info'
+  withTaskName,
+} from '../utils'
+import { EP_BRAND_NAME } from '../constants'
+import { target } from '../build-info'
+
 import type { Plugin } from 'rollup'
 
 const banner = `/*! ${EP_BRAND_NAME} v${version} */\n`
@@ -52,7 +53,6 @@ async function buildFullEntry(minify: boolean) {
           'process.env.NODE_ENV': JSON.stringify('production'),
         },
       }),
-      filesize(),
     ],
     external: await generateExternal({ full: true }),
   })
@@ -102,7 +102,6 @@ async function buildFullLocale(minify: boolean) {
             sourceMap: minify,
             target,
           }),
-          filesize({ reporter }),
         ],
       })
       await writeBundles(bundle, [

internal/build/src/tasks/helper.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import helper from 'components-helper'
-import { epPackage, epOutput, projRoot } from './utils/paths'
-import { getPackageManifest } from './utils/pkg'
+import { epPackage, epOutput, projRoot, getPackageManifest } from '../utils'
+
 import type { TaskFunction } from 'gulp'
-import type { InstallOptions } from 'components-helper/lib/type'
+import type { InstallOptions } from 'components-helper'
 
 const reComponentName: InstallOptions['reComponentName'] = (title: string) =>
   `el-${title

internal/build/src/tasks/index.ts

@@ -0,0 +1,4 @@
+export * from './full-bundle'
+export * from './helper'
+export * from './modules'
+export * from './types-definitions'

internal/build/src/tasks/modules.ts

@@ -6,14 +6,17 @@ import css from 'rollup-plugin-css-only'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
-import filesize from 'rollup-plugin-filesize'
 import glob from 'fast-glob'
-import { epRoot, pkgRoot } from './utils/paths'
-import { ElementPlusAlias } from './plugins/element-plus-alias'
-import { generateExternal, writeBundles } from './utils/rollup'
-import { excludeFiles } from './utils/pkg'
-import { reporter } from './plugins/size-reporter'
-import { buildConfigEntries, target } from './build-info'
+import {
+  epRoot,
+  pkgRoot,
+  generateExternal,
+  writeBundles,
+  excludeFiles,
+} from '../utils'
+import { ElementPlusAlias } from '../plugins/element-plus-alias'
+import { buildConfigEntries, target } from '../build-info'
+
 import type { OutputOptions } from 'rollup'
 
 export const buildModules = async () => {
@@ -45,7 +48,6 @@ export const buildModules = async () => {
           '.vue': 'ts',
         },
       }),
-      filesize({ reporter }),
     ],
     external: await generateExternal({ full: false }),
     treeshake: false,

internal/build/src/tasks/types-definitions.ts

@@ -1,15 +1,21 @@
 import process from 'process'
 import path from 'path'
 import fs from 'fs/promises'
+import consola from 'consola'
 import * as vueCompiler from 'vue/compiler-sfc'
 import { Project } from 'ts-morph'
 import glob from 'fast-glob'
-import { bold } from 'chalk'
-import { errorAndExit, green, yellow } from './utils/log'
-import { buildOutput, epRoot, pkgRoot, projRoot } from './utils/paths'
-import typeSafe from './type-safe.json'
+import chalk from 'chalk'
+import {
+  buildOutput,
+  epRoot,
+  pkgRoot,
+  projRoot,
+  excludeFiles,
+  pathRewriter,
+} from '../utils'
+import typeSafe from '../type-safe.json'
 
-import { excludeFiles, pathRewriter } from './utils/pkg'
 import type { SourceFile } from 'ts-morph'
 
 const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.json')
@@ -44,15 +50,16 @@ export const generateTypesDefinitions = async () => {
     skipAddingFilesFromTsConfig: true,
   })
 
+  const globAnyFile = '**/*.{js?(x),ts?(x),vue}'
   const filePaths = excludeFiles(
-    await glob(['**/*.{js,ts,vue}', '!element-plus/**/*'], {
+    await glob([globAnyFile, '!element-plus/**/*'], {
       cwd: pkgRoot,
       absolute: true,
       onlyFiles: true,
     })
   )
   const epPaths = excludeFiles(
-    await glob('**/*.{js,ts,vue}', {
+    await glob(globAnyFile, {
       cwd: epRoot,
       onlyFiles: true,
     })
@@ -66,21 +73,18 @@ export const generateTypesDefinitions = async () => {
         const sfc = vueCompiler.parse(content)
         const { script, scriptSetup } = sfc.descriptor
         if (script || scriptSetup) {
-          let content = ''
-          let isTS = false
-          if (script && script.content) {
-            content += script.content
-            if (script.lang === 'ts') isTS = true
-          }
+          let content = script?.content ?? ''
+
           if (scriptSetup) {
             const compiled = vueCompiler.compileScript(sfc.descriptor, {
               id: 'xxx',
             })
             content += compiled.content
-            if (scriptSetup.lang === 'ts') isTS = true
           }
+
+          const lang = scriptSetup?.lang || script?.lang || 'js'
           const sourceFile = project.createSourceFile(
-            path.relative(process.cwd(), file) + (isTS ? '.ts' : '.js'),
+            `${path.relative(process.cwd(), file)}.${lang}`,
             content
           )
           sourceFiles.push(sourceFile)
@@ -106,8 +110,10 @@ export const generateTypesDefinitions = async () => {
     )
   })
   if (diagnostics.length > 0) {
-    console.log(project.formatDiagnosticsWithColorAndContext(diagnostics))
-    process.exit(1)
+    consola.error(project.formatDiagnosticsWithColorAndContext(diagnostics))
+    const err = new Error('Failed to generate dts.')
+    consola.error(err)
+    throw err
   }
 
   await project.emit({
@@ -116,12 +122,16 @@ export const generateTypesDefinitions = async () => {
 
   const tasks = sourceFiles.map(async (sourceFile) => {
     const relativePath = path.relative(pkgRoot, sourceFile.getFilePath())
-    yellow(`Generating definition for file: ${bold(relativePath)}`)
+    consola.trace(
+      chalk.yellow(
+        `Generating definition for file: ${chalk.bold(relativePath)}`
+      )
+    )
 
     const emitOutput = sourceFile.getEmitOutput()
     const emitFiles = emitOutput.getOutputFiles()
     if (emitFiles.length === 0) {
-      errorAndExit(new Error(`Emit no file: ${bold(relativePath)}`))
+      throw new Error(`Emit no file: ${chalk.bold(relativePath)}`)
     }
 
     const tasks = emitFiles.map(async (outputFile) => {
@@ -136,7 +146,11 @@ export const generateTypesDefinitions = async () => {
         'utf8'
       )
 
-      green(`Definition for file: ${bold(relativePath)} generated`)
+      consola.success(
+        chalk.green(
+          `Definition for file: ${chalk.bold(relativePath)} generated`
+        )
+      )
     })
 
     await Promise.all(tasks)

internal/build/src/utils/gulp.ts

@@ -1,8 +1,12 @@
 import { run } from './process'
+import { buildRoot } from './paths'
+
 import type { TaskFunction } from 'gulp'
 
 export const withTaskName = <T extends TaskFunction>(name: string, fn: T) =>
   Object.assign(fn, { displayName: name })
 
 export const runTask = (name: string) =>
-  withTaskName(`shellTask:${name}`, () => run(`pnpm run build ${name}`))
+  withTaskName(`shellTask:${name}`, () =>
+    run(`pnpm run start ${name}`, buildRoot)
+  )

internal/build/src/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './gulp'
+export * from './log'
+export * from './paths'
+export * from './pkg'
+export * from './process'
+export * from './rollup'

internal/build/src/utils/log.ts

@@ -0,0 +1,7 @@
+import process from 'process'
+import consola from 'consola'
+
+export function errorAndExit(err: Error): never {
+  consola.error(err)
+  process.exit(1)
+}

internal/build/src/utils/paths.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'path'
 
-export const projRoot = resolve(__dirname, '..', '..')
+export const projRoot = resolve(__dirname, '..', '..', '..', '..')
 export const pkgRoot = resolve(projRoot, 'packages')
 export const compRoot = resolve(pkgRoot, 'components')
 export const themeRoot = resolve(pkgRoot, 'theme-chalk')
@@ -9,11 +9,15 @@ 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')
+export const buildRoot = resolve(projRoot, 'internal', 'build')
 
-/** dist */
+// Docs
+export const docRoot = resolve(projRoot, 'docs')
+export const vpRoot = resolve(docRoot, '.vitepress')
+
+/** `/dist` */
 export const buildOutput = resolve(projRoot, 'dist')
-/** dist/element-plus */
+/** `/dist/element-plus` */
 export const epOutput = resolve(buildOutput, 'element-plus')
 
 export const projPackage = resolve(projRoot, 'package.json')

internal/build/src/utils/pkg.ts

@@ -1,7 +1,8 @@
 import findWorkspacePackages from '@pnpm/find-workspace-packages'
 import { buildConfig } from '../build-info'
-import { EP_PREFIX } from './constants'
+import { EP_PREFIX } from '../constants'
 import { projRoot } from './paths'
+
 import type { Module } from '../build-info'
 import type { ProjectManifest } from '@pnpm/types'
 

internal/build/src/utils/process.ts

@@ -1,11 +1,12 @@
 import { spawn } from 'child_process'
-import { green } from 'chalk'
+import chalk from 'chalk'
+import consola from 'consola'
 import { projRoot } from './paths'
 
 export const run = async (command: string, cwd: string = projRoot) =>
   new Promise<void>((resolve, reject) => {
     const [cmd, ...args] = command.split(' ')
-    console.log(`run: ${green(`${cmd} ${args.join(' ')}`)}`)
+    consola.info(`run: ${chalk.green(`${cmd} ${args.join(' ')}`)}`)
     const app = spawn(cmd, args, {
       cwd,
       stdio: 'inherit',

internal/eslint-config/index.js

@@ -37,7 +37,7 @@ module.exports = defineConfig({
       },
     },
     {
-      files: ['**/__tests__/**', '**/gulpfile.ts'],
+      files: ['**/__tests__/**'],
       rules: {
         'no-console': 'off',
         'vue/one-component-per-file': 'off',

jest.config.js

@@ -13,7 +13,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
-    '^.+\\.vue$': '<rootDir>/build/vue-jest-transformer.js',
+    '^.+\\.vue$': '<rootDir>/internal/build/vue-jest-transformer.js',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'vue'],
   // u can change this option to a more specific folder for test single component or util when dev

package.json

@@ -22,9 +22,9 @@
     "gen:version": "sucrase-node scripts/gen-version.ts",
     "diff:table": "sucrase-node scripts/build-table.ts",
     "update:version": "sucrase-node scripts/update-version.ts",
-    "clean": "pnpm run clean:dist && pnpm run clean -r --stream",
+    "clean": "pnpm run clean:dist && pnpm run clean --filter ./packages/ --stream",
     "clean:dist": "rimraf dist",
-    "build": "gulp --require sucrase/register/ts -f build/gulpfile.ts",
+    "build": "pnpm run start -C internal/build",
     "build:theme": "pnpm run build -C packages/theme-chalk",
     "format": "prettier --write .",
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 && pretty-quick --check --branch dev",
@@ -34,8 +34,9 @@
     "docs:serve": "pnpm run -C docs serve",
     "docs:gen-locale": "pnpm run -C docs gen-locale",
     "docs:crowdin-credentials": "pnpm run -C docs crowdin-credentials",
+    "stub": "pnpm run -C internal/build stub",
     "prepare": "husky install",
-    "postinstall": "pnpm gen:version",
+    "postinstall": "pnpm gen:version && pnpm stub",
     "preinstall": "npx only-allow pnpm -y"
   },
   "config": {
@@ -82,19 +83,17 @@
     "@babel/preset-typescript": "^7.16.7",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
+    "@element-plus/build": "workspace:^0.0.1",
     "@element-plus/eslint-config": "workspace:*",
     "@pnpm/find-workspace-packages": "^3.1.42",
     "@pnpm/logger": "^4.0.0",
     "@pnpm/types": "^7.10.0",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/fs-extra": "^9.0.13",
     "@types/gulp": "^4.0.9",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.179",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.18",
-    "@types/rollup-plugin-css-only": "^3.1.0",
     "@types/sass": "^1.43.1",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vitejs/plugin-vue-jsx": "^1.3.8",
@@ -105,16 +104,13 @@
     "babel-jest": "^26.6.3",
     "c8": "^7.11.0",
     "chalk": "^4.1.2",
-    "components-helper": "^2.0.0",
+    "consola": "^2.15.3",
     "csstype": "^2.6.19",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.14.26",
     "eslint": "^8.11.0",
     "eslint-define-config": "^1.2.5",
     "expect-type": "^0.13.0",
     "fast-glob": "^3.2.11",
-    "fs-extra": "^10.0.1",
-    "gulp": "^4.0.2",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "lint-staged": "^12.3.5",
@@ -123,10 +119,6 @@
     "puppeteer": "^13.5.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.70.1",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-esbuild": "^4.8.2",
-    "rollup-plugin-filesize": "^9.1.2",
     "sass": "^1.49.9",
     "sucrase": "^3.20.3",
     "ts-jest": "^26.5.6",

packages/theme-chalk/gulpfile.ts

@@ -6,7 +6,8 @@ import dartSass from 'sass'
 import autoprefixer from 'gulp-autoprefixer'
 import cleanCSS from 'gulp-clean-css'
 import rename from 'gulp-rename'
-import { epOutput } from '../../build/utils/paths'
+import consola from 'consola'
+import { epOutput } from '@element-plus/build'
 
 const distFolder = path.resolve(__dirname, 'dist')
 const distBundle = path.resolve(epOutput, 'theme-chalk')
@@ -24,7 +25,7 @@ function buildThemeChalk() {
     .pipe(autoprefixer({ cascade: false }))
     .pipe(
       cleanCSS({}, (details) => {
-        console.log(
+        consola.success(
           `${chalk.cyan(details.name)}: ${chalk.yellow(
             details.stats.originalSize / 1000
           )} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`

packages/theme-chalk/package.json

@@ -27,6 +27,7 @@
   },
   "homepage": "https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/README.md",
   "devDependencies": {
+    "@element-plus/build": "workspace:*",
     "@types/gulp-autoprefixer": "^0.0.33",
     "@types/gulp-clean-css": "^4.3.0",
     "@types/gulp-rename": "^2.0.1",

play/vite.config.ts

@@ -9,8 +9,13 @@ import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
 import DefineOptions from 'unplugin-vue-define-options/vite'
 import esbuild from 'rollup-plugin-esbuild'
-import { epRoot, pkgRoot, projRoot, epPackage } from '../build/utils/paths'
-import { getPackageDependencies } from '../build/utils/pkg'
+import {
+  epRoot,
+  pkgRoot,
+  projRoot,
+  epPackage,
+  getPackageDependencies,
+} from '@element-plus/build'
 import './vite.init'
 
 const esbuildPlugin = () => ({

scripts/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-console": "off"
-  }
-}

scripts/update-version.ts

@@ -1,24 +1,25 @@
-import fs from 'fs'
-import { epPackage } from '../build/utils/paths'
-import { cyan, red, yellow, green } from '../build/utils/log'
-import { getPackageManifest } from '../build/utils/pkg'
+import { writeFile } from 'fs/promises'
+import consola from 'consola'
+import chalk from 'chalk'
+import { epPackage, getPackageManifest } from '@element-plus/build'
 
-const tagVersion = process.env.TAG_VERSION
-const gitHead = process.env.GIT_HEAD
-if (!tagVersion || !gitHead) {
-  red(
-    'No tag version or git head were found, make sure that you set the environment variable $TAG_VERSION \n'
-  )
-  process.exit(1)
-}
+async function main() {
+  const tagVersion = process.env.TAG_VERSION
+  const gitHead = process.env.GIT_HEAD
+  if (!tagVersion || !gitHead) {
+    consola.error(
+      new Error(
+        'No tag version or git head were found, make sure that you set the environment variable $TAG_VERSION \n'
+      )
+    )
+    process.exit(1)
+  }
 
-cyan('Start updating version')
+  consola.log(chalk.cyan('Start updating version'))
+  consola.log(chalk.cyan(`$TAG_VERSION: ${tagVersion}`))
+  consola.log(chalk.cyan(`$GIT_HEAD: ${gitHead}`))
 
-cyan(
-  ['NOTICE:', `$TAG_VERSION: ${tagVersion}`, `$GIT_HEAD: ${gitHead}`].join('\n')
-)
-;(async () => {
-  yellow(`Updating package.json for element-plus`)
+  consola.debug(chalk.yellow(`Updating package.json for element-plus`))
 
   const json: Record<string, any> = getPackageManifest(epPackage)
 
@@ -27,17 +28,18 @@ cyan(
 
   if (!(process.argv.includes('-d') || process.argv.includes('--dry-run'))) {
     try {
-      await fs.promises.writeFile(epPackage, JSON.stringify(json, null, 2), {
+      await writeFile(epPackage, JSON.stringify(json, null, 2), {
         encoding: 'utf-8',
       })
     } catch {
       process.exit(1)
     }
   } else {
-    console.log(json)
+    consola.log(json)
   }
 
-  green(`Version updated to ${tagVersion}`)
+  consola.debug(chalk.green(`$GIT_HEAD: ${gitHead}`))
+  consola.success(chalk.green(`Git head updated to ${gitHead}`))
+}
 
-  green(`Git head updated to ${gitHead}`)
-})()
+main()