docs: fetch menu and prototypes from sandbox window

This commit is contained in:
wwsun
2023-08-29 10:45:38 +08:00
parent bb6b234c62
commit edc12ffbcd
6 changed files with 47 additions and 88 deletions
-1
View File
@@ -14,7 +14,6 @@
},
"dependencies": {
"@ant-design/icons": "^4.8.0",
"@music163/antd": "^0.1.2",
"@music163/tango-designer": "*",
"@music163/tango-helpers": "*",
"antd": "^4.24.2",
+3 -2
View File
@@ -52,7 +52,7 @@ const tangoJson = {
description: '云音乐低代码运行时框架',
},
'@music163/antd': {
version: '0.1.1',
version: '0.1.2',
library: 'TangoAntd',
type: 'baseDependency',
resources: [
@@ -61,7 +61,8 @@ const tangoJson = {
],
description: '云音乐低代码中后台应用基础物料',
designerResources: [
'https://unpkg.com/@music163/antd@{{version}}/dist/designer.js',
// 'https://unpkg.com/@music163/antd@{{version}}/dist/designer.js',
'http://localhost:9002/designer.js',
'https://unpkg.com/antd@4.24.13/dist/antd.css',
],
},
+21 -10
View File
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import {
Designer,
DesignerPanel,
@@ -13,18 +13,14 @@ import {
ComponentsView,
} from '@music163/tango-designer';
import { createEngine, Workspace } from '@music163/tango-core';
import { prototypes, menuData } from '@music163/antd/lib/esm/designer';
import { Logo, ProjectDetail } from './share';
import { sampleFiles } from '../mock/project';
import './index.less';
console.log(prototypes, menuData);
// 1. 实例化工作区
const workspace = new Workspace({
entry: '/src/index.js',
files: sampleFiles,
prototypes: prototypes as any,
});
// 2. 引擎初始化
@@ -40,11 +36,11 @@ const sandboxQuery = new DndQuery({
});
/**
* 3. 平台初始化
* 默认使用 CodeSandbox https://local.netease.com:6006/
* 如果使用 ViteSandbox https://local.netease.com:6006?moduleType=esm
* 3. 平台初始化,访问 https://local.netease.com:6006/
*/
export default function App() {
const [menuLoading, setMenuLoading] = useState(true);
const [menuData, setMenuData] = useState(false);
return (
<Designer engine={engine} sandboxQuery={sandboxQuery}>
<DesignerPanel
@@ -60,14 +56,29 @@ export default function App() {
<SidebarPanel>
<SidebarPanel.Item key="outline" />
<SidebarPanel.Item key="components">
<ComponentsView menuData={menuData as any} />
<ComponentsView menuData={menuData as any} loading={menuLoading} />
</SidebarPanel.Item>
<SidebarPanel.Item key="model" isFloat width={800} />
<SidebarPanel.Item key="dataSource" isFloat width={800} />
</SidebarPanel>
<WorkspacePanel>
<ViewPanel mode="design">
<Sandbox />
<Sandbox
onMessage={(e) => {
if (e.type === 'done') {
const sandboxWindow: any = sandboxQuery.window;
if (sandboxWindow.TangoAntd) {
if (sandboxWindow.TangoAntd.menuData) {
setMenuData(sandboxWindow.TangoAntd.menuData);
}
if (sandboxWindow.TangoAntd.prototypes) {
workspace.setComponentPrototypes(sandboxWindow.TangoAntd.prototypes);
}
}
setMenuLoading(false);
}
}}
/>
</ViewPanel>
<ViewPanel mode="code">
<CodeEditor />
+1 -1
View File
@@ -149,7 +149,7 @@ export class CodeSandbox extends React.Component<CodeSandboxProps, CodeSandboxSt
// 执行沙箱页面加载后的回调函数
if (this.props.onLoad) {
this.props.onLoad();
this.props.onLoad(el);
}
// 注册监听函数
+1 -1
View File
@@ -499,7 +499,7 @@ export interface CodeSandboxProps {
eventHandlers?: EventHandlers;
onFileChange?: (files: IFiles, sandpack: ISandpackContext) => void;
onMessage?: (data: any) => void;
onLoad?: () => void;
onLoad?: (frame: HTMLIFrameElement) => void;
fileResolver?: {
isFile: (path: string) => Promise<boolean>;
readFile: (path: string) => Promise<string>;
+21 -73
View File
@@ -2741,46 +2741,13 @@
call-me-maybe "^1.0.1"
glob-to-regexp "^0.3.0"
"@music163/antd@^0.1.2":
version "0.1.2"
resolved "https://registry.npmjs.org/@music163/antd/-/antd-0.1.2.tgz#15d0dd41839649d1294bb89a9c8c78eb370e06c9"
integrity sha512-4S7Bi3f0VWmvEdQFjPQQWlwgMrTPX1uwTIKnLMB8a4LT617kJrW748f/tZwY32kuDdooZ5tpMZCM93rmu5hEKQ==
dependencies:
"@music163/foundation" "^0.1.2"
"@music163/tango-boot" "^0.1.2"
"@music163/tango-helpers" "^0.1.1"
antd "4"
classnames "^2.3.2"
coral-system "^1.0.6"
"@music163/foundation@^0.1.2":
version "0.1.2"
resolved "https://registry.npmjs.org/@music163/foundation/-/foundation-0.1.2.tgz#e541bee3bbfc223ca94b9e15f9ec97da4e88b495"
integrity sha512-vy1RFFvklwY4F0/WpSKw4XUCjVrrl9lQtKiwNaz/iUfxg01MAYAX4dUziQFNHKrdPP6ROAPmMNkAZGYxbhAhIA==
dependencies:
"@music163/tango-boot" "^0.1.2"
coral-system "^1.0.6"
"@music163/request@^0.1.0", "@music163/request@^0.1.1":
"@music163/request@^0.1.0":
version "0.1.1"
resolved "https://registry.npmjs.org/@music163/request/-/request-0.1.1.tgz"
integrity sha512-Kr0HMSY3+GulkS4B23PB1P8Wt33nXStazRDXN1fq+ffBWyM0cz7tL8p+hMYAxRWsMwQvPAW6QTI51yW7lCDLRg==
dependencies:
axios "^1.4.0"
"@music163/tango-boot@^0.1.2":
version "0.1.2"
resolved "https://registry.npmjs.org/@music163/tango-boot/-/tango-boot-0.1.2.tgz"
integrity sha512-QTTHdrY7r/ErYRekhykeRN5edtNe1+2MmtaV9GQ5x0807EPRsSsd0hmPH3H85VEp/hY8RMxPPnKqxJAh2y2wyw==
dependencies:
"@music163/request" "^0.1.1"
"@risingstack/react-easy-state" "^6.3.0"
"@types/react-router-config" "^5.0.7"
history "^5.3.0"
react-error-boundary "^4.0.11"
react-router "5"
react-router-config "5"
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -3067,11 +3034,6 @@
dependencies:
nx "15.9.4"
"@nx-js/observer-util@^4.2.2":
version "4.2.2"
resolved "https://registry.npmmirror.com/@nx-js/observer-util/-/observer-util-4.2.2.tgz"
integrity sha512-9OayX1xkdGjdnsDiO2YdaYJ6aMyCF7/NY4QWVgIgjSAZJ4OX2fD766Ts79hEzBscenQy2DCaSoY8VkguIMB1ZA==
"@octokit/auth-token@^3.0.0":
version "3.0.4"
resolved "https://registry.npmmirror.com/@octokit/auth-token/-/auth-token-3.0.4.tgz"
@@ -3242,13 +3204,6 @@
classnames "^2.3.2"
rc-util "^5.24.4"
"@risingstack/react-easy-state@^6.3.0":
version "6.3.0"
resolved "https://registry.npmmirror.com/@risingstack/react-easy-state/-/react-easy-state-6.3.0.tgz"
integrity sha512-AGLrzvwloZL7dgagwRkxJaq7bcDsOGdHrCpHZIlMIxcFLdFr5IpD2/kcmTlC34H682pvfIl1lzNxBw72la10aA==
dependencies:
"@nx-js/observer-util" "^4.2.2"
"@sideway/address@^4.1.3":
version "4.1.4"
resolved "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz"
@@ -4715,7 +4670,7 @@
dependencies:
"@types/react" "*"
"@types/react-router-config@*", "@types/react-router-config@^5.0.2", "@types/react-router-config@^5.0.6", "@types/react-router-config@^5.0.7":
"@types/react-router-config@*", "@types/react-router-config@^5.0.2", "@types/react-router-config@^5.0.6":
version "5.0.7"
resolved "https://registry.npmmirror.com/@types/react-router-config/-/react-router-config-5.0.7.tgz"
integrity sha512-pFFVXUIydHlcJP6wJm7sDii5mD/bCmmAY0wQzq+M+uX7bqS95AQqHZWP1iNMKrWVQSuHIzj5qi9BvrtLX2/T4w==
@@ -5861,7 +5816,7 @@ antd-easy-form@^1.1.3:
"@ant-design/icons" "^4.8.0"
react-is "^18.2.0"
antd@4, antd@^4.24.2:
antd@^4.24.2:
version "4.24.13"
resolved "https://registry.npmmirror.com/antd/-/antd-4.24.13.tgz"
integrity sha512-N2odRsbomseCE3U845Whf+RdgmQbiWbKvWS6ggH/xHjXojHx951rmZXW4nMqAeSoUp66sQOASGtrP/SUsdA2oQ==
@@ -7986,7 +7941,7 @@ copyfiles@^2.4.1:
untildify "^4.0.0"
yargs "^16.1.0"
coral-system@^1.0.5, coral-system@^1.0.6:
coral-system@^1.0.5:
version "1.0.6"
resolved "https://registry.npmmirror.com/coral-system/-/coral-system-1.0.6.tgz"
integrity sha512-H9MA64SuWrwHS4f7lEtHkJGIJFVRW38iQBJ2LKm+u8b3biuFB1f/5mlUiJubZ0OqoSt3ZlJhVuEwDiLXASS/rw==
@@ -10914,7 +10869,7 @@ history-with-query@4.10.4:
tiny-warning "^1.0.0"
value-equal "^1.0.1"
history@*, history@^5.3.0:
history@*:
version "5.3.0"
resolved "https://registry.npmmirror.com/history/-/history-5.3.0.tgz"
integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
@@ -17009,13 +16964,6 @@ react-element-to-jsx-string@^14.3.4:
is-plain-object "5.0.0"
react-is "17.0.2"
react-error-boundary@^4.0.11:
version "4.0.11"
resolved "https://registry.npmmirror.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz"
integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
dependencies:
"@babel/runtime" "^7.12.5"
react-error-overlay@^6.0.11:
version "6.0.11"
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
@@ -17116,7 +17064,7 @@ react-resizable@^3.0.5:
prop-types "15.x"
react-draggable "^4.0.3"
react-router-config@5, react-router-config@5.1.1, react-router-config@^5.1.1:
react-router-config@5.1.1, react-router-config@^5.1.1:
version "5.1.1"
resolved "https://registry.npmmirror.com/react-router-config/-/react-router-config-5.1.1.tgz"
integrity sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==
@@ -17149,21 +17097,6 @@ react-router-dom@^5.3.3:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-router@5, react-router@5.3.4, react-router@^5.3.3:
version "5.3.4"
resolved "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz"
integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==
dependencies:
"@babel/runtime" "^7.12.13"
history "^4.9.0"
hoist-non-react-statics "^3.1.0"
loose-envify "^1.3.1"
path-to-regexp "^1.7.0"
prop-types "^15.6.2"
react-is "^16.6.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-router@5.2.0:
version "5.2.0"
resolved "https://registry.npmmirror.com/react-router/-/react-router-5.2.0.tgz"
@@ -17180,6 +17113,21 @@ react-router@5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-router@5.3.4, react-router@^5.3.3:
version "5.3.4"
resolved "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz"
integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==
dependencies:
"@babel/runtime" "^7.12.13"
history "^4.9.0"
hoist-non-react-statics "^3.1.0"
loose-envify "^1.3.1"
path-to-regexp "^1.7.0"
prop-types "^15.6.2"
react-is "^16.6.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-textarea-autosize@^8.3.2:
version "8.5.2"
resolved "https://registry.npmmirror.com/react-textarea-autosize/-/react-textarea-autosize-8.5.2.tgz"