feat(gi-sdk): slot-driven component tree rendering and global state management enhancements

[yvonneyx]

• Spec
• 使用插槽驱动的组件树渲染进行资产编排
• 状态管理
  • 扩展全局状态管理器
  • 插件管理器
  • 图管理器
  • 数据集管理器 - 支持加载本地数据

LATER:

• 加载远程数据
• 构建事件系统
• 开发内置布局资产 - 圣杯布局

demo

• config：描述一个图分析应用的配置文件
• assets：资产包

import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import { myAssetPackage } from './assets';
import { config } from './config';

export default () => {
  const assets = [myAssetPackage];

  return <GISDK className="my-graph-application" style={{ height: '80vh' }} config={config} assets={assets}></GISDK>;
};

GISDKProps

type GISDKProps = GIRenderProps & GIRuntimeAppProps;

interface GIRenderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
  /**
   * 图应用配置描述
   */
  config: Application;
}

interface GIRuntimeAppProps {
  /**
   * 图应用资产包
   */
  assets?: AssetPackage[];
  /**
   * 初始全局状态
   */
  initialGlobalState?: GlobalModel;
}

Application 类型定义

interface Application {
  /**
   * 应用版本号
   */
  version: string;
  /**
   * 应用元数据
   */
  metadata: ApplicationMetadata;
  /**
   * 数据集
   */
  dataset: DatasetSchema;
  /**
   * 应用配置
   */
  spec: {
    /**
     * 图配置
     */
    graph: GraphSchema;
    /**
     * 组件
     */
    widgets: WidgetSchema[];
  };
}

[lvisei]

👍 So fast !

LGTM ~

[lvisei]

全局状态玩的 6，现在组件间通信支持：

1. 全局状态
2. 事件通信
3. hack 修改人家组件的 porps - useWidgetProps

后面使用文档可以写上，让给开发者自己选择合适的，可参考 LISDK