github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 01:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix array and sourceeditor bugs

Browse Source
This commit is contained in:
zude.hzd 2020-10-12 10:29:09 +08:00
commit 26b8b2cab7
10 changed files with 179 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -14,7 +14,7 @@
"clean": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build",
"lint": "eslint --ext .ts,.tsx,.js,.jsx ./ --quiet",
"lint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./ --quiet --fix",
"pub": "lerna publish --force-publish --cd-version prepatch",
"pub": "lerna publish --force-publish --cd-version patch",
"setup": "./scripts/setup.sh",
"start": "./scripts/start.sh",
"start:server": "./scripts/start-server.sh",

5
packages/demo/package.json
View File

@ -5,7 +5,8 @@
"description": "低代码引擎 DEMO",
"scripts": {
"cloud-build": "build-scripts build --config cloud-build.json",
"start": "build-scripts start"
"start": "build-scripts start",
"build": "build-scripts build"
},
"config": {},
"dependencies": {
@ -38,7 +39,6 @@
"@alifd/next": "^1.19.12",
"@alife/theme-lowcode-light": "^0.1.0",
"compare-versions": "^3.0.1",
"monaco-editor": "0.21.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"streamsaver": "^2.0.4",
@ -53,7 +53,6 @@
"build-plugin-fusion": "^0.1.0",
"build-plugin-moment-locales": "^0.1.0",
"build-plugin-react-app": "^1.1.2",
"monaco-editor-webpack-plugin": "2.0.0",
"tsconfig-paths-webpack-plugin": "^3.2.0"
}
}

3
packages/demo/src/editor/config.ts
View File

