github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-04-20 04:18:05 +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.
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>
## [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",
"version": "0.8.8",
"version": "0.8.9",
"description": "出码引擎 for LowCode Engine",
"main": "lib/index.js",
"files": [

32
packages/demo/CHANGELOG.md
View File

@ -3,6 +3,38 @@
All notable changes to this project will be documented in this file.
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>
## [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": {
"index": "src/index",
"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,
"devServer": {
@ -15,7 +16,8 @@
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@ali/visualengine": "var window.VisualEngine",
"@ali/visualengine-utils": "var window.VisualEngineUtils"
"@ali/visualengine-utils": "var window.VisualEngineUtils",
"rax": "var window.Rax"
},
"plugins": [
[

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

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

28
packages/demo/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ali/lowcode-demo",
"version": "0.8.33",
"version": "0.8.37",
"private": true,
"description": "低代码引擎 DEMO",
"scripts": {
@ -9,21 +9,21 @@
},
"config": {},
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-skeleton": "^0.8.29",
"@ali/lowcode-plugin-components-pane": "^0.8.25",
"@ali/lowcode-plugin-designer": "^0.9.23",
"@ali/lowcode-plugin-event-bind-dialog": "^0.8.18",
"@ali/lowcode-plugin-outline-pane": "^0.8.29",
"@ali/lowcode-plugin-sample-logo": "^0.8.17",
"@ali/lowcode-plugin-sample-preview": "^0.8.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-plugin-components-pane": "^0.8.29",
"@ali/lowcode-plugin-designer": "^0.9.27",
"@ali/lowcode-plugin-event-bind-dialog": "^0.8.20",
"@ali/lowcode-plugin-outline-pane": "^0.8.33",
"@ali/lowcode-plugin-sample-logo": "^0.8.19",
"@ali/lowcode-plugin-sample-preview": "^0.8.31",
"@ali/lowcode-plugin-settings-pane": "^0.8.8",
"@ali/lowcode-plugin-undo-redo": "^0.8.27",
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.16",
"@ali/lowcode-plugin-zh-en": "^0.8.20",
"@ali/lowcode-react-renderer": "^0.8.12",
"@ali/lowcode-plugin-undo-redo": "^0.8.31",
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.18",
"@ali/lowcode-plugin-zh-en": "^0.8.22",
"@ali/lowcode-react-renderer": "^0.8.13",
"@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-datapool-pane": "^6.4.3",
"@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>
<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://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.min.js"></script>
<link rel="stylesheet" href="/css/editor-preset-vision.css" />
<script>
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,
variableBindDialog,
sourceEditor,
}
};

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

@ -28,7 +28,7 @@ export default {
props: {
align: 'right',
},
},*/
}, */
{
pluginKey: 'samplePreview',
type: 'Custom',
@ -73,10 +73,10 @@ export default {
hideTitleBar: true,
maxHeight: 800,
maxWidth: 1200,
title: "动作面板",
width: 600
title: '动作面板',
width: 600,
},
}
},
},
{
pluginKey: 'zhEn',
@ -94,7 +94,7 @@ export default {
{
pluginKey: 'variableBindDialog',
},
]
],
},
shortCuts: [],
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'];
async function loadAssets() {
// const legaoAssets = await editor.utils.get('./raxAssets.json');
const legaoAssets = await editor.utils.get('./legao-assets.json');
const assets = upgradeAssetsBundle(legaoAssets);
@ -144,6 +145,7 @@ async function loadAssets() {
}
async function loadSchema() {
// const schema = await editor.utils.get('./rax.json');
const schema = await editor.utils.get('./schema.json');
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.
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>
## [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",
"version": "0.9.23",
"version": "0.9.27",
"description": "Designer for Ali LowCode Engine",
"main": "lib/index.js",
"module": "es/index.js",
@ -15,9 +15,9 @@
},
"license": "MIT",
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"classnames": "^2.2.6",
"event": "^1.0.0",
"react": "^16",

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

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

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

@ -4,7 +4,16 @@ import Viewport from './viewport';
import { createSimulator } from './create-simulator';
import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document';
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 {
DragObjectType,
isShaken,
@ -62,6 +71,20 @@ const defaultSimulatorUrl = (() => {
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 = [
// 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'),
@ -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> {
readonly isSimulator = true;
@ -78,6 +112,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
readonly designer = this.document.designer;
@computed get renderEnv(): string {
return this.get('renderEnv') || 'default';
}
@computed get device(): string {
return this.get('device') || 'default';
}
@ -186,7 +224,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
const vendors = [
// required & use once
assetBundle(this.get('environment') || defaultEnvironment, AssetLevel.Environment),
assetBundle(
this.get('environment') || this.renderEnv === 'rax' ? defaultRaxEnvironment : defaultEnvironment,
AssetLevel.Environment,
),
// required & use once
assetBundle(this.get('extraEnvironment'), AssetLevel.Environment),
// required & use once
@ -194,7 +235,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
// required & TODO: think of update
assetBundle(this.theme, AssetLevel.Theme),
// required & use once
assetBundle(this.get('simulatorUrl') || defaultSimulatorUrl, AssetLevel.Runtime),
assetBundle(
this.get('simulatorUrl') || this.renderEnv === 'rax' ? defaultRaxSimulatorUrl : defaultSimulatorUrl,
AssetLevel.Runtime,
),
];
// wait 准备 iframe 内容、依赖库注入
@ -326,7 +370,12 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
x.initEvent('click', true);
this._iframe?.dispatchEvent(x);
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.stopPropagation();
}
@ -392,7 +441,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
}
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) {
return;
}
@ -405,7 +456,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
},
true,
);
}
/**
@ -792,10 +842,12 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
this.sensing = true;
this.scroller.scrolling(e);
const dropContainer = this.getDropContainer(e);
if (!dropContainer ||
// too dirty
(typeof dropContainer.container?.componentMeta?.prototype?.options?.canDropIn === 'function' &&
!dropContainer.container?.componentMeta?.prototype?.options?.canDropIn(e.dragObject.nodes[0]))) {
if (
!dropContainer ||
// too dirty
(typeof dropContainer.container?.componentMeta?.prototype?.options?.canDropIn === 'function' &&
!dropContainer.container?.componentMeta?.prototype?.options?.canDropIn(e.dragObject.nodes[0]))
) {
return null;
}
@ -826,13 +878,17 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
event: e,
};
if (e.dragObject.nodes[0].getPrototype().isModal()) {
if (e.dragObject.type === 'node' && e.dragObject.nodes[0].getPrototype().isModal()) {
return this.designer.createLocation({
target: this.document.rootNode,
detail,
detail: {
type: LocationDetailType.Children,
index: 0,
valid: true,
},
source: 'simulator' + this.document.id,
event: e,
});
});
}
if (!children || children.size < 1 || !edge) {

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

@ -10,7 +10,7 @@ import { Selection } from './selection';
import { History } from './history';
import { TransformStage } from './node';
import { uniqueId } from '@ali/lowcode-utils';
import ModalNodesManager from './node/modalNodesManager';
import { ModalNodesManager } from './node';
export type GetDataType<T, NodeType> = T extends undefined
? NodeType extends {
@ -37,6 +37,10 @@ export class DocumentModel {
* 操作记录控制
*/
readonly history: History;
/**
* 模态节点管理
*/
readonly modalNodesManager: ModalNodesManager;
private nodesMap = new Map<string, Node>();
@obx.val private nodes = new Set<Node>();
@ -44,7 +48,6 @@ export class DocumentModel {
private _simulator?: ISimulatorHost;
private emitter: EventEmitter;
private rootNodeVisitorMap: { [visitorName: string]: any } = {};
private modalNodesManager: ModalNodesManager;
/**
* 模拟器
@ -170,7 +173,7 @@ export class DocumentModel {
}
let node: Node | null = null;
if (!this.inited) {
if (this.inited) {
schema.id = null;
}
if (schema.id) {
@ -520,7 +523,7 @@ export class DocumentModel {
};
}
setRendererReady(renderer) {
setRendererReady(renderer: any) {
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/props';
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;
}
export default class ModalNodesManager {
export class ModalNodesManager {
public willDestroy: any;
private page: DocumentModel;
private modalNodes: [Node];
private modalNodes: Node[];
private nodeRemoveEvents: any;
private emitter: EventEmitter;
@ -44,7 +44,7 @@ export default class ModalNodesManager {
public getVisibleModalNode() {
const visibleNode = this.modalNodes
? this.modalNodes.find((node: Node) => {
return !node.getExtraProp('hidden');
return node.getVisible();
})
: null;
return visibleNode;
@ -53,18 +53,18 @@ export default class ModalNodesManager {
public hideModalNodes() {
if (this.modalNodes) {
this.modalNodes.forEach((node: Node) => {
node.getExtraProp('hidden')?.setValue(true);
node.setVisible(false);
});
}
}
public setVisible(node: Node) {
this.hideModalNodes();
node.getExtraProp('hidden')?.setValue(false);
node.setVisible(true);
}
public setInvisible(node: Node) {
node.getExtraProp('hidden')?.setValue(true);
node.setVisible(false);
}
public onVisibleChange(func: () => any) {
@ -101,26 +101,24 @@ export default class ModalNodesManager {
}
this.removeNodeEvent(node);
this.emitter.emit('modalNodesChange');
if (!node.getExtraProp('hidden')) {
if (node.getVisible()) {
this.emitter.emit('visibleChange');
}
}
}
private addNodeEvent(node: Node) {
// this.nodeRemoveEvents[node.getId()] =
// node.onStatusChange((status: any, field: any) => {
// if (field === 'visibility') {
// this.emitter.emit('visibleChange');
// }
// });
this.nodeRemoveEvents[node.getId()] =
node.onVisibleChange((flag) => {
this.emitter.emit('visibleChange');
});
}
private removeNodeEvent(node: Node) {
// if (this.nodeRemoveEvents[node.getId()]) {
// this.nodeRemoveEvents[node.getId()]();
// delete this.nodeRemoveEvents[node.getId()];
// }
if (this.nodeRemoveEvents[node.getId()]) {
this.nodeRemoveEvents[node.getId()]();
delete this.nodeRemoveEvents[node.getId()];
}
}
private setNodes() {

54
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 { ReactElement } from 'react';
import { SettingTopEntry } from 'designer/src/designer';
import { EventEmitter } from 'events';
/**
* 基础节点
@ -72,6 +73,7 @@ import { SettingTopEntry } from 'designer/src/designer';
* hidden
*/
export class Node<Schema extends NodeSchema = NodeSchema> {
private emitter: EventEmitter;
/**
* 是节点实例
*/
@ -101,7 +103,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
/**
* @deprecated
*/
private _addons: { [key: string]: any } = {};
private _addons: { [key: string]: { exportData: () => any; isProp: boolean; } } = {};
@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._children = new NodeChildren(this as ParentalNode, this.initialChildren(children));
this._children.interalInitParent();
this.props.import(this.transformProps(props || {}), extras);
this.props.import(this.upgradeProps(this.initProps(props || {})), this.upgradeProps(extras || {}));
this.setupAutoruns();
}
this.settingEntry = this.document.designer.createSettingEntry([ this ]);
this.emitter = new EventEmitter();
}
private transformProps(props: any): any {
// FIXME! support PropsList
private initProps(props: any): any {
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>;
@ -414,6 +418,22 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
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 {
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 } = {
...extras,
};
if (_extras_) {
Object.keys(_extras_).forEach((key) => {
const addon = this._addons[key];
if (addon) {
_extras_[key] = addon();
Object.keys(this._addons).forEach((key) => {
const addon = this._addons[key];
if (addon) {
if (addon.isProp) {
(props as any)[getConvertedExtraKey(key)] = addon.exportData();
} else {
_extras_[key] = addon.exportData();
}
});
}
}
});
const schema: any = {
...baseSchema,
@ -755,19 +777,19 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
getAddonData(key: string) {
const addon = this._addons[key];
if (addon) {
return addon();
return addon.exportData();
}
return this.getExtraProp(key)?.value;
return this.getExtraProp(key)?.getValue();
}
/**
* @deprecated
*/
registerAddon(key: string, exportData: any) {
registerAddon(key: string, exportData: () => any, isProp: boolean = false) {
if (this._addons[key]) {
throw new Error(`node addon ${key} exist`);
}
this._addons[key] = exportData;
this._addons[key] = { exportData, isProp };
}
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',
params: schema.params,
value: schema.children,
title: schema.title,
name: schema.name,
};
}
@ -235,6 +237,7 @@ export class Prop implements IPropParent {
const slotSchema: SlotSchema = {
componentName: 'Slot',
title: data.title,
name: data.name,
params: data.params,
children: data.value,
};

2
packages/designer/src/simulator.ts
View File

@ -142,7 +142,7 @@ export interface ISimulatorHost<P = object> extends ISensor {
computeComponentInstanceRect(instance: ComponentInstance, selector?: string): DOMRect | null;
findDOMNodes(instance: ComponentInstance, selector?: string): Array<Element | Text> | null;
/**
* 销毁
*/

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

@ -3,6 +3,25 @@
All notable changes to this project will be documented in this file.
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>
## [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",
"version": "0.8.19",
"version": "0.8.21",
"description": "Core Api for Ali lowCode engine",
"license": "MIT",
"main": "lib/index.js",
@ -15,8 +15,8 @@
"cloud-build": "build-scripts build --skip-demo"
},
"dependencies": {
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.19.16",
"@recore/obx": "^1.0.9",
"@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.
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>
## [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",
"version": "0.9.8",
"version": "0.9.12",
"private": true,
"description": "Ali General Editor Preset",
"main": "lib/index.js",
@ -15,12 +15,12 @@
},
"license": "MIT",
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-skeleton": "^0.8.29",
"@ali/lowcode-plugin-designer": "^0.9.23",
"@ali/lowcode-plugin-outline-pane": "^0.8.29",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-plugin-designer": "^0.9.27",
"@ali/lowcode-plugin-outline-pane": "^0.8.33",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.19.12",
"@alife/theme-lowcode-dark": "^0.1.0",
"@alife/theme-lowcode-light": "^0.1.0",
@ -28,7 +28,7 @@
"react-dom": "^16.8.1"
},
"devDependencies": {
"@ali/lowcode-editor-setters": "^0.9.5",
"@ali/lowcode-editor-setters": "^0.9.7",
"@alib/build-scripts": "^0.1.18",
"@types/events": "^3.0.0",
"@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.
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>
## [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",
"version": "0.8.24",
"version": "0.8.28",
"private": true,
"description": "Vision Polyfill for Ali lowCode engine",
"main": "lib/index.js",
@ -15,11 +15,11 @@
},
"license": "MIT",
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-skeleton": "^0.8.29",
"@ali/lowcode-plugin-designer": "^0.9.23",
"@ali/lowcode-plugin-outline-pane": "^0.8.29",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-plugin-designer": "^0.9.27",
"@ali/lowcode-plugin-outline-pane": "^0.8.33",
"@ali/ve-i18n-util": "^2.0.0",
"@ali/ve-icons": "^4.1.9",
"@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;
if (slotName && initialValue === true) {
initialFn = (field: any, value: any) => {
initialFn = (value: any, defaultValue: any) => {
if (isJSSlot(value)) {
return {
title: slotTitle || title,

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

@ -55,6 +55,7 @@ function upgradePropsReducer(props: any) {
val = {
type: 'JSSlot',
title: (val.value.props as any)?.slotTitle,
name: (val.value.props as any)?.slotName,
value: val.value.children
};
} else {
@ -74,14 +75,16 @@ function upgradePropsReducer(props: any) {
return newProps;
}
// 升级 Props
designer.addPropsReducer(upgradePropsReducer, TransformStage.Init);
designer.addPropsReducer(upgradePropsReducer, TransformStage.Upgrade);
// 节点 props 初始化
designer.addPropsReducer((props, node) => {
// run initials
const initials = node.componentMeta.getMetadata().experimental?.initials;
if (initials) {
const newProps: any = {};
const newProps: any = {
...props,
};
initials.forEach((item) => {
// FIXME! this implements SettingTarget
try {
@ -138,7 +141,6 @@ function compatiableReducer(props: any) {
const newProps: any = {};
Object.entries<any>(props).forEach(([key, val]) => {
if (isJSSlot(val)) {
val.value
val = {
type: 'JSBlock',
value: {
@ -146,6 +148,7 @@ function compatiableReducer(props: any) {
children: val.value,
props: {
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.
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>
## [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",
"version": "0.9.5",
"version": "0.9.7",
"description": "Builtin setters for Ali lowCode engine",
"files": [
"es",
@ -22,7 +22,7 @@
"@ali/iceluna-comp-react-node": "^1.0.5",
"@ali/iceluna-sdk": "^1.0.5-beta.24",
"@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",
"acorn": "^6.4.1",
"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.
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>
## [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",
"version": "0.8.29",
"version": "0.8.33",
"description": "alibaba lowcode editor skeleton",
"main": "lib/index.js",
"module": "es/index.js",
@ -19,10 +19,10 @@
"editor"
],
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.20.12",
"classnames": "^2.2.6",
"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;
.lc-field {
// head
.lc-field-head {
display: flex;
align-items: center;
@ -61,23 +60,11 @@
}
}
.lc-field-icon {
// margin-right: @x-gap;
transform-origin: center;
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 {
display: flex;
align-items: center;
@ -111,29 +98,33 @@
&.lc-block-field, &.lc-accordion-field {
display: block;
&:not(:first-child) {
border-top: 1px solid var(--color-line-normal);
&:first-child {
> .lc-field-head {
border-top: none;
}
}
> .lc-field-head {
// padding-left: @x-gap;
height: 32px;
display: flex;
align-items: center;
font-weight: 500;
// background: var(--color-block-background-shallow, rgba(31,56,88,.06));
// border-bottom: 1px solid var(--color-line-normal);
// color: var(--color-title);
background: var(--color-block-background-shallow, rgba(31,56,88,.06));
border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
color: var(--color-title);
padding: 0 16px;
background-color: #F7F9FC;
color: #8F9BB3;
user-select: none;
> .lc-field-icon {
color: #8F9BB3;
}
}
> .lc-field-body {
// padding: @y-gap @x-gap/2;
padding: 16px;
padding: 12px;
.lc-inline-field{
margin-bottom: 16px;
margin-bottom: 12px;
&:last-child{
margin-bottom: 0;
}
@ -162,10 +153,15 @@
&.lc-accordion-field {
position: relative;
// collapsed
&:last-child.lc-field-is-collapsed{
border-bottom: 1px solid var(--color-line-normal);
&.lc-field-is-collapsed {
margin-bottom: 6px;
}
// collapsed
// &:last-child.lc-field-is-collapsed{
// border-bottom: 1px solid var(--color-line-normal);
// }
&.lc-field-is-collapsed {
> .lc-field-head .lc-field-icon {
transform: rotate(180deg);
@ -200,14 +196,19 @@
.lc-accordion-field, .lc-block-field {
> .lc-field-head {
padding-left: @x-gap/2;
padding-left: @x-gap;
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 {
// margin-right: @x-gap/2;
margin-right: 0;
}
}
> .lc-field-body {
padding: 8px;
}
}
// 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;
>.lc-setter-actions {
position: absolute;
right: -2px;
right: -4px;
top: 50%;
transform: translate(100%, -50%);
.lc-switch-trigger {
@ -18,11 +18,19 @@
}
.lc-title {
cursor: pointer;
.lc-title-icon svg {
fill: #8F9BB3;
}
}
.variable-binded {
background: var(--color-brand, #006cff);
color: #fff!important;
border-radius: 3px;
.lc-title-icon svg {
fill: #fff;
}
}
}
.next-input,.next-date-picker,.next-month-picker {
@ -42,7 +50,7 @@
margin-right: 0;
>.lc-setter-actions {
position: absolute;
right: 16px;
right: 12px;
top: 0;
height: 32px;
transform: none;
@ -56,8 +64,8 @@
position: static;
margin-right: 0;
> .lc-setter-actions{
right: 32px;
top: 6px;
right: 36px;
top: 4px;
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 = [];
let l = 3;
while (l-- > 0 && node) {
const _node = node;
const props =
l === 2
? {}
: {
onMouseOver: hoverNode.bind(null, node, true),
onMouseOut: hoverNode.bind(null, node, false),
onMouseOver: hoverNode.bind(null, _node, true),
onMouseOut: hoverNode.bind(null, _node, false),
onClick: () => {
selectNode.call(null, node);
const getName = (node) => {
if (!_node) {
return;
}
selectNode.call(null, _node);
const getName = (node: any) => {
const npm = node?.componentMeta?.npm;
return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
node?.componentMeta?.componentName ||
'';
};
const selected = getName(current);
const target = getName(node);
const target = getName(_node);
editor?.emit('skeleton.settingsPane.Breadcrumb', {
selected,
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() {
const { area } = this.props;
const hideTitleBar = area.current?.config.props?.hideTitleBar;
const width = area.current?.config.props?.width;
const style = width
? {
width,
}
: undefined;
return (
<div
className={classNames('lc-left-fixed-pane', {
'lc-area-visible': area.visible,
})}
style={style}
>
{!hideTitleBar && (
<Button

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

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

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

@ -155,6 +155,7 @@ function propTypeToSetter(propType: PropType): SetterType {
return {
componentName: 'MixedSetter',
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);
} else if (this.inited) {
if (this.parent?.name && this.name.startsWith(this.parent.name)) {
this.inited = false;
}
this._actived = false;
this.parent?.unactive(this);
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.
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>
## [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",
"version": "0.8.25",
"version": "0.8.29",
"description": "alibaba lowcode editor component-list plugin",
"files": [
"es/",
@ -20,9 +20,9 @@
],
"author": "xiayang.xy",
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.11",
"@ali/ve-component-list": "^1.1.1",
"@alifd/next": "^1.19.19",
"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.
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>
## [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",
"version": "0.9.23",
"version": "0.9.27",
"description": "alibaba lowcode editor designer plugin",
"files": [
"es",
@ -20,8 +20,8 @@
],
"author": "xiayang.xy",
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"react": "^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;
library?: any[] | null;
extraEnvironment?: any[] | null;
renderEnv?: string;
}
export default class DesignerPlugin extends PureComponent<PluginProps, DesignerPluginState> {
@ -20,6 +21,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
componentMetadatas: null,
library: null,
extraEnvironment: null,
renderEnv: 'default',
};
private _mounted = true;
@ -32,6 +34,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
private async setupAssets() {
const { editor } = this.props;
const assets = await editor.onceGot('assets');
const renderEnv = await editor.onceGot('renderEnv');
if (!this._mounted) {
return;
}
@ -40,9 +43,10 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
componentMetadatas: components || [],
library: packages || [],
extraEnvironment,
renderEnv,
};
this.setState(state);
};
}
componentWillUnmount() {
this._mounted = false;
@ -59,7 +63,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
render(): React.ReactNode {
const { editor } = this.props;
const { componentMetadatas, library, extraEnvironment } = this.state;
const { componentMetadatas, library, extraEnvironment, renderEnv } = this.state;
if (!library || !componentMetadatas) {
// TODO: use a Loading
@ -76,6 +80,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
simulatorProps={{
library,
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.
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>
## [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",
"version": "0.8.18",
"version": "0.8.20",
"description": "alibaba lowcode editor event bind dialog plugin",
"files": [
"es",
@ -19,8 +19,8 @@
],
"author": "zude.hzd",
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.11",
"@alifd/next": "^1.19.16",
"react": "^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.
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>
## [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",
"version": "0.8.29",
"version": "0.8.33",
"description": "Outline pane for Ali lowCode engine",
"files": [
"es",
@ -14,10 +14,10 @@
"test:snapshot": "ava --update-snapshots"
},
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"@alifd/next": "^1.19.16",
"classnames": "^2.2.6",
"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 irect = this.getInsertionRect();
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))) {
const loc = originLoc.clone(e);
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 {
const cv = this.node.isConditionalVisible();
if (cv == null) {
return this.node.getExtraProp('hidden', false)?.getValue() === true;
return !this.node.getVisible();
}
return !cv;
}
@ -81,11 +81,7 @@ export default class TreeNode {
if (this.node.conditionGroup) {
return;
}
if (flag) {
this.node.getExtraProp('hidden', true)?.setValue(true);
} else {
this.node.getExtraProp('hidden', false)?.remove();
}
this.node.setVisible(!flag);
}
@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;
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 {
position: absolute;
display: block;

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

@ -9,13 +9,14 @@ import { intlNode } from '../locale';
@observer
export default class TreeBranches extends Component<{
treeNode: TreeNode;
isModal?: boolean;
}> {
shouldComponentUpdate() {
return false;
}
render() {
const treeNode = this.props.treeNode;
const { treeNode, isModal } = this.props;
const { expanded } = treeNode;
if (!expanded) {
@ -24,8 +25,10 @@ export default class TreeBranches extends Component<{
return (
<div className="tree-node-branches">
<TreeNodeSlots treeNode={treeNode} />
<TreeNodeChildren treeNode={treeNode} />
{
!isModal && <TreeNodeSlots treeNode={treeNode}/>
}
<TreeNodeChildren treeNode={treeNode} isModal={isModal || false}/>
</div>
);
}
@ -34,12 +37,13 @@ export default class TreeBranches extends Component<{
@observer
class TreeNodeChildren extends Component<{
treeNode: TreeNode;
isModal?: boolean;
}> {
shouldComponentUpdate() {
return false;
}
render() {
const { treeNode } = this.props;
const { treeNode, isModal } = this.props;
let children: any = [];
let groupContents: any[] = [];
let currentGrp: ExclusiveGroup;
@ -67,6 +71,10 @@ class TreeNodeChildren extends Component<{
/>
);
treeNode.children?.forEach((child, index) => {
const childIsModal = child.node.getPrototype().isModal();
if (isModal != childIsModal) {
return;
}
const { conditionGroup } = child.node;
if (conditionGroup !== currentGrp) {
endGroup();
@ -81,12 +89,12 @@ class TreeNodeChildren extends Component<{
children.push(insertion);
}
}
groupContents.push(<TreeNodeView key={child.id} treeNode={child} />);
groupContents.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal}/>);
} else {
if (index === dropIndex) {
children.push(insertion);
}
children.push(<TreeNodeView key={child.id} treeNode={child} />);
children.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal}/>);
}
});
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';
@observer
export default class TreeNodeView extends Component<{ treeNode: TreeNode }> {
export default class TreeNodeView extends Component<{
treeNode: TreeNode;
isModal?: boolean;
}> {
shouldComponentUpdate() {
return false;
}
render() {
const { treeNode } = this.props;
const { treeNode, isModal } = this.props;
const className = classNames('tree-node', {
// 是否展开
expanded: treeNode.expanded,
@ -35,8 +38,8 @@ export default class TreeNodeView extends Component<{ treeNode: TreeNode }> {
return (
<div className={className} data-id={treeNode.id}>
<TreeTitle treeNode={treeNode} />
<TreeBranches treeNode={treeNode} />
<TreeTitle treeNode={treeNode} isModal={isModal}/>
<TreeBranches treeNode={treeNode} isModal={false}/>
</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 { IconCond } from '../icons/cond';
import { IconLoop } from '../icons/loop';
import { IconRadioActive } from '../icons/radio-active';
import { IconRadio } from '../icons/radio';
import { createIcon } from '@ali/lowcode-utils';
@observer
export default class TreeTitle extends Component<{
treeNode: TreeNode;
isModal?: boolean;
}> {
state: {
editing: boolean;
@ -62,7 +65,7 @@ export default class TreeTitle extends Component<{
};
render() {
const { treeNode } = this.props;
const { treeNode, isModal } = this.props;
const { editing } = this.state;
const isCNode = !treeNode.isRoot();
const { node } = treeNode;
@ -72,7 +75,7 @@ export default class TreeTitle extends Component<{
const depth = treeNode.depth;
const indent = depth * 12;
style = {
paddingLeft: indent,
paddingLeft: indent + (isModal ? 12 : 0),
marginLeft: -indent,
};
}
@ -84,8 +87,31 @@ export default class TreeTitle extends Component<{
})}
style={style}
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} />}
<div className="tree-node-icon">{createIcon(treeNode.icon)}</div>
<div className="tree-node-title-label" onDoubleClick={isNodeParent ? this.enableEdit : undefined}>
@ -123,7 +149,7 @@ export default class TreeTitle extends Component<{
</Fragment>
)}
</div>
{isCNode && isNodeParent && <HideBtn treeNode={treeNode} />}
{isCNode && isNodeParent && !isModal && <HideBtn treeNode={treeNode} />}
{/*isCNode && isNodeParent && <LockBtn treeNode={treeNode} />*/}
</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 { isFormEvent } from '@ali/lowcode-utils';
import { Tree } from '../tree';
import TreeNodeView from './tree-node';
import RootTreeNodeView from './root-tree-node';
function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string {
let target: Element | null = e.target as Element;
@ -155,7 +155,7 @@ export default class TreeView extends Component<{ tree: Tree }> {
onClick={this.onClick}
onMouseLeave={this.onMouseLeave}
>
<TreeNodeView key={root.id} treeNode={root} />
<RootTreeNodeView key={root.id} treeNode={root} />
</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.
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>
## [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",
"version": "0.8.17",
"version": "0.8.19",
"description": "alibaba lowcode editor logo plugin",
"files": [
"es/",
@ -20,7 +20,7 @@
],
"author": "xiayang.xy",
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-core": "^0.8.21",
"react": "^16.8.1"
},
"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.
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>
## [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",
"version": "0.8.27",
"version": "0.8.31",
"description": "alibaba lowcode editor sample preview plugin",
"files": [
"es",
@ -18,8 +18,8 @@
"editor"
],
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.x",
"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.
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>
## [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",
"version": "0.8.15",
"version": "0.8.17",
"description": "alibaba lowcode editor source-editor plugin",
"files": [
"es",
@ -19,7 +19,7 @@
],
"author": "zude.hzd",
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.19.16",
"js-beautify": "^1.10.1",
"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.
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>
## [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",
"version": "0.8.27",
"version": "0.8.31",
"description": "alibaba lowcode editor undo redo plugin",
"files": [
"es",
@ -19,11 +19,11 @@
],
"author": "xiayang.xy",
"dependencies": {
"@ali/lowcode-designer": "^0.9.23",
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-skeleton": "^0.8.29",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-designer": "^0.9.27",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-editor-skeleton": "^0.8.33",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"react": "^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.
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>
## [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",
"version": "0.8.16",
"version": "0.8.18",
"description": "alibaba lowcode editor variable bind dialog plugin",
"files": [
"es",
@ -19,7 +19,7 @@
],
"author": "zude.hzd",
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-editor-core": "^0.8.21",
"@alifd/next": "^1.19.16",
"react": "^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.
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>
## [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",
"version": "0.8.20",
"version": "0.8.22",
"description": "alibaba lowcode editor zhong english plugin",
"files": [
"es",
@ -14,9 +14,9 @@
"test:snapshot": "ava --update-snapshots"
},
"dependencies": {
"@ali/lowcode-editor-core": "^0.8.19",
"@ali/lowcode-types": "^0.8.9",
"@ali/lowcode-utils": "^0.8.10",
"@ali/lowcode-editor-core": "^0.8.21",
"@ali/lowcode-types": "^0.8.11",
"@ali/lowcode-utils": "^0.8.12",
"react": "^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
* 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",
"private": true,
"description": "Rax renderer for Ali lowCode engine",
@ -30,7 +30,8 @@
},
"scripts": {
"start": "build-scripts start",
"prepublish": "npm run build"
"prepublish": "npm run build",
"build": "build-scripts build"
},
"dependencies": {
"@ali/b3-one": "^0.0.17",

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

@ -2,6 +2,7 @@ import { Component, createElement } from 'rax';
import PropTypes from 'prop-types';
import Debug from 'debug';
import View from 'rax-view';
import classnames from 'classnames';
import DataHelper from '../utils/dataHelper';
import {
forEach,
@ -18,10 +19,12 @@ import {
checkPropTypes,
generateI18n,
acceptsRef,
getFileCssName,
} from '../utils';
import VisualDom from '../comp/visualDom';
import AppContext from '../context/appContext';
import CompWrapper from '../hoc/compWrapper';
// import CompWrapper from '../hoc/compWrapper';
const debug = Debug('engine:base');
const DESIGN_MODE = {
@ -34,6 +37,7 @@ let scopeIdx = 0;
export default class BaseEngine extends Component {
static dislayName = 'base-engine';
static propTypes = {
locale: PropTypes.string,
messages: PropTypes.object,
@ -41,11 +45,13 @@ export default class BaseEngine extends Component {
__components: PropTypes.object,
__componentsMap: PropTypes.object,
__ctx: PropTypes.object,
__schema: PropTypes.object
__schema: PropTypes.object,
};
static defaultProps = {
__schema: {}
__schema: {},
};
static contextType = AppContext;
constructor(props, context) {
@ -79,32 +85,31 @@ export default class BaseEngine extends Component {
console.warn(e);
}
reloadDataSource = () => {
return new Promise((resolve, reject) => {
debug('reload data source');
if (!this.__dataHelper) {
reloadDataSource = () =>
new Promise((resolve, reject) => {
debug('reload data source');
if (!this.__dataHelper) {
this.__showPlaceholder = false;
return resolve();
}
this.__dataHelper
.getInitData()
.then((res) => {
this.__showPlaceholder = false;
return resolve();
}
this.__dataHelper
.getInitData()
.then(res => {
if (isEmpty(res)) {
this.forceUpdate();
return resolve();
}
this.setState(res, resolve);
})
.catch((err) => {
if (this.__showPlaceholder) {
this.__showPlaceholder = false;
if (isEmpty(res)) {
this.forceUpdate();
return resolve();
}
this.setState(res, resolve);
})
.catch(err => {
if (this.__showPlaceholder) {
this.__showPlaceholder = false;
this.forceUpdate();
}
reject(err);
});
});
};
this.forceUpdate();
}
reject(err);
});
});
__setLifeCycleMethods = (method, args) => {
const lifeCycleMethods = getValue(this.props.__schema, 'lifeCycles', {});
@ -121,7 +126,7 @@ export default class BaseEngine extends Component {
const { __schema } = props;
const customMethodsList = Object.keys(__schema.methods || {}) || [];
this.__customMethodsList &&
this.__customMethodsList.forEach(item => {
this.__customMethodsList.forEach((item) => {
if (!customMethodsList.includes(item)) {
delete this[item];
}
@ -132,12 +137,12 @@ export default class BaseEngine extends Component {
});
};
__generateCtx = ctx => {
__generateCtx = (ctx) => {
const { pageContext, compContext } = this.context;
const obj = {
page: pageContext,
component: compContext,
...ctx
...ctx,
};
forEach(obj, (val, key) => {
this[key] = val;
@ -153,19 +158,22 @@ export default class BaseEngine extends Component {
const schema = props.__schema || {};
const appHelper = props.__appHelper;
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;
// 设置容器组件占位，若设置占位则在初始异步请求完成之前用loading占位且不渲染容器组件内部内容
this.__showPlaceholder =
this.__parseData(schema.props && schema.props.autoLoading) &&
(dataSource.list || []).some(item => !!this.__parseData(item.isInit));
if (this.__parseData(schema.props && schema.props.autoLoading)) {
this.__showPlaceholder = (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 = () => {
const schema = this.props.__schema;
this.__setLifeCycleMethods('render');
const engine = this.context.engine;
const { engine } = this.context;
if (engine) {
engine.props.onCompGetCtx(schema, this);
// 画布场景才需要每次渲染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;
};
@ -186,7 +197,7 @@ export default class BaseEngine extends Component {
self.__proto__ = __ctx || this;
return this.__createVirtualDom(__schema.children, self, {
schema: __schema,
Comp: __components[__schema.componentName]
Comp: __components[__schema.componentName],
});
};
@ -200,7 +211,7 @@ export default class BaseEngine extends Component {
// rax text prop 兼容处理
if (schema.componentName === 'Text') {
if (typeof schema.props.text === 'string') {
schema = Object.assign({}, schema);
schema = { ...schema };
schema.children = [schema.props.text];
}
}
@ -218,13 +229,13 @@ export default class BaseEngine extends Component {
if (Array.isArray(schema)) {
if (schema.length === 1) return this.__createVirtualDom(schema[0], self, parentInfo);
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) {
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);
}
@ -238,11 +249,11 @@ export default class BaseEngine extends Component {
return this.__createLoopVirtualDom(
{
...schema,
loop: parseData(schema.loop, self)
loop: parseData(schema.loop, self),
},
self,
parentInfo,
idx
idx,
);
}
const condition = schema.condition === undefined ? true : parseData(schema.condition, self);
@ -258,7 +269,7 @@ export default class BaseEngine extends Component {
} else if (!schema.__ctx) {
// 在生产环境schema没有__ctx上下文，需要手动生成一个lunaKey
schema.__ctx = {
lunaKey: `luna${++scopeIdx}`
lunaKey: `luna${++scopeIdx}`,
};
scopeKey = schema.__ctx.lunaKey;
} else {
@ -282,7 +293,7 @@ export default class BaseEngine extends Component {
__schema: schema,
__appHelper: appHelper,
__components: components,
__componentsMap: componentsMap
// __componentsMap: componentsMap,
}
: {};
if (engine && engine.props.designMode) {
@ -294,20 +305,20 @@ export default class BaseEngine extends Component {
Comp,
componentInfo: {
...componentInfo,
props: transformArrayToMap(componentInfo.props, 'name')
}
props: transformArrayToMap(componentInfo.props, 'name'),
},
});
// 对于可以获取到ref的组件做特殊处理
if (!acceptsRef(Comp)) {
Comp = CompWrapper(Comp);
if (acceptsRef(Comp)) {
otherProps.ref = (ref) => {
const refProps = props.ref;
if (refProps && typeof refProps === 'string') {
this[refProps] = ref;
}
engine && engine.props.onCompGetRef(schema, ref);
};
}
otherProps.ref = ref => {
const refProps = props.ref;
if (refProps && typeof refProps === 'string') {
this[refProps] = ref;
}
engine && engine.props.onCompGetRef(schema, ref);
};
// scope需要传入到组件上
if (scopeKey && 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) {
props.key = idx;
}
const renderComp = props => (
<Comp {...props}>
{(!isFileSchema(schema) &&
!!schema.children &&
props.__id = schema.id;
let Child = null;
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(
isJSExpression(schema.children) ? parseExpression(schema.children, self) : schema.children,
self,
{
schema,
Comp
}
Comp,
},
)) ||
null}
</Comp>
);
//设计模式下的特殊处理
null,
);
// 设计模式下的特殊处理
if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
//对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
// 对于overlay,dialog等组件为了使其在设计模式下显示，外层需要增加一个div容器
if (OVERLAY_LIST.includes(schema.componentName)) {
const { ref, ...overlayProps } = otherProps;
return (
@ -373,49 +399,56 @@ export default class BaseEngine extends Component {
return schema.loop.map((item, i) => {
const loopSelf = {
[itemArg]: item,
[indexArg]: i
[indexArg]: i,
};
loopSelf.__proto__ = self;
return this.__createVirtualDom(
{
...schema,
loop: undefined
loop: undefined,
},
loopSelf,
parentInfo,
idx ? `${idx}_${i}` : i
idx ? `${idx}_${i}` : i,
);
});
};
__createContextDom = (childCtx, currCtx) => {
return (
<AppContext.Consumer>
{context => {
this.context = context;
this.__generateCtx(currCtx);
this.__render();
return (
<AppContext.Provider
value={{
...this.context,
...childCtx
}}
>
{this.__createDom()}
</AppContext.Provider>
);
}}
</AppContext.Consumer>
);
};
__createContextDom = (childCtx, currCtx, props) => (
<AppContext.Consumer>
{(context) => {
this.context = context;
this.__generateCtx(currCtx);
this.__render();
return (
<AppContext.Provider
value={{
...this.context,
...childCtx,
}}
>
{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.Consumer>
);
__parseProps = (props, self, path, info) => {
const { schema, Comp, componentInfo = {} } = info;
const propInfo = getValue(componentInfo.props, path);
const propType = propInfo && propInfo.extra && propInfo.extra.propType;
const ignoreParse = schema.__ignoreParse || [];
const checkProps = value => {
const checkProps = (value) => {
if (!propType) return value;
return checkPropTypes(value, path, propType, componentInfo.name) ? value : undefined;
};
@ -423,27 +456,26 @@ export default class BaseEngine extends Component {
const parseReactNode = (data, params) => {
if (isEmpty(params)) {
return checkProps(this.__createVirtualDom(data, self, { schema, Comp }));
} else {
return checkProps(function() {
const args = {};
if (Array.isArray(params) && params.length) {
params.map((item, idx) => {
if (typeof item === 'string') {
args[item] = arguments[idx];
} else if (item && typeof item === 'object') {
args[item.name] = arguments[idx];
}
});
}
args.__proto__ = self;
return self.__createVirtualDom(data, args, { schema, Comp });
});
}
return checkProps(function() {
const args = {};
if (Array.isArray(params) && params.length) {
params.map((item, idx) => {
if (typeof item === 'string') {
args[item] = arguments[idx];
} else if (item && typeof item === 'object') {
args[item.name] = arguments[idx];
}
});
}
args.__proto__ = self;
return self.__createVirtualDom(data, args, { schema, Comp });
});
};
// 判断是否需要解析变量
if (
ignoreParse.some(item => {
ignoreParse.some((item) => {
if (item instanceof RegExp) {
return item.test(path);
}
@ -469,11 +501,14 @@ export default class BaseEngine extends Component {
// 兼容通过componentInfo判断的情况
if (isSchema(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)));
} else if (typeof props === 'function') {
}
if (typeof props === 'function') {
return checkProps(props.bind(self));
} else if (props && typeof props === 'object') {
}
if (props && typeof props === 'object') {
if (props.$$typeof) return checkProps(props);
const res = {};
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);
});
return checkProps(res);
} else if (typeof props === 'string') {
}
if (typeof props === 'string') {
return checkProps(props.trim());
}
return checkProps(props);
@ -493,15 +529,19 @@ export default class BaseEngine extends Component {
get utils() {
return this.appHelper && this.appHelper.utils;
}
get constants() {
return this.appHelper && this.appHelper.constants;
}
get history() {
return this.appHelper && this.appHelper.history;
}
get location() {
return this.appHelper && this.appHelper.location;
}
get 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 {
static dislayName = 'block-engine';
static propTypes = {
__schema: PropTypes.object
__schema: PropTypes.object,
};
static defaultProps = {
__schema: {}
__schema: {},
};
static getDerivedStateFromProps(props, state) {
debug(`block.getDerivedStateFromProps`);
debug('block.getDerivedStateFromProps');
const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
if (func) {
return func(props, state);
@ -39,18 +41,22 @@ export default class BlockEngine extends BaseEngine {
super.getSnapshotBeforeUpdate(...arguments);
debug(`block.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
}
async componentDidMount() {
super.componentDidMount(...arguments);
debug(`block.componentDidMount - ${this.props.__schema.fileName}`);
}
async componentDidUpdate() {
super.componentDidUpdate(...arguments);
debug(`block.componentDidUpdate - ${this.props.__schema.fileName}`);
}
async componentWillUnmount() {
super.componentWillUnmount(...arguments);
debug(`block.componentWillUnmount - ${this.props.__schema.fileName}`);
}
async componentDidCatch() {
await super.componentDidCatch(...arguments);
debug(`block.componentDidCatch - ${this.props.__schema.fileName}`);
@ -69,13 +75,13 @@ export default class BlockEngine extends BaseEngine {
return (
<div
ref={this.__getRef}
// ref={this.__getRef}
className={classnames('luna-block', getFileCssName(__schema.fileName), className, this.props.className)}
id={id}
style={style}
>
{this.__createContextDom({
blockContext: this
blockContext: this,
})}
</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 {
static dislayName = 'comp-engine';
static propTypes = {
__schema: PropTypes.object
__schema: PropTypes.object,
};
static defaultProps = {
__schema: {}
__schema: {},
};
static getDerivedStateFromProps(props, state) {
debug(`comp.getDerivedStateFromProps`);
debug('comp.getDerivedStateFromProps');
const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
if (func) {
return func(props, state);
@ -28,7 +30,7 @@ export default class CompEngine extends BaseEngine {
constructor(props, context) {
super(props, context);
this.__generateCtx({
component: this
component: this,
});
const schema = props.__schema || {};
this.state = this.__parseData(schema.state || {});
@ -41,18 +43,22 @@ export default class CompEngine extends BaseEngine {
super.getSnapshotBeforeUpdate(...arguments);
debug(`comp.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
}
async componentDidMount() {
super.componentDidMount(...arguments);
debug(`comp.componentDidMount - ${this.props.__schema.fileName}`);
}
async componentDidUpdate() {
super.componentDidUpdate(...arguments);
debug(`comp.componentDidUpdate - ${this.props.__schema.fileName}`);
}
async componentWillUnmount() {
super.componentWillUnmount(...arguments);
debug(`comp.componentWillUnmount - ${this.props.__schema.fileName}`);
}
async componentDidCatch(e) {
super.componentDidCatch(...arguments);
debug(`comp.componentDidCatch - ${this.props.__schema.fileName}`);
@ -67,23 +73,25 @@ export default class CompEngine extends BaseEngine {
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) {
return this.__createContextDom(
{
compContext: this,
blockContext: this
blockContext: this,
},
{
component: this
}
component: this,
},
);
}
return (
<div
ref={this.__getRef}
// ref={this.__getRef}
className={classnames('luna-comp', getFileCssName(__schema.fileName), className, this.props.className)}
id={this.props.id || id}
style={{ ...style, ...this.props.style }}
@ -91,11 +99,11 @@ export default class CompEngine extends BaseEngine {
{this.__createContextDom(
{
compContext: this,
blockContext: this
blockContext: this,
},
{
component: this
}
component: this,
},
)}
</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 Debug from 'debug';
import * as isEmpty from 'lodash/isEmpty';
import findDOMNode from 'rax-find-dom-node';
import { isFileSchema, goldlog } from '../utils';
import AppContext from '../context/appContext';
import Page from './pageEngine';
import CustomComp from './compEngine';
import Block from './blockEngine';
import Temp from './tempEngine';
import PageEngine from './pageEngine';
import ComponentEngine from './compEngine';
import BlockEngine from './blockEngine';
import TempEngine from './tempEngine';
import BaseEngine from './base';
const debug = Debug('engine:entry');
const ENGINE_COMPS = {
Page,
Component: CustomComp,
Block,
Temp,
PageEngine,
ComponentEngine,
BlockEngine,
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 {
static dislayName = 'engine';
static propTypes = {
appHelper: PropTypes.object,
components: PropTypes.object,
@ -27,8 +46,12 @@ export default class Engine extends Component {
suspended: PropTypes.bool,
schema: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
onCompGetRef: PropTypes.func,
onCompGetCtx: PropTypes.func
onCompGetCtx: PropTypes.func,
customCreateElement: PropTypes.func,
notFoundComponent: PropTypes.element,
faultComponent: PropTypes.element,
};
static defaultProps = {
appHelper: null,
components: {},
@ -37,7 +60,7 @@ export default class Engine extends Component {
suspended: false,
schema: {},
onCompGetRef: () => {},
onCompGetCtx: () => {}
onCompGetCtx: () => {},
};
constructor(props, context) {
@ -51,9 +74,9 @@ export default class Engine extends Component {
'EXP',
{
action: 'appear',
value: !!this.props.designMode
value: !!this.props.designMode,
},
'engine'
'engine',
);
debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
}
@ -74,15 +97,60 @@ export default class Engine extends Component {
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;
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() {
const { schema, designMode, appHelper, components, componentsMap } = this.props;
const { schema, designMode, appHelper, components } = this.props;
if (isEmpty(schema)) {
return null;
}
@ -91,15 +159,22 @@ export default class Engine extends Component {
}
debug('entry.render');
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) {
return (
<AppContext.Provider
value={{
appHelper,
components: allComponents,
componentsMap,
engine: this
engine: this,
}}
>
<Comp
@ -107,9 +182,9 @@ export default class Engine extends Component {
ref={this.__getRef}
__appHelper={appHelper}
__components={allComponents}
__componentsMap={componentsMap}
__schema={schema}
__designMode={designMode}
// __id={schema.id}
{...this.props}
/>
</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 Debug from 'debug';
import classnames from 'classnames';
import AppContext from '../context/appContext';
import { isSchema, getFileCssName } from '../utils';
import BaseEngine from './base';
@ -9,15 +10,19 @@ const debug = Debug('engine:page');
export default class PageEngine extends BaseEngine {
static dislayName = 'page-engine';
static propTypes = {
__schema: PropTypes.object
};
static defaultProps = {
__schema: {}
__schema: PropTypes.object,
};
static defaultProps = {
__schema: {},
};
static contextType = AppContext;
static getDerivedStateFromProps(props, state) {
debug(`page.getDerivedStateFromProps`);
debug('page.getDerivedStateFromProps');
const func = props.__schema.lifeCycles && props.__schema.lifeCycles.getDerivedStateFromProps;
if (func) {
return func(props, state);
@ -28,10 +33,11 @@ export default class PageEngine extends BaseEngine {
constructor(props, context) {
super(props, context);
this.__generateCtx({
page: this
page: this,
});
const schema = props.__schema || {};
this.state = this.__parseData(schema.state || {});
this.__initDataSource(props);
this.__setLifeCycleMethods('constructor', arguments);
@ -42,31 +48,103 @@ export default class PageEngine extends BaseEngine {
super.getSnapshotBeforeUpdate(...arguments);
debug(`page.getSnapshotBeforeUpdate - ${this.props.__schema.fileName}`);
}
async componentDidMount() {
super.componentDidMount(...arguments);
debug(`page.componentDidMount - ${this.props.__schema.fileName}`);
}
async componentDidUpdate() {
super.componentDidUpdate(...arguments);
debug(`page.componentDidUpdate - ${this.props.__schema.fileName}`);
}
async componentWillUnmount() {
super.componentWillUnmount(...arguments);
debug(`page.componentWillUnmount - ${this.props.__schema.fileName}`);
}
async componentDidCatch() {
await super.componentDidCatch(...arguments);
debug(`page.componentDidCatch - ${this.props.__schema.fileName}`);
}
render() {
const { __schema } = this.props;
const { __schema, __components } = this.props;
if (!isSchema(__schema, true) || __schema.componentName !== 'Page') {
return '页面schema结构异常！';
}
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 (
<div
@ -75,15 +153,7 @@ export default class PageEngine extends BaseEngine {
id={id}
style={style}
>
{this.__createContextDom(
{
pageContext: this,
blockContext: this
},
{
page: this
}
)}
{renderContent()}
</div>
);
}

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

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

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

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

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