From f1711e0fc9d2ed6423996b5fda4fe7a4f5830ee6 Mon Sep 17 00:00:00 2001 From: 1ncounter <1ncounter.100@gmail.com> Date: Thu, 30 May 2024 20:15:10 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-renderer/src/components/app.tsx | 38 +++++++------------ packages/react-renderer/src/index.ts | 1 + packages/react-renderer/src/runtime/index.tsx | 23 ++++++++++- packages/shared/src/types/material.ts | 6 +-- packages/shared/src/types/specs/asset-spec.ts | 9 +---- 5 files changed, 40 insertions(+), 37 deletions(-) diff --git a/packages/react-renderer/src/components/app.tsx b/packages/react-renderer/src/components/app.tsx index 3131f8c4c..f7565742e 100644 --- a/packages/react-renderer/src/components/app.tsx +++ b/packages/react-renderer/src/components/app.tsx @@ -1,33 +1,14 @@ -import { isLowCodeComponentSchema } from '@alilc/lowcode-shared'; import { useRenderContext } from '../context/render'; -import { createComponentBySchema, ReactComponent } from '../runtime'; +import { getComponentByName } from '../runtime'; import Route from './route'; import { rendererExtends } from '../plugin'; export default function App() { - const { schema, packageManager } = useRenderContext(); + const renderContext = useRenderContext(); + const { schema } = renderContext; const appWrappers = rendererExtends.getAppWrappers(); const wrappers = rendererExtends.getRouteWrappers(); - function getLayoutComponent() { - const config = schema.get('config'); - const componentName = config?.layout?.componentName as string; - - if (componentName) { - const Component = packageManager.getComponent(componentName); - - if (isLowCodeComponentSchema(Component)) { - return createComponentBySchema(Component.schema, { - displayName: componentName, - }); - } - - return Component; - } - } - - const Layout = getLayoutComponent(); - let element = ; if (wrappers.length > 0) { @@ -36,9 +17,16 @@ export default function App() { }, element); } - if (Layout) { - const layoutProps: any = schema.get('config')?.layout?.props ?? {}; - element = {element}; + const layoutConfig = schema.get('config')?.layout; + + if (layoutConfig) { + const componentName = layoutConfig.componentName as string; + const Layout = getComponentByName(componentName, renderContext); + + if (Layout) { + const layoutProps: any = layoutConfig.props ?? {}; + element = {element}; + } } if (appWrappers.length > 0) { diff --git a/packages/react-renderer/src/index.ts b/packages/react-renderer/src/index.ts index 68b0a6944..adf3b2995 100644 --- a/packages/react-renderer/src/index.ts +++ b/packages/react-renderer/src/index.ts @@ -4,5 +4,6 @@ export { defineRendererPlugin } from './plugin'; export * from './context/render'; export * from './context/router'; +export type { Spec, ProCodeComponent, LowCodeComponent } from '@alilc/lowcode-shared'; export type { PackageLoader, CodeScope, Plugin } from '@alilc/lowcode-renderer-core'; export type { RendererExtends } from './plugin'; diff --git a/packages/react-renderer/src/runtime/index.tsx b/packages/react-renderer/src/runtime/index.tsx index 4a64f9beb..866472b7d 100644 --- a/packages/react-renderer/src/runtime/index.tsx +++ b/packages/react-renderer/src/runtime/index.tsx @@ -53,7 +53,10 @@ export interface LowCodeComponentProps { const lowCodeComponentsCache = new Map(); -function getComponentByName(name: string, { packageManager }: RenderContext): ReactComponent { +export function getComponentByName( + name: string, + { packageManager, boostsManager }: RenderContext, +): ReactComponent { const componentsRecord = packageManager.getComponentsNameRecord(); // read cache first const result = lowCodeComponentsCache.get(name) || componentsRecord[name]; @@ -61,7 +64,23 @@ function getComponentByName(name: string, { packageManager }: RenderContext): Re invariant(result, `${name} component not found in componentsRecord`); if (isLowCodeComponentSchema(result)) { - const lowCodeComponent = createComponentBySchema(result.schema, { + const { componentsMap, componentsTree, utils, i18n } = result.schema; + + if (componentsMap.length > 0) { + packageManager.resolveComponentMaps(componentsMap); + } + + const boosts = boostsManager.toExpose(); + + utils?.forEach((util) => boosts.util.add(util)); + + if (i18n) { + Object.keys(i18n).forEach((locale) => { + boosts.intl.addTranslations(locale, i18n[locale]); + }); + } + + const lowCodeComponent = createComponentBySchema(componentsTree[0], { displayName: name, }); diff --git a/packages/shared/src/types/material.ts b/packages/shared/src/types/material.ts index 84867f068..d9b781f59 100644 --- a/packages/shared/src/types/material.ts +++ b/packages/shared/src/types/material.ts @@ -1,14 +1,14 @@ import { Package } from './specs/asset-spec'; -import { ComponentTree } from './specs/lowcode-spec'; +import { Project } from './specs/lowcode-spec'; export interface ProCodeComponent extends Package { package: string; type: 'proCode'; } -export interface LowCodeComponent extends Omit { +export interface LowCodeComponent extends Package { id: string; type: 'lowCode'; componentName: string; - schema: ComponentTree; + schema: Project; } diff --git a/packages/shared/src/types/specs/asset-spec.ts b/packages/shared/src/types/specs/asset-spec.ts index f9ee84dd8..97e5ef691 100644 --- a/packages/shared/src/types/specs/asset-spec.ts +++ b/packages/shared/src/types/specs/asset-spec.ts @@ -28,7 +28,7 @@ export interface Package { /** * 组件多个渲染态视图打包后的 CDN url 列表，包含 js 和 css，优先级高于 urls */ - advancedUrls?: ComplexUrls; + advancedUrls?: MultiModeUrls; /** * 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css */ @@ -36,7 +36,7 @@ export interface Package { /** * 组件多个编辑态视图打包后的 CDN url 列表，包含 js 和 css，优先级高于 editUrls */ - advancedEditUrls?: ComplexUrls; + advancedEditUrls?: MultiModeUrls; /** * 低代码组件的 schema 内容 */ @@ -79,11 +79,6 @@ export interface Package { exportSourceLibrary?: string; } -/** - * 复杂 urls 结构，同时兼容简单结构和多模态结构 - */ -export type ComplexUrls = string[] | MultiModeUrls; - /** * 多模态资源 */