@ -123,6 +123,9 @@ export default {
const simulatorUrl = [
'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.css',
'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
// for debug
// 'http://localhost:3333/js/react-simulator-renderer.js',
// 'http://localhost:3333/js/react-simulator-renderer.css',
];
editor.set('simulatorUrl', simulatorUrl);
// editor.set('renderEnv', 'rax');

56
packages/editor-skeleton/src/components/popup/index.tsx
View File

@ -1,6 +1,6 @@
import { createContext, ReactNode, Component, PureComponent } from 'react';
import { EventEmitter } from 'events';
import { Balloon } from '@alifd/next';
import { Drawer } from '@alifd/next';
import { uniqueId } from '@ali/lowcode-utils';
import './style.less';
@ -67,6 +67,7 @@ export default class PopupService extends Component<{ popupPipe?: PopupPipe; act
this.popupPipe.purge();
}
render() {
const { children, actionKey, safeId } = this.props;
return (
@ -83,7 +84,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
state: any = {
visible: false,
pos: {},
offsetX: -300,
};
private dispose = (this.context as PopupPipe).onPopupChange((props, target) => {
@ -102,44 +103,47 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
this.setState(state);
});
componentDidMount() {
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (clientWidth >= 1860) {
this.setState({
offsetX: -400,
});
}
}
componentWillUnmount() {
this.dispose();
}
onClose = () => {
this.setState({
visible: false,
});
};
render() {
const { content, visible, width, title, pos, actionKey } = this.state;
const { content, visible, title, actionKey, offsetX } = this.state;
if (!visible) {
return null;
}
let avoidLaterHidden = true;
setTimeout(() => {
avoidLaterHidden = false;
}, 10);
const id = uniqueId('ball');
return (
<Balloon
className="lc-ballon"
align="l"
id={this.props.safeId}
alignEdge
safeNode={id}
<Drawer
width={360}
visible={visible}
style={{ width }}
onVisibleChange={(visible, type) => {
if (avoidLaterHidden) {
return;
}
if (!visible && type === 'closeClick') {
this.setState({ visible: false });
}
}}
trigger={<div className="lc-popup-placeholder" style={pos} />}
offset={[offsetX, 0]}
hasMask={false}
triggerType="click"
canCloseByOutSideClick={false}
animation={false}
needAdjust
shouldUpdatePosition
onClose={this.onClose}
id={this.props.safeId}
safeNode={id}
closeable
>
<div className="lc-ballon-title">{title}</div>
<div className="lc-ballon-content">
@ -147,7 +151,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
{content}
</PopupService>
</div>
</Balloon>
</Drawer>
);
}
}

9
packages/editor-skeleton/src/components/slot-setter/index.less
View File

@ -1,7 +1,12 @@
.lc-setter-slot {
display: flex;
align-items: center;
align-items: start;
.lc-slot-params {
margin-left: 5px;
margin-top: 5px;
}
}
.lc-setter-slot-column {
display: flex;
flex-direction: column;
}

14
packages/editor-skeleton/src/components/slot-setter/index.tsx
View File

@ -34,9 +34,11 @@ export default class SlotSetter extends Component<{
</Button>
);
}
const hasParams = value.params && Array.isArray(value.params);
return (
<div className="lc-setter-slot">
<div className="lc-setter-slot lc-setter-slot-column">
<Button
onClick={() => {
// TODO: use slot first child literal value pad
@ -59,7 +61,7 @@ export default class SlotSetter extends Component<{
onChange &&
onChange({
...value,
params,
params: params.length == 0 ? [''] : params,
});
}}
addonAfter={
@ -67,10 +69,10 @@ export default class SlotSetter extends Component<{
type="secondary"
onClick={() => {
onChange &&
onChange({
type: 'JSSlot',
value: value.value,
});
onChange({
...value,
params: [''],
});
}}
>
<Icon type="close" />

16
packages/editor-skeleton/src/components/stage-box/stage-box.tsx
View File

@ -5,6 +5,7 @@ import { SettingTopEntry, SettingField } from '@ali/lowcode-designer';
import StageChain from './stage-chain';
import Stage from './stage';
import { Skeleton } from '../../skeleton';
import PopupService, { PopupPipe } from '../popup';
import { Stage as StageWidget } from '../../widget/stage';
export const StageBoxDefaultProps = {};
@ -22,6 +23,8 @@ type WillDetachMember = () => void;
@observer
export default class StageBox extends Component<StageBoxProps> {
static defaultProps = StageBoxDefaultProps;
static displayName = 'StageBox';
@ -32,6 +35,10 @@ export default class StageBox extends Component<StageBoxProps> {
private shell: HTMLElement | null;
private popupPipe = new PopupPipe();
private pipe = this.popupPipe.create();
constructor(props: StageBoxProps) {
super(props);
const { stageChain, children, skeleton } = this.props;
@ -114,8 +121,13 @@ export default class StageBox extends Component<StageBoxProps> {
}}
className={className}
>
{contentRefer}
{contentCurrent}
<PopupService popupPipe={this.popupPipe}>
{contentRefer}
{contentCurrent}
</PopupService>
</div>
);
}

8
packages/plugin-sample-preview/src/index.tsx
View File

@ -13,6 +13,9 @@ const SamplePreview = ({ editor }: PluginProps) => {
if (!editor) {
return;
}
// 由于monaco editor的cdn加载形式会占用define字段，导致预览的时候部分next组件加载异常，所以预览弹框的时候需要对define做一个临时的替换
window.__define = window.define;
window.define = null;
const designer = editor.get(Designer);
if (designer) {
const assets = await editor.get('assets');
@ -46,11 +49,16 @@ const SamplePreview = ({ editor }: PluginProps) => {
components,
});
setVisible(true);
}
}
function handleClose() {
window.define = window.__define;
setVisible(false);
}
const { schema, components } = data;

132
packages/plugin-source-editor/src/transform.ts
View File

@ -7,7 +7,7 @@ const transfrom = {
schema2Code(schema) {
const componentSchema = schema.componentsTree[0];
const code =
`export default class {
`export default class LowcodeComponent extends Component {
${initStateCode(componentSchema)}
${initLifeCycleCode(componentSchema)}
${initMethodsCode(componentSchema)}
@ -17,40 +17,118 @@ const transfrom = {
},
code2Schema(code: string) {
const newCode = code.replace(/export default class/, 'class A');
let A; let a;
try {
// eslint-disable-next-line no-eval
A = eval(`(${newCode})`);
a = new A();
} catch (e) {
console.log(e.message);
return null;
}
// eslint-disable-next-line no-proto
const functionNameList = Object.getOwnPropertyNames(a.__proto__);
let codeNew = code;
const functionMap = {};
let startIndex;
functionNameList.map((functionName) => {
if (functionName != 'constructor') {
if (a[functionName]) {
const functionCode = a[functionName].toString().replace(new RegExp(functionName), 'function');
functionMap[functionName] = functionCode;
}
}
return functionName;
});
if (a.state) {
functionMap.state = a.state;
const stateStartStr = this.pickupStateStartStr(codeNew);
if (stateStartStr != null) {
startIndex = codeNew.indexOf(stateStartStr) + stateStartStr.length;
const stateBodyStr = this.pickupFunctionBody(codeNew, startIndex);
const stateData = JSON.parse('{' + stateBodyStr);
functionMap.state = stateData;
}
while (true) {
const functionNameStr = this.pickupFunctionName(codeNew);
if (functionNameStr != null) {
startIndex = codeNew.indexOf(functionNameStr) + functionNameStr.length;
const functionBodyStr = this.pickupFunctionBody(codeNew, startIndex);
const functionStr = functionNameStr + functionBodyStr;
codeNew = codeNew.replace(functionStr, '');
const functionName = functionNameStr.match(/\w+/);
functionMap[functionName] = functionStr.replace(functionName, 'function');
} else {
break;
}
}
// debugger;
// const newCode = code.replace(/export default class LowcodeComponent extends Component/, 'class A');
// let A; let a;
// try {
// // eslint-disable-next-line no-eval
// A = eval(`(${newCode})`);
// a = new A();
// } catch (e) {
// console.log(e.message);
// return null;
// }
// // eslint-disable-next-line no-proto
// const functionNameList = Object.getOwnPropertyNames(a.__proto__);
// const functionMap = {};
// functionNameList.map((functionName) => {
// if (functionName != 'constructor') {
// if (a[functionName]) {
// const functionCode = a[functionName].toString().replace(new RegExp(functionName), 'function');
// functionMap[functionName] = functionCode;
// }
// }
// return functionName;
// });
// if (a.state) {
// functionMap.state = a.state;
// }
console.log(functionMap);
return functionMap;
},
pickupFunctionName(codeStr) {
// 函数名的正则表达式
// eslint-disable-next-line no-useless-escape
const reg = /\w+\s?\((\w|\,|\s)*\)\s?\{/;
const result = codeStr.match(reg);
if (result && result[0]) {
const functionNameStr = result[0];
return functionNameStr;
}
return null;
},
pickupFunctionBody(codeStr, startIndex) {
const startStr = codeStr.substr(startIndex);
const stack = []; let endIndex;
for (let i = 0; i < startStr.length; i++) {
// 如果发现已经有{,则是内函数或者是系统函数，需要进行排除
if (startStr[i] === '{') {
stack.push(i);
}
// 判断是否是函数体的结尾
if (startStr[i] === '}') {
// 有内函数，出栈
if (stack.length > 0) {
stack.pop();
} else {
endIndex = i;
break;
}
}
}
const functionBodyStr = startStr.substr(0, endIndex + 1);
// console.log(functionBodyStr);
return functionBodyStr;
},
// 捕获state头部部分
pickupStateStartStr(codeStr) {
const reg = /state\s?=\s?\s?\{/;
const result = codeStr.match(reg);
if (result && result[0]) {
const stateStartStr = result[0];
return stateStartStr;
}
return null;
},
getNewFunctionCode(functionName: string) {
return `\n\t${functionName}(){\n\t}\n`;
},

2
packages/react-renderer/package.json
View File

@ -53,5 +53,5 @@
"publishConfig": {
"registry": "http://registry.npm.alibaba-inc.com"
},
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@1.0.9/build/index.html"
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@1.0.10/build/index.html"
}