diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml index 9019104a3..3fc3cad4f 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 需要 >= 18 的 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-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) { diff --git a/packages/gi-sdk-app/src/index.tsx b/packages/gi-sdk-app/src/index.tsx index 5ffd8f5c1..b70dce10a 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; }; @@ -42,11 +43,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 +64,8 @@ const Studio: React.FunctionComponent = props => { services: [], ThemeComponent: () => null, GISDK: () => <>, + GISDKExtraParams: {}, + componentExtraParams: {}, }); const startStudio = async () => { @@ -118,7 +130,7 @@ const Studio: React.FunctionComponent = props => { }, []); const { assets, isReady, config, services, ThemeComponent, GISDK } = state; if (!isReady) { - // 支持传入自定义loading组件 + // 支持传入自定义loading组件 return loadingComponent ?? ; } @@ -127,7 +139,15 @@ 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 = diff --git a/packages/gi-site/docker/website.Dockerfile b/packages/gi-site/docker/website.Dockerfile index af99b0845..d32623aea 100644 --- a/packages/gi-site/docker/website.Dockerfile +++ b/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 diff --git a/packages/gi-site/package.json b/packages/gi-site/package.json index 9fc518b0e..63938611c 100644 --- a/packages/gi-site/package.json +++ b/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",