|
1 | 1 | import { useParams } from "react-router-dom";
|
2 | 2 | import styled from "styled-components";
|
3 | 3 | import "comps";
|
4 |
| -import { UICompType, UICompManifest, uiCompRegistry, UICompCategory } from "comps/uiCompRegistry"; |
| 4 | +import { UICompType, UICompManifest, uiCompRegistry, UICompCategory, ExposingMultiCompConstructor } from "comps/uiCompRegistry"; |
5 | 5 | import { CompPlayground } from "ide/CompPlayground";
|
6 | 6 | import { Comp } from "lowcoder-core";
|
7 | 7 | import { EditorContext, EditorState } from "comps/editorState";
|
8 | 8 | import { RootComp } from "comps/comps/rootComp";
|
| 9 | +import { useMemo } from "react"; |
| 10 | +import { lazyLoadComp } from "@lowcoder-ee/comps/comps/lazyLoadComp/lazyLoadComp"; |
9 | 11 |
|
10 | 12 | type CompInfo = UICompManifest & { key: string };
|
11 | 13 | const groups: Partial<Record<UICompCategory, CompInfo[]>> = {};
|
@@ -56,13 +58,25 @@ export default function ComponentPlayground() {
|
56 | 58 | const dsl = JSON.parse(decodeURIComponent(params.dsl || ""));
|
57 | 59 | const compManifest = uiCompRegistry[params.name];
|
58 | 60 |
|
| 61 | + const comp = useMemo(() => { |
| 62 | + if (!compManifest.lazyLoad) { |
| 63 | + return compManifest.comp; |
| 64 | + } |
| 65 | + |
| 66 | + return lazyLoadComp( |
| 67 | + compManifest.compName, |
| 68 | + compManifest.compPath, |
| 69 | + ) |
| 70 | + }, [compManifest]); |
| 71 | + if (!comp) return null; |
| 72 | + |
59 | 73 | return (
|
60 | 74 | <Wrapper>
|
61 | 75 | <div className="content">
|
62 | 76 | <EditorContext.Provider value={editorState}>
|
63 | 77 | <CompPlayground
|
64 | 78 | initialValue={dsl}
|
65 |
| - compFactory={compManifest.comp as unknown as Comp<any>} |
| 79 | + compFactory={comp as unknown as Comp<any>} |
66 | 80 | layoutInfo={compManifest.layoutInfo || { h: 5, w: 5 }}
|
67 | 81 | />
|
68 | 82 | </EditorContext.Provider>
|
|
0 commit comments