diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 0486b5743..077d5a895 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -255,6 +255,25 @@ export class BuiltinSimulatorHost implements ISimulatorHost { + if (item.async) { + this.asyncLibraryMap[item.package] = item; + } + if (item.urls) { + + libraryAsset.push(item.urls); + } + }); + } + + return libraryAsset; + } + async mountContentFrame(iframe: HTMLIFrameElement | null) { if (!iframe || this._iframe === iframe) { return; @@ -264,18 +283,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { - this.libraryMap[item.package] = item.library; - if (item.async) { - this.asyncLibraryMap[item.package] = item; - } - if (item.urls) { - libraryAsset.push(item.urls); - } - }); - } + const libraryAsset: AssetList = this.buildLibrary(); const vendors = [ // required & use once @@ -332,6 +340,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost(); transformProps(props: CompositeObject | PropsList, node: Node, stage: TransformStage) { diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index b031b6f02..37ff9ed38 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -14,7 +14,10 @@ import { getSubComponent, compatibleLegaoSchema, isPlainObject, + AssetLoader, + } from '@ali/lowcode-utils'; + import { RootSchema, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types'; // import { isESModule, isElement, acceptsRef, wrapReactClass, cursor, setNativeSelection } from '@ali/lowcode-utils'; // import { RootSchema, NpmInfo, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types'; @@ -25,7 +28,7 @@ import { createMemoryHistory, MemoryHistory } from 'history'; import Slot from './builtin-components/slot'; import Leaf from './builtin-components/leaf'; import { withQueryParams, parseQuery } from './utils/url'; - +const loader = new AssetLoader(); export class DocumentInstance { private instancesMap = new Map(); @@ -98,7 +101,7 @@ export class DocumentInstance { } get path(): string { - return `/${ this.document.fileName}`; + return `/${this.document.fileName}`; } get id() { @@ -349,6 +352,16 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { // return loader.load(asset); // } + async loadAsyncLibrary(asyncLibraryMap) { + await loader.loadAsyncLibrary(asyncLibraryMap); + this.buildComponents(); + } + + async setupComponents(asset: Asset) { + await loader.load(asset); + this.buildComponents(); + } + getComponent(componentName: string) { const paths = componentName.split('.'); const subs: string[] = []; diff --git a/packages/utils/src/asset.ts b/packages/utils/src/asset.ts index 85328952b..39c4ee7a9 100644 --- a/packages/utils/src/asset.ts +++ b/packages/utils/src/asset.ts @@ -54,6 +54,13 @@ export type Asset = AssetList | AssetBundle | AssetItem | URL; export type AssetList = Array; +export interface AssetsJson { + packages: Array; + components: Array; + componentList?: Array; + bizComponentList?: Array +} + export function isAssetItem(obj: any): obj is AssetItem { return obj && obj.type; } @@ -93,6 +100,46 @@ export function assetItem(type: AssetType, content?: string | null, level?: Asse }; } +export function megreAssets(assets: AssetsJson, increaseAssets: AssetsJson): AssetsJson { + if (!increaseAssets.packages) { + console.error('assets must have packages'); + } + + if (!increaseAssets.components) { + console.error('assets must have components'); + } + + assets.packages = [...assets.packages, ...increaseAssets.packages]; + assets.components = [...assets.components, ...increaseAssets.components]; + + megreAssetsComponentList(assets, increaseAssets, 'componentList'); + megreAssetsComponentList(assets, increaseAssets, 'bizComponentList'); + + return assets; +} + +function megreAssetsComponentList(assets: AssetsJson, increaseAssets: AssetsJson, listName: String): void { + if (increaseAssets[listName]) { + if (assets[listName]) { + // 根据title进行合并 + increaseAssets[listName].map((item) => { + let matchFlag = false; + assets[listName].map((assetItem) => { + if (assetItem.title === item.title) { + assetItem.children = assetItem.children.concat(item.children); + matchFlag = true; + } + + return assetItem; + }); + + !matchFlag && assets[listName].push(item); + return item; + }); + } + } +} + export class StylePoint { private lastContent: string | undefined;