Browse Source

Merge branch '0.3.x' of https://github.com/imgcook/imove into 0.3.x

master
yangpei 4 years ago
parent
commit
0e4c1d5d30
  1. 2
      packages/core/package.json
  2. 16
      packages/core/src/mods/settingBar/components/code/index.tsx
  3. 1
      packages/core/src/mods/settingBar/components/json/index.tsx
  4. 4
      packages/core/src/mods/settingBar/mods/basic/index.module.less
  5. 57
      packages/core/src/mods/settingBar/mods/basic/index.tsx
  6. 49
      packages/core/src/utils/analyzeDeps.ts

2
packages/core/package.json

@ -1,6 +1,6 @@
{ {
"name": "@imove/core", "name": "@imove/core",
"version": "0.3.5", "version": "0.3.7",
"description": "流程编排", "description": "流程编排",
"keywords": [ "keywords": [
"imove", "imove",

16
packages/core/src/mods/settingBar/components/code/index.tsx

@ -81,6 +81,7 @@ interface IEditorModalProps {
const EditModal: React.FC<IEditorModalProps> = (props) => { const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onSave, onOk, onCancel } = props; const { visible, title, value, onSave, onOk, onCancel } = props;
const [code, setCode] = useState<string>(value); const [code, setCode] = useState<string>(value);
const [editorInst, setEditorInst] = useState<any>();
const [codeRunVisible, setCodeRunVisible] = useState<boolean>(false); const [codeRunVisible, setCodeRunVisible] = useState<boolean>(false);
// life // life
@ -93,6 +94,15 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
setCode(''); setCode('');
} }
}, [visible]); }, [visible]);
useEffect(() => {
if(editorInst) {
// NOTE: how to add command(https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#addcommand)
editorInst.addCommand(KeyMod.CtrlCmd | KeyCode.KEY_S, () => {
onSave(editorInst.getValue());
message.success('保存成功', 1);
});
}
}, [editorInst, onSave]);
// events // events
const onEditOk = (): void => { const onEditOk = (): void => {
@ -112,11 +122,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
} }
}; };
const onEditorDidMount: EditorDidMount = (getEditorValue, editor) => { const onEditorDidMount: EditorDidMount = (getEditorValue, editor) => {
// doc: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#addcommand setEditorInst(editor);
editor.addCommand(KeyMod.CtrlCmd | KeyCode.KEY_S, () => {
onSave(getEditorValue());
message.success('保存成功', 1);
});
}; };
const onChange = (value: any) => { const onChange = (value: any) => {

1
packages/core/src/mods/settingBar/components/json/index.tsx

@ -118,6 +118,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
value={json} value={json}
width={'100%'} width={'100%'}
height={'600px'} height={'600px'}
language={'json'}
onChange={onChangeJson} onChange={onChangeJson}
/> : /> :
<CodeRun isConfig={true} onChange={onChangeJson} /> <CodeRun isConfig={true} onChange={onChangeJson} />

4
packages/core/src/mods/settingBar/mods/basic/index.module.less

@ -3,3 +3,7 @@
height: 100%; height: 100%;
overflow: scroll; overflow: scroll;
} }
.depsInfoModalContent {
padding-top: 20px;
}

57
packages/core/src/mods/settingBar/mods/basic/index.tsx

