From afc6d1542213ed87f4da3f8ce5f53f7f2f10b65c Mon Sep 17 00:00:00 2001 From: mutu Date: Mon, 22 Jul 2024 19:24:28 +0800 Subject: [PATCH 1/4] =?UTF-8?q?perf(GISDK):=20SDK=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=BC=A0=E5=85=A5=E9=A2=9D=E5=A4=96=E7=9A=84props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/gi-sdk-app/src/index.tsx | 24 ++++++++++++++++++--- packages/gi-sdk/src/GISDK.tsx | 13 ++++++++--- packages/gi-sdk/src/hooks/useComponents.tsx | 6 +++++- packages/gi-sdk/src/typing.ts | 6 ++++++ 4 files changed, 42 insertions(+), 7 deletions(-) diff --git a/packages/gi-sdk-app/src/index.tsx b/packages/gi-sdk-app/src/index.tsx index 5ffd8f5c1..16bd5baab 100644 --- a/packages/gi-sdk-app/src/index.tsx +++ b/packages/gi-sdk-app/src/index.tsx @@ -42,11 +42,20 @@ export interface StudioProps { service: (id: string) => Promise<{ data: Project }>; loadingText?: string; loadingComponent?: React.ReactElement; + GISDKExtraParams?: Record; + componentExtraParams?: Record; } const Studio: React.FunctionComponent = 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, @@ -54,6 +63,8 @@ const Studio: React.FunctionComponent = props => { services: [], ThemeComponent: () => null, GISDK: () => <>, + GISDKExtraParams: {}, + componentExtraParams: {}, }); const startStudio = async () => { @@ -118,7 +129,7 @@ const Studio: React.FunctionComponent = props => { }, []); const { assets, isReady, config, services, ThemeComponent, GISDK } = state; if (!isReady) { - // 支持传入自定义loading组件 + // 支持传入自定义loading组件 return loadingComponent ?? ; } @@ -127,7 +138,14 @@ const Studio: React.FunctionComponent = props => { {/** @ts-ignore */} {/** @ts-ignore */} - + ); }; diff --git a/packages/gi-sdk/src/GISDK.tsx b/packages/gi-sdk/src/GISDK.tsx index 8af38b829..d2bafa7f8 100644 --- a/packages/gi-sdk/src/GISDK.tsx +++ b/packages/gi-sdk/src/GISDK.tsx @@ -20,9 +20,8 @@ let updateHistoryTimer: number; const GISDK = (props: Props) => { const graphinRef = React.useRef(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 = {}; diff --git a/packages/gi-sdk/src/hooks/useComponents.tsx b/packages/gi-sdk/src/hooks/useComponents.tsx index 3c7d4c29a..715262c7e 100644 --- a/packages/gi-sdk/src/hooks/useComponents.tsx +++ b/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 ( { ComponentCfgMap={ComponentCfgMap} {...itemProps} {...GIProps} + {...extraProps} /> ); }); diff --git a/packages/gi-sdk/src/typing.ts b/packages/gi-sdk/src/typing.ts index e0ddb59c4..5c8ca5f54 100644 --- a/packages/gi-sdk/src/typing.ts +++ b/packages/gi-sdk/src/typing.ts @@ -73,6 +73,8 @@ export interface State< /** 是否使用缓存的布局 */ layoutCache: boolean; + /** 额外参数 */ + extraParams: Record; } export interface Props { @@ -102,6 +104,10 @@ export interface Props { style?: React.CSSProperties; className?: string; children?: React.ReactChildren | JSX.Element | JSX.Element[]; + /** 全局额外参数 */ + GISDKExtraParams?: Record; + /** 资产额外参数，以资产ID为 key, value 为传入对应资产的 props */ + componentExtraParams?: Record; } export type AssetType = From 6d1b55f3fd0156e9d87fb14a786d20c820ca6621 Mon Sep 17 00:00:00 2001 From: mutu Date: Tue, 30 Jul 2024 11:44:53 +0800 Subject: [PATCH 2/4] chore: fix build error --- .github/workflows/auto-release.yml | 4 ++-- .github/workflows/lint.yml | 2 +- package.json | 4 ++-- packages/gi-sdk-app/src/index.tsx | 6 ++++-- packages/gi-site/docker/website.Dockerfile | 4 ++-- packages/gi-site/package.json | 2 +- 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml index 9019104a3..303406da7 100644 --- a/.github/workflows/auto-release.yml +++ b/.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 需要 >= 16 的 Node.js 环境 cache: 'pnpm' - name: Install dependencies diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 44804857c..8dc34c1d5 100644 --- a/.github/workflows/lint.yml +++ b/.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 diff --git a/package.json b/package.json index 302d48df7..52341fd25 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "engines": { - "node": "^16", - "pnpm": "^8" + "node": "^18", + "pnpm": "^8 || ^9" }, "scripts": { "preinstall": "npx only-allow pnpm", diff --git a/packages/gi-sdk-app/src/index.tsx b/packages/gi-sdk-app/src/index.tsx index 16bd5baab..1c0550664 100644 --- a/packages/gi-sdk-app/src/index.tsx +++ b/packages/gi-sdk-app/src/index.tsx @@ -17,6 +17,7 @@ export interface Project { id: string; name: string; projectConfig: {}; + config: {}; themes: {}; theme?: string; }; @@ -53,8 +54,8 @@ const Studio: React.FunctionComponent = props => { service, loadingText = '正在加载图应用...', loadingComponent, - GISDKExtraParams, - componentExtraParams, + GISDKExtraParams = {}, + componentExtraParams = {}, } = props; const [state, setState] = React.useState({ isReady: false, @@ -139,6 +140,7 @@ const Studio: React.FunctionComponent = props => { {/** @ts-ignore */} Date: Tue, 30 Jul 2024 16:36:10 +0800 Subject: [PATCH 3/4] style: fix ts type error --- packages/gi-common-components/src/Icon/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gi-common-components/src/Icon/index.tsx b/packages/gi-common-components/src/Icon/index.tsx index acbdb005e..8e65a1084 100644 --- a/packages/gi-common-components/src/Icon/index.tsx +++ b/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 { /** * @reference https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/components/IconFont.tsx */ -export const Icon = React.forwardRef((props, ref) => { +export const Icon: ElementType = React.forwardRef((props, ref) => { const { type, children, ...restProps } = props; let content: React.ReactNode = null; if (props.type) { From add0d76c27d359a4c1a8dc1c9c4a9f0e776d4629 Mon Sep 17 00:00:00 2001 From: mutu Date: Tue, 30 Jul 2024 17:04:31 +0800 Subject: [PATCH 4/4] style: modify cr code style --- .github/workflows/auto-release.yml | 2 +- packages/gi-sdk-app/src/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml index 303406da7..3fc3cad4f 100644 --- a/.github/workflows/auto-release.yml +++ b/.github/workflows/auto-release.yml @@ -18,7 +18,7 @@ jobs: - name: Use Node.js 18 uses: actions/setup-node@v3 with: - node-version: 18 # semantic-release 需要 >= 16 的 Node.js 环境 + node-version: 18 # semantic-release 需要 >= 18 的 Node.js 环境 cache: 'pnpm' - name: Install dependencies diff --git a/packages/gi-sdk-app/src/index.tsx b/packages/gi-sdk-app/src/index.tsx index 1c0550664..b70dce10a 100644 --- a/packages/gi-sdk-app/src/index.tsx +++ b/packages/gi-sdk-app/src/index.tsx @@ -140,7 +140,7 @@ const Studio: React.FunctionComponent = props => { {/** @ts-ignore */}