chore: add esm bundle #11855

build/build.js

@@ -29,6 +29,7 @@ const transformDEV = require('./transform-dev');
 const UglifyJS = require("uglify-js");
 const preamble = require('./preamble');
 const {buildI18n} = require('./build-i18n')
+const terser = require('terser');
 
 async function run() {
 
@@ -89,7 +90,7 @@ async function run() {
         )
         .option(
             '--format <format>',
-            'The format of output bundle. Can be "umd", "amd", "iife", "cjs", "es".'
+            'The format of output bundle. Can be "umd", "amd", "iife", "cjs", "esm".'
         )
         .option(
             '-i, --input <input file path>',
@@ -220,19 +221,28 @@ async function build(configs, min, sourcemap) {
                 chalk.cyan.dim(' ...')
             )
             console.time('Minify');
-            const uglifyResult = UglifyJS.minify(
-                // Convert __DEV__ to false and let uglify remove the dead code;
-                transformDEV.transform(sourceCode, false, 'false').code,
-                {
+            // Convert __DEV__ to false and let uglify remove the dead code;
+            const transformedCode = transformDEV.transform(sourceCode, false, 'false').code;
+            let minifyResult;
+            if (singleConfig.output.format !== 'esm') {
+                minifyResult = UglifyJS.minify(transformedCode, {
                     output: {
                         preamble: preamble.js
                     }
+                });
+                if (minifyResult.error) {
+                    throw new Error(minifyResult.error);
                 }
-            );
-            if (uglifyResult.error) {
-                throw new Error(uglifyResult.error);
             }
-            fs.writeFileSync(fileMinPath, uglifyResult.code, 'utf-8');
+            else {
+                // Use terser for esm minify because uglify doesn't support esm code.
+                minifyResult = await terser.minify(transformedCode, {
+                    format: {
+                        preamble: preamble.js
+                    }
+                })
+            }
+            fs.writeFileSync(fileMinPath, minifyResult.code, 'utf-8');
 
             console.timeEnd('Minify');
             console.log(

build/config.js

@@ -83,7 +83,6 @@ function preparePlugins(
 /**
  * @param {Object} [opt]
  * @param {string} [opt.type=''] '' or 'simple' or 'common'
- * @param {string} [opt.lang=undefined] null/undefined/'' or 'en' or 'fi' or a file path.
  * @param {string} [opt.input=undefined] If set, `opt.output` is required too, and `opt.type` is ignored.
  * @param {string} [opt.output=undefined] If set, `opt.input` is required too, and `opt.type` is ignored.
  * @param {boolean} [opt.sourcemap] If set, `opt.input` is required too, and `opt.type` is ignored.
@@ -94,11 +93,11 @@ function preparePlugins(
 exports.createECharts = function (opt = {}) {
     let srcType = opt.type ? '.' + opt.type : '.all';
     let postfixType = opt.type ? '.' + opt.type : '';
-    let postfixLang = opt.lang ? '-' + opt.lang.toLowerCase() : '';
     let input = opt.input;
     let output = opt.output;
     let sourcemap = opt.sourcemap;
     let format = opt.format || 'umd';
+    let postfixFormat = (format !== 'umd') ? '.' + format.toLowerCase() : '';
 
     if (input != null || output != null) {
         // Based on process.cwd();
@@ -107,7 +106,7 @@ exports.createECharts = function (opt = {}) {
     }
     else {
         input = nodePath.resolve(ecDir, `src/echarts${srcType}.ts`);
-        output = nodePath.resolve(ecDir, `dist/echarts${postfixLang}${postfixType}.js`);
+        output = nodePath.resolve(ecDir, `dist/echarts${postfixFormat}${postfixType}.js`);
     }
 
     const include = [

build/release.js

@@ -42,19 +42,28 @@ function release() {
         }
     }
 
-    ['', 'simple', 'common', 'extension'].forEach(function (type) {
-
-        const args = [
-            `--type`,
+    const argsList = ['', 'simple', 'common', 'extension'].map((type) => {
+        return [
+            '--type',
             type,
-            `--clean`,
-            `--sourcemap`,
-            `--min`
+            '--clean',
+            '--sourcemap',
+            '--min'
         ];
+    });
+
+    argsList.push([
+        '--type', '', '--clean', '--sourcemap', '--min', '--format', 'esm'
+    ])
+
+    argsList.forEach(function (args) {
 
         const p = spawn(path.join(__dirname, 'build.js'), args);
 
-        const scope = `[${type || 'all'}]`;
+        let scope = `[${args[1] || 'all'}]`;
+        if (args[6]) {
+            scope += `[${args[6]}]`;
+        }
 
         function createOnDataHandler(idx)  {
             return function (data) {

package.json

@@ -71,6 +71,7 @@
     "serve-handler": "6.1.1",
     "slugify": "1.3.4",
     "socket.io": "2.2.0",
+    "terser": "^5.3.8",
     "ts-jest": "^26.4.3",
     "typescript": "3.8.3",
     "uglify-js": "^3.10.0"

src/util/model.ts

@@ -27,9 +27,7 @@ import {
     assert,
     isString,
     indexOf,
-    isStringSafe,
-    hasOwn,
-    defaults
+    isStringSafe
 } from 'zrender/src/core/util';
 import env from 'zrender/src/core/env';
 import GlobalModel from '../model/Global';

src/util/types.ts

@@ -1135,7 +1135,8 @@ interface TooltipFormatterCallback<T> {
      * For async callback.
      * Returned html string will be a placeholder when callback is not invoked.
      */
-    (params: T, asyncTicket: string, callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement[]) => void): string | HTMLElement[]
+    (params: T, asyncTicket: string, callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement[]) => void)
+        : string | HTMLElement[]
 }
 
 type TooltipBuiltinPosition = 'inside' | 'top' | 'left' | 'right' | 'bottom';

test/browser-esm.html

+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="data/basicChartsOptions.js"></script>
+        <script src="lib/dat.gui.min.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            body {
+                background: #eee;
+                margin: 0;
+                text-align: center;
+            }
+            #main {
+                box-sizing: border-box;
+                margin: 0 auto;
+                width: 800px;
+                max-width: 100%;
+                text-align: center;
+            }
+            .chart {
+                height: 400px;
+                border-radius: 5px;
+                margin: 20px 0;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+                background: #fff;
+            }
+        </style>
+
+
+
+        <div id="main">
+            <h1>Tests for focus and blurScope</h1>
+        </div>
+
+        <script type="module">
+            import * as echarts from '../dist/echarts.esm.min';
+            const charts = [];
+            allChartsOptions.forEach(function (chartOption) {
+                chartOption.series.forEach(function (series) {
+                    series.selectedMode = 'single';
+                    series.select = {
+                        itemStyle: {
+                            borderWidth: 3
+                        }
+                    }
+
+                    if (series.renderItem) {
+                        const oldRenderItem = series.renderItem;
+                        series.renderItem = function () {
+                            const ret = oldRenderItem.apply(this, arguments);
+                            ret.focus = 'self';
+                            return ret;
+                        }
+                    }
+
+                    if (series.type === 'treemap') {
+                        series.itemStyle = {
+                            borderColor: 'rgba(100, 100, 200, 0.1)',
+                        };
+                        series.nodeClick = null;
+                        series.select = {
+                            itemStyle: {
+                                strokeColor: '#000',
+                                strokeWidth: 1
+                            }
+                        }
+                    }
+                    else if (series.type === 'pie') {
+                        series.data[0].selected = true;
+                    }
+                });
+                const dom = document.createElement('div');
+                dom.className = 'chart';
+                document.querySelector('#main').appendChild(dom);
+
+                const chart = echarts.init(dom);
+
+                chart.setOption(chartOption);
+            });
+        </script>
+    </body>
+</html>
+