github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-04-20 12:28:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit '5016f8d0eb41164b9cb0a3ca1012ae73d5b69489' into feat/code-gen-export-tools

Browse Source
This commit is contained in:
春希 2020-07-15 23:12:17 +08:00
commit 2e332e3323
142 changed files with 5076 additions and 521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/code-generator/CHANGELOG.md
View File

@ -3,6 +3,35 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.9"></a>
## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-code-generator@0.8.7...@ali/lowcode-code-generator@0.8.9) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-code-generator
<a name="0.8.7"></a>
## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-code-generator@0.8.6...@ali/lowcode-code-generator@0.8.7) (2020-07-12)
### Bug Fixes
* demo data ([b4a27fc](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b4a27fc))
* factory api ([237b866](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/237b866))
* same name chunk case ([d6855e2](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/d6855e2))
### Features
* add recore project template ([267953b](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/267953b))
* add template create tool ([e906683](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/e906683))
* recore solution ([3bfe758](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/3bfe758))
* rewrite demo & export plugins and utils ([6cf7c3d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/6cf7c3d))
<a name="0.8.6"></a> <a name="0.8.6"></a>
## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-code-generator@0.8.5...@ali/lowcode-code-generator@0.8.6) (2020-06-23) ## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-code-generator@0.8.5...@ali/lowcode-code-generator@0.8.6) (2020-06-23)

2
packages/code-generator/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-code-generator", "name": "@ali/lowcode-code-generator",
"version": "0.8.8", "version": "0.8.9",
"description": "出码引擎 for LowCode Engine", "description": "出码引擎 for LowCode Engine",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

32
packages/demo/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.37"></a>
## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.36...@ali/lowcode-demo@0.8.37) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.36"></a>
## [0.8.36](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.35...@ali/lowcode-demo@0.8.36) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.35"></a>
## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.34...@ali/lowcode-demo@0.8.35) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.34"></a>
## [0.8.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.33...@ali/lowcode-demo@0.8.34) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.33"></a> <a name="0.8.33"></a>
## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.32...@ali/lowcode-demo@0.8.33) (2020-06-24) ## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.32...@ali/lowcode-demo@0.8.33) (2020-06-24)

6
packages/demo/build.json
View File

