feat(build): add full bundle locale (#5399)

* feat: add full bundle locale

* refactor: build

build/.eslintrc.js

@@ -1,5 +1,8 @@
-module.exports = {
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { defineConfig } = require('eslint-define-config')
+
+module.exports = defineConfig({
   rules: {
     'no-console': 'off',
   },
-}
+})

build/build-info.ts

@@ -54,3 +54,5 @@ export const buildConfigEntries = Object.entries(
 
 export type BuildConfig = typeof buildConfig
 export type BuildConfigEntries = [Module, BuildInfo][]
+
+export const target = 'es2018'

build/full-bundle.ts

@@ -7,18 +7,28 @@ import esbuild from 'rollup-plugin-esbuild'
 import replace from '@rollup/plugin-replace'
 import filesize from 'rollup-plugin-filesize'
 import { parallel } from 'gulp'
+import glob from 'fast-glob'
+import { camelCase, capitalize } 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 } from './utils/paths'
-import { generateExternal, writeBundles } from './utils/rollup'
-
+import { epRoot, epOutput, localeRoot } from './utils/paths'
+import {
+  formatBundleFilename,
+  generateExternal,
+  writeBundles,
+} from './utils/rollup'
 import { withTaskName } from './utils/gulp'
+import { EP_BRAND_NAME } from './utils/constants'
+import { target } from './build-info'
 
-export const buildFull = (minify: boolean) => async () => {
+const banner = `/*! ${EP_BRAND_NAME} v${version} */\n`
+
+async function buildFullEntry(minify: boolean) {
   const bundle = await rollup({
     input: path.resolve(epRoot, 'index.ts'),
     plugins: [
-      await ElementPlusAlias(),
+      ElementPlusAlias(),
       nodeResolve({
         extensions: ['.mjs', '.js', '.json', '.ts'],
       }),
@@ -30,7 +40,7 @@ export const buildFull = (minify: boolean) => async () => {
       esbuild({
         minify,
         sourceMap: minify,
-        target: 'es2018',
+        target,
       }),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
@@ -42,11 +52,14 @@ export const buildFull = (minify: boolean) => async () => {
     ],
     external: await generateExternal({ full: true }),
   })
-  const banner = `/*! Element Plus v${version} */\n`
   await writeBundles(bundle, [
     {
       format: 'umd',
-      file: path.resolve(epOutput, `dist/index.full${minify ? '.min' : ''}.js`),
+      file: path.resolve(
+        epOutput,
+        'dist',
+        formatBundleFilename('index.full', minify, 'js')
+      ),
       exports: 'named',
       name: 'ElementPlus',
       globals: {
@@ -59,7 +72,8 @@ export const buildFull = (minify: boolean) => async () => {
       format: 'esm',
       file: path.resolve(
         epOutput,
-        `dist/index.full${minify ? '.min' : ''}.mjs`
+        'dist',
+        formatBundleFilename('index.full', minify, 'mjs')
       ),
       sourcemap: minify,
       banner,
@@ -67,6 +81,57 @@ export const buildFull = (minify: boolean) => async () => {
   ])
 }
 
+async function buildFullLocale(minify: boolean) {
+  const files = await glob(`${path.resolve(localeRoot, 'lang')}/*.ts`, {
+    absolute: true,
+  })
+  return Promise.all(
+    files.map(async (file) => {
+      const filename = path.basename(file, '.ts')
+      const name = capitalize(camelCase(filename))
+
+      const bundle = await rollup({
+        input: file,
+        plugins: [
+          esbuild({
+            minify,
+            sourceMap: minify,
+            target,
+          }),
+          filesize({ reporter }),
+        ],
+      })
+      await writeBundles(bundle, [
+        {
+          format: 'umd',
+          file: path.resolve(
+            epOutput,
+            'dist/locale',
+            formatBundleFilename(filename, minify, 'js')
+          ),
+          exports: 'named',
+          name: `ElementPlusLocale${name}`,
+          sourcemap: minify,
+          banner,
+        },
+        {
+          format: 'esm',
+          file: path.resolve(
+            epOutput,
+            'dist/locale',
+            formatBundleFilename(filename, minify, 'mjs')
+          ),
+          sourcemap: minify,
+          banner,
+        },
+      ])
+    })
+  )
+}
+
+export const buildFull = (minify: boolean) => async () =>
+  Promise.all([buildFullEntry(minify), buildFullLocale(minify)])
+
 export const buildFullBundle = parallel(
   withTaskName('buildFullMinified', buildFull(true)),
   withTaskName('buildFull', buildFull(false))

build/gulpfile.ts

@@ -3,15 +3,12 @@ import { mkdir, copyFile } from 'fs/promises'
 import { copy } from 'fs-extra'
 import { series, parallel } from 'gulp'
 import { run } from './utils/process'
-import { withTaskName } from './utils/gulp'
+import { runTask, withTaskName } from './utils/gulp'
 import { buildOutput, epOutput, epPackage, projRoot } from './utils/paths'
 import { buildConfig } from './build-info'
 import type { TaskFunction } from 'gulp'
 import type { Module } from './build-info'
 
-const runTask = (name: string) =>
-  withTaskName(name, () => run(`pnpm run build ${name}`))
-
 export const copyFiles = () =>
   Promise.all([
     copyFile(epPackage, path.join(epOutput, 'package.json')),

build/modules.ts

@@ -11,7 +11,7 @@ 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 } from './build-info'
+import { buildConfigEntries, target } from './build-info'
 import type { OutputOptions } from 'rollup'
 
 export const buildModules = async () => {
@@ -25,7 +25,7 @@ export const buildModules = async () => {
   const bundle = await rollup({
     input,
     plugins: [
-      await ElementPlusAlias(),
+      ElementPlusAlias(),
       css(),
       vue({ target: 'browser' }),
       nodeResolve({
@@ -34,7 +34,7 @@ export const buildModules = async () => {
       commonjs(),
       esbuild({
         sourceMap: true,
-        target: 'es2018',
+        target,
       }),
       filesize({ reporter }),
     ],

build/plugins/element-plus-alias.ts

@@ -1,16 +1,14 @@
 import { EP_PKG, EP_PREFIX } from '../utils/constants'
-import { getDistPackages } from '../utils/pkg'
 import type { Plugin } from 'rollup'
 
-export async function ElementPlusAlias(): Promise<Plugin> {
-  const pkgs = await getDistPackages()
+export function ElementPlusAlias(): Plugin {
+  const THEME_CHALK = `${EP_PREFIX}/theme-chalk`
 
   return {
     name: 'element-plus-alias-plugin',
     resolveId(id, importer, options) {
       if (!id.startsWith(EP_PREFIX)) return
 
-      const THEME_CHALK = `${EP_PREFIX}/theme-chalk`
       if (id.startsWith(THEME_CHALK)) {
         return {
           id: id.replaceAll(THEME_CHALK, `${EP_PKG}/theme-chalk`),
@@ -18,11 +16,6 @@ export async function ElementPlusAlias(): Promise<Plugin> {
         }
       }
 
-      let updatedId = id
-      for (const pkg of pkgs) {
-        if (id.startsWith(pkg.name))
-          updatedId = updatedId.replace(pkg.name, pkg.dir)
-      }
       return this.resolve(id, importer, { skipSelf: true, ...options })
     },
   }

build/utils/constants.ts

@@ -1,2 +1,3 @@
 export const EP_PREFIX = '@element-plus'
 export const EP_PKG = 'element-plus'
+export const EP_BRAND_NAME = 'Element Plus'

build/utils/gulp.ts

@@ -1,4 +1,8 @@
+import { run } from './process'
 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(name, () => run(`pnpm run build ${name}`))

build/utils/pkg.ts

@@ -1,7 +1,7 @@
 import findWorkspacePackages from '@pnpm/find-workspace-packages'
 import { buildConfig } from '../build-info'
 import { EP_PREFIX } from './constants'
-import { pkgRoot, projRoot } from './paths'
+import { projRoot } from './paths'
 import type { Module } from '../build-info'
 import type { ProjectManifest } from '@pnpm/types'
 
@@ -25,12 +25,12 @@ export const getPackageDependencies = (pkgPath: string): string[] => {
   return Object.keys(dependencies ?? {})
 }
 
+/** used for type generator */
 export const pathRewriter = (module: Module) => {
   const config = buildConfig[module]
 
   return (id: string) => {
     id = id.replaceAll(`${EP_PREFIX}/theme-chalk`, 'element-plus/theme-chalk')
-    // TODO: handle @element-plus/icons
     id = id.replaceAll(`${EP_PREFIX}/`, `${config.bundle.path}/`)
     return id
   }
@@ -42,18 +42,3 @@ export const excludeFiles = (files: string[]) => {
     (path) => !excludes.some((exclude) => path.includes(exclude))
   )
 }
-
-/**
- * get package list (theme-chalk excluded)
- */
-export const getDistPackages = async () =>
-  (await getWorkspacePackages())
-    .map((pkg) => ({ name: pkg.manifest.name, dir: pkg.dir }))
-    .filter(
-      (pkg): pkg is { name: string; dir: string } =>
-        !!pkg.name &&
-        !!pkg.dir &&
-        pkg.name.startsWith(EP_PREFIX) &&
-        pkg.dir.startsWith(pkgRoot) &&
-        pkg.name !== `${EP_PREFIX}/theme-chalk`
-    )

build/utils/rollup.ts

@@ -21,3 +21,11 @@ export const generateExternal = async (options: { full: boolean }) => {
 export function writeBundles(bundle: RollupBuild, options: OutputOptions[]) {
   return Promise.all(options.map((option) => bundle.write(option)))
 }
+
+export function formatBundleFilename(
+  name: string,
+  minify: boolean,
+  ext: string
+) {
+  return `${name}${minify ? '.min' : ''}.${ext}`
+}