@ -1,11 +1,18 @@
import React, { useState, useEffect } from 'react'; import React, {
useState,
useEffect,
} from 'react';
import styles from './index.module.less'; import styles from './index.module.less';
import { Modal } from 'antd';
import { Cell, Graph } from '@antv/x6'; import { Cell, Graph } from '@antv/x6';
import JsonView from 'react-json-view';
import Json from '../../components/json'; import Json from '../../components/json';
import Code from '../../components/code'; import Code from '../../components/code';
import Input from '../../components/input'; import Input from '../../components/input';
import { safeParse } from '../../../../utils/index';
import analyzeDeps from '../../../../utils/analyzeDeps';
interface IProps { interface IProps {
selectedCell: Cell; selectedCell: Cell;
@ -22,7 +29,7 @@ interface IBasicData {
const Basic: React.FC<IProps> = (props) => { const Basic: React.FC<IProps> = (props) => {
const { selectedCell, flowChart } = props; const { selectedCell, flowChart } = props;
const [data, setData] = useState<IBasicData>(); const [data, setData] = useState<IBasicData>(selectedCell.getData());
const { label, code, trigger, dependencies, configSchema } = data || {}; const { label, code, trigger, dependencies, configSchema } = data || {};
// life // life
@ -31,9 +38,12 @@ const Basic: React.FC<IProps> = (props) => {
}, [selectedCell]); }, [selectedCell]);
// events // events
const batchUpdate = (newData: { [key: string]: any }): void => {
selectedCell.setData(newData);
setData(Object.assign({}, data, newData));
};
const commonChange = (key: string, val: string): void => { const commonChange = (key: string, val: string): void => {
selectedCell.setData({ [key]: val }); batchUpdate({ [key]: val });
setData(Object.assign({}, data, { [key]: val }));
}; };
const onChangeLabel = (val: string): void => { const onChangeLabel = (val: string): void => {
commonChange('label', val); commonChange('label', val);
@ -43,9 +53,42 @@ const Basic: React.FC<IProps> = (props) => {
commonChange('configSchema', val); commonChange('configSchema', val);
selectedCell.trigger('change:configSchema', { configSchema: val }); selectedCell.trigger('change:configSchema', { configSchema: val });
}; };
const onChangeCode = (val: string): void => commonChange('code', val); const onChangeTrigger = (val: string): void => {
const onChangeTrigger = (val: string): void => commonChange('trigger', val); commonChange('trigger', val);
const onChangeDependencies = (val: string): void => commonChange('dependencies', val); };
const onChangeDependencies = (val: string): void => {
commonChange('dependencies', val);
};
const onChangeCode = (val: string): void => {
commonChange('code', val);
// NOTE: if code changes, check whether new dependencies are added
const excludeDeps = safeParse(data?.dependencies as string);
analyzeDeps(val, Object.keys(excludeDeps)).then((deps) => {
if (Object.keys(deps).length > 0) {
Modal.info({
title: '检测到您的代码有新依赖,已为您自动更新',
content: (
<div className={styles.depsInfoModalContent}>
<JsonView
src={deps}
name={'dependencies'}
collapsed={false}
enableClipboard={false}
displayDataTypes={false}
displayObjectSize={false}
/>
</div>
),
onOk() {
batchUpdate({
code: val,
dependencies: JSON.stringify({ ...excludeDeps, ...deps }, null, 2)
});
},
});
}
});
};
return ( return (
<div className={styles.container}> <div className={styles.container}>

49
packages/core/src/utils/analyzeDeps.ts

@ -0,0 +1,49 @@
import axios from 'axios';
import { safeGet } from './index';
const regex = /import\s([\s\S]*?)\sfrom\s(?:('[@\.\/\-\w]+')|("[@\.\/\-\w]+"))/mg;
const extractPkgs = (code: string, excludePkgs?: string[]): string[] => {
let matchRet = null;
const pkgNames: string[] = [];
while ((matchRet = regex.exec(code)) != null) {
let pkgName = (matchRet[2] || matchRet[3]);
pkgName = pkgName.slice(1, pkgName.length - 1);
// NOTE: ignore relative path (./ and ../) and excludePkgs
if (
pkgName.indexOf('./') === -1 &&
pkgName.indexOf('../') === -1 &&
excludePkgs?.indexOf(pkgName) === -1
) {
pkgNames.push(pkgName);
}
}
return pkgNames;
};
const getPkgLatestVersion = (pkg: string): Promise<string[]> => {
return axios.get(`https://registry.npm.taobao.org/${pkg}`)
.then(res => {
return [pkg, safeGet(res, 'data.dist-tags.latest', '*')];
}).catch(err => {
console.log(`get package ${pkg} info failed, the error is:`, err);
return [pkg, '*'];
});
};
const analyzeDeps = (code: string, excludePkgs?: string[]): Promise<{ [pkgName: string]: string }> => {
const pkgs = extractPkgs(code, excludePkgs);
return Promise
.all(pkgs.map(pkg => getPkgLatestVersion(pkg)))
.then(pkgResults => {
const map: any = {};
pkgResults.forEach(([pkg, version]) => {
map[pkg] = version;
});
return map;
}).catch(err => {
console.log('analyze deps failed, the error is:', err);
});
};
export default analyzeDeps;
Loading…
Cancel
Save