@ -2,7 +2,8 @@
"entry": { "entry": {
"index": "src/index", "index": "src/index",
"editor-preset-vision": "../editor-preset-vision/src/index.ts", "editor-preset-vision": "../editor-preset-vision/src/index.ts",
"react-simulator-renderer": "../react-simulator-renderer/src/index.ts" "react-simulator-renderer": "../react-simulator-renderer/src/index.ts",
"rax-simulator-renderer": "../rax-simulator-renderer/src/index.ts"
}, },
"vendor": false, "vendor": false,
"devServer": { "devServer": {
@ -15,7 +16,8 @@
"prop-types": "var window.PropTypes", "prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next", "@alifd/next": "var window.Next",
"@ali/visualengine": "var window.VisualEngine", "@ali/visualengine": "var window.VisualEngine",
"@ali/visualengine-utils": "var window.VisualEngineUtils" "@ali/visualengine-utils": "var window.VisualEngineUtils",
"rax": "var window.Rax"
}, },
"plugins": [ "plugins": [
[ [

9
packages/demo/build.plugin.js
View File

@ -13,9 +13,12 @@ module.exports = ({ onGetWebpackConfig }) => {
// 定义插件名称 // 定义插件名称
.plugin('MonacoWebpackPlugin') .plugin('MonacoWebpackPlugin')
// 第一项为具体插件，第二项为插件参数 // 第一项为具体插件，第二项为插件参数
.use(new MonacoWebpackPlugin({ .use(
languages:["typescript","css","json"] new MonacoWebpackPlugin({
}), []); languages: ['typescript', 'css', 'json'],
}),
[],
);
config.plugins.delete('hot'); config.plugins.delete('hot');
config.devServer.hot(false); config.devServer.hot(false);

28
packages/demo/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-demo", "name": "@ali/lowcode-demo",
"version": "0.8.33", "version": "0.8.37",
"private": true, "private": true,
"description": "低代码引擎 DEMO", "description": "低代码引擎 DEMO",
"scripts": { "scripts": {
@ -9,21 +9,21 @@
}, },
"config": {}, "config": {},
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.29", "@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-plugin-components-pane": "^0.8.25", "@ali/lowcode-plugin-components-pane": "^0.8.29",
"@ali/lowcode-plugin-designer": "^0.9.23", "@ali/lowcode-plugin-designer": "^0.9.27",
"@ali/lowcode-plugin-event-bind-dialog": "^0.8.18", "@ali/lowcode-plugin-event-bind-dialog": "^0.8.20",
"@ali/lowcode-plugin-outline-pane": "^0.8.29", "@ali/lowcode-plugin-outline-pane": "^0.8.33",
"@ali/lowcode-plugin-sample-logo": "^0.8.17", "@ali/lowcode-plugin-sample-logo": "^0.8.19",
"@ali/lowcode-plugin-sample-preview": "^0.8.27", "@ali/lowcode-plugin-sample-preview": "^0.8.31",
"@ali/lowcode-plugin-settings-pane": "^0.8.8", "@ali/lowcode-plugin-settings-pane": "^0.8.8",
"@ali/lowcode-plugin-undo-redo": "^0.8.27", "@ali/lowcode-plugin-undo-redo": "^0.8.31",
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.16", "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.18",
"@ali/lowcode-plugin-zh-en": "^0.8.20", "@ali/lowcode-plugin-zh-en": "^0.8.22",
"@ali/lowcode-react-renderer": "^0.8.12", "@ali/lowcode-react-renderer": "^0.8.13",
"@ali/lowcode-runtime": "^0.8.16", "@ali/lowcode-runtime": "^0.8.16",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"@ali/ve-action-pane": "^4.7.0-beta.0", "@ali/ve-action-pane": "^4.7.0-beta.0",
"@ali/ve-datapool-pane": "^6.4.3", "@ali/ve-datapool-pane": "^6.4.3",
"@ali/ve-history-pane": "4.0.0", "@ali/ve-history-pane": "4.0.0",

1
packages/demo/public/index.html
View File

@ -16,6 +16,7 @@
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script> <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" /> <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script> <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.min.js"></script>
<link rel="stylesheet" href="/css/editor-preset-vision.css" /> <link rel="stylesheet" href="/css/editor-preset-vision.css" />
<script> <script>
window.pageConfig = { window.pageConfig = {

20
packages/demo/public/rax.json Normal file
View File

@ -0,0 +1,20 @@
{
"componentName": "Page",
"fileName": "home",
"props": {},
"children": [
{
"componentName": "View",
"props": {},
"children": [
{
"componentName": "Text",
"props": {
"type": "primary"
},
"children": ["Welcome to Your Rax App!"]
}
]
}
]
}

83
packages/demo/public/raxAssets.json Normal file
View File

@ -0,0 +1,83 @@
{
"version": "1.0.0",
"externals": [],
"componentDependencies": [{
"prototypeConfigsUrl": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/proto.c0b2ef2.js"],
"prototypeViewsUrl": null,
"alias": "",
"library": "AliVcDiv",
"urls": [
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.css",
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.js"
],
"components": null,
"packageName": "@ali/vc-deep-mobile",
"version": "1.0.1"
}],
"packages": [
{
"title": "view",
"package": "rax-view",
"version": "1.19.18",
"urls": ["https://cdn.jsdelivr.net/npm/rax-view@1.1.2/build/index.js"],
"library": "View"
},
{
"title": "view",
"package": "rax-text",
"version": "1.19.18",
"urls": ["https://cdn.jsdelivr.net/npm/rax-text@1.3.1/build/index.js"],
"library": "Text"
}
],
"components": [{
"componentName": "Page",
"title": "页面",
"configure": {
"events": {
"supportedLifecycles": [{
"description": "初始化时",
"name": "constructor"
}, {
"description": "装载后",
"name": "componentDidMount"
}, {
"description": "更新时",
"name": "componentDidMount"
}, {
"description": "卸载时",
"name": "componentWillUnmount"
}]
},
"component": {
"isContainer": true
}
}
},{
"componentName": "View",
"npm": {
"package": "rax-view",
"destructuring": true,
"exportName": "View"
},
"title": "视图",
"configure": {
"component": {
"isContainer": true
}
}
},{
"componentName": "Text",
"npm": {
"package": "rax-text",
"destructuring": true,
"exportName": "Text"
},
"title": "文本",
"configure": {
"component": {
"isContainer": true
}
}
}]
}

2
packages/demo/src/editor/components.ts
View File

@ -18,4 +18,4 @@ export default {
eventBindDialog, eventBindDialog,
variableBindDialog, variableBindDialog,
sourceEditor, sourceEditor,
} };

10
packages/demo/src/editor/config.js
View File

@ -28,7 +28,7 @@ export default {
props: { props: {
align: 'right', align: 'right',
}, },
},*/ }, */
{ {
pluginKey: 'samplePreview', pluginKey: 'samplePreview',
type: 'Custom', type: 'Custom',
@ -73,10 +73,10 @@ export default {
hideTitleBar: true, hideTitleBar: true,
maxHeight: 800, maxHeight: 800,
maxWidth: 1200, maxWidth: 1200,
title: "动作面板", title: '动作面板',
width: 600 width: 600,
},
}, },
}
}, },
{ {
pluginKey: 'zhEn', pluginKey: 'zhEn',
@ -94,7 +94,7 @@ export default {
{ {
pluginKey: 'variableBindDialog', pluginKey: 'variableBindDialog',
}, },
] ],
}, },
shortCuts: [], shortCuts: [],
lifeCycles: { lifeCycles: {

2
packages/demo/src/vision/index.ts
View File

@ -102,6 +102,7 @@ context.use(HOOKS.VE_SETTING_FIELD_VARIABLE_SETTER, VariableSetter);
const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore']; const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
async function loadAssets() { async function loadAssets() {
// const legaoAssets = await editor.utils.get('./raxAssets.json');
const legaoAssets = await editor.utils.get('./legao-assets.json'); const legaoAssets = await editor.utils.get('./legao-assets.json');
const assets = upgradeAssetsBundle(legaoAssets); const assets = upgradeAssetsBundle(legaoAssets);
@ -144,6 +145,7 @@ async function loadAssets() {
} }
async function loadSchema() { async function loadSchema() {
// const schema = await editor.utils.get('./rax.json');
const schema = await editor.utils.get('./schema.json'); const schema = await editor.utils.get('./schema.json');
editor.set('schema', schema); editor.set('schema', schema);
} }

37
packages/designer/CHANGELOG.md
View File

@ -3,6 +3,43 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.9.27"></a>
## [0.9.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.26...@ali/lowcode-designer@0.9.27) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-designer
<a name="0.9.26"></a>
## [0.9.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.25...@ali/lowcode-designer@0.9.26) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-designer
<a name="0.9.25"></a>
## [0.9.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.24...@ali/lowcode-designer@0.9.25) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-designer
<a name="0.9.24"></a>
## [0.9.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.23...@ali/lowcode-designer@0.9.24) (2020-07-12)
### Bug Fixes
* nextId append the id of document ([80a5c93](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/80a5c93))
* NodeChildren伪装为Array保证向前兼容 ([7950bf5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7950bf5))
* 低代码组件 props 显示 object 问题 ([116498e](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/116498e))
<a name="0.9.23"></a> <a name="0.9.23"></a>
## [0.9.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.21...@ali/lowcode-designer@0.9.23) (2020-06-23) ## [0.9.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.21...@ali/lowcode-designer@0.9.23) (2020-06-23)

8
packages/designer/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-designer", "name": "@ali/lowcode-designer",
"version": "0.9.23", "version": "0.9.27",
"description": "Designer for Ali LowCode Engine", "description": "Designer for Ali LowCode Engine",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js", "module": "es/index.js",
@ -15,9 +15,9 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"event": "^1.0.0", "event": "^1.0.0",
"react": "^16", "react": "^16",

18
packages/designer/src/builtin-simulator/create-simulator.ts
View File

@ -1,6 +1,14 @@
// NOTE: 仅用作类型标注，切勿作为实体使用 // NOTE: 仅用作类型标注，切勿作为实体使用
import { BuiltinSimulatorHost } from './host'; import { BuiltinSimulatorHost } from './host';
import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '@ali/lowcode-utils'; import {
AssetLevel,
AssetLevels,
AssetList,
isAssetBundle,
isAssetItem,
AssetType,
assetItem,
} from '@ali/lowcode-utils';
import { isCSSUrl } from '@ali/lowcode-utils'; import { isCSSUrl } from '@ali/lowcode-utils';
import { BuiltinSimulatorRenderer } from './renderer'; import { BuiltinSimulatorRenderer } from './renderer';
@ -16,7 +24,7 @@ export function createSimulator(
const styles: any = {}; const styles: any = {};
const scripts: any = {}; const scripts: any = {};
AssetLevels.forEach(lv => { AssetLevels.forEach((lv) => {
styles[lv] = []; styles[lv] = [];
scripts[lv] = []; scripts[lv] = [];
}); });
@ -56,12 +64,12 @@ export function createSimulator(
parseAssetList(vendors); parseAssetList(vendors);
const styleFrags = Object.keys(styles) const styleFrags = Object.keys(styles)
.map(key => { .map((key) => {
return styles[key].join('\n') + `<meta level="${key}" />`; return styles[key].join('\n') + `<meta level="${key}" />`;
}) })
.join(''); .join('');
const scriptFrags = Object.keys(scripts) const scriptFrags = Object.keys(scripts)
.map(key => { .map((key) => {
return scripts[key].join('\n'); return scripts[key].join('\n');
}) })
.join(''); .join('');
@ -72,7 +80,7 @@ export function createSimulator(
</head><body>${scriptFrags}</body></html>`); </head><body>${scriptFrags}</body></html>`);
doc.close(); doc.close();
return new Promise(resolve => { return new Promise((resolve) => {
if (win.SimulatorRenderer || host.renderer) { if (win.SimulatorRenderer || host.renderer) {
return resolve(win.SimulatorRenderer || host.renderer); return resolve(win.SimulatorRenderer || host.renderer);
} }

76
packages/designer/src/builtin-simulator/host.ts
View File

@ -4,7 +4,16 @@ import Viewport from './viewport';
import { createSimulator } from './create-simulator'; import { createSimulator } from './create-simulator';
import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document'; import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document';
import ResourceConsumer from './resource-consumer'; import ResourceConsumer from './resource-consumer';
import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType, isElement, isFormEvent } from '@ali/lowcode-utils'; import {
AssetLevel,
Asset,
AssetList,
assetBundle,
assetItem,
AssetType,
isElement,
isFormEvent,
} from '@ali/lowcode-utils';
import { import {
DragObjectType, DragObjectType,
isShaken, isShaken,
@ -62,6 +71,20 @@ const defaultSimulatorUrl = (() => {
return urls; return urls;
})(); })();
const defaultRaxSimulatorUrl = (() => {
const publicPath = getPublicPath();
let urls;
const [_, prefix = '', dev] = /^(.+?)(\/js)?\/?$/.exec(publicPath) || [];
if (dev) {
urls = [`${prefix}/css/rax-simulator-renderer.css`, `${prefix}/js/rax-simulator-renderer.js`];
} else if (process.env.NODE_ENV === 'production') {
urls = [`${prefix}/rax-simulator-renderer.css`, `${prefix}/rax-simulator-renderer.js`];
} else {
urls = [`${prefix}/rax-simulator-renderer.css`, `${prefix}/rax-simulator-renderer.js`];
}
return urls;
})();
const defaultEnvironment = [ const defaultEnvironment = [
// https://g.alicdn.com/mylib/??react/16.11.0/umd/react.production.min.js,react-dom/16.8.6/umd/react-dom.production.min.js,prop-types/15.7.2/prop-types.min.js // https://g.alicdn.com/mylib/??react/16.11.0/umd/react.production.min.js,react-dom/16.8.6/umd/react-dom.production.min.js,prop-types/15.7.2/prop-types.min.js
assetItem(AssetType.JSText, 'window.React=parent.React;window.ReactDOM=parent.ReactDOM;', undefined, 'react'), assetItem(AssetType.JSText, 'window.React=parent.React;window.ReactDOM=parent.ReactDOM;', undefined, 'react'),
@ -71,6 +94,17 @@ const defaultEnvironment = [
), ),
]; ];
const defaultRaxEnvironment = [
assetItem(
AssetType.JSText,
'window.Rax=parent.Rax;window.React=parent.React;window.ReactDOM=parent.ReactDOM;window.VisualEngineUtils=parent.VisualEngineUtils;window.VisualEngine=parent.VisualEngine',
),
assetItem(
AssetType.JSText,
'window.PropTypes=parent.PropTypes;React.PropTypes=parent.PropTypes; window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;',
),
];
export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProps> { export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProps> {
readonly isSimulator = true; readonly isSimulator = true;
@ -78,6 +112,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
readonly designer = this.document.designer; readonly designer = this.document.designer;
@computed get renderEnv(): string {
return this.get('renderEnv') || 'default';
}
@computed get device(): string { @computed get device(): string {
return this.get('device') || 'default'; return this.get('device') || 'default';
} }
@ -186,7 +224,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
const vendors = [ const vendors = [
// required & use once // required & use once
assetBundle(this.get('environment') || defaultEnvironment, AssetLevel.Environment), assetBundle(
this.get('environment') || this.renderEnv === 'rax' ? defaultRaxEnvironment : defaultEnvironment,
AssetLevel.Environment,
),
// required & use once // required & use once
assetBundle(this.get('extraEnvironment'), AssetLevel.Environment), assetBundle(this.get('extraEnvironment'), AssetLevel.Environment),
// required & use once // required & use once
@ -194,7 +235,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
// required & TODO: think of update // required & TODO: think of update
assetBundle(this.theme, AssetLevel.Theme), assetBundle(this.theme, AssetLevel.Theme),
// required & use once // required & use once
assetBundle(this.get('simulatorUrl') || defaultSimulatorUrl, AssetLevel.Runtime), assetBundle(
this.get('simulatorUrl') || this.renderEnv === 'rax' ? defaultRaxSimulatorUrl : defaultSimulatorUrl,
AssetLevel.Runtime,
),
]; ];
// wait 准备 iframe 内容、依赖库注入 // wait 准备 iframe 内容、依赖库注入
@ -326,7 +370,12 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
x.initEvent('click', true); x.initEvent('click', true);
this._iframe?.dispatchEvent(x); this._iframe?.dispatchEvent(x);
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if (isFormEvent(e) || target?.closest('.next-input-group,.next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,.next-number-picker,.next-radio-group,.next-range,.next-range-picker,.next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,.next-year-picker,.next-breadcrumb-item,.next-calendar-header,.next-calendar-table')) { if (
isFormEvent(e) ||
target?.closest(
'.next-input-group,.next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,.next-number-picker,.next-radio-group,.next-range,.next-range-picker,.next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,.next-year-picker,.next-breadcrumb-item,.next-calendar-header,.next-calendar-table',
)
) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
@ -392,7 +441,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
} }
const node = nodeInst.node || this.document.rootNode; const node = nodeInst.node || this.document.rootNode;
const rootElement = this.findDOMNodes(nodeInst.instance, node.componentMeta.rootSelector)?.find(item => item.contains(targetElement)) as HTMLElement; const rootElement = this.findDOMNodes(nodeInst.instance, node.componentMeta.rootSelector)?.find((item) =>
item.contains(targetElement),
) as HTMLElement;
if (!rootElement) { if (!rootElement) {
return; return;
} }
@ -405,7 +456,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
}, },
true, true,
); );
} }
/** /**
@ -792,10 +842,12 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
this.sensing = true; this.sensing = true;
this.scroller.scrolling(e); this.scroller.scrolling(e);
const dropContainer = this.getDropContainer(e); const dropContainer = this.getDropContainer(e);
if (!dropContainer || if (
!dropContainer ||
// too dirty // too dirty
(typeof dropContainer.container?.componentMeta?.prototype?.options?.canDropIn === 'function' && (typeof dropContainer.container?.componentMeta?.prototype?.options?.canDropIn === 'function' &&
!dropContainer.container?.componentMeta?.prototype?.options?.canDropIn(e.dragObject.nodes[0]))) { !dropContainer.container?.componentMeta?.prototype?.options?.canDropIn(e.dragObject.nodes[0]))
) {
return null; return null;
} }
@ -826,10 +878,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
event: e, event: e,
}; };
if (e.dragObject.nodes[0].getPrototype().isModal()) { if (e.dragObject.type === 'node' && e.dragObject.nodes[0].getPrototype().isModal()) {
return this.designer.createLocation({ return this.designer.createLocation({
target: this.document.rootNode, target: this.document.rootNode,
detail, detail: {
type: LocationDetailType.Children,
index: 0,
valid: true,
},
source: 'simulator' + this.document.id, source: 'simulator' + this.document.id,
event: e, event: e,
}); });

11
packages/designer/src/document/document-model.ts
View File

@ -10,7 +10,7 @@ import { Selection } from './selection';
import { History } from './history'; import { History } from './history';
import { TransformStage } from './node'; import { TransformStage } from './node';
import { uniqueId } from '@ali/lowcode-utils'; import { uniqueId } from '@ali/lowcode-utils';
import ModalNodesManager from './node/modalNodesManager'; import { ModalNodesManager } from './node';
export type GetDataType<T, NodeType> = T extends undefined export type GetDataType<T, NodeType> = T extends undefined
? NodeType extends { ? NodeType extends {
@ -37,6 +37,10 @@ export class DocumentModel {
* 操作记录控制 * 操作记录控制
*/ */
readonly history: History; readonly history: History;
/**
* 模态节点管理
*/
readonly modalNodesManager: ModalNodesManager;
private nodesMap = new Map<string, Node>(); private nodesMap = new Map<string, Node>();
@obx.val private nodes = new Set<Node>(); @obx.val private nodes = new Set<Node>();
@ -44,7 +48,6 @@ export class DocumentModel {
private _simulator?: ISimulatorHost; private _simulator?: ISimulatorHost;
private emitter: EventEmitter; private emitter: EventEmitter;
private rootNodeVisitorMap: { [visitorName: string]: any } = {}; private rootNodeVisitorMap: { [visitorName: string]: any } = {};
private modalNodesManager: ModalNodesManager;
/** /**
* 模拟器 * 模拟器
@ -170,7 +173,7 @@ export class DocumentModel {
} }
let node: Node | null = null; let node: Node | null = null;
if (!this.inited) { if (this.inited) {
schema.id = null; schema.id = null;
} }
if (schema.id) { if (schema.id) {
@ -520,7 +523,7 @@ export class DocumentModel {
}; };
} }
setRendererReady(renderer) { setRendererReady(renderer: any) {
this.emitter.emit('lowcode_engine_renderer_ready', renderer); this.emitter.emit('lowcode_engine_renderer_ready', renderer);
} }

1
packages/designer/src/document/node/index.ts
View File

@ -5,3 +5,4 @@ export * from './props/prop';
export * from './props/prop-stash'; export * from './props/prop-stash';
export * from './props/props'; export * from './props/props';
export * from './transform-stage'; export * from './transform-stage';
export * from './modal-nodes-manager';

32
packages/designer/src/document/node/modalNodesManager.ts → packages/designer/src/document/node/modal-nodes-manager.ts
View File

@ -17,11 +17,11 @@ function getModalNodes(node: Node) {
return nodes; return nodes;
} }
export default class ModalNodesManager { export class ModalNodesManager {
public willDestroy: any; public willDestroy: any;
private page: DocumentModel; private page: DocumentModel;
private modalNodes: [Node]; private modalNodes: Node[];
private nodeRemoveEvents: any; private nodeRemoveEvents: any;
private emitter: EventEmitter; private emitter: EventEmitter;
@ -44,7 +44,7 @@ export default class ModalNodesManager {
public getVisibleModalNode() { public getVisibleModalNode() {
const visibleNode = this.modalNodes const visibleNode = this.modalNodes
? this.modalNodes.find((node: Node) => { ? this.modalNodes.find((node: Node) => {
return !node.getExtraProp('hidden'); return node.getVisible();
}) })
: null; : null;
return visibleNode; return visibleNode;
@ -53,18 +53,18 @@ export default class ModalNodesManager {
public hideModalNodes() { public hideModalNodes() {
if (this.modalNodes) { if (this.modalNodes) {
this.modalNodes.forEach((node: Node) => { this.modalNodes.forEach((node: Node) => {
node.getExtraProp('hidden')?.setValue(true); node.setVisible(false);
}); });
} }
} }
public setVisible(node: Node) { public setVisible(node: Node) {
this.hideModalNodes(); this.hideModalNodes();
node.getExtraProp('hidden')?.setValue(false); node.setVisible(true);
} }
public setInvisible(node: Node) { public setInvisible(node: Node) {
node.getExtraProp('hidden')?.setValue(true); node.setVisible(false);
} }
public onVisibleChange(func: () => any) { public onVisibleChange(func: () => any) {
@ -101,26 +101,24 @@ export default class ModalNodesManager {
} }
this.removeNodeEvent(node); this.removeNodeEvent(node);
this.emitter.emit('modalNodesChange'); this.emitter.emit('modalNodesChange');
if (!node.getExtraProp('hidden')) { if (node.getVisible()) {
this.emitter.emit('visibleChange'); this.emitter.emit('visibleChange');
} }
} }
} }
private addNodeEvent(node: Node) { private addNodeEvent(node: Node) {
// this.nodeRemoveEvents[node.getId()] = this.nodeRemoveEvents[node.getId()] =
// node.onStatusChange((status: any, field: any) => { node.onVisibleChange((flag) => {
// if (field === 'visibility') { this.emitter.emit('visibleChange');
// this.emitter.emit('visibleChange'); });
// }
// });
} }
private removeNodeEvent(node: Node) { private removeNodeEvent(node: Node) {
// if (this.nodeRemoveEvents[node.getId()]) { if (this.nodeRemoveEvents[node.getId()]) {
// this.nodeRemoveEvents[node.getId()](); this.nodeRemoveEvents[node.getId()]();
// delete this.nodeRemoveEvents[node.getId()]; delete this.nodeRemoveEvents[node.getId()];
// } }
} }
private setNodes() { private setNodes() {

48
packages/designer/src/document/node/node.ts
View File

@ -22,6 +22,7 @@ import { ExclusiveGroup, isExclusiveGroup } from './exclusive-group';
import { TransformStage } from './transform-stage'; import { TransformStage } from './transform-stage';
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { SettingTopEntry } from 'designer/src/designer'; import { SettingTopEntry } from 'designer/src/designer';
import { EventEmitter } from 'events';
/** /**
* 基础节点 * 基础节点
@ -72,6 +73,7 @@ import { SettingTopEntry } from 'designer/src/designer';
* hidden * hidden
*/ */
export class Node<Schema extends NodeSchema = NodeSchema> { export class Node<Schema extends NodeSchema = NodeSchema> {
private emitter: EventEmitter;
/** /**
* 是节点实例 * 是节点实例
*/ */
@ -101,7 +103,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
/** /**
* @deprecated * @deprecated
*/ */
private _addons: { [key: string]: any } = {}; private _addons: { [key: string]: { exportData: () => any; isProp: boolean; } } = {};
@obx.ref private _parent: ParentalNode | null = null; @obx.ref private _parent: ParentalNode | null = null;
/** /**
* 父级节点 * 父级节点
@ -157,17 +159,19 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
this.props = new Props(this, props, extras); this.props = new Props(this, props, extras);
this._children = new NodeChildren(this as ParentalNode, this.initialChildren(children)); this._children = new NodeChildren(this as ParentalNode, this.initialChildren(children));
this._children.interalInitParent(); this._children.interalInitParent();
this.props.import(this.transformProps(props || {}), extras); this.props.import(this.upgradeProps(this.initProps(props || {})), this.upgradeProps(extras || {}));
this.setupAutoruns(); this.setupAutoruns();
} }
this.settingEntry = this.document.designer.createSettingEntry([ this ]); this.settingEntry = this.document.designer.createSettingEntry([ this ]);
this.emitter = new EventEmitter();
} }
private transformProps(props: any): any { private initProps(props: any): any {
// FIXME! support PropsList
return this.document.designer.transformProps(props, this, TransformStage.Init); return this.document.designer.transformProps(props, this, TransformStage.Init);
// TODO: run transducers in metadata.experimental }
private upgradeProps(props: any): any {
return this.document.designer.transformProps(props, this, TransformStage.Upgrade);
} }
private autoruns?: Array<() => void>; private autoruns?: Array<() => void>;
@ -414,6 +418,22 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
return node; return node;
} }
setVisible(flag: boolean): void {
this.getExtraProp('hidden')?.setValue(!flag);
this.emitter.emit('visibleChange', flag);
}
getVisible(): boolean {
return !this.getExtraProp('hidden', false)?.getValue();
}
onVisibleChange(func: (flag: boolean) => any) {
this.emitter.on('visibleChange', func);
return () => {
this.emitter.removeListener('visibleChange', func);
};
}
getProp(path: string, stash = true): Prop | null { getProp(path: string, stash = true): Prop | null {
return this.props.query(path, stash as any) || null; return this.props.query(path, stash as any) || null;
} }
@ -542,14 +562,16 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
const _extras_: { [key: string]: any } = { const _extras_: { [key: string]: any } = {
...extras, ...extras,
}; };
if (_extras_) { Object.keys(this._addons).forEach((key) => {
Object.keys(_extras_).forEach((key) => {
const addon = this._addons[key]; const addon = this._addons[key];
if (addon) { if (addon) {
_extras_[key] = addon(); if (addon.isProp) {
(props as any)[getConvertedExtraKey(key)] = addon.exportData();
} else {
_extras_[key] = addon.exportData();
}
} }
}); });
}
const schema: any = { const schema: any = {
...baseSchema, ...baseSchema,
@ -755,19 +777,19 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
getAddonData(key: string) { getAddonData(key: string) {
const addon = this._addons[key]; const addon = this._addons[key];
if (addon) { if (addon) {
return addon(); return addon.exportData();
} }
return this.getExtraProp(key)?.value; return this.getExtraProp(key)?.getValue();
} }
/** /**
* @deprecated * @deprecated
*/ */
registerAddon(key: string, exportData: any) { registerAddon(key: string, exportData: () => any, isProp: boolean = false) {
if (this._addons[key]) { if (this._addons[key]) {
throw new Error(`node addon ${key} exist`); throw new Error(`node addon ${key} exist`);
} }
this._addons[key] = exportData; this._addons[key] = { exportData, isProp };
} }
getRect(): DOMRect | null { getRect(): DOMRect | null {

3
packages/designer/src/document/node/props/prop.ts
View File

@ -86,6 +86,8 @@ export class Prop implements IPropParent {
type: 'JSSlot', type: 'JSSlot',
params: schema.params, params: schema.params,
value: schema.children, value: schema.children,
title: schema.title,
name: schema.name,
}; };
} }
@ -235,6 +237,7 @@ export class Prop implements IPropParent {
const slotSchema: SlotSchema = { const slotSchema: SlotSchema = {
componentName: 'Slot', componentName: 'Slot',
title: data.title, title: data.title,
name: data.name,
params: data.params, params: data.params,
children: data.value, children: data.value,
}; };

19
packages/editor-core/CHANGELOG.md
View File

@ -3,6 +3,25 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.21"></a>
## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.20...@ali/lowcode-editor-core@0.8.21) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-editor-core
<a name="0.8.20"></a>
## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.19...@ali/lowcode-editor-core@0.8.20) (2020-07-12)
### Bug Fixes
* 修复删除时，当前组件信息丢失问题 ([3bd1248](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/3bd1248))
<a name="0.8.19"></a> <a name="0.8.19"></a>
## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.17...@ali/lowcode-editor-core@0.8.19) (2020-06-23) ## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.17...@ali/lowcode-editor-core@0.8.19) (2020-06-23)

6
packages/editor-core/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-editor-core", "name": "@ali/lowcode-editor-core",
"version": "0.8.19", "version": "0.8.21",
"description": "Core Api for Ali lowCode engine", "description": "Core Api for Ali lowCode engine",
"license": "MIT", "license": "MIT",
"main": "lib/index.js", "main": "lib/index.js",
@ -15,8 +15,8 @@
"cloud-build": "build-scripts build --skip-demo" "cloud-build": "build-scripts build --skip-demo"
}, },
"dependencies": { "dependencies": {
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.19.16", "@alifd/next": "^1.19.16",
"@recore/obx": "^1.0.9", "@recore/obx": "^1.0.9",
"@recore/obx-react": "^1.0.8", "@recore/obx-react": "^1.0.8",

32
packages/editor-preset-general/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.9.12"></a>
## [0.9.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.11...@ali/lowcode-editor-preset-general@0.9.12) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-editor-preset-general
<a name="0.9.11"></a>
## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.10...@ali/lowcode-editor-preset-general@0.9.11) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-editor-preset-general
<a name="0.9.10"></a>
## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.9...@ali/lowcode-editor-preset-general@0.9.10) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-preset-general
<a name="0.9.9"></a>
## [0.9.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.8...@ali/lowcode-editor-preset-general@0.9.9) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-preset-general
<a name="0.9.8"></a> <a name="0.9.8"></a>
## [0.9.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.7...@ali/lowcode-editor-preset-general@0.9.8) (2020-06-23) ## [0.9.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.7...@ali/lowcode-editor-preset-general@0.9.8) (2020-06-23)

16
packages/editor-preset-general/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-editor-preset-general", "name": "@ali/lowcode-editor-preset-general",
"version": "0.9.8", "version": "0.9.12",
"private": true, "private": true,
"description": "Ali General Editor Preset", "description": "Ali General Editor Preset",
"main": "lib/index.js", "main": "lib/index.js",
@ -15,12 +15,12 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.29", "@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-plugin-designer": "^0.9.23", "@ali/lowcode-plugin-designer": "^0.9.27",
"@ali/lowcode-plugin-outline-pane": "^0.8.29", "@ali/lowcode-plugin-outline-pane": "^0.8.33",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.19.12", "@alifd/next": "^1.19.12",
"@alife/theme-lowcode-dark": "^0.1.0", "@alife/theme-lowcode-dark": "^0.1.0",
"@alife/theme-lowcode-light": "^0.1.0", "@alife/theme-lowcode-light": "^0.1.0",
@ -28,7 +28,7 @@
"react-dom": "^16.8.1" "react-dom": "^16.8.1"
}, },
"devDependencies": { "devDependencies": {
"@ali/lowcode-editor-setters": "^0.9.5", "@ali/lowcode-editor-setters": "^0.9.7",
"@alib/build-scripts": "^0.1.18", "@alib/build-scripts": "^0.1.18",
"@types/events": "^3.0.0", "@types/events": "^3.0.0",
"@types/react": "^16.8.3", "@types/react": "^16.8.3",

32
packages/editor-preset-vision/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.28"></a>
## [0.8.28](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.27...@ali/lowcode-editor-preset-vision@0.8.28) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-editor-preset-vision
<a name="0.8.27"></a>
## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.26...@ali/lowcode-editor-preset-vision@0.8.27) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-editor-preset-vision
<a name="0.8.26"></a>
## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.25...@ali/lowcode-editor-preset-vision@0.8.26) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-preset-vision
<a name="0.8.25"></a>
## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.24...@ali/lowcode-editor-preset-vision@0.8.25) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-preset-vision
<a name="0.8.24"></a> <a name="0.8.24"></a>
## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.23...@ali/lowcode-editor-preset-vision@0.8.24) (2020-06-24) ## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.23...@ali/lowcode-editor-preset-vision@0.8.24) (2020-06-24)

12
packages/editor-preset-vision/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-editor-preset-vision", "name": "@ali/lowcode-editor-preset-vision",
"version": "0.8.24", "version": "0.8.28",
"private": true, "private": true,
"description": "Vision Polyfill for Ali lowCode engine", "description": "Vision Polyfill for Ali lowCode engine",
"main": "lib/index.js", "main": "lib/index.js",
@ -15,11 +15,11 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.29", "@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-plugin-designer": "^0.9.23", "@ali/lowcode-plugin-designer": "^0.9.27",
"@ali/lowcode-plugin-outline-pane": "^0.8.29", "@ali/lowcode-plugin-outline-pane": "^0.8.33",
"@ali/ve-i18n-util": "^2.0.0", "@ali/ve-i18n-util": "^2.0.0",
"@ali/ve-icons": "^4.1.9", "@ali/ve-icons": "^4.1.9",
"@ali/ve-less-variables": "2.0.3", "@ali/ve-less-variables": "2.0.3",

2
packages/editor-preset-vision/src/bundle/upgrade-metadata.ts
View File

@ -281,7 +281,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
let initialFn = (slotName ? null : initial) || initialValue; let initialFn = (slotName ? null : initial) || initialValue;
if (slotName && initialValue === true) { if (slotName && initialValue === true) {
initialFn = (field: any, value: any) => { initialFn = (value: any, defaultValue: any) => {
if (isJSSlot(value)) { if (isJSSlot(value)) {
return { return {
title: slotTitle || title, title: slotTitle || title,

9
packages/editor-preset-vision/src/editor.ts
View File

@ -55,6 +55,7 @@ function upgradePropsReducer(props: any) {
val = { val = {
type: 'JSSlot', type: 'JSSlot',
title: (val.value.props as any)?.slotTitle, title: (val.value.props as any)?.slotTitle,
name: (val.value.props as any)?.slotName,
value: val.value.children value: val.value.children
}; };
} else { } else {
@ -74,14 +75,16 @@ function upgradePropsReducer(props: any) {
return newProps; return newProps;
} }
// 升级 Props // 升级 Props
designer.addPropsReducer(upgradePropsReducer, TransformStage.Init); designer.addPropsReducer(upgradePropsReducer, TransformStage.Upgrade);
// 节点 props 初始化 // 节点 props 初始化
designer.addPropsReducer((props, node) => { designer.addPropsReducer((props, node) => {
// run initials // run initials
const initials = node.componentMeta.getMetadata().experimental?.initials; const initials = node.componentMeta.getMetadata().experimental?.initials;
if (initials) { if (initials) {
const newProps: any = {}; const newProps: any = {
...props,
};
initials.forEach((item) => { initials.forEach((item) => {
// FIXME! this implements SettingTarget // FIXME! this implements SettingTarget
try { try {
@ -138,7 +141,6 @@ function compatiableReducer(props: any) {
const newProps: any = {}; const newProps: any = {};
Object.entries<any>(props).forEach(([key, val]) => { Object.entries<any>(props).forEach(([key, val]) => {
if (isJSSlot(val)) { if (isJSSlot(val)) {
val.value
val = { val = {
type: 'JSBlock', type: 'JSBlock',
value: { value: {
@ -146,6 +148,7 @@ function compatiableReducer(props: any) {
children: val.value, children: val.value,
props: { props: {
slotTitle: val.title, slotTitle: val.title,
slotName: val.name,
}, },
}, },
} }

16
packages/editor-setters/CHANGELOG.md
View File

@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.9.7"></a>
## [0.9.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.6...@ali/lowcode-editor-setters@0.9.7) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.6"></a>
## [0.9.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.5...@ali/lowcode-editor-setters@0.9.6) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-setters
<a name="0.9.5"></a> <a name="0.9.5"></a>
## [0.9.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.4...@ali/lowcode-editor-setters@0.9.5) (2020-06-23) ## [0.9.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.4...@ali/lowcode-editor-setters@0.9.5) (2020-06-23)

4
packages/editor-setters/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-editor-setters", "name": "@ali/lowcode-editor-setters",
"version": "0.9.5", "version": "0.9.7",
"description": "Builtin setters for Ali lowCode engine", "description": "Builtin setters for Ali lowCode engine",
"files": [ "files": [
"es", "es",
@ -22,7 +22,7 @@
"@ali/iceluna-comp-react-node": "^1.0.5", "@ali/iceluna-comp-react-node": "^1.0.5",
"@ali/iceluna-sdk": "^1.0.5-beta.24", "@ali/iceluna-sdk": "^1.0.5-beta.24",
"@ali/lc-style-setter": "^0.0.1", "@ali/lc-style-setter": "^0.0.1",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.19.16", "@alifd/next": "^1.19.16",
"acorn": "^6.4.1", "acorn": "^6.4.1",
"classnames": "^2.2.6", "classnames": "^2.2.6",

38
packages/editor-skeleton/CHANGELOG.md
View File

@ -3,6 +3,44 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.33"></a>
## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.32...@ali/lowcode-editor-skeleton@0.8.33) (2020-07-14)
### Bug Fixes
* 右侧配置面板面包屑点击无效 ([353fb10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/353fb10))
<a name="0.8.32"></a>
## [0.8.32](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.31...@ali/lowcode-editor-skeleton@0.8.32) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-editor-skeleton
<a name="0.8.31"></a>
## [0.8.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.30...@ali/lowcode-editor-skeleton@0.8.31) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-editor-skeleton
<a name="0.8.30"></a>
## [0.8.30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.29...@ali/lowcode-editor-skeleton@0.8.30) (2020-07-12)
### Bug Fixes
* 区块模板切换之后数据不显示 ([292c1c3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/292c1c3))
<a name="0.8.29"></a> <a name="0.8.29"></a>
## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.27...@ali/lowcode-editor-skeleton@0.8.29) (2020-06-23) ## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.27...@ali/lowcode-editor-skeleton@0.8.29) (2020-06-23)

10
packages/editor-skeleton/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-editor-skeleton", "name": "@ali/lowcode-editor-skeleton",
"version": "0.8.29", "version": "0.8.33",
"description": "alibaba lowcode editor skeleton", "description": "alibaba lowcode editor skeleton",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js", "module": "es/index.js",
@ -19,10 +19,10 @@
"editor" "editor"
], ],
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.20.12", "@alifd/next": "^1.20.12",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"react": "^16.8.1", "react": "^16.8.1",

59
packages/editor-skeleton/src/components/field/index.less
View File

@ -1,8 +1,7 @@
@x-gap: 10px; @x-gap: 12px;
@y-gap: 8px; @y-gap: 8px;
.lc-field { .lc-field {
// head
.lc-field-head { .lc-field-head {
display: flex; display: flex;
align-items: center; align-items: center;
@ -61,23 +60,11 @@
} }
} }
.lc-field-icon { .lc-field-icon {
// margin-right: @x-gap;
transform-origin: center; transform-origin: center;
transition: transform 0.1s; transition: transform 0.1s;
} }
} }
// &.lc-plain-field {
// // for top-level style
// // padding: 8px 10px;
// > .lc-field-body {
// flex: 1;
// min-width: 0;
// display: flex;
// align-items: center;
// }
// }
&.lc-inline-field { &.lc-inline-field {
display: flex; display: flex;
align-items: center; align-items: center;
@ -111,29 +98,33 @@
&.lc-block-field, &.lc-accordion-field { &.lc-block-field, &.lc-accordion-field {
display: block; display: block;
&:not(:first-child) { &:first-child {
border-top: 1px solid var(--color-line-normal); > .lc-field-head {
border-top: none;
}
} }
> .lc-field-head { > .lc-field-head {
// padding-left: @x-gap;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
// background: var(--color-block-background-shallow, rgba(31,56,88,.06)); background: var(--color-block-background-shallow, rgba(31,56,88,.06));
// border-bottom: 1px solid var(--color-line-normal); border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
// color: var(--color-title); border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
color: var(--color-title);
padding: 0 16px; padding: 0 16px;
background-color: #F7F9FC;
color: #8F9BB3;
user-select: none; user-select: none;
> .lc-field-icon {
color: #8F9BB3;
}
} }
> .lc-field-body { > .lc-field-body {
// padding: @y-gap @x-gap/2; // padding: @y-gap @x-gap/2;
padding: 16px; padding: 12px;
.lc-inline-field{ .lc-inline-field{
margin-bottom: 16px; margin-bottom: 12px;
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
@ -162,10 +153,15 @@
&.lc-accordion-field { &.lc-accordion-field {
position: relative; position: relative;
// collapsed
&:last-child.lc-field-is-collapsed{ &.lc-field-is-collapsed {
border-bottom: 1px solid var(--color-line-normal); margin-bottom: 6px;
} }
// collapsed
// &:last-child.lc-field-is-collapsed{
// border-bottom: 1px solid var(--color-line-normal);
// }
&.lc-field-is-collapsed { &.lc-field-is-collapsed {
> .lc-field-head .lc-field-icon { > .lc-field-head .lc-field-icon {
transform: rotate(180deg); transform: rotate(180deg);
@ -200,14 +196,19 @@
.lc-accordion-field, .lc-block-field { .lc-accordion-field, .lc-block-field {
> .lc-field-head { > .lc-field-head {
padding-left: @x-gap/2; padding-left: @x-gap;
background: var(--color-block-background-light); background: var(--color-block-background-light);
border-bottom-color: var(--color-line-light, rgba(31, 56, 88, .1)); border-bottom: none;
border-top: none;
> .lc-field-icon { > .lc-field-icon {
// margin-right: @x-gap/2; // margin-right: @x-gap/2;
margin-right: 0; margin-right: 0;
} }
} }
> .lc-field-body {
padding: 8px;
}
} }
// 3rd level field title width should short // 3rd level field title width should short

16
packages/editor-skeleton/src/components/mixed-setter/style.less
View File

@ -6,7 +6,7 @@
position: relative; position: relative;
>.lc-setter-actions { >.lc-setter-actions {
position: absolute; position: absolute;
right: -2px; right: -4px;
top: 50%; top: 50%;
transform: translate(100%, -50%); transform: translate(100%, -50%);
.lc-switch-trigger { .lc-switch-trigger {
@ -18,11 +18,19 @@
} }
.lc-title { .lc-title {
cursor: pointer; cursor: pointer;
.lc-title-icon svg {
fill: #8F9BB3;
}
} }
.variable-binded { .variable-binded {
background: var(--color-brand, #006cff); background: var(--color-brand, #006cff);
color: #fff!important; color: #fff!important;
border-radius: 3px; border-radius: 3px;
.lc-title-icon svg {
fill: #fff;
}
} }
} }
.next-input,.next-date-picker,.next-month-picker { .next-input,.next-date-picker,.next-month-picker {
@ -42,7 +50,7 @@
margin-right: 0; margin-right: 0;
>.lc-setter-actions { >.lc-setter-actions {
position: absolute; position: absolute;
right: 16px; right: 12px;
top: 0; top: 0;
height: 32px; height: 32px;
transform: none; transform: none;
@ -56,8 +64,8 @@
position: static; position: static;
margin-right: 0; margin-right: 0;
> .lc-setter-actions{ > .lc-setter-actions{
right: 32px; right: 36px;
top: 6px; top: 4px;
transform: none; transform: none;
} }
} }

14
packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx
View File

@ -42,22 +42,26 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
const items = []; const items = [];
let l = 3; let l = 3;
while (l-- > 0 && node) { while (l-- > 0 && node) {
const _node = node;
const props = const props =
l === 2 l === 2
? {} ? {}
: { : {
onMouseOver: hoverNode.bind(null, node, true), onMouseOver: hoverNode.bind(null, _node, true),
onMouseOut: hoverNode.bind(null, node, false), onMouseOut: hoverNode.bind(null, _node, false),
onClick: () => { onClick: () => {
selectNode.call(null, node); if (!_node) {
const getName = (node) => { return;
}
selectNode.call(null, _node);
const getName = (node: any) => {
const npm = node?.componentMeta?.npm; const npm = node?.componentMeta?.npm;
return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
node?.componentMeta?.componentName || node?.componentMeta?.componentName ||
''; '';
}; };
const selected = getName(current); const selected = getName(current);
const target = getName(node); const target = getName(_node);
editor?.emit('skeleton.settingsPane.Breadcrumb', { editor?.emit('skeleton.settingsPane.Breadcrumb', {
selected, selected,
target, target,

8
packages/editor-skeleton/src/layouts/left-fixed-pane.tsx
View File

@ -19,11 +19,19 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P
render() { render() {
const { area } = this.props; const { area } = this.props;
const hideTitleBar = area.current?.config.props?.hideTitleBar; const hideTitleBar = area.current?.config.props?.hideTitleBar;
const width = area.current?.config.props?.width;
const style = width
? {
width,
}
: undefined;
return ( return (
<div <div
className={classNames('lc-left-fixed-pane', { className={classNames('lc-left-fixed-pane', {
'lc-area-visible': area.visible, 'lc-area-visible': area.visible,
})} })}
style={style}
> >
{!hideTitleBar && ( {!hideTitleBar && (
<Button <Button

6
packages/editor-skeleton/src/layouts/workbench.less
View File

@ -139,10 +139,14 @@ body {
height: var(--top-area-height); height: var(--top-area-height);
background-color: var(--color-pane-background); background-color: var(--color-pane-background);
width: 100%; width: 100%;
display: flex; display: none;
margin-bottom: 2px; margin-bottom: 2px;
padding: 8px 12px 8px 16px; padding: 8px 12px 8px 16px;
&.lc-area-visible {
display: flex;
}
.lc-top-area-left { .lc-top-area-left {
display: flex; display: flex;
align-items: center; align-items: center;

1
packages/editor-skeleton/src/transducers/parse-props.ts
View File

@ -155,6 +155,7 @@ function propTypeToSetter(propType: PropType): SetterType {
return { return {
componentName: 'MixedSetter', componentName: 'MixedSetter',
isRequired, isRequired,
props: {},
}; };
} }

3
packages/editor-skeleton/src/widget/panel.ts
View File

@ -154,6 +154,9 @@ export default class Panel implements IWidget {
} }
this.emitter.emit('activechange', true); this.emitter.emit('activechange', true);
} else if (this.inited) { } else if (this.inited) {
if (this.parent?.name && this.name.startsWith(this.parent.name)) {
this.inited = false;
}
this._actived = false; this._actived = false;
this.parent?.unactive(this); this.parent?.unactive(this);
this.emitter.emit('activechange', false); this.emitter.emit('activechange', false);

32
packages/plugin-components-pane/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.29"></a>
## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.28...@ali/lowcode-plugin-components-pane@0.8.29) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
<a name="0.8.28"></a>
## [0.8.28](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.27...@ali/lowcode-plugin-components-pane@0.8.28) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
<a name="0.8.27"></a>
## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.26...@ali/lowcode-plugin-components-pane@0.8.27) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
<a name="0.8.26"></a>
## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.25...@ali/lowcode-plugin-components-pane@0.8.26) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
<a name="0.8.25"></a> <a name="0.8.25"></a>
## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.24...@ali/lowcode-plugin-components-pane@0.8.25) (2020-06-23) ## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.24...@ali/lowcode-plugin-components-pane@0.8.25) (2020-06-23)

8
packages/plugin-components-pane/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-components-pane", "name": "@ali/lowcode-plugin-components-pane",
"version": "0.8.25", "version": "0.8.29",
"description": "alibaba lowcode editor component-list plugin", "description": "alibaba lowcode editor component-list plugin",
"files": [ "files": [
"es/", "es/",
@ -20,9 +20,9 @@
], ],
"author": "xiayang.xy", "author": "xiayang.xy",
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/ve-component-list": "^1.1.1", "@ali/ve-component-list": "^1.1.1",
"@alifd/next": "^1.19.19", "@alifd/next": "^1.19.19",
"react": "^16.8.1" "react": "^16.8.1"

32
packages/plugin-designer/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.9.27"></a>
## [0.9.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.26...@ali/lowcode-plugin-designer@0.9.27) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-plugin-designer
<a name="0.9.26"></a>
## [0.9.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.25...@ali/lowcode-plugin-designer@0.9.26) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-designer
<a name="0.9.25"></a>
## [0.9.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.24...@ali/lowcode-plugin-designer@0.9.25) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-designer
<a name="0.9.24"></a>
## [0.9.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.23...@ali/lowcode-plugin-designer@0.9.24) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-designer
<a name="0.9.23"></a> <a name="0.9.23"></a>
## [0.9.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.21...@ali/lowcode-plugin-designer@0.9.23) (2020-06-23) ## [0.9.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.21...@ali/lowcode-plugin-designer@0.9.23) (2020-06-23)

6
packages/plugin-designer/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-designer", "name": "@ali/lowcode-plugin-designer",
"version": "0.9.23", "version": "0.9.27",
"description": "alibaba lowcode editor designer plugin", "description": "alibaba lowcode editor designer plugin",
"files": [ "files": [
"es", "es",
@ -20,8 +20,8 @@
], ],
"author": "xiayang.xy", "author": "xiayang.xy",
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1" "react-dom": "^16.8.1"
}, },

9
packages/plugin-designer/src/index.tsx
View File

@ -11,6 +11,7 @@ interface DesignerPluginState {
componentMetadatas?: any[] | null; componentMetadatas?: any[] | null;
library?: any[] | null; library?: any[] | null;
extraEnvironment?: any[] | null; extraEnvironment?: any[] | null;
renderEnv?: string;
} }
export default class DesignerPlugin extends PureComponent<PluginProps, DesignerPluginState> { export default class DesignerPlugin extends PureComponent<PluginProps, DesignerPluginState> {
@ -20,6 +21,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
componentMetadatas: null, componentMetadatas: null,
library: null, library: null,
extraEnvironment: null, extraEnvironment: null,
renderEnv: 'default',
}; };
private _mounted = true; private _mounted = true;
@ -32,6 +34,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
private async setupAssets() { private async setupAssets() {
const { editor } = this.props; const { editor } = this.props;
const assets = await editor.onceGot('assets'); const assets = await editor.onceGot('assets');
const renderEnv = await editor.onceGot('renderEnv');
if (!this._mounted) { if (!this._mounted) {
return; return;
} }
@ -40,9 +43,10 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
componentMetadatas: components || [], componentMetadatas: components || [],
library: packages || [], library: packages || [],
extraEnvironment, extraEnvironment,
renderEnv,
}; };
this.setState(state); this.setState(state);
}; }
componentWillUnmount() { componentWillUnmount() {
this._mounted = false; this._mounted = false;
@ -59,7 +63,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
render(): React.ReactNode { render(): React.ReactNode {
const { editor } = this.props; const { editor } = this.props;
const { componentMetadatas, library, extraEnvironment } = this.state; const { componentMetadatas, library, extraEnvironment, renderEnv } = this.state;
if (!library || !componentMetadatas) { if (!library || !componentMetadatas) {
// TODO: use a Loading // TODO: use a Loading
@ -76,6 +80,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
simulatorProps={{ simulatorProps={{
library, library,
extraEnvironment, extraEnvironment,
renderEnv,
}} }}
/> />
); );

16
packages/plugin-event-bind-dialog/CHANGELOG.md
View File

@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.20"></a>
## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.19...@ali/lowcode-plugin-event-bind-dialog@0.8.20) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog
<a name="0.8.19"></a>
## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.18...@ali/lowcode-plugin-event-bind-dialog@0.8.19) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog
<a name="0.8.18"></a> <a name="0.8.18"></a>
## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.17...@ali/lowcode-plugin-event-bind-dialog@0.8.18) (2020-06-23) ## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.17...@ali/lowcode-plugin-event-bind-dialog@0.8.18) (2020-06-23)

6
packages/plugin-event-bind-dialog/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-event-bind-dialog", "name": "@ali/lowcode-plugin-event-bind-dialog",
"version": "0.8.18", "version": "0.8.20",
"description": "alibaba lowcode editor event bind dialog plugin", "description": "alibaba lowcode editor event bind dialog plugin",
"files": [ "files": [
"es", "es",
@ -19,8 +19,8 @@
], ],
"author": "zude.hzd", "author": "zude.hzd",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@alifd/next": "^1.19.16", "@alifd/next": "^1.19.16",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1" "react-dom": "^16.8.1"

32
packages/plugin-outline-pane/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.33"></a>
## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.32...@ali/lowcode-plugin-outline-pane@0.8.33) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
<a name="0.8.32"></a>
## [0.8.32](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.31...@ali/lowcode-plugin-outline-pane@0.8.32) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
<a name="0.8.31"></a>
## [0.8.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.30...@ali/lowcode-plugin-outline-pane@0.8.31) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
<a name="0.8.30"></a>
## [0.8.30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.29...@ali/lowcode-plugin-outline-pane@0.8.30) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
<a name="0.8.29"></a> <a name="0.8.29"></a>
## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.27...@ali/lowcode-plugin-outline-pane@0.8.29) (2020-06-23) ## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.27...@ali/lowcode-plugin-outline-pane@0.8.29) (2020-06-23)

10
packages/plugin-outline-pane/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-outline-pane", "name": "@ali/lowcode-plugin-outline-pane",
"version": "0.8.29", "version": "0.8.33",
"description": "Outline pane for Ali lowCode engine", "description": "Outline pane for Ali lowCode engine",
"files": [ "files": [
"es", "es",
@ -14,10 +14,10 @@
"test:snapshot": "ava --update-snapshots" "test:snapshot": "ava --update-snapshots"
}, },
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.19.16", "@alifd/next": "^1.19.16",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"react": "^16", "react": "^16",

14
packages/plugin-outline-pane/src/icons/radio-active.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
export function IconRadioActive(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-256a256 256 0 1 0 0-512 256 256 0 0 0 0 512z"></path>
</SVGIcon>
);
}
IconRadioActive.displayName = 'IconRadioActive';

14
packages/plugin-outline-pane/src/icons/radio.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
export function IconRadio(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-64A448 448 0 1 0 512 64a448 448 0 0 0 0 896z"></path>
</SVGIcon>
);
}
IconRadio.displayName = 'IconRadio';

14
packages/plugin-outline-pane/src/main.ts
View File

@ -134,6 +134,20 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
const pos = getPosFromEvent(e, this._shell); const pos = getPosFromEvent(e, this._shell);
const irect = this.getInsertionRect(); const irect = this.getInsertionRect();
const originLoc = document.dropLocation; const originLoc = document.dropLocation;
if (e.dragObject.type === 'node' && e.dragObject.nodes[0].getPrototype().isModal()) {
return designer.createLocation({
target: document.rootNode,
detail: {
type: LocationDetailType.Children,
index: 0,
valid: true,
},
source: this.id,
event: e,
});
}
if (originLoc && ((pos && pos === 'unchanged') || (irect && globalY >= irect.top && globalY <= irect.bottom))) { if (originLoc && ((pos && pos === 'unchanged') || (irect && globalY >= irect.top && globalY <= irect.bottom))) {
const loc = originLoc.clone(e); const loc = originLoc.clone(e);
const indented = this.indentTrack.getIndentParent(originLoc, loc); const indented = this.indentTrack.getIndentParent(originLoc, loc);

8
packages/plugin-outline-pane/src/tree-node.ts
View File

@ -72,7 +72,7 @@ export default class TreeNode {
@computed get hidden(): boolean { @computed get hidden(): boolean {
const cv = this.node.isConditionalVisible(); const cv = this.node.isConditionalVisible();
if (cv == null) { if (cv == null) {
return this.node.getExtraProp('hidden', false)?.getValue() === true; return !this.node.getVisible();
} }
return !cv; return !cv;
} }
@ -81,11 +81,7 @@ export default class TreeNode {
if (this.node.conditionGroup) { if (this.node.conditionGroup) {
return; return;
} }
if (flag) { this.node.setVisible(!flag);
this.node.getExtraProp('hidden', true)?.setValue(true);
} else {
this.node.getExtraProp('hidden', false)?.remove();
}
} }
@computed get locked(): boolean { @computed get locked(): boolean {

92
packages/plugin-outline-pane/src/views/root-tree-node.tsx Normal file
View File

@ -0,0 +1,92 @@
import { Component } from 'react';
import classNames from 'classnames';
import { observer } from '@ali/lowcode-editor-core';
import TreeNode from '../tree-node';
import TreeTitle from './tree-title';
import TreeBranches from './tree-branches';
import { ModalNodesManager } from '@ali/lowcode-designer';
import { IconEyeClose } from '../icons/eye-close';
@observer
class ModalTreeNodeView extends Component<{ treeNode: TreeNode }> {
private modalNodesManager: ModalNodesManager;
constructor(props: any) {
super(props);
// 模态管理对象
this.modalNodesManager = props.treeNode.document.modalNodesManager;
}
shouldComponentUpdate() {
return false;
}
hideAllNodes() {
this.modalNodesManager.hideModalNodes();
}
render() {
const { treeNode } = this.props;
const modalNodes = treeNode.children?.filter((item) => {
return item.node.getPrototype().isModal();
});
if (!modalNodes || modalNodes.length === 0) {
return null;
}
const hasVisibleModalNode = !!this.modalNodesManager.getVisibleModalNode();
return (
<div className="tree-node-modal">
<div className="tree-node-modal-title">
<span>模态视图层</span>
<div className="tree-node-modal-title-visible-icon"
onClick={this.hideAllNodes.bind(this)}>
{hasVisibleModalNode ? <IconEyeClose /> : null}
</div>
</div>
<div className="tree-pane-modal-content">
<TreeBranches treeNode={treeNode} isModal={true}/>
</div>
</div>
);
}
}
@observer
export default class RootTreeNodeView extends Component<{ treeNode: TreeNode }> {
shouldComponentUpdate() {
return false;
}
render() {
const { treeNode } = this.props;
const className = classNames('tree-node', {
// 是否展开
expanded: treeNode.expanded,
// 是否悬停中
detecting: treeNode.detecting,
// 是否选中的
selected: treeNode.selected,
// 是否隐藏的
hidden: treeNode.hidden,
// 是否忽略的
// ignored: treeNode.ignored,
// 是否锁定的
locked: treeNode.locked,
// 是否投放响应
dropping: treeNode.dropDetail?.index != null,
'is-root': treeNode.isRoot(),
'condition-flow': treeNode.node.conditionGroup != null,
highlight: treeNode.isFocusingNode(),
});
return (
<div className={className} data-id={treeNode.id}>
<TreeTitle treeNode={treeNode} />
<ModalTreeNodeView treeNode={treeNode} />
<TreeBranches treeNode={treeNode}/>
</div>
);
}
}

40
packages/plugin-outline-pane/src/views/style.less
View File

@ -21,6 +21,46 @@
margin-bottom: @treeNodeHeight; margin-bottom: @treeNodeHeight;
user-select: none; user-select: none;
.tree-node-modal {
margin: 5px;
border: 1px solid rgba(31, 56, 88, 0.2);
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15);
.tree-node-modal-title {
position: relative;
background: rgba(31, 56, 88, 0.04);
padding: 0 10px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid rgba(31, 56, 88, 0.2);
.tree-node-modal-title-visible-icon {
position: absolute;
top: 4px;
right: 12px;
cursor: pointer;
}
}
.tree-pane-modal-content {
& > .tree-node-branches::before {
display: none;
}
}
.tree-node-modal-radio, .tree-node-modal-radio-active {
margin-right: 4px;
opacity: 0.8;
position: absolute;
top: 7px;
left: 6px;
}
.tree-node-modal-radio-active {
color: #006cff;
}
}
.tree-node-branches::before { .tree-node-branches::before {
position: absolute; position: absolute;
display: block; display: block;

20
packages/plugin-outline-pane/src/views/tree-branches.tsx
View File

@ -9,13 +9,14 @@ import { intlNode } from '../locale';
@observer @observer
export default class TreeBranches extends Component<{ export default class TreeBranches extends Component<{
treeNode: TreeNode; treeNode: TreeNode;
isModal?: boolean;
}> { }> {
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
render() { render() {
const treeNode = this.props.treeNode; const { treeNode, isModal } = this.props;
const { expanded } = treeNode; const { expanded } = treeNode;
if (!expanded) { if (!expanded) {
@ -24,8 +25,10 @@ export default class TreeBranches extends Component<{
return ( return (
<div className="tree-node-branches"> <div className="tree-node-branches">
<TreeNodeSlots treeNode={treeNode} /> {
<TreeNodeChildren treeNode={treeNode} /> !isModal && <TreeNodeSlots treeNode={treeNode}/>
}
<TreeNodeChildren treeNode={treeNode} isModal={isModal || false}/>
</div> </div>
); );
} }
@ -34,12 +37,13 @@ export default class TreeBranches extends Component<{
@observer @observer
class TreeNodeChildren extends Component<{ class TreeNodeChildren extends Component<{
treeNode: TreeNode; treeNode: TreeNode;
isModal?: boolean;
}> { }> {
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
render() { render() {
const { treeNode } = this.props; const { treeNode, isModal } = this.props;
let children: any = []; let children: any = [];
let groupContents: any[] = []; let groupContents: any[] = [];
let currentGrp: ExclusiveGroup; let currentGrp: ExclusiveGroup;
@ -67,6 +71,10 @@ class TreeNodeChildren extends Component<{
/> />
); );
treeNode.children?.forEach((child, index) => { treeNode.children?.forEach((child, index) => {
const childIsModal = child.node.getPrototype().isModal();
if (isModal != childIsModal) {
return;
}
const { conditionGroup } = child.node; const { conditionGroup } = child.node;
if (conditionGroup !== currentGrp) { if (conditionGroup !== currentGrp) {
endGroup(); endGroup();
@ -81,12 +89,12 @@ class TreeNodeChildren extends Component<{
children.push(insertion); children.push(insertion);
} }
} }
groupContents.push(<TreeNodeView key={child.id} treeNode={child} />); groupContents.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal}/>);
} else { } else {
if (index === dropIndex) { if (index === dropIndex) {
children.push(insertion); children.push(insertion);
} }
children.push(<TreeNodeView key={child.id} treeNode={child} />); children.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal}/>);
} }
}); });
endGroup(); endGroup();

11
packages/plugin-outline-pane/src/views/tree-node.tsx
View File

@ -6,13 +6,16 @@ import TreeTitle from './tree-title';
import TreeBranches from './tree-branches'; import TreeBranches from './tree-branches';
@observer @observer
export default class TreeNodeView extends Component<{ treeNode: TreeNode }> { export default class TreeNodeView extends Component<{
treeNode: TreeNode;
isModal?: boolean;
}> {
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
render() { render() {
const { treeNode } = this.props; const { treeNode, isModal } = this.props;
const className = classNames('tree-node', { const className = classNames('tree-node', {
// 是否展开 // 是否展开
expanded: treeNode.expanded, expanded: treeNode.expanded,
@ -35,8 +38,8 @@ export default class TreeNodeView extends Component<{ treeNode: TreeNode }> {
return ( return (
<div className={className} data-id={treeNode.id}> <div className={className} data-id={treeNode.id}>
<TreeTitle treeNode={treeNode} /> <TreeTitle treeNode={treeNode} isModal={isModal}/>
<TreeBranches treeNode={treeNode} /> <TreeBranches treeNode={treeNode} isModal={false}/>
</div> </div>
); );
} }

34
packages/plugin-outline-pane/src/views/tree-title.tsx
View File

@ -10,11 +10,14 @@ import TreeNode from '../tree-node';
import { IconEye } from '../icons/eye'; import { IconEye } from '../icons/eye';
import { IconCond } from '../icons/cond'; import { IconCond } from '../icons/cond';
import { IconLoop } from '../icons/loop'; import { IconLoop } from '../icons/loop';
import { IconRadioActive } from '../icons/radio-active';
import { IconRadio } from '../icons/radio';
import { createIcon } from '@ali/lowcode-utils'; import { createIcon } from '@ali/lowcode-utils';
@observer @observer
export default class TreeTitle extends Component<{ export default class TreeTitle extends Component<{
treeNode: TreeNode; treeNode: TreeNode;
isModal?: boolean;
}> { }> {
state: { state: {
editing: boolean; editing: boolean;
@ -62,7 +65,7 @@ export default class TreeTitle extends Component<{
}; };
render() { render() {
const { treeNode } = this.props; const { treeNode, isModal } = this.props;
const { editing } = this.state; const { editing } = this.state;
const isCNode = !treeNode.isRoot(); const isCNode = !treeNode.isRoot();
const { node } = treeNode; const { node } = treeNode;
@ -72,7 +75,7 @@ export default class TreeTitle extends Component<{
const depth = treeNode.depth; const depth = treeNode.depth;
const indent = depth * 12; const indent = depth * 12;
style = { style = {
paddingLeft: indent, paddingLeft: indent + (isModal ? 12 : 0),
marginLeft: -indent, marginLeft: -indent,
}; };
} }
@ -84,8 +87,31 @@ export default class TreeTitle extends Component<{
})} })}
style={style} style={style}
data-id={treeNode.id} data-id={treeNode.id}
onClick={node.conditionGroup ? () => node.setConditionalVisible() : undefined} onClick={() => {
if (isModal) {
node.document.modalNodesManager.setVisible(node);
return;
}
if (node.conditionGroup) {
node.setConditionalVisible();
return;
}
}}
> >
{isModal && node.getVisible() && (
<div onClick={() => {
node.document.modalNodesManager.setInvisible(node);
}}>
<IconRadioActive className="tree-node-modal-radio-active"/>
</div>
)}
{isModal && !node.getVisible() && (
<div onClick={() => {
node.document.modalNodesManager.setVisible(node);
}}>
<IconRadio className="tree-node-modal-radio"/>
</div>
)}
{isCNode && <ExpandBtn treeNode={treeNode} />} {isCNode && <ExpandBtn treeNode={treeNode} />}
<div className="tree-node-icon">{createIcon(treeNode.icon)}</div> <div className="tree-node-icon">{createIcon(treeNode.icon)}</div>
<div className="tree-node-title-label" onDoubleClick={isNodeParent ? this.enableEdit : undefined}> <div className="tree-node-title-label" onDoubleClick={isNodeParent ? this.enableEdit : undefined}>
@ -123,7 +149,7 @@ export default class TreeTitle extends Component<{
</Fragment> </Fragment>
)} )}
</div> </div>
{isCNode && isNodeParent && <HideBtn treeNode={treeNode} />} {isCNode && isNodeParent && !isModal && <HideBtn treeNode={treeNode} />}
{/*isCNode && isNodeParent && <LockBtn treeNode={treeNode} />*/} {/*isCNode && isNodeParent && <LockBtn treeNode={treeNode} />*/}
</div> </div>
); );

4
packages/plugin-outline-pane/src/views/tree.tsx
View File

@ -3,7 +3,7 @@ import { observer, Editor, globalContext } from '@ali/lowcode-editor-core';
import { isRootNode, Node, DragObjectType, isShaken } from '@ali/lowcode-designer'; import { isRootNode, Node, DragObjectType, isShaken } from '@ali/lowcode-designer';
import { isFormEvent } from '@ali/lowcode-utils'; import { isFormEvent } from '@ali/lowcode-utils';
import { Tree } from '../tree'; import { Tree } from '../tree';
import TreeNodeView from './tree-node'; import RootTreeNodeView from './root-tree-node';
function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string { function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string {
let target: Element | null = e.target as Element; let target: Element | null = e.target as Element;
@ -155,7 +155,7 @@ export default class TreeView extends Component<{ tree: Tree }> {
onClick={this.onClick} onClick={this.onClick}
onMouseLeave={this.onMouseLeave} onMouseLeave={this.onMouseLeave}
> >
<TreeNodeView key={root.id} treeNode={root} /> <RootTreeNodeView key={root.id} treeNode={root} />
</div> </div>
); );
} }

16
packages/plugin-sample-logo/CHANGELOG.md
View File

@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.19"></a>
## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.18...@ali/lowcode-plugin-sample-logo@0.8.19) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo
<a name="0.8.18"></a>
## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.17...@ali/lowcode-plugin-sample-logo@0.8.18) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo
<a name="0.8.17"></a> <a name="0.8.17"></a>
## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.16...@ali/lowcode-plugin-sample-logo@0.8.17) (2020-06-23) ## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.16...@ali/lowcode-plugin-sample-logo@0.8.17) (2020-06-23)

4
packages/plugin-sample-logo/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-sample-logo", "name": "@ali/lowcode-plugin-sample-logo",
"version": "0.8.17", "version": "0.8.19",
"description": "alibaba lowcode editor logo plugin", "description": "alibaba lowcode editor logo plugin",
"files": [ "files": [
"es/", "es/",
@ -20,7 +20,7 @@
], ],
"author": "xiayang.xy", "author": "xiayang.xy",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"react": "^16.8.1" "react": "^16.8.1"
}, },
"devDependencies": { "devDependencies": {

32
packages/plugin-sample-preview/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.31"></a>
## [0.8.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.30...@ali/lowcode-plugin-sample-preview@0.8.31) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
<a name="0.8.30"></a>
## [0.8.30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.29...@ali/lowcode-plugin-sample-preview@0.8.30) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
<a name="0.8.29"></a>
## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.28...@ali/lowcode-plugin-sample-preview@0.8.29) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
<a name="0.8.28"></a>
## [0.8.28](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.27...@ali/lowcode-plugin-sample-preview@0.8.28) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
<a name="0.8.27"></a> <a name="0.8.27"></a>
## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.26...@ali/lowcode-plugin-sample-preview@0.8.27) (2020-06-23) ## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.26...@ali/lowcode-plugin-sample-preview@0.8.27) (2020-06-23)

6
packages/plugin-sample-preview/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-sample-preview", "name": "@ali/lowcode-plugin-sample-preview",
"version": "0.8.27", "version": "0.8.31",
"description": "alibaba lowcode editor sample preview plugin", "description": "alibaba lowcode editor sample preview plugin",
"files": [ "files": [
"es", "es",
@ -18,8 +18,8 @@
"editor" "editor"
], ],
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.x", "@alifd/next": "^1.x",
"react": "^16.8.1" "react": "^16.8.1"
}, },

16
packages/plugin-source-editor/CHANGELOG.md
View File

@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.17"></a>
## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.16...@ali/lowcode-plugin-source-editor@0.8.17) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-source-editor
<a name="0.8.16"></a>
## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.15...@ali/lowcode-plugin-source-editor@0.8.16) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-source-editor
<a name="0.8.15"></a> <a name="0.8.15"></a>
## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.14...@ali/lowcode-plugin-source-editor@0.8.15) (2020-06-23) ## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.14...@ali/lowcode-plugin-source-editor@0.8.15) (2020-06-23)

4
packages/plugin-source-editor/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-source-editor", "name": "@ali/lowcode-plugin-source-editor",
"version": "0.8.15", "version": "0.8.17",
"description": "alibaba lowcode editor source-editor plugin", "description": "alibaba lowcode editor source-editor plugin",
"files": [ "files": [
"es", "es",
@ -19,7 +19,7 @@
], ],
"author": "zude.hzd", "author": "zude.hzd",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.19.16", "@alifd/next": "^1.19.16",
"js-beautify": "^1.10.1", "js-beautify": "^1.10.1",
"prettier": "^1.18.2", "prettier": "^1.18.2",

32
packages/plugin-undo-redo/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.31"></a>
## [0.8.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.30...@ali/lowcode-plugin-undo-redo@0.8.31) (2020-07-14)
**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
<a name="0.8.30"></a>
## [0.8.30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.29...@ali/lowcode-plugin-undo-redo@0.8.30) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
<a name="0.8.29"></a>
## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.28...@ali/lowcode-plugin-undo-redo@0.8.29) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
<a name="0.8.28"></a>
## [0.8.28](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.27...@ali/lowcode-plugin-undo-redo@0.8.28) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
<a name="0.8.27"></a> <a name="0.8.27"></a>
## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.26...@ali/lowcode-plugin-undo-redo@0.8.27) (2020-06-23) ## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.26...@ali/lowcode-plugin-undo-redo@0.8.27) (2020-06-23)

12
packages/plugin-undo-redo/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-undo-redo", "name": "@ali/lowcode-plugin-undo-redo",
"version": "0.8.27", "version": "0.8.31",
"description": "alibaba lowcode editor undo redo plugin", "description": "alibaba lowcode editor undo redo plugin",
"files": [ "files": [
"es", "es",
@ -19,11 +19,11 @@
], ],
"author": "xiayang.xy", "author": "xiayang.xy",
"dependencies": { "dependencies": {
"@ali/lowcode-designer": "^0.9.23", "@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.29", "@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1" "react-dom": "^16.8.1"
}, },

16
packages/plugin-variable-bind-dialog/CHANGELOG.md
View File

@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.18"></a>
## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.17...@ali/lowcode-plugin-variable-bind-dialog@0.8.18) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog
<a name="0.8.17"></a>
## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.16...@ali/lowcode-plugin-variable-bind-dialog@0.8.17) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog
<a name="0.8.16"></a> <a name="0.8.16"></a>
## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.15...@ali/lowcode-plugin-variable-bind-dialog@0.8.16) (2020-06-23) ## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.15...@ali/lowcode-plugin-variable-bind-dialog@0.8.16) (2020-06-23)

4
packages/plugin-variable-bind-dialog/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-variable-bind-dialog", "name": "@ali/lowcode-plugin-variable-bind-dialog",
"version": "0.8.16", "version": "0.8.18",
"description": "alibaba lowcode editor variable bind dialog plugin", "description": "alibaba lowcode editor variable bind dialog plugin",
"files": [ "files": [
"es", "es",
@ -19,7 +19,7 @@
], ],
"author": "zude.hzd", "author": "zude.hzd",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.19.16", "@alifd/next": "^1.19.16",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1" "react-dom": "^16.8.1"

16
packages/plugin-zh-en/CHANGELOG.md
View File

@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.22"></a>
## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.21...@ali/lowcode-plugin-zh-en@0.8.22) (2020-07-13)
**Note:** Version bump only for package @ali/lowcode-plugin-zh-en
<a name="0.8.21"></a>
## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.20...@ali/lowcode-plugin-zh-en@0.8.21) (2020-07-12)
**Note:** Version bump only for package @ali/lowcode-plugin-zh-en
<a name="0.8.20"></a> <a name="0.8.20"></a>
## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.19...@ali/lowcode-plugin-zh-en@0.8.20) (2020-06-23) ## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.19...@ali/lowcode-plugin-zh-en@0.8.20) (2020-06-23)

8
packages/plugin-zh-en/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-plugin-zh-en", "name": "@ali/lowcode-plugin-zh-en",
"version": "0.8.20", "version": "0.8.22",
"description": "alibaba lowcode editor zhong english plugin", "description": "alibaba lowcode editor zhong english plugin",
"files": [ "files": [
"es", "es",
@ -14,9 +14,9 @@
"test:snapshot": "ava --update-snapshots" "test:snapshot": "ava --update-snapshots"
}, },
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.19", "@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.9", "@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.10", "@ali/lowcode-utils": "^0.8.12",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1" "react-dom": "^16.8.1"
}, },

4
packages/rax-render/CHANGELOG.md
View File

@ -26,3 +26,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
### Features ### Features
* init rax-render ([7167767](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7167767)) * init rax-render ([7167767](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7167767))
&&
&&
||

5
packages/rax-render/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "@ali/lowcode-engine-rax-renderer", "name": "@ali/lowcode-rax-renderer",
"version": "0.1.2", "version": "0.1.2",
"private": true, "private": true,
"description": "Rax renderer for Ali lowCode engine", "description": "Rax renderer for Ali lowCode engine",
@ -30,7 +30,8 @@
}, },
"scripts": { "scripts": {
"start": "build-scripts start", "start": "build-scripts start",
"prepublish": "npm run build" "prepublish": "npm run build",
"build": "build-scripts build"
}, },
"dependencies": { "dependencies": {
"@ali/b3-one": "^0.0.17", "@ali/b3-one": "^0.0.17",

158
packages/rax-render/src/engine/base.jsx
View File

@ -2,6 +2,7 @@ import { Component, createElement } from 'rax';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Debug from 'debug'; import Debug from 'debug';
import View from 'rax-view'; import View from 'rax-view';
import classnames from 'classnames';
import DataHelper from '../utils/dataHelper'; import DataHelper from '../utils/dataHelper';
import { import {
forEach, forEach,
@ -18,10 +19,12 @@ import {
checkPropTypes, checkPropTypes,
generateI18n, generateI18n,
acceptsRef, acceptsRef,
getFileCssName,
} from '../utils'; } from '../utils';
import VisualDom from '../comp/visualDom'; import VisualDom from '../comp/visualDom';
import AppContext from '../context/appContext'; import AppContext from '../context/appContext';
import CompWrapper from '../hoc/compWrapper';
// import CompWrapper from '../hoc/compWrapper';
const debug = Debug('engine:base'); const debug = Debug('engine:base');
const DESIGN_MODE = { const DESIGN_MODE = {
@ -34,6 +37,7 @@ let scopeIdx = 0;
export default class BaseEngine extends Component { export default class BaseEngine extends Component {
static dislayName = 'base-engine'; static dislayName = 'base-engine';
static propTypes = { static propTypes = {
locale: PropTypes.string, locale: PropTypes.string,
messages: PropTypes.object, messages: PropTypes.object,
@ -41,11 +45,13 @@ export default class BaseEngine extends Component {
__components: PropTypes.object, __components: PropTypes.object,
__componentsMap: PropTypes.object, __componentsMap: PropTypes.object,
__ctx: PropTypes.object, __ctx: PropTypes.object,
__schema: PropTypes.object __schema: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
__schema: {} __schema: {},
}; };
static contextType = AppContext; static contextType = AppContext;
constructor(props, context) { constructor(props, context) {
@ -79,8 +85,8 @@ export default class BaseEngine extends Component {
console.warn(e); console.warn(e);
} }
reloadDataSource = () => { reloadDataSource = () =>
return new Promise((resolve, reject) => { new Promise((resolve, reject) => {
debug('reload data source'); debug('reload data source');
if (!this.__dataHelper) { if (!this.__dataHelper) {
this.__showPlaceholder = false; this.__showPlaceholder = false;
@ -88,7 +94,7 @@ export default class BaseEngine extends Component {
} }
this.__dataHelper this.__dataHelper
.getInitData() .getInitData()
.then(res => { .then((res) => {
this.__showPlaceholder = false; this.__showPlaceholder = false;
if (isEmpty(res)) { if (isEmpty(res)) {
this.forceUpdate(); this.forceUpdate();
@ -96,7 +102,7 @@ export default class BaseEngine extends Component {
} }
this.setState(res, resolve); this.setState(res, resolve);
}) })
.catch(err => { .catch((err) => {
if (this.__showPlaceholder) { if (this.__showPlaceholder) {
this.__showPlaceholder = false; this.__showPlaceholder = false;
this.forceUpdate(); this.forceUpdate();
@ -104,7 +110,6 @@ export default class BaseEngine extends Component {
reject(err); reject(err);
}); });
}); });
};
__setLifeCycleMethods = (method, args) => { __setLifeCycleMethods = (method, args) => {
const lifeCycleMethods = getValue(this.props.__schema, 'lifeCycles', {}); const lifeCycleMethods = getValue(this.props.__schema, 'lifeCycles', {});
@ -121,7 +126,7 @@ export default class BaseEngine extends Component {
const { __schema } = props; const { __schema } = props;
const customMethodsList = Object.keys(__schema.methods || {}) || []; const customMethodsList = Object.keys(__schema.methods || {}) || [];
this.__customMethodsList && this.__customMethodsList &&
this.__customMethodsList.forEach(item => { this.__customMethodsList.forEach((item) => {
if (!customMethodsList.includes(item)) { if (!customMethodsList.includes(item)) {
delete this[item]; delete this[item];
} }
@ -132,12 +137,12 @@ export default class BaseEngine extends Component {
}); });
}; };
__generateCtx = ctx => { __generateCtx = (ctx) => {
const { pageContext, compContext } = this.context; const { pageContext, compContext } = this.context;
const obj = { const obj = {
page: pageContext, page: pageContext,
component: compContext, component: compContext,
...ctx ...ctx,
}; };
forEach(obj, (val, key) => { forEach(obj, (val, key) => {
this[key] = val; this[key] = val;
@ -153,19 +158,22 @@ export default class BaseEngine extends Component {
const schema = props.__schema || {}; const schema = props.__schema || {};
const appHelper = props.__appHelper; const appHelper = props.__appHelper;
const dataSource = (schema && schema.dataSource) || {}; const dataSource = (schema && schema.dataSource) || {};
this.__dataHelper = new DataHelper(this, dataSource, appHelper, config => this.__parseData(config)); this.__dataHelper = new DataHelper(this, dataSource, appHelper, (config) => this.__parseData(config));
this.dataSourceMap = this.__dataHelper.dataSourceMap; this.dataSourceMap = this.__dataHelper.dataSourceMap;
// 设置容器组件占位，若设置占位则在初始异步请求完成之前用loading占位且不渲染容器组件内部内容 // 设置容器组件占位，若设置占位则在初始异步请求完成之前用loading占位且不渲染容器组件内部内容
this.__showPlaceholder = if (this.__parseData(schema.props && schema.props.autoLoading)) {
this.__parseData(schema.props && schema.props.autoLoading) && this.__showPlaceholder = (dataSource.list || []).some((item) => !!this.__parseData(item.isInit));
(dataSource.list || []).some(item => !!this.__parseData(item.isInit)); }
// this.__showPlaceholder = this.__parseData(schema.props && schema.props.autoLoading) && (dataSource.list || []).some(
// (item) => !!this.__parseData(item.isInit),
// );
}; };
__render = () => { __render = () => {
const schema = this.props.__schema; const schema = this.props.__schema;
this.__setLifeCycleMethods('render'); this.__setLifeCycleMethods('render');
const engine = this.context.engine; const { engine } = this.context;
if (engine) { if (engine) {
engine.props.onCompGetCtx(schema, this); engine.props.onCompGetCtx(schema, this);
// 画布场景才需要每次渲染bind自定义方法 // 画布场景才需要每次渲染bind自定义方法
@ -176,7 +184,10 @@ export default class BaseEngine extends Component {
} }
}; };
__getRef = ref => { __getRef = (ref) => {
const { engine } = this.context;
const { __schema } = this.props;
engine && engine.props.onCompGetRef(__schema, ref);
this.__ref = ref; this.__ref = ref;
}; };
@ -186,7 +197,7 @@ export default class BaseEngine extends Component {
self.__proto__ = __ctx || this; self.__proto__ = __ctx || this;
return this.__createVirtualDom(__schema.children, self, { return this.__createVirtualDom(__schema.children, self, {
schema: __schema, schema: __schema,
Comp: __components[__schema.componentName] Comp: __components[__schema.componentName],
}); });
}; };
@ -200,7 +211,7 @@ export default class BaseEngine extends Component {
// rax text prop 兼容处理 // rax text prop 兼容处理
if (schema.componentName === 'Text') { if (schema.componentName === 'Text') {
if (typeof schema.props.text === 'string') { if (typeof schema.props.text === 'string') {
schema = Object.assign({}, schema); schema = { ...schema };
schema.children = [schema.props.text]; schema.children = [schema.props.text];
} }
} }
@ -218,13 +229,13 @@ export default class BaseEngine extends Component {
if (Array.isArray(schema)) { if (Array.isArray(schema)) {
if (schema.length === 1) return this.__createVirtualDom(schema[0], self, parentInfo); if (schema.length === 1) return this.__createVirtualDom(schema[0], self, parentInfo);
return schema.map((item, idx) => return schema.map((item, idx) =>
this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idx) this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idx),
); );
} }
//解析占位组件 // 解析占位组件
if (schema.componentName === 'Flagment' && schema.children) { if (schema.componentName === 'Flagment' && schema.children) {
let tarChildren = isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children; const tarChildren = isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children;
return this.__createVirtualDom(tarChildren, self, parentInfo); return this.__createVirtualDom(tarChildren, self, parentInfo);
} }
@ -238,11 +249,11 @@ export default class BaseEngine extends Component {
return this.__createLoopVirtualDom( return this.__createLoopVirtualDom(
{ {
...schema, ...schema,
loop: parseData(schema.loop, self) loop: parseData(schema.loop, self),
}, },
self, self,
parentInfo, parentInfo,
idx idx,
); );
} }
const condition = schema.condition === undefined ? true : parseData(schema.condition, self); const condition = schema.condition === undefined ? true : parseData(schema.condition, self);
@ -258,7 +269,7 @@ export default class BaseEngine extends Component {
} else if (!schema.__ctx) { } else if (!schema.__ctx) {
// 在生产环境schema没有__ctx上下文，需要手动生成一个lunaKey // 在生产环境schema没有__ctx上下文，需要手动生成一个lunaKey
schema.__ctx = { schema.__ctx = {
lunaKey: `luna${++scopeIdx}` lunaKey: `luna${++scopeIdx}`,
}; };
scopeKey = schema.__ctx.lunaKey; scopeKey = schema.__ctx.lunaKey;
} else { } else {
@ -282,7 +293,7 @@ export default class BaseEngine extends Component {
__schema: schema, __schema: schema,
__appHelper: appHelper, __appHelper: appHelper,
__components: components, __components: components,
__componentsMap: componentsMap // __componentsMap: componentsMap,
} }
: {}; : {};
if (engine && engine.props.designMode) { if (engine && engine.props.designMode) {
@ -294,20 +305,20 @@ export default class BaseEngine extends Component {
Comp, Comp,
componentInfo: { componentInfo: {
...componentInfo, ...componentInfo,
props: transformArrayToMap(componentInfo.props, 'name') props: transformArrayToMap(componentInfo.props, 'name'),
} },
}); });
// 对于可以获取到ref的组件做特殊处理 // 对于可以获取到ref的组件做特殊处理
if (!acceptsRef(Comp)) { if (acceptsRef(Comp)) {
Comp = CompWrapper(Comp); otherProps.ref = (ref) => {
}
otherProps.ref = ref => {
const refProps = props.ref; const refProps = props.ref;
if (refProps && typeof refProps === 'string') { if (refProps && typeof refProps === 'string') {
this[refProps] = ref; this[refProps] = ref;
} }
engine && engine.props.onCompGetRef(schema, ref); engine && engine.props.onCompGetRef(schema, ref);
}; };
}
// scope需要传入到组件上 // scope需要传入到组件上
if (scopeKey && this.__compScopes[scopeKey]) { if (scopeKey && this.__compScopes[scopeKey]) {
props.__scope = this.__compScopes[scopeKey]; props.__scope = this.__compScopes[scopeKey];
@ -320,24 +331,39 @@ export default class BaseEngine extends Component {
} else if (typeof idx === 'number' && !props.key) { } else if (typeof idx === 'number' && !props.key) {
props.key = idx; props.key = idx;
} }
const renderComp = props => ( props.__id = schema.id;
<Comp {...props}>
{(!isFileSchema(schema) && let Child = null;
!!schema.children && if (!isFileSchema(schema) && schema.children) {
Child = this.__createVirtualDom(
isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children,
self,
{
schema,
Comp,
},
);
}
const renderComp = (props) => engine.createElement(
Comp,
props,
(!isFileSchema(schema)
&& !!schema.children
&&
this.__createVirtualDom( this.__createVirtualDom(
isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children, isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children,
self, self,
{ {
schema, schema,
Comp Comp,
} },
)) || )) ||
null} null,
</Comp>
); );
//设计模式下的特殊处理 // 设计模式下的特殊处理
if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) { if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
//对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器 // 对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
if (OVERLAY_LIST.includes(schema.componentName)) { if (OVERLAY_LIST.includes(schema.componentName)) {
const { ref, ...overlayProps } = otherProps; const { ref, ...overlayProps } = otherProps;
return ( return (
@ -373,25 +399,24 @@ export default class BaseEngine extends Component {
return schema.loop.map((item, i) => { return schema.loop.map((item, i) => {
const loopSelf = { const loopSelf = {
[itemArg]: item, [itemArg]: item,
[indexArg]: i [indexArg]: i,
}; };
loopSelf.__proto__ = self; loopSelf.__proto__ = self;
return this.__createVirtualDom( return this.__createVirtualDom(
{ {
...schema, ...schema,
loop: undefined loop: undefined,
}, },
loopSelf, loopSelf,
parentInfo, parentInfo,
idx ? `${idx}_${i}` : i idx ? `${idx}_${i}` : i,
); );
}); });
}; };
__createContextDom = (childCtx, currCtx) => { __createContextDom = (childCtx, currCtx, props) => (
return (
<AppContext.Consumer> <AppContext.Consumer>
{context => { {(context) => {
this.context = context; this.context = context;
this.__generateCtx(currCtx); this.__generateCtx(currCtx);
this.__render(); this.__render();
@ -399,23 +424,31 @@ export default class BaseEngine extends Component {
<AppContext.Provider <AppContext.Provider
value={{ value={{
...this.context, ...this.context,
...childCtx ...childCtx,
}} }}
> >
{this.__createDom()} {context.engine.createElement(
props.__components.Page,
{
...props,
ref: this.__getRef,
className: classnames(getFileCssName(props.__schema.fileName), props.className),
__id: props.__schema.id,
},
this.__createDom(),
)}
</AppContext.Provider> </AppContext.Provider>
); );
}} }}
</AppContext.Consumer> </AppContext.Consumer>
); );
};
__parseProps = (props, self, path, info) => { __parseProps = (props, self, path, info) => {
const { schema, Comp, componentInfo = {} } = info; const { schema, Comp, componentInfo = {} } = info;
const propInfo = getValue(componentInfo.props, path); const propInfo = getValue(componentInfo.props, path);
const propType = propInfo && propInfo.extra && propInfo.extra.propType; const propType = propInfo && propInfo.extra && propInfo.extra.propType;
const ignoreParse = schema.__ignoreParse || []; const ignoreParse = schema.__ignoreParse || [];
const checkProps = value => { const checkProps = (value) => {
if (!propType) return value; if (!propType) return value;
return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined; return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined;
}; };
@ -423,7 +456,7 @@ export default class BaseEngine extends Component {
const parseReactNode = (data, params) => { const parseReactNode = (data, params) => {
if (isEmpty(params)) { if (isEmpty(params)) {
return checkProps(this.__createVirtualDom(data, self, { schema, Comp })); return checkProps(this.__createVirtualDom(data, self, { schema, Comp }));
} else { }
return checkProps(function() { return checkProps(function() {
const args = {}; const args = {};
if (Array.isArray(params) && params.length) { if (Array.isArray(params) && params.length) {
@ -438,12 +471,11 @@ export default class BaseEngine extends Component {
args.__proto__ = self; args.__proto__ = self;
return self.__createVirtualDom(data, args, { schema, Comp }); return self.__createVirtualDom(data, args, { schema, Comp });
}); });
}
}; };
// 判断是否需要解析变量 // 判断是否需要解析变量
if ( if (
ignoreParse.some(item => { ignoreParse.some((item) => {
if (item instanceof RegExp) { if (item instanceof RegExp) {
return item.test(path); return item.test(path);
} }
@ -469,11 +501,14 @@ export default class BaseEngine extends Component {
// 兼容通过componentInfo判断的情况 // 兼容通过componentInfo判断的情况
if (isSchema(props)) { if (isSchema(props)) {
return parseReactNode(props); return parseReactNode(props);
} else if (Array.isArray(props)) { }
if (Array.isArray(props)) {
return checkProps(props.map((item, idx) => this.__parseProps(item, self, path ? `${path}.${idx}` : idx, info))); return checkProps(props.map((item, idx) => this.__parseProps(item, self, path ? `${path}.${idx}` : idx, info)));
} else if (typeof props === 'function') { }
if (typeof props === 'function') {
return checkProps(props.bind(self)); return checkProps(props.bind(self));
} else if (props && typeof props === 'object') { }
if (props && typeof props === 'object') {
if (props.$$typeof) return checkProps(props); if (props.$$typeof) return checkProps(props);
const res = {}; const res = {};
forEach(props, (val, key) => { forEach(props, (val, key) => {
@ -484,7 +519,8 @@ export default class BaseEngine extends Component {
res[key] = this.__parseProps(val, self, path ? `${path}.${key}` : key, info); res[key] = this.__parseProps(val, self, path ? `${path}.${key}` : key, info);
}); });
return checkProps(res); return checkProps(res);
} else if (typeof props === 'string') { }
if (typeof props === 'string') {
return checkProps(props.trim()); return checkProps(props.trim());
} }
return checkProps(props); return checkProps(props);
@ -493,15 +529,19 @@ export default class BaseEngine extends Component {
get utils() { get utils() {
return this.appHelper && this.appHelper.utils; return this.appHelper && this.appHelper.utils;
} }
get constants() { get constants() {
return this.appHelper && this.appHelper.constants; return this.appHelper && this.appHelper.constants;
} }
get history() { get history() {
return this.appHelper && this.appHelper.history; return this.appHelper && this.appHelper.history;
} }
get location() { get location() {
return this.appHelper && this.appHelper.location; return this.appHelper && this.appHelper.location;
} }
get match() { get match() {
return this.appHelper && this.appHelper.match; return this.appHelper && this.appHelper.match;
} }

16
packages/rax-render/src/engine/blockEngine.jsx
View File

@ -9,15 +9,17 @@ const debug = Debug('engine:block');
export default class BlockEngine extends BaseEngine { export default class BlockEngine extends BaseEngine {
static dislayName = 'block-engine'; static dislayName = 'block-engine';
static propTypes = { static propTypes = {
__schema: PropTypes.object __schema: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
__schema: {} __schema: {},
}; };
static getDerivedStateFromProps(props, state) { static getDerivedStateFromProps(props, state) {
debug(`block.getDerivedStateFromProps`); debug('block.getDerivedStateFromProps');
const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps; const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
if (func) { if (func) {
return func(props, state); return func(props, state);
@ -39,18 +41,22 @@ export default class BlockEngine extends BaseEngine {
super.getSnapshotBeforeUpdate(...arguments); super.getSnapshotBeforeUpdate(...arguments);
debug(`block.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`); debug(`block.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
} }
async componentDidMount() { async componentDidMount() {
super.componentDidMount(...arguments); super.componentDidMount(...arguments);
debug(`block.componentDidMount - ${this.props.__schema.fileName}`); debug(`block.componentDidMount - ${this.props.__schema.fileName}`);
} }
async componentDidUpdate() { async componentDidUpdate() {
super.componentDidUpdate(...arguments); super.componentDidUpdate(...arguments);
debug(`block.componentDidUpdate - ${this.props.__schema.fileName}`); debug(`block.componentDidUpdate - ${this.props.__schema.fileName}`);
} }
async componentWillUnmount() { async componentWillUnmount() {
super.componentWillUnmount(...arguments); super.componentWillUnmount(...arguments);
debug(`block.componentWillUnmount - ${this.props.__schema.fileName}`); debug(`block.componentWillUnmount - ${this.props.__schema.fileName}`);
} }
async componentDidCatch() { async componentDidCatch() {
await super.componentDidCatch(...arguments); await super.componentDidCatch(...arguments);
debug(`block.componentDidCatch - ${this.props.__schema.fileName}`); debug(`block.componentDidCatch - ${this.props.__schema.fileName}`);
@ -69,13 +75,13 @@ export default class BlockEngine extends BaseEngine {
return ( return (
<div <div
ref={this.__getRef} // ref={this.__getRef}
className={classnames('luna-block', getFileCssName(__schema.fileName), className, this.props.className)} className={classnames('luna-block', getFileCssName(__schema.fileName), className, this.props.className)}
id={id} id={id}
style={style} style={style}
> >
{this.__createContextDom({ {this.__createContextDom({
blockContext: this blockContext: this,
})} })}
</div> </div>
); );

32
packages/rax-render/src/engine/compEngine.jsx
View File

@ -9,15 +9,17 @@ const debug = Debug('engine:comp');
export default class CompEngine extends BaseEngine { export default class CompEngine extends BaseEngine {
static dislayName = 'comp-engine'; static dislayName = 'comp-engine';
static propTypes = { static propTypes = {
__schema: PropTypes.object __schema: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
__schema: {} __schema: {},
}; };
static getDerivedStateFromProps(props, state) { static getDerivedStateFromProps(props, state) {
debug(`comp.getDerivedStateFromProps`); debug('comp.getDerivedStateFromProps');
const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps; const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
if (func) { if (func) {
return func(props, state); return func(props, state);
@ -28,7 +30,7 @@ export default class CompEngine extends BaseEngine {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.__generateCtx({ this.__generateCtx({
component: this component: this,
}); });
const schema = props.__schema || {}; const schema = props.__schema || {};
this.state = this.__parseData(schema.state || {}); this.state = this.__parseData(schema.state || {});
@ -41,18 +43,22 @@ export default class CompEngine extends BaseEngine {
super.getSnapshotBeforeUpdate(...arguments); super.getSnapshotBeforeUpdate(...arguments);
debug(`comp.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`); debug(`comp.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
} }
async componentDidMount() { async componentDidMount() {
super.componentDidMount(...arguments); super.componentDidMount(...arguments);
debug(`comp.componentDidMount - ${this.props.__schema.fileName}`); debug(`comp.componentDidMount - ${this.props.__schema.fileName}`);
} }
async componentDidUpdate() { async componentDidUpdate() {
super.componentDidUpdate(...arguments); super.componentDidUpdate(...arguments);
debug(`comp.componentDidUpdate - ${this.props.__schema.fileName}`); debug(`comp.componentDidUpdate - ${this.props.__schema.fileName}`);
} }
async componentWillUnmount() { async componentWillUnmount() {
super.componentWillUnmount(...arguments); super.componentWillUnmount(...arguments);
debug(`comp.componentWillUnmount - ${this.props.__schema.fileName}`); debug(`comp.componentWillUnmount - ${this.props.__schema.fileName}`);
} }
async componentDidCatch(e) { async componentDidCatch(e) {
super.componentDidCatch(...arguments); super.componentDidCatch(...arguments);
debug(`comp.componentDidCatch - ${this.props.__schema.fileName}`); debug(`comp.componentDidCatch - ${this.props.__schema.fileName}`);
@ -67,23 +73,25 @@ export default class CompEngine extends BaseEngine {
debug(`comp.render - ${__schema.fileName}`); debug(`comp.render - ${__schema.fileName}`);
const { id, className, style, noContainer } = this.__parseData(__schema.props); const {
id, className, style, noContainer
} = this.__parseData(__schema.props);
if (noContainer) { if (noContainer) {
return this.__createContextDom( return this.__createContextDom(
{ {
compContext: this, compContext: this,
blockContext: this blockContext: this,
}, },
{ {
component: this component: this,
} },
); );
} }
return ( return (
<div <div
ref={this.__getRef} // ref={this.__getRef}
className={classnames('luna-comp', getFileCssName(__schema.fileName), className, this.props.className)} className={classnames('luna-comp', getFileCssName(__schema.fileName), className, this.props.className)}
id={this.props.id || id} id={this.props.id || id}
style={{ ...style, ...this.props.style }} style={{ ...style, ...this.props.style }}
@ -91,11 +99,11 @@ export default class CompEngine extends BaseEngine {
{this.__createContextDom( {this.__createContextDom(
{ {
compContext: this, compContext: this,
blockContext: this blockContext: this,
}, },
{ {
component: this component: this,
} },
)} )}
</div> </div>
); );

115
packages/rax-render/src/engine/index.jsx
View File

@ -1,24 +1,43 @@
import { Component, createElement } from 'rax'; /* eslint-disable */
import { Component, createElement as raxCreateElement } from 'rax';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Debug from 'debug'; import Debug from 'debug';
import * as isEmpty from 'lodash/isEmpty'; import * as isEmpty from 'lodash/isEmpty';
import findDOMNode from 'rax-find-dom-node'; import findDOMNode from 'rax-find-dom-node';
import { isFileSchema, goldlog } from '../utils'; import { isFileSchema, goldlog } from '../utils';
import AppContext from '../context/appContext'; import AppContext from '../context/appContext';
import Page from './pageEngine'; import PageEngine from './pageEngine';
import CustomComp from './compEngine'; import ComponentEngine from './compEngine';
import Block from './blockEngine'; import BlockEngine from './blockEngine';
import Temp from './tempEngine'; import TempEngine from './tempEngine';
import BaseEngine from './base';
const debug = Debug('engine:entry'); const debug = Debug('engine:entry');
const ENGINE_COMPS = { const ENGINE_COMPS = {
Page, PageEngine,
Component: CustomComp, ComponentEngine,
Block, BlockEngine,
Temp, TempEngine,
}; };
class FaultComponent extends Component {
render() {
// FIXME: errorlog
console.error('render error', this.props);
return <Div>RenderError</Div>;
}
}
class NotFoundComponent extends Component {
render() {
console.error('component not found', this.props);
return <Div {...this.props} />;
}
}
export default class Engine extends Component { export default class Engine extends Component {
static dislayName = 'engine'; static dislayName = 'engine';
static propTypes = { static propTypes = {
appHelper: PropTypes.object, appHelper: PropTypes.object,
components: PropTypes.object, components: PropTypes.object,
@ -27,8 +46,12 @@ export default class Engine extends Component {
suspended: PropTypes.bool, suspended: PropTypes.bool,
schema: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), schema: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
onCompGetRef: PropTypes.func, onCompGetRef: PropTypes.func,
onCompGetCtx: PropTypes.func onCompGetCtx: PropTypes.func,
customCreateElement: PropTypes.func,
notFoundComponent: PropTypes.element,
faultComponent: PropTypes.element,
}; };
static defaultProps = { static defaultProps = {
appHelper: null, appHelper: null,
components: {}, components: {},
@ -37,7 +60,7 @@ export default class Engine extends Component {
suspended: false, suspended: false,
schema: {}, schema: {},
onCompGetRef: () => {}, onCompGetRef: () => {},
onCompGetCtx: () => {} onCompGetCtx: () => {},
}; };
constructor(props, context) { constructor(props, context) {
@ -51,9 +74,9 @@ export default class Engine extends Component {
'EXP', 'EXP',
{ {
action: 'appear', action: 'appear',
value: !!this.props.designMode value: !!this.props.designMode,
}, },
'engine' 'engine',
); );
debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`); debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
} }
@ -74,15 +97,60 @@ export default class Engine extends Component {
return !nextProps.suspended; return !nextProps.suspended;
} }
__getRef = ref => { getNotFoundComponent() {
const { notFoundComponent } = this.props;
return notFoundComponent || NotFoundComponent;
}
getFaultComponent() {
const { faultComponent } = this.props;
return faultComponent || FaultComponent;
}
__getRef = (ref) => {
const { schema, onCompGetRef } = this.props;
this.__ref = ref; this.__ref = ref;
if (ref) { if (ref) {
this.props.onCompGetRef(this.props.schema, ref, true); onCompGetRef(schema, ref, true);
} }
}; };
patchDidCatch(Comp) {
if (Comp.patchedCatch) {
return;
}
Comp.patchedCatch = true;// eslint-disable-line
Comp.getDerivedStateFromError = (error) => ({ engineRenderError: true, error });// eslint-disable-line
// const engine = this;
const originRender = Comp.prototype.render;
Comp.prototype.render = function() {
if (this.state && this.state.engineRenderError) {
this.state.engineRenderError = false;
return engine.createElement(engine.getFaultComponent(), {
...this.props,
error: this.state.error,
});
}
return originRender.call(this);
};
const originShouldComponentUpdate = Comp.prototype.shouldComponentUpdate;
Comp.prototype.shouldComponentUpdate = (nextProps, nextState) => {// eslint-disable-line
if (nextState && nextState.engineRenderError) {
return true;
}
return originShouldComponentUpdate ? originShouldComponentUpdate.call(this, nextProps, nextState) : true;// eslint-disable-line
};
}
createElement(Comp, props, children) {
const { customCreateElement } = this.props;
// TODO: enable in runtime mode?
this.patchDidCatch(Component);
return (customCreateElement || raxCreateElement)(Comp, props, children);
}
render() { render() {
const { schema, designMode, appHelper, components, componentsMap } = this.props; const { schema, designMode, appHelper, components } = this.props;
if (isEmpty(schema)) { if (isEmpty(schema)) {
return null; return null;
} }
@ -91,15 +159,22 @@ export default class Engine extends Component {
} }
debug('entry.render'); debug('entry.render');
const allComponents = { ...ENGINE_COMPS, ...components }; const allComponents = { ...ENGINE_COMPS, ...components };
const Comp = allComponents[schema.componentName]; const { componentName } = schema;
// const Comp = allComponents[schema.componentName];
let Comp = allComponents[componentName] || ENGINE_COMPS[`${componentName}Engine`];
if (Comp && Comp.prototype) {
// const proto = Comp.prototype;
if (!(Comp.prototype instanceof BaseEngine)) {
Comp = ENGINE_COMPS[`${componentName}Engine`];
}
}
if (Comp) { if (Comp) {
return ( return (
<AppContext.Provider <AppContext.Provider
value={{ value={{
appHelper, appHelper,
components: allComponents, components: allComponents,
componentsMap, engine: this,
engine: this
}} }}
> >
<Comp <Comp
@ -107,9 +182,9 @@ export default class Engine extends Component {
ref={this.__getRef} ref={this.__getRef}
__appHelper={appHelper} __appHelper={appHelper}
__components={allComponents} __components={allComponents}
__componentsMap={componentsMap}
__schema={schema} __schema={schema}
__designMode={designMode} __designMode={designMode}
// __id={schema.id}
{...this.props} {...this.props}
/> />
</AppContext.Provider> </AppContext.Provider>

104
packages/rax-render/src/engine/pageEngine.jsx
View File

@ -2,6 +2,7 @@ import { createElement } from 'rax';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Debug from 'debug'; import Debug from 'debug';
import classnames from 'classnames'; import classnames from 'classnames';
import AppContext from '../context/appContext';
import { isSchema, getFileCssName } from '../utils'; import { isSchema, getFileCssName } from '../utils';
import BaseEngine from './base'; import BaseEngine from './base';
@ -9,15 +10,19 @@ const debug = Debug('engine:page');
export default class PageEngine extends BaseEngine { export default class PageEngine extends BaseEngine {
static dislayName = 'page-engine'; static dislayName = 'page-engine';
static propTypes = { static propTypes = {
__schema: PropTypes.object __schema: PropTypes.object,
};
static defaultProps = {
__schema: {}
}; };
static defaultProps = {
__schema: {},
};
static contextType = AppContext;
static getDerivedStateFromProps(props, state) { static getDerivedStateFromProps(props, state) {
debug(`page.getDerivedStateFromProps`); debug('page.getDerivedStateFromProps');
const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps; const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
if (func) { if (func) {
return func(props, state); return func(props, state);
@ -28,10 +33,11 @@ export default class PageEngine extends BaseEngine {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.__generateCtx({ this.__generateCtx({
page: this page: this,
}); });
const schema = props.__schema || {}; const schema = props.__schema || {};
this.state = this.__parseData(schema.state || {}); this.state = this.__parseData(schema.state || {});
this.__initDataSource(props); this.__initDataSource(props);
this.__setLifeCycleMethods('constructor', arguments); this.__setLifeCycleMethods('constructor', arguments);
@ -42,31 +48,103 @@ export default class PageEngine extends BaseEngine {
super.getSnapshotBeforeUpdate(...arguments); super.getSnapshotBeforeUpdate(...arguments);
debug(`page.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`); debug(`page.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
} }
async componentDidMount() { async componentDidMount() {
super.componentDidMount(...arguments); super.componentDidMount(...arguments);
debug(`page.componentDidMount - ${this.props.__schema.fileName}`); debug(`page.componentDidMount - ${this.props.__schema.fileName}`);
} }
async componentDidUpdate() { async componentDidUpdate() {
super.componentDidUpdate(...arguments); super.componentDidUpdate(...arguments);
debug(`page.componentDidUpdate - ${this.props.__schema.fileName}`); debug(`page.componentDidUpdate - ${this.props.__schema.fileName}`);
} }
async componentWillUnmount() { async componentWillUnmount() {
super.componentWillUnmount(...arguments); super.componentWillUnmount(...arguments);
debug(`page.componentWillUnmount - ${this.props.__schema.fileName}`); debug(`page.componentWillUnmount - ${this.props.__schema.fileName}`);
} }
async componentDidCatch() { async componentDidCatch() {
await super.componentDidCatch(...arguments); await super.componentDidCatch(...arguments);
debug(`page.componentDidCatch - ${this.props.__schema.fileName}`); debug(`page.componentDidCatch - ${this.props.__schema.fileName}`);
} }
render() { render() {
const { __schema } = this.props; const { __schema, __components } = this.props;
if (!isSchema(__schema, true) || __schema.componentName !== 'Page') { if (!isSchema(__schema, true) || __schema.componentName !== 'Page') {
return '页面schema结构异常！'; return '页面schema结构异常！';
} }
debug(`page.render - ${__schema.fileName}`); debug(`page.render - ${__schema.fileName}`);
const { id, className, style } = this.__parseData(__schema.props); const {
id, className, style, autoLoading, defaultHeight = 300, loading
} = this.__parseData(__schema.props);
const { Page } = __components;
if (Page) {
// const { engine } = this.context || {};
return (
<AppContext.Consumer>
{(context) => {
this.context = context;
{
/* this.__generateCtx(currCtx); */
}
this.__render();
return (
<AppContext.Provider
value={{
...this.context,
pageContext: this,
blockContext: this,
}}
>
{this.context.engine.createElement(
Page,
{
...this.props,
ref: this.__getRef,
className: classnames(getFileCssName(__schema.fileName), className, this.props.className),
__id: __schema.id,
},
this.__createDom(),
)}
</AppContext.Provider>
);
}}
</AppContext.Consumer>
);
}
const renderContent = () => (
<AppContext.Provider
value={{
...this.context,
pageContext: this,
blockContext: this,
}}
>
{this.__createDom()}
</AppContext.Provider>
);
// if (autoLoading || loading !== undefined) {
// return (
// <Loading
// size="medium"
// visible={!!(this.__showPlaceholder || loading)}
// style={{
// height: this.__showPlaceholder ? defaultHeight : 'auto',
// display: 'block',
// ...style,
// }}
// className={classnames('luna-page', getFileCssName(__schema.fileName), className, this.props.className)}
// id={id}
// >
// {!this.__showPlaceholder && renderContent()}
// </Loading>
// );
// }
return ( return (
<div <div
@ -75,15 +153,7 @@ export default class PageEngine extends BaseEngine {
id={id} id={id}
style={style} style={style}
> >
{this.__createContextDom( {renderContent()}
{
pageContext: this,
blockContext: this
},
{
page: this
}
)}
</div> </div>
); );
} }

16
packages/rax-render/src/engine/tempEngine.jsx
View File

@ -8,13 +8,15 @@ import BaseEngine from './base';
const debug = Debug('engine:temp'); const debug = Debug('engine:temp');
export default class TempEngine extends BaseEngine { export default class TempEngine extends BaseEngine {
static dislayName = 'temp-engine'; static dislayName = 'temp-engine';
static propTypes = { static propTypes = {
__ctx: PropTypes.object, __ctx: PropTypes.object,
__schema: PropTypes.object __schema: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
__ctx: {}, __ctx: {},
__schema: {} __schema: {},
}; };
constructor(props, context) { constructor(props, context) {
@ -27,7 +29,7 @@ export default class TempEngine extends BaseEngine {
componentDidMount() { componentDidMount() {
const ctx = this.props.__ctx; const ctx = this.props.__ctx;
if (!ctx) return; if (!ctx) return;
const setState = ctx.setState; const { setState } = ctx;
this.cacheSetState = setState; this.cacheSetState = setState;
ctx.setState = (...args) => { ctx.setState = (...args) => {
setState.call(ctx, ...args); setState.call(ctx, ...args);
@ -35,9 +37,11 @@ export default class TempEngine extends BaseEngine {
}; };
debug(`temp.componentDidMount - ${this.props.__schema.fileName}`); debug(`temp.componentDidMount - ${this.props.__schema.fileName}`);
} }
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
debug(`temp.componentDidUpdate - ${this.props.__schema.fileName}`); debug(`temp.componentDidUpdate - ${this.props.__schema.fileName}`);
} }
componentWillUnmount() { componentWillUnmount() {
const ctx = this.props.__ctx; const ctx = this.props.__ctx;
if (!ctx || !this.cacheSetState) return; if (!ctx || !this.cacheSetState) return;
@ -45,6 +49,7 @@ export default class TempEngine extends BaseEngine {
delete this.cacheSetState; delete this.cacheSetState;
debug(`temp.componentWillUnmount - ${this.props.__schema.fileName}`); debug(`temp.componentWillUnmount - ${this.props.__schema.fileName}`);
} }
componentDidCatch(e) { componentDidCatch(e) {
console.warn(e); console.warn(e);
debug(`temp.componentDidCatch - ${this.props.__schema.fileName}`); debug(`temp.componentDidCatch - ${this.props.__schema.fileName}`);
@ -59,7 +64,10 @@ export default class TempEngine extends BaseEngine {
debug(`temp.render - ${__schema.fileName}`); debug(`temp.render - ${__schema.fileName}`);
return ( return (
<div ref={this.__getRef} className="luna-temp"> <div
// ref={this.__getRef}
className="luna-temp"
>
<AppContext.Provider value={{ ...this.context, ...__ctx }}>{this.__createDom()}</AppContext.Provider> <AppContext.Provider value={{ ...this.context, ...__ctx }}>{this.__createDom()}</AppContext.Provider>
</div> </div>
); );

6
packages/rax-render/src/hoc/compWrapper.js
View File

@ -1,13 +1,15 @@
import { createElement, Component } from 'rax'; import { createElement, Component } from 'rax';
export default function(Comp) { export default function (Comp) {
class CompWrapper extends Component { class CompWrapper extends Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
} }
render() { render() {
return <Comp {...this.props} />; return createElement(Comp, {
...this.props,
});
} }
} }

213
packages/rax-render/src/utils/index.js
View File

@ -30,7 +30,9 @@ export const throttle = _throttle;
export const debounce = _debounce; export const debounce = _debounce;
export const serialize = _serialize; export const serialize = _serialize;
export const jsonuri = _jsonuri; export const jsonuri = _jsonuri;
export { get, post, jsonp, mtop, request } from './request'; export {
get, post, jsonp, mtop, request
} from './request';
const ReactIs = require('react-is'); const ReactIs = require('react-is');
@ -43,18 +45,18 @@ const PropTypes2 = factoryWithTypeCheckers(ReactIs.isElement, true);
const EXPRESSION_TYPE = { const EXPRESSION_TYPE = {
JSEXPRESSION: 'JSExpression', JSEXPRESSION: 'JSExpression',
JSFUNCTION: 'JSFunction', JSFUNCTION: 'JSFunction',
JSSLOT: 'JSSlot' JSSLOT: 'JSSlot',
}; };
const EXPRESSION_REG = /^\{\{(\{.*\}|.*?)\}\}$/; const EXPRESSION_REG = /^\{\{(\{.*\}|.*?)\}\}$/;
const hasSymbol = typeof Symbol === 'function' && Symbol['for']; const hasSymbol = typeof Symbol === 'function' && Symbol.for;
const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol['for']('react.forward_ref') : 0xead0; const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
const debug = Debug('utils:index'); const debug = Debug('utils:index');
const ENV = { const ENV = {
TBE: 'TBE', TBE: 'TBE',
WEBIDE: 'WEB-IDE', WEBIDE: 'WEB-IDE',
VSCODE: 'VSCODE', VSCODE: 'VSCODE',
WEB: 'WEB' WEB: 'WEB',
}; };
/** /**
@ -63,7 +65,7 @@ const ENV = {
*/ */
export function isSchema(schema, ignoreArr) { export function isSchema(schema, ignoreArr) {
if (isEmpty(schema)) return false; if (isEmpty(schema)) return false;
if (!ignoreArr && Array.isArray(schema)) return schema.every(item => isSchema(item)); if (!ignoreArr && Array.isArray(schema)) return schema.every((item) => isSchema(item));
return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props))); return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props)));
} }
@ -83,10 +85,10 @@ export function inSameDomain() {
export function getFileCssName(fileName) { export function getFileCssName(fileName) {
if (!fileName) return; if (!fileName) return;
let name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase(); const name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase();
return ('luna-' + name) return `luna-${name}`
.split('-') .split('-')
.filter(p => !!p) .filter((p) => !!p)
.join('-'); .join('-');
} }
@ -97,9 +99,8 @@ export function isJSFunction(obj) {
return obj && typeof obj === 'object' && EXPRESSION_TYPE.JSFUNCTION === obj.type; return obj && typeof obj === 'object' && EXPRESSION_TYPE.JSFUNCTION === obj.type;
} }
export function isJSExpression(obj) { export function isJSExpression(obj) {
//兼容两种写法，有js构造表达式的情况 // 兼容两种写法，有js构造表达式的情况
const isJSExpressionObj = const isJSExpressionObj = obj && typeof obj === 'object' && EXPRESSION_TYPE.JSEXPRESSION === obj.type && typeof obj.value === 'string';
obj && typeof obj === 'object' && EXPRESSION_TYPE.JSEXPRESSION === obj.type && typeof obj.value === 'string';
const isJSExpressionStr = typeof obj === 'string' && EXPRESSION_REG.test(obj.trim()); const isJSExpressionStr = typeof obj === 'string' && EXPRESSION_REG.test(obj.trim());
return isJSExpressionObj || isJSExpressionStr; return isJSExpressionObj || isJSExpressionStr;
} }
@ -109,13 +110,11 @@ export function isJSExpression(obj) {
* @description 等待函数 * @description 等待函数
*/ */
export function wait(ms) { export function wait(ms) {
return new Promise(resolve => setTimeout(() => resolve(true), ms)); return new Promise((resolve) => setTimeout(() => resolve(true), ms));
} }
export function curry(Comp, hocs = []) { export function curry(Comp, hocs = []) {
return hocs.reverse().reduce((pre, cur) => { return hocs.reverse().reduce((pre, cur) => cur(pre), Comp);
return cur(pre);
}, Comp);
} }
/** /**
@ -130,16 +129,14 @@ export function getParentWinValue(key) {
export function getValue(obj, path, defaultValue) { export function getValue(obj, path, defaultValue) {
if (isEmpty(obj) || typeof obj !== 'object') return defaultValue; if (isEmpty(obj) || typeof obj !== 'object') return defaultValue;
const res = path.split('.').reduce((pre, cur) => { const res = path.split('.').reduce((pre, cur) => pre && pre[cur], obj);
return pre && pre[cur];
}, obj);
if (res === undefined) return defaultValue; if (res === undefined) return defaultValue;
return res; return res;
} }
export function parseObj(schemaStr) { export function parseObj(schemaStr) {
if (typeof schemaStr !== 'string') return schemaStr; if (typeof schemaStr !== 'string') return schemaStr;
//默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象 // 默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象
try { try {
if (inSameDomain() && window.parent.__newFunc) { if (inSameDomain() && window.parent.__newFunc) {
return window.parent.__newFunc(`"use strict"; return ${schemaStr}`)(); return window.parent.__newFunc(`"use strict"; return ${schemaStr}`)();
@ -157,7 +154,7 @@ export function parseSearch(search) {
const str = search.replace(/^\?/, ''); const str = search.replace(/^\?/, '');
const paramStr = str.split('&'); const paramStr = str.split('&');
const res = {}; const res = {};
paramStr.forEach(item => { paramStr.forEach((item) => {
const regRes = item.split('='); const regRes = item.split('=');
if (regRes[0] && regRes[1]) { if (regRes[0] && regRes[1]) {
res[regRes[0]] = decodeURIComponent(regRes[1]); res[regRes[0]] = decodeURIComponent(regRes[1]);
@ -172,7 +169,7 @@ export function fastClone(obj) {
// 更新obj的内容但不改变obj的指针 // 更新obj的内容但不改变obj的指针
export function fillObj(receiver = {}, ...suppliers) { export function fillObj(receiver = {}, ...suppliers) {
Object.keys(receiver).forEach(item => { Object.keys(receiver).forEach((item) => {
delete receiver[item]; delete receiver[item];
}); });
Object.assign(receiver, ...suppliers); Object.assign(receiver, ...suppliers);
@ -181,9 +178,7 @@ export function fillObj(receiver = {}, ...suppliers) {
// 中划线转驼峰 // 中划线转驼峰
export function toHump(name) { export function toHump(name) {
return name.replace(/\-(\w)/g, function(all, letter) { return name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
return letter.toUpperCase();
});
} }
// 驼峰转中划线 // 驼峰转中划线
export function toLine(name) { export function toLine(name) {
@ -192,7 +187,7 @@ export function toLine(name) {
// 获取当前环境 // 获取当前环境
export function getEnv() { export function getEnv() {
const userAgent = navigator.userAgent; const { userAgent } = navigator;
const isVscode = /Electron\//.test(userAgent); const isVscode = /Electron\//.test(userAgent);
if (isVscode) return ENV.VSCODE; if (isVscode) return ENV.VSCODE;
const isTheia = window.is_theia === true; const isTheia = window.is_theia === true;
@ -206,12 +201,14 @@ export function getEnv() {
* @param {*} 用户自定义配置 * @param {*} 用户自定义配置
*/ */
export function comboSkeletonConfig(defaultConfig = {}, customConfig) { export function comboSkeletonConfig(defaultConfig = {}, customConfig) {
const { skeleton, theme, addons, hooks, shortCuts, extensions, constants, utils, i18n } = customConfig || {}; const {
skeleton, theme, addons, hooks, shortCuts, extensions, constants, utils, i18n
} = customConfig || {};
if (skeleton && skeleton.handler && typeof skeleton.handler === 'function') { if (skeleton && skeleton.handler && typeof skeleton.handler === 'function') {
return skeleton.handler({ return skeleton.handler({
skeleton, skeleton,
...defaultConfig ...defaultConfig,
}); });
} }
@ -219,37 +216,37 @@ export function comboSkeletonConfig(defaultConfig = {}, customConfig) {
const customShortCuts = transformArrayToMap(shortCuts || [], 'keyboard'); const customShortCuts = transformArrayToMap(shortCuts || [], 'keyboard');
const localeList = ['zh-CN', 'zh-TW', 'en-US', 'ja-JP']; const localeList = ['zh-CN', 'zh-TW', 'en-US', 'ja-JP'];
const i18nConfig = {}; const i18nConfig = {};
localeList.forEach(key => { localeList.forEach((key) => {
i18nConfig[key] = { i18nConfig[key] = {
...(defaultConfig.i18n && defaultConfig.i18n[key]), ...(defaultConfig.i18n && defaultConfig.i18n[key]),
...(i18n && i18n[key]) ...(i18n && i18n[key]),
}; };
}); });
return { return {
skeleton, skeleton,
theme: { theme: {
...defaultConfig.theme, ...defaultConfig.theme,
...theme ...theme,
}, },
addons: { addons: {
...defaultConfig.addons, ...defaultConfig.addons,
...addons ...addons,
}, },
hooks: [...(defaultConfig.hooks || []), ...(hooks || [])], hooks: [...(defaultConfig.hooks || []), ...(hooks || [])],
shortCuts: Object.values({ shortCuts: Object.values({
...defaultShortCuts, ...defaultShortCuts,
...customShortCuts ...customShortCuts,
}), }),
extensions: { extensions: {
...defaultConfig.extensions, ...defaultConfig.extensions,
...extensions ...extensions,
}, },
constants: { constants: {
...defaultConfig.constants, ...defaultConfig.constants,
...constants ...constants,
}, },
utils: [...(defaultConfig.utils || []), ...(utils || [])], utils: [...(defaultConfig.utils || []), ...(utils || [])],
i18n: i18nConfig i18n: i18nConfig,
}; };
} }
@ -271,9 +268,7 @@ export function generateI18n(locale = 'zh-CN', messages = {}) {
* @param {*} Comp 需要判断的组件 * @param {*} Comp 需要判断的组件
*/ */
export function acceptsRef(Comp) { export function acceptsRef(Comp) {
return ( return !!Comp;
(Comp.$$typeof && Comp.$$typeof === REACT_FORWARD_REF_TYPE) || (Comp.prototype && Comp.prototype.isReactComponent)
);
} }
/** /**
@ -288,7 +283,7 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
const goKey = serializeParams({ const goKey = serializeParams({
sdkVersion: pkg.version, sdkVersion: pkg.version,
env: getEnv(), env: getEnv(),
...params ...params,
}); });
if (sendIDEMessage) { if (sendIDEMessage) {
sendIDEMessage({ sendIDEMessage({
@ -296,8 +291,8 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
data: { data: {
logKey: `/iceluna.core.${logKey}`, logKey: `/iceluna.core.${logKey}`,
gmKey, gmKey,
goKey goKey,
} },
}); });
} }
window.goldlog && window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST'); window.goldlog && window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
@ -307,7 +302,7 @@ export function goldlog(gmKey, params = {}, logKey = 'other') {
export function generateUtils(utils, utilsConfig) { export function generateUtils(utils, utilsConfig) {
if (!Array.isArray(utilsConfig)) return { ...utils }; if (!Array.isArray(utilsConfig)) return { ...utils };
const res = {}; const res = {};
utilsConfig.forEach(item => { utilsConfig.forEach((item) => {
if (!item.name || !item.type || !item.content) return; if (!item.name || !item.type || !item.content) return;
if (item.type === 'function' && typeof item.content === 'function') { if (item.type === 'function' && typeof item.content === 'function') {
res[item.name] = item.content; res[item.name] = item.content;
@ -327,7 +322,7 @@ export function setClipboardData(str) {
.then(() => { .then(() => {
resolve(); resolve();
}) })
.catch(err => { .catch((err) => {
reject('复制失败，请重试！', err); reject('复制失败，请重试！', err);
}); });
} else { } else {
@ -337,7 +332,7 @@ export function setClipboardData(str) {
textArea.focus(); textArea.focus();
textArea.select(); textArea.select();
try { try {
let successful = document.execCommand('copy'); const successful = document.execCommand('copy');
if (successful) { if (successful) {
document.body.removeChild(textArea); document.body.removeChild(textArea);
resolve(); resolve();
@ -357,10 +352,10 @@ export function getClipboardData() {
} else if (navigator.clipboard) { } else if (navigator.clipboard) {
return navigator.clipboard return navigator.clipboard
.readText() .readText()
.then(res => { .then((res) => {
resolve(res); resolve(res);
}) })
.catch(err => { .catch((err) => {
reject('粘贴板获取失败', err); reject('粘贴板获取失败', err);
}); });
} else { } else {
@ -382,14 +377,15 @@ export function transformToPromise(input) {
export function moveArrayItem(arr, sourceIdx, distIdx, direction) { export function moveArrayItem(arr, sourceIdx, distIdx, direction) {
if ( if (
!Array.isArray(arr) || !Array.isArray(arr)
sourceIdx === distIdx || || sourceIdx === distIdx
sourceIdx < 0 || || sourceIdx < 0
sourceIdx >= arr.length || || sourceIdx >= arr.length
distIdx < 0 || || distIdx < 0
distIdx >= arr.length || distIdx >= arr.length
) ) {
return arr; return arr;
}
const item = arr[sourceIdx]; const item = arr[sourceIdx];
if (direction === 'after') { if (direction === 'after') {
arr.splice(distIdx + 1, 0, item); arr.splice(distIdx + 1, 0, item);
@ -407,7 +403,7 @@ export function moveArrayItem(arr, sourceIdx, distIdx, direction) {
export function transformArrayToMap(arr, key, overwrite = true) { export function transformArrayToMap(arr, key, overwrite = true) {
if (isEmpty(arr) || !Array.isArray(arr)) return {}; if (isEmpty(arr) || !Array.isArray(arr)) return {};
const res = {}; const res = {};
arr.forEach(item => { arr.forEach((item) => {
const curKey = item[key]; const curKey = item[key];
if (item[key] === undefined) return; if (item[key] === undefined) return;
if (res[curKey] && !overwrite) return; if (res[curKey] && !overwrite) return;
@ -426,13 +422,13 @@ export function checkPropTypes(value, name, rule, componentName) {
} }
const err = rule( const err = rule(
{ {
[name]: value [name]: value,
}, },
name, name,
componentName, componentName,
'prop', 'prop',
null, null,
ReactPropTypesSecret ReactPropTypesSecret,
); );
if (err) { if (err) {
console.warn(err); console.warn(err);
@ -441,10 +437,11 @@ export function checkPropTypes(value, name, rule, componentName) {
} }
export function transformSchemaToPure(obj) { export function transformSchemaToPure(obj) {
const pureObj = obj => { const pureObj = (obj) => {
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
return obj.map(item => pureObj(item)); return obj.map((item) => pureObj(item));
} else if (typeof obj === 'object') { }
if (typeof obj === 'object') {
// 对于undefined及null直接返回 // 对于undefined及null直接返回
if (!obj) return obj; if (!obj) return obj;
const res = {}; const res = {};
@ -460,10 +457,11 @@ export function transformSchemaToPure(obj) {
} }
export function transformSchemaToStandard(obj) { export function transformSchemaToStandard(obj) {
const standardObj = obj => { const standardObj = (obj) => {
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
return obj.map(item => standardObj(item)); return obj.map((item) => standardObj(item));
} else if (typeof obj === 'object') { }
if (typeof obj === 'object') {
// 对于undefined及null直接返回 // 对于undefined及null直接返回
if (!obj) return obj; if (!obj) return obj;
const res = {}; const res = {};
@ -472,7 +470,7 @@ export function transformSchemaToStandard(obj) {
if (isSchema(val) && key !== 'children' && obj.type !== 'JSSlot') { if (isSchema(val) && key !== 'children' && obj.type !== 'JSSlot') {
res[key] = { res[key] = {
type: 'JSSlot', type: 'JSSlot',
value: standardObj(val) value: standardObj(val),
}; };
// table特殊处理 // table特殊处理
if (key === 'cell') { if (key === 'cell') {
@ -483,16 +481,18 @@ export function transformSchemaToStandard(obj) {
} }
}); });
return res; return res;
} else if (typeof obj === 'function') { }
if (typeof obj === 'function') {
return { return {
type: 'JSFunction', type: 'JSFunction',
value: obj.toString() value: obj.toString(),
}; };
} else if (typeof obj === 'string' && EXPRESSION_REG.test(obj.trim())) { }
if (typeof obj === 'string' && EXPRESSION_REG.test(obj.trim())) {
const regRes = obj.trim().match(EXPRESSION_REG); const regRes = obj.trim().match(EXPRESSION_REG);
return { return {
type: 'JSExpression', type: 'JSExpression',
value: (regRes && regRes[1]) || '' value: (regRes && regRes[1]) || '',
}; };
} }
return obj; return obj;
@ -504,9 +504,8 @@ export function transformStringToFunction(str) {
if (typeof str !== 'string') return str; if (typeof str !== 'string') return str;
if (inSameDomain() && window.parent.__newFunc) { if (inSameDomain() && window.parent.__newFunc) {
return window.parent.__newFunc(`"use strict"; return ${str}`)(); return window.parent.__newFunc(`"use strict"; return ${str}`)();
} else {
return new Function(`"use strict"; return ${str}`)();
} }
return new Function(`"use strict"; return ${str}`)();
} }
export function addCssTag(id, content) { export function addCssTag(id, content) {
@ -524,11 +523,11 @@ export function addCssTag(id, content) {
// 注册快捷 // 注册快捷
export function registShortCuts(config, appHelper) { export function registShortCuts(config, appHelper) {
const keyboardFilter = (keymaster.filter = event => { const keyboardFilter = (keymaster.filter = (event) => {
const eTarget = event.target || event.srcElement; const eTarget = event.target || event.srcElement;
const tagName = eTarget.tagName; const { tagName } = eTarget;
const isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'); const isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
const isContenteditable = target => { const isContenteditable = (target) => {
while (target) { while (target) {
if (target.contentEditable === 'true') return true; if (target.contentEditable === 'true') return true;
target = target.parentNode; target = target.parentNode;
@ -536,24 +535,23 @@ export function registShortCuts(config, appHelper) {
return false; return false;
}; };
if (isInput || isContenteditable(eTarget)) { if (isInput || isContenteditable(eTarget)) {
if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); //禁止触发chrome原生的页面保存或查找 if (event.metaKey === true && [70, 83].includes(event.keyCode)) event.preventDefault(); // 禁止触发chrome原生的页面保存或查找
return false; return false;
} else {
return true;
} }
return true;
}); });
const ideMessage = appHelper.utils && appHelper.utils.ideMessage; const ideMessage = appHelper.utils && appHelper.utils.ideMessage;
//复制 // 复制
if (!document.copyListener) { if (!document.copyListener) {
document.copyListener = e => { document.copyListener = (e) => {
if (!keyboardFilter(e) || appHelper.isCopying) return; if (!keyboardFilter(e) || appHelper.isCopying) return;
const schema = appHelper.schemaHelper && appHelper.schemaHelper.schemaMap[appHelper.activeKey]; const schema = appHelper.schemaHelper && appHelper.schemaHelper.schemaMap[appHelper.activeKey];
if (!schema || !isSchema(schema)) return; if (!schema || !isSchema(schema)) return;
appHelper.isCopying = true; appHelper.isCopying = true;
const schemaStr = serialize(transformSchemaToPure(schema), { const schemaStr = serialize(transformSchemaToPure(schema), {
unsafe: true unsafe: true,
}); });
setClipboardData(schemaStr) setClipboardData(schemaStr)
.then(() => { .then(() => {
@ -561,7 +559,7 @@ export function registShortCuts(config, appHelper) {
appHelper.emit('schema.copy', schemaStr, schema); appHelper.emit('schema.copy', schemaStr, schema);
appHelper.isCopying = false; appHelper.isCopying = false;
}) })
.catch(errMsg => { .catch((errMsg) => {
ideMessage && ideMessage('error', errMsg); ideMessage && ideMessage('error', errMsg);
appHelper.isCopying = false; appHelper.isCopying = false;
}); });
@ -572,16 +570,16 @@ export function registShortCuts(config, appHelper) {
} }
} }
//粘贴 // 粘贴
if (!document.pasteListener) { if (!document.pasteListener) {
const doPaste = (e, text) => { const doPaste = (e, text) => {
if (!keyboardFilter(e) || appHelper.isPasting) return; if (!keyboardFilter(e) || appHelper.isPasting) return;
const schemaHelper = appHelper.schemaHelper; const { schemaHelper } = appHelper;
let targetKey = appHelper.activeKey; let targetKey = appHelper.activeKey;
let direction = 'after'; let direction = 'after';
const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey; const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
if (!targetKey || topKey === targetKey) { if (!targetKey || topKey === targetKey) {
const schemaHelper = appHelper.schemaHelper; const { schemaHelper } = appHelper;
const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey; const topKey = schemaHelper.schema && schemaHelper.schema.__ctx && schemaHelper.schema.__ctx.lunaKey;
if (!topKey) return; if (!topKey) return;
targetKey = topKey; targetKey = topKey;
@ -599,36 +597,36 @@ export function registShortCuts(config, appHelper) {
appHelper.emit('material.add', { appHelper.emit('material.add', {
schema, schema,
targetKey, targetKey,
direction direction,
}); });
appHelper.isPasting = false; appHelper.isPasting = false;
appHelper.emit('schema.paste', schema); appHelper.emit('schema.paste', schema);
}; };
document.pasteListener = e => { document.pasteListener = (e) => {
const clipboardData = e.clipboardData || window.clipboardData; const clipboardData = e.clipboardData || window.clipboardData;
const text = clipboardData && clipboardData.getData('text'); const text = clipboardData && clipboardData.getData('text');
doPaste(e, text); doPaste(e, text);
}; };
document.addEventListener('paste', document.pasteListener); document.addEventListener('paste', document.pasteListener);
if (getParentWinValue('vscode')) { if (getParentWinValue('vscode')) {
keymaster('command+v', e => { keymaster('command+v', (e) => {
const sendIDEMessage = getParentWinValue('sendIDEMessage'); const sendIDEMessage = getParentWinValue('sendIDEMessage');
sendIDEMessage && sendIDEMessage
sendIDEMessage({ && sendIDEMessage({
action: 'readClipboard' action: 'readClipboard',
}) })
.then(text => { .then((text) => {
doPaste(e, text); doPaste(e, text);
}) })
.catch(err => { .catch((err) => {
console.warn(err); console.warn(err);
}); });
}); });
} }
} }
(config || []).forEach(item => { (config || []).forEach((item) => {
keymaster(item.keyboard, ev => { keymaster(item.keyboard, (ev) => {
ev.preventDefault(); ev.preventDefault();
item.handler(ev, appHelper, keymaster); item.handler(ev, appHelper, keymaster);
}); });
@ -637,7 +635,7 @@ export function registShortCuts(config, appHelper) {
// 取消注册快捷 // 取消注册快捷
export function unRegistShortCuts(config) { export function unRegistShortCuts(config) {
(config || []).forEach(item => { (config || []).forEach((item) => {
keymaster.unbind(item.keyboard); keymaster.unbind(item.keyboard);
}); });
if (getParentWinValue('vscode')) { if (getParentWinValue('vscode')) {
@ -657,13 +655,17 @@ export function unRegistShortCuts(config) {
export function parseData(schema, self) { export function parseData(schema, self) {
if (isJSExpression(schema)) { if (isJSExpression(schema)) {
return parseExpression(schema, self); return parseExpression(schema, self);
} else if (typeof schema === 'string') { }
if (typeof schema === 'string') {
return schema.trim(); return schema.trim();
} else if (Array.isArray(schema)) { }
return schema.map(item => parseData(item, self)); if (Array.isArray(schema)) {
} else if (typeof schema === 'function') { return schema.map((item) => parseData(item, self));
}
if (typeof schema === 'function') {
return schema.bind(self); return schema.bind(self);
} else if (typeof schema === 'object') { }
if (typeof schema === 'object') {
// 对于undefined及null直接返回 // 对于undefined及null直接返回
if (!schema) return schema; if (!schema) return schema;
const res = {}; const res = {};
@ -676,13 +678,13 @@ export function parseData(schema, self) {
return schema; return schema;
} }
/*全匹配{{开头,}}结尾的变量表达式，或者对象类型JSExpression，且均不支持省略this */ /* 全匹配{{开头,}}结尾的变量表达式，或者对象类型JSExpression，且均不支持省略this */
export function parseExpression(str, self) { export function parseExpression(str, self) {
try { try {
const contextArr = ['"use strict";', 'var __self = arguments[0];']; const contextArr = ['"use strict";', 'var __self = arguments[0];'];
contextArr.push('return '); contextArr.push('return ');
let tarStr; let tarStr;
//向前兼容，支持标准协议新格式 // 向前兼容，支持标准协议新格式
if (typeof str === 'string') { if (typeof str === 'string') {
const regRes = str.trim().match(EXPRESSION_REG); const regRes = str.trim().match(EXPRESSION_REG);
tarStr = regRes[1]; tarStr = regRes[1];
@ -691,7 +693,7 @@ export function parseExpression(str, self) {
} }
tarStr = tarStr.replace(/this(\W|$)/g, (a, b) => `__self${b}`); tarStr = tarStr.replace(/this(\W|$)/g, (a, b) => `__self${b}`);
tarStr = contextArr.join('\n') + tarStr; tarStr = contextArr.join('\n') + tarStr;
//默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象 // 默认调用顶层窗口的parseObj,保障new Function的window对象是顶层的window对象
if (inSameDomain() && window.parent.__newFunc) { if (inSameDomain() && window.parent.__newFunc) {
return window.parent.__newFunc(tarStr)(self); return window.parent.__newFunc(tarStr)(self);
} }
@ -707,12 +709,13 @@ export function parseExpression(str, self) {
* @param {*} componentInfo * @param {*} componentInfo
*/ */
export function hasReactNodeFuncProps(componentInfo) { export function hasReactNodeFuncProps(componentInfo) {
const isReactNodeFuncProps = config => { const isReactNodeFuncProps = (config) => {
if (config.type === 'ReactNode') { if (config.type === 'ReactNode') {
return config.props && config.props.type === 'function'; return config.props && config.props.type === 'function';
} else if (config.type === 'Mixin') { }
if (config.type === 'Mixin') {
return config.props && config.props.reactNodeProps && config.props.reactNodeProps.type === 'function'; return config.props && config.props.reactNodeProps && config.props.reactNodeProps.type === 'function';
} }
}; };
return componentInfo && (componentInfo.props || []).some(item => isReactNodeFuncProps(item)); return componentInfo && (componentInfo.props || []).some((item) => isReactNodeFuncProps(item));
} }

21
packages/rax-simulator-renderer/build.json Normal file
View File

@ -0,0 +1,21 @@
{
"plugins": [
[
"build-plugin-rax-component",
{
"type": "rax",
"targets": ["web"]
}
],
[
"build-plugin-component",
{
"filename": "rax-simulator-renderer",
"library": "SimulatorRenderer",
"libraryExport": "default",
"libraryTarget": "umd"
}
],
"./build.plugin.js"
]
}

0
packages/rax-simulator-renderer/build.plugin.js Normal file
View File

53
packages/rax-simulator-renderer/package.json Normal file
View File

@ -0,0 +1,53 @@
{
"private": true,
"name": "@ali/lowcode-rax-simulator-renderer",
"version": "0.8.29",
"description": "rax simulator renderer for alibaba lowcode designer",
"main": "lib/index.js",
"module": "es/index.js",
"license": "MIT",
"files": [],
"scripts": {
"cloud-build": "build-scripts build --skip-demo",
"test": "ava",
"test:snapshot": "ava --update-snapshots"
},
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-react-renderer": "^0.8.12",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/recore-rax": "^1.2.4",
"@ali/vu-css-style": "^1.0.2",
"@recore/obx": "^1.0.8",
"@recore/obx-react": "^1.0.7",
"classnames": "^2.2.6",
"driver-universal": "^3.1.3",
"lodash": "^4.17.19",
"react": "^16",
"react-dom": "^16.7.0"
},
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
"@recore/obx": "^1.0.8",
"@types/classnames": "^2.2.7",
"@types/node": "^13.7.1",
"@types/rax": "^1.0.0",
"@types/react": "^16",
"@types/react-dom": "^16",
"build-plugin-component": "^0.2.11"
},
"peerDependencies": {
"rax": "^1.1.0"
},
"ava": {
"compileEnhancements": false,
"snapshotDir": "test/fixtures/__snapshots__",
"extensions": [
"ts"
],
"require": [
"ts-node/register"
]
}
}

226
packages/rax-simulator-renderer/src/builtin-components/Leaf/index.tsx Normal file
View File

@ -0,0 +1,226 @@
import { Component, createElement } from 'rax';
import findDOMNode from 'rax-find-dom-node';
import { each, get, omit } from 'lodash';
import { getView, setNativeNode, createNodeStyleSheet } from '../renderUtils';
import { FaultComponent, HiddenComponent, UnknownComponent } from '../UnusualComponent';
export interface ILeaf {
leaf: any;
}
export default class Leaf extends Component<ILeaf, {}> {
static displayName = 'Leaf';
state = {
hasError: false,
};
willDetach: any[];
styleSheet: any;
context: any;
refs: any;
componentWillMount() {
const { leaf } = this.props;
this.willDetach = [
leaf.onPropsChange(() => {
// 强制刷新
this.setState(this.state);
}),
leaf.onChildrenChange(() => {
// 强制刷新
this.setState(this.state);
}),
leaf.onStatusChange((status: { dropping: boolean }, field: string) => {
// console.log({...status}, field)
if (status.dropping !== false) {
// 当 dropping 为 Insertion 对象时，强制渲染会出错，原因待查
return;
}
if (field === 'dragging' || field === 'dropping' || field === 'pseudo' || field === 'visibility') {
// 强制刷新
this.setState(this.state);
}
}),
];
/**
* while props replaced
* bind the new event on it
*/
leaf.onPropsReplace(() => {
this.willDetach[0]();
this.willDetach[0] = leaf.onPropsChange(() => {
// 强制刷新
this.setState(this.state);
});
});
}
componentDidMount() {
this.modifyDOM();
}
shouldComponentUpdate() {
// forceUpdate 的替代方案
return true;
// const pageCanRefresh = this.leaf.getPage().canRefresh();
// if (pageCanRefresh) {
// return pageCanRefresh;
// }
// const getExtProps = obj => {
// const { leaf, ...props } = obj;
// return props;
// };
// return !shallowEqual(getExtProps(this.props), getExtProps(nextProps));
}
componentDidUpdate() {
this.modifyDOM();
}
componentWillUnmount() {
if (this.willDetach) {
this.willDetach.forEach((off) => off());
}
setNativeNode(this.props.leaf, null);
}
componentDidCatch() {
this.setState({ hasError: true }, () => {
console.log('error');
});
}
modifyDOM() {
const shell = findDOMNode(this);
const { leaf } = this.props;
// 与 React 不同，rax 的 findDOMNode 找不到节点时，
// shell 会是 <!-- empty -->，而不是 null，
// 所以这里进行是否为注释的判断
if (shell && shell.nodeType !== window.Node.COMMENT_NODE) {
setNativeNode(leaf, shell);
if (leaf.getStatus('dragging')) {
get(shell, 'classList').add('engine-dragging');
} else {
get(shell, 'classList').remove('engine-dragging');
}
each(get(shell, 'classList'), (cls) => {
if (cls.substring(0, 8) === '-pseudo-') {
get(shell, 'classList').remove(cls);
}
});
const pseudo = leaf.getStatus('pseudo');
if (pseudo) {
get(shell, 'classList').add(`-pseudo-${pseudo}`);
}
} else {
setNativeNode(leaf, null);
}
}
render() {
const props = omit(this.props, ['leaf']);
const { leaf } = this.props;
const componentName = leaf.getComponentName();
const View = getView(componentName);
const newProps = {
_componentName: componentName,
};
if (!View) {
return createElement(UnknownComponent, {
// _componentName: componentName,
...newProps,
});
}
let staticProps = {
...leaf.getStaticProps(false),
...props,
_componentName: componentName,
_leaf: leaf,
componentId: leaf.getId(),
};
if (!leaf.isVisibleInPane()) {
return null;
}
if (!leaf.isVisible()) {
return createElement(HiddenComponent, {
...staticProps,
});
}
if (this.state.hasError) {
return createElement(FaultComponent, {
// _componentName: componentName,
...newProps,
});
}
if (this.styleSheet) {
this.styleSheet.parentNode.removeChild(this.styleSheet);
}
this.styleSheet = createNodeStyleSheet(staticProps);
if (leaf.ableToModifyChildren()) {
const children = leaf
.getChildren()
.filter((child: any) => child.getComponentName() !== 'Slot')
.map((child: any) =>
createElement(Leaf, {
key: child.getId(),
leaf: child,
}),
);
// const insertion = leaf.getStatus('dropping');
// InsertionGhost 都是React节点,用Rax渲染会报错，后面这些节点需要通过Rax组件来实现
// if (children.length < 1 && insertion && insertion.getIndex() !== null) {
// //children = [];
// children = [<InsertionGhost key="insertion" />];
// } else if (insertion && insertion.isNearEdge()) {
// if (insertion.isNearAfter()) {
// children.push(<InsertionGhost key="insertion" />);
// } else {
// children.unshift(<InsertionGhost key="insertion" />);
// }
// }
staticProps = {
...staticProps,
...this.processSlots(this.props.leaf.getChildren()),
};
return createElement(
View,
{
...staticProps,
},
children,
);
}
return createElement(View, {
...staticProps,
});
}
processSlots(children: Rax.RaxNodeArray) {
const slots: any = {};
children &&
children.length &&
children.forEach((child: any) => {
if (child.getComponentName() === 'Slot') {
slots[child.getPropValue('slotName')] = <Leaf key={child.getId()} leaf={child} />;
}
});
return slots;
}
}

0
packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.less Normal file
View File

34
packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Component } from 'rax';
import lg from '@ali/vu-logger';
import './index.less';
export class UnknownComponent extends Component {
props: {
_componentName: string;
};
render() {
lg.log('ERROR_NO_COMPONENT_VIEW');
lg.error('Error component information:', this.props);
return <div className="engine-unknow-component">组件 {this.props._componentName} 无视图，请打开控制台排查</div>;
}
}
export class FaultComponent extends Component {
props: {
_componentName: string;
};
render() {
return <div className="engine-fault-component">组件 {this.props._componentName} 渲染错误，请打开控制台排查</div>;
}
}
export class HiddenComponent extends Component {
render() {
return <div className="engine-hidden-component">在本页面不显示</div>;
}
}
export default { FaultComponent, HiddenComponent, UnknownComponent };

82
packages/rax-simulator-renderer/src/builtin-components/renderUtils.ts Normal file
View File

@ -0,0 +1,82 @@
import isObject from 'lodash/isObject';
import { toCss } from '@ali/vu-css-style';
const engine = (window as any).VisualEngine;
const { Trunk, Viewport } = engine;
export const NativeNodeCache: any = {};
function ucfirst(s: string) {
return s.charAt(0).toUpperCase() + s.substring(1);
}
export function shallowEqual(obj: { [key: string]: string }, tObj: { [key: string]: string }) {
for (const i in obj) {
if (Object.prototype.hasOwnProperty.call(obj, i) && obj[i] !== tObj[i]) {
return false;
}
}
return true;
}
export function createNodeStyleSheet(props: any) {
if (props && props.fieldId) {
let styleProp = props.__style__;
if (isObject(styleProp)) {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const s = document.createElement('style');
const cssId = '_style_pesudo_' + props.fieldId;
const cssClass = '_css_pesudo_' + props.fieldId;
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
document.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(
document.createTextNode(
styleProp
.replace(/(\d+)rpx/g, (a, b) => {
return `${b / 2}px`;
})
.replace(/:root/g, '.' + cssClass),
),
);
return s;
}
}
}
export function setNativeNode(leaf: any, node: Rax.RaxNode) {
const id = leaf.getId();
if (NativeNodeCache[id] === node) {
return;
}
NativeNodeCache[id] = node;
leaf.mountChange();
}
export function getView(componentName: string) {
// let view = new Trunk().getPrototypeView(componentName);
let view = Trunk.getPrototypeView(componentName);
if (!view) {
return null;
}
const viewport = Viewport.getViewport();
if (viewport) {
const [mode, device] = viewport.split('-', 2).map(ucfirst);
if (view.hasOwnProperty(device)) {
view = view[device];
}
if (view.hasOwnProperty(mode)) {
view = view[mode];
}
}
return view;
}

4
packages/rax-simulator-renderer/src/host.ts Normal file
View File

@ -0,0 +1,4 @@
// NOTE: 仅做类型标注，切勿做其它用途
import { BuiltinSimulatorHost } from '@ali/lowcode-designer';
export const host: BuiltinSimulatorHost = (window as any).LCSimulatorHost;

1
packages/rax-simulator-renderer/src/image.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'rax-find-dom-node';

7
packages/rax-simulator-renderer/src/index.ts Normal file
View File

@ -0,0 +1,7 @@
import renderer from './renderer';
if (typeof window !== 'undefined') {
(window as any).SimulatorRenderer = renderer;
}
export default renderer;

210
packages/rax-simulator-renderer/src/obx-rax/derivation.ts Normal file
View File

@ -0,0 +1,210 @@
import { IObservable, IDepTreeNode, addObserver, removeObserver } from './observable/observable';
import { globalState } from './ global-state';
export enum DerivationState {
// before being run or (outside batch and not being observed)
// at this point derivation is not holding any data about dependency tree
NOT_TRACKING = -1,
// no shallow dependency changed since last computation
// won't recalculate derivation
UP_TO_DATE = 0,
// don't have to recompute on every dependency change, but only when it's needed
MYBE_DIRTY = 1,
// A shallow dependency has changed since last computation and the derivation
// will need to recompute when it's needed next.
DIRTY = 2,
}
export interface IDerivation extends IDepTreeNode {
observing: IObservable[];
dependenciesState: DerivationState;
newObserving?: null | IObservable[];
runId?: number; // Id of the current run of a derivation.
unboundDepsCount?: number; // amount of dependencies used by the derivation in this run, which has not been bound yet.
onBecomeDirty(): void;
}
export class CaughtException {
constructor(public cause: any) {
// Empty
}
}
export function isCaughtException(e: any): e is CaughtException {
return e instanceof CaughtException;
}
interface ModifiedValue {
ifModified(): void;
}
export function isModifiedValue(v: any): v is ModifiedValue {
return v.ifModified ? true : false;
}
export function shouldCompute(derivation: IDerivation): boolean {
switch (derivation.dependenciesState) {
case DerivationState.UP_TO_DATE:
return false;
case DerivationState.NOT_TRACKING:
case DerivationState.DIRTY:
return true;
case DerivationState.MYBE_DIRTY: {
const prevUntracked = untrackedStart();
const obs = derivation.observing;
const l = obs.length;
for (let i = 0; i < l; i++) {
const obj = obs[i];
if (isModifiedValue(obj)) {
obj.ifModified();
}
if ((derivation.dependenciesState as any) === DerivationState.DIRTY) {
untrackedEnd(prevUntracked);
return true;
}
}
changeDependenciesStateTo0(derivation);
untrackedEnd(prevUntracked);
return false;
}
}
}
export function runDerivedFunction(derivation: IDerivation, f: (...args: any[]) => any, context?: any) {
const prevTracking = globalState.trackingDerivation;
// pre allocate array allocation + room for variation in deps
derivation.newObserving = new Array(derivation.observing.length + 100);
derivation.unboundDepsCount = 0;
derivation.runId = ++globalState.runId;
globalState.trackingDerivation = derivation;
let result;
try {
result = f.call(context);
} catch (e) {
result = new CaughtException(e);
}
globalState.trackingDerivation = prevTracking;
changeDependenciesStateTo0(derivation);
bindDependencies(derivation);
return result;
}
function bindDependencies(derivation: IDerivation) {
const prevObserving = derivation.observing;
const observing = (derivation.observing = derivation.newObserving!);
let lowestNewObservingDerivationState = DerivationState.UP_TO_DATE;
// Go through all new observables and check diffValue: (this list can contain duplicates):
// 0: first occurrence, change to 1 and keep it
// 1: extra occurrence, drop it
let i0 = 0;
let l = derivation.unboundDepsCount!;
for (let i = 0; i < l; i++) {
const dep = observing[i];
if (!dep.diffFlag) {
dep.diffFlag = true;
if (i0 !== i) {
observing[i0] = dep;
}
i0++;
}
// Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
// not hitting the condition
if (((dep as any) as IDerivation).dependenciesState > lowestNewObservingDerivationState) {
lowestNewObservingDerivationState = ((dep as any) as IDerivation).dependenciesState;
}
}
observing.length = i0;
derivation.newObserving = null;
// Go through all old observables and check diffValue: (it is unique after last bindDependencies)
// 0: it's not in new observables, unobserve it
// 1: it keeps being observed, don't want to notify it. change to 0
l = prevObserving.length;
while (l--) {
const dep = prevObserving[l];
if (!dep.diffFlag) {
removeObserver(dep, derivation);
}
dep.diffFlag = false;
}
// Go through all new observables and check diffValue: (now it should be unique)
// 0: it was set to 0 in last loop. don't need to do anything.
// 1: it wasn't observed, let's observe it. set back to 0
while (i0--) {
const dep = observing[i0];
if (dep.diffFlag) {
dep.diffFlag = false;
addObserver(dep, derivation);
}
}
// Some new observed derivations may become stale during this derivation computation
// so they have had no chance to propagate staleness (#916)
if (lowestNewObservingDerivationState !== DerivationState.UP_TO_DATE) {
derivation.dependenciesState = lowestNewObservingDerivationState;
derivation.onBecomeDirty();
}
}
export function clearObserving(derivation: IDerivation) {
const obs = derivation.observing;
derivation.observing = [];
let i = obs.length;
while (i--) {
removeObserver(obs[i], derivation);
}
derivation.dependenciesState = DerivationState.NOT_TRACKING;
}
export function untracked<T>(action: () => T): T {
const prev = untrackedStart();
const res = action();
untrackedEnd(prev);
return res;
}
export function untrackedStart(): IDerivation | null {
const prev = globalState.trackingDerivation;
globalState.trackingDerivation = null;
return prev;
}
export function untrackedEnd(prev: IDerivation | null) {
globalState.trackingDerivation = prev;
}
export function changeDependenciesStateTo0(derivation: IDerivation) {
if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
return;
}
derivation.dependenciesState = DerivationState.UP_TO_DATE;
const obs = derivation.observing;
let i = obs.length;
while (i--) {
obs[i].lowestObserverState = DerivationState.UP_TO_DATE;
}
}
export function setDerivationDirty(derivation: IDerivation) {
if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
derivation.onBecomeDirty();
}
derivation.dependenciesState = DerivationState.DIRTY;
}
export function setDerivationMybeDirty(derivation: IDerivation) {
if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
derivation.onBecomeDirty();
}
derivation.dependenciesState = DerivationState.MYBE_DIRTY;
}
export function resetDerivationState(derivation: IDerivation) {
derivation.dependenciesState = DerivationState.NOT_TRACKING;
}

68
packages/rax-simulator-renderer/src/obx-rax/global-state.ts Normal file
View File

@ -0,0 +1,68 @@
import { IDerivation } from './derivation';
import { Reaction } from './reaction';
import { IObservable } from './observable/observable';
export class Globals {
/**
* Currently running derivation
*/
trackingDerivation: IDerivation | null = null;
/**
* Are we running a computation currently? (not a reaction)
*/
computationDepth = 0;
/**
* Each time a derivation is tracked, it is assigned a unique run-id
*/
runId = 0;
/**
* 'guid' for general purpose. Will be persisted amongst resets.
*/
guid = 0;
/**
* Are we in a batch block? (and how many of them)
*/
inBatch = 0;
/**
* Observables that don't have observers anymore
*/
pendingUnobservations: IObservable[] = [];
/**
* List of scheduled, not yet executed, reactions.
*/
pendingReactions: Reaction[] = [];
/**
* Are we currently processing reactions?
*/
isRunningReactions = false;
/**
* disable dynamic observe
*/
dynamicObserveDisabled = false;
reset() {
this.trackingDerivation = null;
this.computationDepth = 0;
this.runId = 0;
this.guid = 0;
this.inBatch = 0;
this.pendingUnobservations = [];
this.pendingReactions = [];
this.isRunningReactions = false;
this.dynamicObserveDisabled = false;
}
}
export const globalState: Globals = new Globals();
export function getGlobalState(): Globals {
return globalState;
}

56
packages/rax-simulator-renderer/src/obx-rax/next-tick.ts Normal file
View File

@ -0,0 +1,56 @@
const callbacks: Array<() => void> = [];
let pending = false;
function flush() {
pending = false;
const copies = callbacks.slice(0);
callbacks.length = 0;
for (const fn of copies) {
fn();
}
}
let timerFlush: () => void;
if (typeof process === 'object' && process.nextTick) {
timerFlush = () => process.nextTick(flush);
} else if (typeof Promise === 'function') {
// tslint:disable-line
const timer = Promise.resolve(); // tslint:disable-line
timerFlush = () => {
timer.then(flush);
// if (isIOS) setTimeout(noop)
};
} else if (typeof MessageChannel === 'function') {
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = flush;
timerFlush = () => {
port.postMessage(1);
};
} else {
timerFlush = () => {
setTimeout(flush, 0);
};
}
export function clearTicks() {
callbacks.length = 0;
}
export function nextTick(callback?: () => void): Promise<any> {
let _resovle: () => void;
callbacks.push(() => {
callback && callback();
_resovle();
});
if (!pending) {
pending = true;
timerFlush();
}
return new Promise((resolve) => {
_resovle = resolve;
});
}

5
packages/rax-simulator-renderer/src/obx-rax/observable/compare.ts Normal file
View File

@ -0,0 +1,5 @@
import { getProxiedValue } from './proxy';
export function is(a: any, b: any) {
return getProxiedValue(a) === getProxiedValue(b);
}

179
packages/rax-simulator-renderer/src/obx-rax/observable/observable.ts Normal file
View File

@ -0,0 +1,179 @@
import { isObject } from 'lodash/isObject';
import { nextId } from '../utils';
import { DerivationState, IDerivation, setDerivationDirty } from '../derivation';
import { globalState } from '../ global-state';
import Obx, { hasObx, getObx, injectObx, ObxFlag } from './obx';
export interface IDepTreeNode {
id: string;
name: string;
observing: IObservable[];
}
export interface IObservable extends IDepTreeNode {
diffFlag?: boolean;
observers: Set<IDerivation>;
// Used to avoid redundant propagations
lowestObserverState: DerivationState;
// Used to push itself to global.pendingUnobservations at most once per batch.
isPendingUnobservation?: boolean;
// Id of the derivation *run* that last accessed this observable.
lastAccessedBy?: number;
isBeingObserved?: boolean;
onBecomeUnobserved(): void;
}
export function addObserver(observable: IObservable, node: IDerivation) {
observable.observers.add(node);
if (observable.lowestObserverState > node.dependenciesState) {
observable.lowestObserverState = node.dependenciesState;
}
}
export function removeObserver(observable: IObservable, node: IDerivation) {
observable.observers.delete(node);
if (observable.observers.size === 0) {
// deleting last observer
queueForUnobservation(observable);
}
}
export function queueForUnobservation(observable: IObservable) {
if (!observable.isPendingUnobservation) {
observable.isPendingUnobservation = true;
globalState.pendingUnobservations.push(observable);
}
}
export function startBatch() {
globalState.inBatch++;
}
export function endBatch() {
if (--globalState.inBatch === 0) {
// the batch is actually about to finish, all unobserving should happen here.
const list = globalState.pendingUnobservations;
for (let i = 0; i < list.length; i++) {
const observable = list[i];
observable.isPendingUnobservation = false;
if (observable.observers.size === 0) {
if (observable.isBeingObserved) {
// if this observable had reactive observers, trigger the hooks
observable.isBeingObserved = false;
observable.onBecomeUnobserved();
}
}
}
globalState.pendingUnobservations = [];
}
}
export function reportObserved(observable: IObservable): void {
const derivation = globalState.trackingDerivation;
if (!derivation) {
return;
}
if (derivation.runId !== observable.lastAccessedBy) {
observable.lastAccessedBy = derivation.runId;
derivation.newObserving![derivation.unboundDepsCount!++] = observable;
if (!observable.isBeingObserved) {
observable.isBeingObserved = true;
}
}
}
export function propagateChanged(observable: IObservable, force = false) {
if (observable.lowestObserverState === DerivationState.DIRTY && !force) {
return;
}
observable.lowestObserverState = DerivationState.DIRTY;
observable.observers.forEach((d) => setDerivationDirty(d));
}
export function propagateChangeConfirmed(observable: IObservable) {
if (observable.lowestObserverState === DerivationState.DIRTY) {
return;
}
observable.lowestObserverState = DerivationState.DIRTY;
observable.observers.forEach((d) => {
if (d.dependenciesState === DerivationState.MYBE_DIRTY) {
d.dependenciesState = DerivationState.DIRTY;
} else if (d.dependenciesState === DerivationState.UP_TO_DATE) {
observable.lowestObserverState = DerivationState.UP_TO_DATE;
}
});
}
export function propagateMaybeChanged(observable: IObservable) {
if (observable.lowestObserverState !== DerivationState.UP_TO_DATE) {
return;
}
observable.lowestObserverState = DerivationState.MYBE_DIRTY;
observable.observers.forEach((d) => {
if (d.dependenciesState === DerivationState.UP_TO_DATE) {
d.dependenciesState = DerivationState.MYBE_DIRTY;
d.onBecomeDirty();
}
});
}
export function asObservable(thing: any, obxFlag: ObxFlag): Obx | undefined {
if (!isObject(thing)) {
return;
}
if (hasObx(thing)) {
return getObx(thing);
}
if (!Object.isExtensible(thing)) {
return;
}
const name = (thing.constructor.name || 'ObservableObject') + '@' + nextId();
const ObxContructor = (asObservable as any).getObxContructor(thing);
const obx = ObxContructor ? new ObxContructor(name, thing, obxFlag) : null;
if (obx) {
injectObx(thing, obx);
return obx;
}
}
(asObservable as any).getObxContructor = () => Obx;
export function observeIterable(items: Iterable<any>, obxFlag: ObxFlag): void {
for (const n of items) {
asObservable(n, obxFlag);
}
}
export function reportPropValue(propValue: any, propFlag: ObxFlag): void {
if (propValue == null) return;
const x = propFlag > ObxFlag.REF ? asObservable(propValue, propFlag) : getObx(propValue);
if (x) {
reportObserved(x);
}
}
export function reportChildValue(propValue: any, ownerFlag: ObxFlag): void {
if (propValue == null) return;
const x =
ownerFlag > ObxFlag.VAL
? asObservable(propValue, ownerFlag === ObxFlag.DEEP ? ObxFlag.DEEP : ObxFlag.VAL)
: getObx(propValue);
if (x) {
reportObserved(x);
}
}

152
packages/rax-simulator-renderer/src/obx-rax/observable/obx-array.ts Normal file
View File

@ -0,0 +1,152 @@
import { addHiddenProp } from '../utils';
import { observeIterable, reportChildValue } from './observable';
import { supportProxy, isProxied, createProxy, SYMBOL_PROXY, SYMBOL_RAW, getProxiedValue, getRawValue } from './proxy';
import Obx, { getObx, SYMBOL_OBX, ObxFlag } from './obx';
import { setPrototypeOf } from '../../utils/set-prototype-of';
export function childFlag(flag: ObxFlag) {
return flag === ObxFlag.DEEP ? ObxFlag.DEEP : ObxFlag.VAL;
}
function isValidArrayIndex(val: any, limit: number = -1): boolean {
const n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val) && (limit < 0 || n < limit);
}
export default class ObxArray extends Obx<any[]> {
constructor(name: string, target: any[], obxFlag: ObxFlag = ObxFlag.DEEP) {
super(name, target, obxFlag);
if (supportProxy) {
this.target = createProxy(target, arrayProxyTraps);
} else if (obxFlag > ObxFlag.VAL) {
observeIterable(target, childFlag(obxFlag));
}
setPrototypeOf(target, arrayMethods);
}
set(key: PropertyKey, val: any) {
const target = this.target;
if (isValidArrayIndex(key)) {
const index = Number(key);
target.length = Math.max(target.length, index);
target.splice(index, 1, val);
return;
}
super.set(key, val);
}
del(key: PropertyKey) {
if (isValidArrayIndex(key, this.target.length)) {
this.target.splice(Number(key), 1);
return;
}
super.del(key);
}
}
// ======= patches ========
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
const original = (arrayProto as any)[method];
addHiddenProp(arrayMethods, method, function mutator(this: any[], ...args: any[]) {
const obx = getObx(this) as ObxArray;
const proxied = isProxied(this);
const length = this.length;
// apply to rawTarget avoid to call Proxy.set
const result = original.apply(getRawValue(this), args);
let changed = true;
let inserted;
switch (method) {
case 'push':
case 'unshift':
inserted = args;
changed = inserted.length > 0;
break;
case 'splice':
inserted = args.slice(2);
changed = inserted.length > 0 || this.length !== length;
break;
case 'pop':
case 'shift':
changed = this.length !== length;
break;
}
if (!proxied && obx.obxFlag > ObxFlag.VAL) {
if (inserted && inserted.length > 0) {
observeIterable(inserted, childFlag(obx.obxFlag));
}
}
if (obx && changed) {
obx.reportChange();
}
return result;
});
});
const arrayProxyTraps: ProxyHandler<any[]> = {
has(rawTarget, name: PropertyKey) {
if (name === SYMBOL_OBX || name === SYMBOL_RAW) {
return true;
}
return name in rawTarget;
},
get(rawTarget, name: PropertyKey) {
if (name === SYMBOL_RAW) {
return rawTarget;
}
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
return (rawTarget as any)[name];
}
if (isValidArrayIndex(name)) {
const v = rawTarget[Number(name)];
const obx = getObx(rawTarget);
if (obx) {
reportChildValue(v, obx.obxFlag);
}
return getProxiedValue(v);
}
return getProxiedValue((rawTarget as any)[name]);
},
set(rawTarget, name: PropertyKey, value: any) {
if (name === 'length') {
rawTarget[name] = value;
return true;
}
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
return false;
}
if (isValidArrayIndex(name)) {
const index = Number(name);
rawTarget.length = Math.max(rawTarget.length, index);
rawTarget.splice(index, 1, value);
return true;
}
(rawTarget as any)[name] = value;
return true;
},
deleteProperty(rawTarget, name: PropertyKey) {
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
return false;
}
if (isValidArrayIndex(name)) {
rawTarget.splice(Number(name), 1);
return true;
}
delete (rawTarget as any)[name];
return true;
},
preventExtensions() {
return false;
},
};

14
packages/rax-simulator-renderer/src/obx-rax/observable/obx-instance.ts Normal file
View File

@ -0,0 +1,14 @@
import { DecoratorTarget } from '../decorators';
import Obx from './obx';
export default class ObxInstance extends Obx<DecoratorTarget> {
set(key: PropertyKey, val: any) {
const target = this.target;
if (key in target) {
(target as any)[key] = val;
return;
}
super.set(key, val);
}
}

37
packages/rax-simulator-renderer/src/obx-rax/observable/obx-map.ts Normal file
View File

@ -0,0 +1,37 @@
import Obx, { ObxFlag } from './obx';
import { patchMutator, patchAccessor } from './obx-set';
import { setPrototypeOf } from '../../utils/set-prototype-of';
type MapType = Map<PropertyKey, any>;
export default class ObxMap extends Obx<MapType> {
constructor(name: string, target: MapType, obxFlag: ObxFlag = ObxFlag.DEEP) {
super(name, target, obxFlag);
setPrototypeOf(target, mapMethods);
}
has(key: PropertyKey) {
return this.target.has(key);
}
set(key: PropertyKey, val: any) {
this.target.set(key, val);
}
get(key: PropertyKey) {
return this.target.get(key);
}
del(key: PropertyKey) {
this.target.delete(key);
}
}
// ======= Map ========
const mapProto = Map.prototype;
const mapMethods = Object.create(mapProto);
patchMutator(['set', 'clear', 'delete'], mapProto, mapMethods);
patchAccessor(['values', 'entries', Symbol.iterator, 'forEach', 'get'], mapProto, mapMethods);

93
packages/rax-simulator-renderer/src/obx-rax/observable/obx-object.ts Normal file
View File

@ -0,0 +1,93 @@
import { walk } from '../utils';
import { supportProxy, createProxy, getProxiedValue, SYMBOL_PROXY, SYMBOL_RAW } from './proxy';
import Obx, { getObx, SYMBOL_OBX, ObxFlag } from './obx';
import { defineObxProperty, ensureObxProperty } from './obx-property';
import { hasOwnProperty } from '../../utils/has-own-property';
function propFlag(flag: ObxFlag) {
return flag === ObxFlag.DEEP ? ObxFlag.DEEP : flag - 1;
}
export default class ObxObject extends Obx<object> {
constructor(name: string, target: object, obxFlag: ObxFlag = ObxFlag.DEEP) {
super(name, target, obxFlag);
if (supportProxy) {
this.target = createProxy(target, objectProxyTraps);
} else if (obxFlag > ObxFlag.REF) {
walk(target as any, (obj, key, val) => {
defineObxProperty(obj, key, val, undefined, propFlag(obxFlag));
});
}
}
set(key: PropertyKey, val: any) {
const target = this.target;
if (key in target && !(key in objectProto)) {
(target as any)[key] = val;
return;
}
super.set(key, val);
}
}
const objectProto = Object.prototype;
const objectProxyTraps: ProxyHandler<any> = {
has(rawTarget, name: PropertyKey) {
if (name === SYMBOL_OBX || name === SYMBOL_RAW) {
return true;
}
return name in rawTarget;
},
get(rawTarget, name: PropertyKey) {
if (name === SYMBOL_RAW) {
return rawTarget;
}
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in objectProto) {
return rawTarget[name];
}
if (hasOwnProperty(rawTarget, name)) {
const obx = getObx(rawTarget);
if (obx) {
ensureObxProperty(rawTarget, name, propFlag(obx.obxFlag));
}
}
return getProxiedValue(rawTarget[name]);
},
set(rawTarget, name: PropertyKey, value: any) {
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in objectProto) {
return false;
}
if (!hasOwnProperty(rawTarget, name)) {
const obx = getObx(rawTarget);
if (obx) {
defineObxProperty(rawTarget, name, value, undefined, propFlag(obx.obxFlag));
obx.reportChange();
return true;
}
}
rawTarget[name] = value;
return true;
},
deleteProperty(rawTarget, name: PropertyKey) {
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || !hasOwnProperty(rawTarget, name)) {
return false;
}
delete rawTarget[name];
const obx = getObx(rawTarget);
if (obx) {
obx.reportChange();
}
return true;
},
preventExtensions() {
return false;
},
};

Some files were not shown because too many files have changed in this diff Show More