Merge pull request #591 from antvis/feat_gisdk

perf(GISDK): SDK 支持传入额外的 props

.github/workflows/auto-release.yml

@@ -15,10 +15,10 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Use Node.js 16
+      - name: Use Node.js 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16 # semantic-release 需要 >= 16 的 Node.js 环境
+          node-version: 18 # semantic-release 需要 >= 18 的 Node.js 环境
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
 
     steps:
       - uses: actions/checkout@v3

package.json

@@ -1,7 +1,7 @@
 {
   "engines": {
-    "node": "^16",
-    "pnpm": "^8"
+    "node": "^18",
+    "pnpm": "^8 || ^9"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

packages/gi-common-components/src/Icon/index.tsx

@@ -2,7 +2,7 @@
 
 import IconFont, { createFromIconfontCN } from '@ant-design/icons';
 import Graphin from '@antv/graphin';
-import React from 'react';
+import React, { ElementType } from 'react';
 import { loadFontJson, loadUnicodeFont, type FontJson } from './loader';
 
 export const fontFamily = 'iconfont';
@@ -69,7 +69,7 @@ interface IconProps extends React.HTMLProps<HTMLSpanElement> {
 /**
  * @reference https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/components/IconFont.tsx
  */
-export const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+export const Icon: ElementType = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   const { type, children, ...restProps } = props;
   let content: React.ReactNode = null;
   if (props.type) {

packages/gi-sdk-app/src/index.tsx

@@ -17,6 +17,7 @@ export interface Project {
     id: string;
     name: string;
     projectConfig: {};
+    config: {};
     themes: {};
     theme?: string;
   };
@@ -42,18 +43,29 @@ export interface StudioProps {
   service: (id: string) => Promise<{ data: Project }>;
   loadingText?: string;
   loadingComponent?: React.ReactElement;
+  GISDKExtraParams?: Record<string, any>;
+  componentExtraParams?: Record<string, any>;
 }
 
 const Studio: React.FunctionComponent<StudioProps> = props => {
   // @ts-ignore
-  const { id, service, loadingText = '正在加载图应用...', loadingComponent } = props;
+  const {
+    id,
+    service,
+    loadingText = '正在加载图应用...',
+    loadingComponent,
+    GISDKExtraParams = {},
+    componentExtraParams = {},
+  } = props;
   const [state, setState] = React.useState({
     isReady: false,
     assets: null,
     config: {},
     services: [],
     ThemeComponent: () => null,
     GISDK: () => <></>,
+    GISDKExtraParams: {},
+    componentExtraParams: {},
   });
 
   const startStudio = async () => {
@@ -118,7 +130,7 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
   }, []);
   const { assets, isReady, config, services, ThemeComponent, GISDK } = state;
   if (!isReady) {
-     // 支持传入自定义loading组件
+    // 支持传入自定义loading组件
     return loadingComponent ?? <Loading title={loadingText} />;
   }
 
@@ -127,7 +139,15 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
       {/** @ts-ignore */}
       <ThemeComponent style={{ visibility: 'hidden', position: 'absolute' }} />
       {/** @ts-ignore */}
-      <GISDK config={config} assets={assets} services={services} id={`GI_STUDIO_${id}`} />
+      <GISDK
+        // @ts-ignore
+        config={config}
+        assets={assets}
+        services={services}
+        id={`GI_STUDIO_${id}`}
+        GISDKExtraParams={GISDKExtraParams}
+        componentExtraParams={componentExtraParams}
+      />
     </>
   );
 };

packages/gi-sdk/src/GISDK.tsx

@@ -20,9 +20,8 @@ let updateHistoryTimer: number;
 const GISDK = (props: Props) => {
   const graphinRef = React.useRef<null | Graphin>(null);
   // @ts-ignore
-  const { children, assets, id, services, config, locales } = props;
+  const { children, assets, id, services, config, locales, componentExtraParams = {}, GISDKExtraParams = {} } = props;
   const { language = 'zh-CN', ...localeMessages } = locales || {};
-
   const GISDK_ID = React.useMemo(() => {
     if (!id) {
       const defaultId = `${Math.random().toString(36).substr(2)}`;
@@ -63,6 +62,7 @@ const GISDK = (props: Props) => {
     },
     //@ts-ignore
     GISDK_ID,
+    extraParams: {},
   });
 
   React.useEffect(() => {
@@ -71,6 +71,13 @@ const GISDK = (props: Props) => {
     });
   }, [props.config]);
 
+  // 更新参数
+  React.useEffect(() => {
+    updateState(draft => {
+      draft.extraParams = GISDKExtraParams;
+    });
+  }, [GISDKExtraParams]);
+
   const {
     layout: layoutCfg,
     components: componentsCfg = [],
@@ -362,7 +369,7 @@ const GISDK = (props: Props) => {
   }
 
   const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } =
-    getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets);
+    getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets, componentExtraParams);
 
   const graphData = useMemo(() => {
     const nodeMap = {};

packages/gi-sdk/src/hooks/useComponents.tsx

@@ -10,7 +10,7 @@ const DEFAULT_GICC_LAYOUT = {
   },
 };
 
-const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
+const useComponents = (state, propsComponentsCfg, ComponentAssets, componentExtraProps = {}) => {
   const { config, initializer, GICC_LAYOUT, components, GISDK_ID } = state;
   const { components: stateComponentsCfg } = config;
   const ComponentCfgMap = propsComponentsCfg.concat(stateComponentsCfg).reduce((acc, curr) => {
@@ -74,6 +74,9 @@ const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
         };
       }
 
+      // 传入的额外组件props
+      const extraProps = componentExtraProps?.[id] || {};
+
       return (
         <Component
           key={id}
@@ -82,6 +85,7 @@ const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
           ComponentCfgMap={ComponentCfgMap}
           {...itemProps}
           {...GIProps}
+          {...extraProps}
         />
       );
     });

packages/gi-sdk/src/typing.ts

@@ -73,6 +73,8 @@ export interface State<
 
   /** 是否使用缓存的布局 */
   layoutCache: boolean;
+  /** 额外参数 */
+  extraParams: Record<string, any>;
 }
 
 export interface Props {
@@ -102,6 +104,10 @@ export interface Props {
   style?: React.CSSProperties;
   className?: string;
   children?: React.ReactChildren | JSX.Element | JSX.Element[];
+  /** 全局额外参数 */
+  GISDKExtraParams?: Record<string, any>;
+  /** 资产额外参数，以资产ID为 key, value 为传入对应资产的 props */
+  componentExtraParams?: Record<string, any>;
 }
 
 export type AssetType =

packages/gi-site/docker/website.Dockerfile

@@ -1,7 +1,7 @@
 # Website for graphinsight
 
 ##################################### Builder ####################################
-from docker.io/library/node:16 AS builder
+from docker.io/library/node:18 AS builder
 
 COPY . /workspace/G6VP
 
@@ -28,7 +28,7 @@ RUN cd /workspace/G6VP/packages/gi-httpservice && rm -fr node_modules && npm ins
 
 
 ##################################### Runtime ####################################
-from docker.io/library/node:16-alpine
+from docker.io/library/node:18-alpine
 
 COPY --from=builder /workspace/G6VP/packages/gi-httpservice /workspace/graphinsight
 COPY --from=builder /workspace/G6VP/packages/gi-site/docker/docker-entrypoint.sh /workspace/docker-entrypoint.sh

packages/gi-site/package.json

@@ -10,7 +10,7 @@
   ],
   "main": "dist/app.js",
   "scripts": {
-    "build:docker": "node scripts/link.mjs &&  cd ../../ && npm run clean && npm run build:all:es && npm run build:all:umd && cd packages/gi-site/ &&  BUILD_MODE=docker node scripts/pre-build.mjs  && node scripts/copy-assets.mjs && BUILD_MODE=docker  NODE_OPTIONS=--max_old_space_size=4096 umi build && node scripts/sync-to-httpservice.mjs",
+    "build:docker": "node scripts/link.mjs &&  cd ../../ && npm run clean && npm run build:all:es && npm run build:all:umd && cd packages/gi-site/ &&  BUILD_MODE=docker node scripts/pre-build.mjs  && node scripts/copy-assets.mjs && BUILD_MODE=docker  NODE_OPTIONS='--max_old_space_size=4096 --openssl-legacy-provider' umi build && node scripts/sync-to-httpservice.mjs",
     "analyze": "ANALYZE=1 NODE_OPTIONS=--max_old_space_size=4096 umi build",
     "build": "npm run prebuild && NODE_OPTIONS=--max_old_space_size=4096 umi build",
     "deploy": "node ./scripts/deploy.js",