feat(ssr): add server-side rendering

build/dev-fast.js

@@ -20,14 +20,10 @@
 
 const path = require('path');
 const {build} = require('esbuild');
-
+const commander = require('commander');
 const outFilePath = path.resolve(__dirname, '../dist/echarts.js');
 
-const umdMark = '// ------------- WRAPPED UMD --------------- //';
-const umdWrapperHead = `
-${umdMark}
-(function (root, factory) {
- window.__DEV__ = true;
+const umdWrapperHead = `(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
  // AMD. Register as an anonymous module.
  define(['exports'], factory);
@@ -52,15 +48,20 @@ build({
  bundle: true,
  banner: umdWrapperHead,
  footer: umdWrapperTail,
+ define: {
+ 'process.env.NODE_ENV': '"development"',
+ '__DEV__': 'true'
+ },
  watch: {
  async onRebuild(error) {
  if (error) {
  console.error('watch build failed:', error)
- } else {
- console.log('build done')
+ }
+ else {
+ console.log('Bundled with esbuild')
  }
  },
  },
 }).then(async () => {
- console.log('build done')
+ console.log('Bundled with esbuild')
 }).catch(e => console.error(e.toString()))

build/source-release/template/announce-release.tpl

@@ -13,11 +13,11 @@ The Apache ECharts team is proud to announce Apache ECharts {{ECHARTS_RELEASE_VE
 
 Apache ECharts is a powerful, interactive charting and data visualization library for browser.
 
-Download Links: https://dist.apache.org/repos/dist/release/echarts/{{ECHARTS_RELEASE_VERSION}}/
+Download Links: https://echarts.apache.org/download.html
 
-Release Notes: http:https://www.apache.org/dist/echarts/{{ECHARTS_RELEASE_VERSION}}/RELEASE_NOTE.txt
+Release Notes: https:https://echarts.apache.org/changelog.html
 
-Website: http:https://echarts.apache.org/
+Website: https:https://echarts.apache.org/
 
 
 ECharts Resources:

package.json

@@ -64,7 +64,7 @@
  },
  "dependencies": {
  "tslib": "2.3.0",
- "zrender": "5.2.1"
+ "zrender": "npm:zrender-nightly@^5.3.0-dev.20211015"
  },
  "devDependencies": {
  "@babel/code-frame": "7.10.4",
@@ -106,6 +106,6 @@
  "socket.io": "2.2.0",
  "terser": "^5.3.8",
  "ts-jest": "^26.4.3",
- "typescript": "4.3.5"
+ "typescript": "4.4.3"
  }
 }

src/chart/heatmap/HeatmapLayer.ts

@@ -19,7 +19,7 @@
 
 /* global Uint8ClampedArray */
 
-import * as zrUtil from 'zrender/src/core/util';
+import { platformApi } from 'zrender/src/core/platform';
 
 const GRADIENT_LEVELS = 256;
 
@@ -43,7 +43,7 @@ class HeatmapLayer {
  };
 
  constructor() {
- const canvas = zrUtil.createCanvas();
+ const canvas = platformApi.createCanvas();
  this.canvas = canvas;
  }
 
@@ -127,7 +127,7 @@ class HeatmapLayer {
  * get canvas of a black circle brush used for canvas to draw later
  */
  _getBrush() {
- const brushCanvas = this._brushCanvas || (this._brushCanvas = zrUtil.createCanvas());
+ const brushCanvas = this._brushCanvas || (this._brushCanvas = platformApi.createCanvas());
  // set brush size
  const r = this.pointSize + this.blurSize;
  const d = r * 2;

src/chart/pie/PieView.ts

@@ -77,7 +77,17 @@ class PiePiece extends graphic.Sector {
  sector.setShape(sectorShape);
 
  const animationType = seriesModel.getShallow('animationType');
- if (animationType === 'scale') {
+ if (seriesModel.ecModel.ssr) {
+ // Use scale animation in SSR mode(opacity?)
+ // Because CSS SVG animation doesn't support very customized shape animation.
+ graphic.initProps(sector, {
+ scaleX: 0,
+ scaleY: 0
+ }, seriesModel, { dataIndex: idx, isFrom: true});
+ sector.originX = sectorShape.cx;
+ sector.originY = sectorShape.cy;
+ }
+ else if (animationType === 'scale') {
  sector.shape.r = layout.r0;
  graphic.initProps(sector, {
  shape: {

src/component/dataZoom/DataZoomModel.ts

@@ -244,10 +244,6 @@ class DataZoomModel<Opts extends DataZoomOption = DataZoomOption> extends Compon
  private _doInit(inputRawOption: Opts): void {
  const thisOption = this.option;
 
- // if (!env.canvasSupported) {
- // thisOption.realtime = false;
- // }
-
  this._setDefaultThrottle(inputRawOption);
 
  this._updateRangeUse(inputRawOption);

src/component/toolbox/feature/SaveAsImage.ts

@@ -74,6 +74,7 @@ class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
  }
  // IE or old Edge
  else {
+ // @ts-ignore
  if (window.navigator.msSaveOrOpenBlob || isSvg) {
  const parts = url.split(',');
  // data:[<mime type>][;charset=<charset>][;base64],<encoded data>
@@ -88,13 +89,14 @@ class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
  // (just a url-encoded string through `encodeURIComponent`)
  base64Encoded && (bstr = window.atob(bstr));
  const filename = title + '.' + type;
+ // @ts-ignore
  if (window.navigator.msSaveOrOpenBlob) {
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
  }
- const blob = new Blob([u8arr]);
+ const blob = new Blob([u8arr]);// @ts-ignore
  window.navigator.msSaveOrOpenBlob(blob, filename);
  }
  else {
@@ -143,6 +145,4 @@ class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
  }
 }
 
-SaveAsImage.prototype.unusable = !env.canvasSupported;
-
 export default SaveAsImage;

src/component/tooltip/TooltipHTMLContent.ts

@@ -189,16 +189,7 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
  enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
 
  if (backgroundColor) {
- if (env.canvasSupported) {
- cssText.push('background-color:' + backgroundColor);
- }
- else {
- // for ie
- cssText.push(
- 'background-color:#' + toHex(backgroundColor)
- );
- cssText.push('filter:alpha(opacity=70)');
- }
+ cssText.push('background-color:' + backgroundColor);
  }
 
  // Border style

src/component/tooltip/TooltipView.ts

@@ -171,7 +171,7 @@ class TooltipView extends ComponentView {
  private _updatePosition: ReturnType<typeof throttle> | TooltipView['_doUpdatePosition'];
 
  init(ecModel: GlobalModel, api: ExtensionAPI) {
- if (env.node) {
+ if (env.node || !api.getDom()) {
  return;
  }
 
@@ -191,7 +191,7 @@ class TooltipView extends ComponentView {
  ecModel: GlobalModel,
  api: ExtensionAPI
  ) {
- if (env.node) {
+ if (env.node || !api.getDom()) {
  return;
  }
 
@@ -301,7 +301,7 @@ class TooltipView extends ComponentView {
  api: ExtensionAPI,
  payload: ShowTipPayload
  ) {
- if (payload.from === this.uid || env.node) {
+ if (payload.from === this.uid || env.node || !api.getDom()) {
  return;
  }
 
@@ -1013,7 +1013,7 @@ class TooltipView extends ComponentView {
  }
 
  dispose(ecModel: GlobalModel, api: ExtensionAPI) {
- if (env.node) {
+ if (env.node || !api.getDom()) {
  return;
  }
  this._tooltipContent.dispose();

src/component/visualMap/VisualMapModel.ts

@@ -202,13 +202,6 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
  optionUpdated(newOption: Opts, isInit?: boolean) {
  const thisOption = this.option;
 
- // FIXME
- // necessary?
- // Disable realtime view update if canvas is not supported.
- if (!env.canvasSupported) {
- thisOption.realtime = false;
- }
-
  !isInit && visualSolution.replaceVisualOption(
  thisOption, newOption, this.replacableOptionKeys
  );

src/core/ExtensionAPI.ts

@@ -35,6 +35,7 @@ const availableMethods: (keyof EChartsType)[] = [
  'getHeight',
  'getDevicePixelRatio',
  'dispatchAction',
+ 'isSSR',
  'isDisposed',
  'on',
  'off',