build: build esm bundle & esm components (#518)

build/bincomp.js

@@ -0,0 +1,40 @@
+/* eslint-disable */
+const cp = require('child_process')
+const { getPackagesSync } =  require('@lerna/project')
+const ora = require('ora')
+const chalk = require('chalk')
+
+const spinner = ora(`${chalk.blue('Building...')}`).start()
+const pkgs = getPackagesSync()
+  .map(pkg => pkg.name)
+  .filter(name =>
+    name.includes('@element-plus') &&
+    !name.includes('transition') &&
+    !name.includes('utils'),
+  )
+
+const buildChild = (a, b) => {
+  const c1 = cp.spawn('node', ['./build/build.component.js', a, b])
+  c1.stdout.on('data', function (data) {
+    spinner.info(`${chalk.blue(data)}`)
+  })
+
+  c1.stderr.on('data', function (data) {
+    spinner.warn(`${chalk.red(data)}`)
+  })
+
+  c1.on('close', function (code) {
+    a += 5
+    b += 5
+    if (a > pkgs.length && b > pkgs.length) {
+      spinner.succeed(`${chalk.green('Build done. Exit code ' + code)}`)
+      return
+    }
+    buildChild(a, b)
+  })
+}
+
+/**
+ * @link https://github.com/ezolenko/rollup-plugin-typescript2/issues/177
+ */
+buildChild(0, 5)

build/build.component.js

@@ -0,0 +1,77 @@
+/* eslint-disable */
+const pkg = require('../package.json')
+const path = require('path')
+const { getPackages } =  require('@lerna/project')
+const css = require('rollup-plugin-css-only')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const vue = require('./plugin.js')
+const rollup = require('rollup')
+const typescript = require('rollup-plugin-typescript2')
+
+const deps = Object.keys(pkg.dependencies)
+
+const runBuild = async () => {
+  let index = 0
+  const pkgs = await getPackages()
+  const inputs = pkgs
+    .map(pkg => pkg.name)
+    .filter(name =>
+      name.includes('@element-plus') &&
+      !name.includes('transition') &&
+      !name.includes('utils'),
+    ).slice(process.argv[2], process.argv[3])
+
+  build(inputs[index])
+
+  async function build(name) {
+    const inputOptions = {
+      input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`),
+      plugins: [
+        nodeResolve(),
+        css(),
+        vue({
+          target: 'browser',
+          css: false,
+        }),
+        typescript({
+          tsconfigOverride: {
+            compilerOptions: {
+              declaration: false,
+            },
+            'exclude': [
+              'node_modules',
+              '__tests__',
+            ],
+          },
+          abortOnError: false,
+        }),
+      ],
+      external(id) {
+        return /^vue/.test(id)
+          || /^@element-plus/.test(id)
+          || deps.some(k => new RegExp('^' + k).test(id))
+      },
+    }
+    const outOptions = {
+      format: 'es',
+      file: `lib/${name.split('@element-plus/')[1]}/index.js`,
+      paths(id) {
+        if (/^@element-plus/.test(id)) {
+          return id.replace('@element-plus', '..')
+        }
+      },
+    }
+
+    const bundle = await rollup.rollup(inputOptions)
+    console.log(name, 'done')
+    await bundle.write(outOptions)
+    index++
+    if (index < inputs.length) {
+      await build(inputs[index])
+    } else {
+      console.log('batch done')
+    }
+  }
+}
+
+runBuild()

build/rollup.config.bundle.js

@@ -29,9 +29,12 @@ export default [
       }),
       typescript({
         tsconfigOverride: {
+          'include': [
+            'packages/**/*',
+          ],
           'exclude': [
             'node_modules',
-            '__tests__',
+            'packages/**/__tests__/*',
           ],
         },
         abortOnError: false,

build/rollup.config.js

@@ -1,3 +1,6 @@
+/**
+ * @deprecated use node api build
+ */
 // import vue from 'rollup-plugin-vue'
 import typescript from 'rollup-plugin-typescript2'
 import css from 'rollup-plugin-css-only'
@@ -50,6 +53,7 @@ export default inputs.map(name => ({
         ],
       },
       abortOnError: false,
+      clean: true,
     }),
     css(),
     vue({

package.json

@@ -10,7 +10,7 @@
     "build": "yarn bootstrap && yarn build:lib && yarn build:theme",
     "build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
     "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js",
-    "build:esm": "node --max-old-space-size=8192 node_modules/rollup/dist/bin/rollup -c ./build/rollup.config.js",
+    "build:esm": "node ./build/bincomp.js",
     "build:utils": "cd ./packages/utils && npx tsc && cd ../",
     "build:theme": "rimraf packages/theme-chalk/lib && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk && rimraf packages/theme-chalk/lib",
     "lint": "eslint ./packages --ext .vue,.js,.ts",
@@ -43,6 +43,7 @@
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-preset-vue": "^2.0.2",
+    "chalk": "^4.1.0",
     "cp-cli": "^2.0.0",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
@@ -62,6 +63,7 @@
     "markdown-it-chain": "^1.3.0",
     "markdown-it-container": "^3.0.0",
     "mini-css-extract-plugin": "^0.11.2",
+    "ora": "^5.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.28.2",
     "rollup-plugin-css-only": "^2.1.0",

packages/utils/global.d.ts

@@ -0,0 +1,11 @@
+declare type Nullable<T> = T | null;
+
+declare type CustomizedHTMLElement<T> = HTMLElement & T
+
+declare type Indexable<T> = {
+  [key: string]: T
+}
+
+declare type Hash<T> = Indexable<T>
+
+declare type TimeoutHandle = ReturnType<typeof global.setTimeout>

packages/utils/popup/usePopup.ts

@@ -45,7 +45,7 @@ const usePopup = (props, doClose) => {
   let vm
   let _closeTimer = null
   let _openTimer = null
-  const state = reactive<State>({
+  const state = reactive({
     opened: false,
     bodyPaddingRight: null,
     computedBodyPaddingRight: 0,

yarn.lock

@@ -3770,6 +3770,11 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-spinners@^2.4.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.5.0.tgz#12763e47251bf951cb75c201dfa58ff1bcb2d047"
+  integrity sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==
+
 cli-truncate@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
@@ -6839,6 +6844,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -8488,7 +8498,7 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-mute-stream@~0.0.4:
+mute-stream@0.0.8, mute-stream@~0.0.4:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
 
@@ -8961,6 +8971,20 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+ora@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-5.1.0.tgz#b188cf8cd2d4d9b13fd25383bc3e5cba352c94f8"
+  integrity sha512-9tXIMPvjZ7hPTbk8DFq1f7Kow/HU/pQYB60JbNq+QnGwcyhWVZaQ4hM9zQDEsPxw/muLpgiHSaumUZxCAmod/w==
+  dependencies:
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.4.0"
+    is-interactive "^1.0.0"
+    log-symbols "^4.0.0"
+    mute-stream "0.0.8"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
 ordered-read-streams@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz#77c0cb37c41525d64166d990ffad7ec6a0e1363e"
@@ -11868,7 +11892,7 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-wcwidth@^1.0.0:
+wcwidth@^1.0.0, wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
   dependencies: