feat(ssr): server-side rendering and client hydration #18334

.github/workflows/source-release.yml

@@ -87,6 +87,7 @@ jobs:
             index.d.ts
             src/
             extension-src/
+            ssr/client/src/
             licenses/
             theme/
             build/

.gitignore

@@ -195,6 +195,7 @@ todo
 /index.blank.js
 /extension-esm
 /extension
+/ssr/client/lib
 /core.js
 /core.d.ts
 /charts.js

build/build.js

@@ -97,6 +97,12 @@ async function run() {
         ];
         await build(cfgs);
     }
+    else if (buildType === 'ssr') {
+        const cfgs = [
+            config.createSSRClient(opt)
+        ];
+        await build(cfgs);
+    }
     else if (buildType === 'myTransform') {
         const cfgs = [
             config.createMyTransform(opt)

build/config.js

@@ -174,3 +174,19 @@ exports.createMyTransform = function (opt) {
         )
     };
 };
+
+exports.createSSRClient = function (opt) {
+    const input = nodePath.resolve(ecDir, `ssr/client/lib/index.js`);
+
+    return {
+        plugins: [nodeResolvePlugin()],
+        input: input,
+        output: createOutputs(
+            nodePath.resolve(ecDir, `ssr/client/dist/index`),
+            opt,
+            {
+                name: 'echarts-ssr-client'
+            }
+        )
+    };
+};

build/pre-publish.js

@@ -67,6 +67,14 @@ const extensionSrcGlobby = {
 };
 const extensionSrcDir = nodePath.resolve(ecDir, 'extension-src');
 const extensionESMDir = nodePath.resolve(ecDir, 'extension');
+const ssrClientGlobby = {
+    patterns: [
+        'ssr/client/src/**/*.ts'
+    ],
+    cwd: ecDir
+};
+const ssrClientSrcDir = nodePath.resolve(ecDir, 'ssr/client/src');
+const ssrClientESMDir = nodePath.resolve(ecDir, 'ssr/client/lib');
 
 const typesDir = nodePath.resolve(ecDir, 'types');
 const esmDir = 'lib';
@@ -135,6 +143,26 @@ const compileWorkList = [
         after: async function () {
             await transformLibFiles(extensionESMDir, 'lib');
         }
+    },
+    {
+        logLabel: 'ssr client ts -> js-esm',
+        compilerOptionsOverride: {
+            module: 'ES2015',
+            declaration: false,
+            rootDir: ssrClientSrcDir,
+            outDir: ssrClientESMDir
+        },
+        srcGlobby: ssrClientGlobby,
+        transformOptions: {
+            filesGlobby: {patterns: ['**/*.js'], cwd: ssrClientESMDir},
+            transformDEV: true
+        },
+        before: async function () {
+            fsExtra.removeSync(ssrClientESMDir);
+        },
+        after: async function () {
+            await transformLibFiles(ssrClientESMDir, 'lib');
+        }
     }
 ];
 

package.json

@@ -45,10 +45,11 @@
     "build:i18n": "node build/build-i18n.js",
     "build:lib": "node build/build.js --prepublish",
     "build:extension": "node build/build.js --type extension",
+    "build:ssr": "node build/build.js --type ssr",
     "dev:fast": "node build/build-i18n.js && node build/dev-fast.js",
     "dev": "npx -y concurrently -n build,server \"npm run dev:fast\" \"npx -y http-server -c-1 -s -o test\"",
     "prepare": "npm run build:lib && husky install",
-    "release": "npm run build:lib && npm run build:i18n && npm run build && npm run build:esm && npm run build:extension",
+    "release": "npm run build:lib && npm run build:i18n && npm run build && npm run build:esm && npm run build:extension && npm run build:ssr",
     "help": "node build/build.js --help",
     "test:visual": "node test/runTest/server.js",
     "test": "npx jest --config test/ut/jest.config.js",
@@ -64,7 +65,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "5.4.4"
+    "zrender": "https://github.com/ecomfe/zrender.git#ssr"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/component/legend/LegendView.ts

@@ -50,6 +50,7 @@ import {LineStyleProps} from '../../model/mixin/lineStyle';
 import {createSymbol, ECSymbol} from '../../util/symbol';
 import SeriesModel from '../../model/Series';
 import { createOrUpdatePatternFromDecal } from '../../util/decal';
+import { getECData } from '../../util/innerStore';
 
 const curry = zrUtil.curry;
 const each = zrUtil.each;
@@ -225,6 +226,13 @@ class LegendView extends ComponentView {
                     .on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId))
                     .on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
 
+                itemGroup.eachChild(child => {
+                    const ecData = getECData(child);
+                    ecData.seriesIndex = seriesModel.seriesIndex;
+                    ecData.dataIndex = dataIndex;
+                    ecData.ssrType = 'legend';
+                });
+
                 legendDrawnMap.set(name, true);
             }
             else {
@@ -269,6 +277,13 @@ class LegendView extends ComponentView {
                             .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId))
                             .on('mouseout', curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
 
+                        itemGroup.eachChild(child => {
+                            const ecData = getECData(child);
+                            ecData.seriesIndex = seriesModel.seriesIndex;
+                            ecData.dataIndex = dataIndex;
+                            ecData.ssrType = 'legend';
+                        });
+
                         legendDrawnMap.set(name, true);
                     }
 
@@ -430,7 +445,10 @@ class LegendView extends ComponentView {
         // Add a invisible rect to increase the area of mouse hover
         const hitRect = new graphic.Rect({
             shape: itemGroup.getBoundingRect(),
-            invisible: true
+            style: {
+                // Cannot use 'invisible' because SVG SSR will miss the node
+                fill: 'transparent'
+            }
         });
 
         const tooltipModel =

src/core/echarts.ts

@@ -427,6 +427,15 @@ class ECharts extends Eventful<ECEventDefinition> {
 
         }
 
+        zrender.registerSSRDataGetter(el => {
+            const ecData = getECData(el);
+            const hashMap = createHashMap();
+            hashMap.set('series_index', ecData.seriesIndex);
+            hashMap.set('data_index', ecData.dataIndex);
+            hashMap.set('ssr_type', ecData.ssrType);
+            return hashMap;
+        });
+
         const zr = this._zr = zrender.init(dom, {
             renderer: opts.renderer || defaultRenderer,
             devicePixelRatio: opts.devicePixelRatio,

src/util/innerStore.ts

@@ -23,6 +23,9 @@ import {
     ComponentMainType, ComponentItemTooltipOption
 } from './types';
 import { makeInner } from './model';
+
+export type SSRItemType = 'chart' | 'legend';
+
 /**
  * ECData stored on graphic element
  */
@@ -34,6 +37,7 @@ export interface ECData {
     dataType?: SeriesDataType;
     focus?: InnerFocus;
     blurScope?: BlurScope;
+    ssrType?: SSRItemType;
 
     // Required by `tooltipConfig` and `focus`.
     componentMainType?: ComponentMainType;
@@ -62,6 +66,7 @@ export const setCommonECData = (seriesIndex: number, dataType: SeriesDataType, d
         ecData.dataIndex = dataIdx;
         ecData.dataType = dataType;
         ecData.seriesIndex = seriesIndex;
+        ecData.ssrType = 'chart';
 
         // TODO: not store dataIndex on children.
         if (el.type === 'group') {
@@ -70,6 +75,7 @@ export const setCommonECData = (seriesIndex: number, dataType: SeriesDataType, d
                 childECData.seriesIndex = seriesIndex;
                 childECData.dataIndex = dataIdx;
                 childECData.dataType = dataType;
+                childECData.ssrType === 'chart';
             });
         }
     }

ssr/client/src/index.ts

@@ -0,0 +1,74 @@
+/*
+* 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.
+*/
+
+export interface ECSSRClientEventParams {}
+
+export interface ECSSRClientOptions {
+    on?: {
+        mouseover?: (params: ECSSRClientEventParams) => void,
+        mouseout?: (params: ECSSRClientEventParams) => void,
+        click?: (params: ECSSRClientEventParams) => void
+    }
+}
+
+export type ECSSREvent = 'mouseover' | 'mouseout' | 'click';
+
+export function hydrate(dom: HTMLElement, options: ECSSRClientOptions) {
+    const svgRoot = dom.querySelector('svg');
+    if (!svgRoot) {
+        console.error('No SVG element found in the DOM.');
+        return;
+    }
+
+    const children = svgRoot.children;
+
+    function getIndex(child: Element, attr: string) {
+        const index = child.getAttribute(attr);
+        if (index) {
+            return parseInt(index, 10);
+        }
+        else {
+            return null;
+        }
+    }
+
+    const events = options.on;
+    if (events) {
+        for (let eventName in events) {
+            if (typeof events[eventName as ECSSREvent] === 'function') {
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i];
+                    const type = child.getAttribute('ecmeta_ssr_type');
+                    const silent = child.getAttribute('ecmeta_silent') === 'true';
+                    if (type && !silent) {
+                        child.addEventListener(eventName, e => {
+                            (events[eventName as ECSSREvent] as Function)({
+                                type: eventName,
+                                ssrType: type,
+                                seriesIndex: getIndex(child, 'ecmeta_series_index'),
+                                dataIndex: getIndex(child, 'ecmeta_data_index'),
+                                event: e,
+                            });
+                        });
+                    }
+                }
+            }
+        }
+    }
+}