Browse Source

feat: supports mock input when running code online

master
smallstonesk 4 years ago
parent
commit
4bf1ac33a9
  1. 2
      example/mock/db.json
  2. 18
      packages/compile-code/src/compileForOnline.ts
  3. 33
      packages/compile-code/src/template/runOnline.ts
  4. 4
      packages/core/src/components/codeRun/index.tsx

2
example/mock/db.json

@ -464,7 +464,7 @@
"configSchema": "{\n \n}",
"configData": {},
"dependencies": "{\n \"lodash.get\": \"4.4.2\"\n}",
"code": "import fpget from 'lodash.get';\n\nexport default async function(ctx) {\n const obj = {a: {b: 'hello imove~'}};\n console.log(fpget(obj, 'a.b'));\n}"
"code": "import fpget from 'lodash.get';\n\nexport default async function(ctx) {\n const obj = {a: {b: 'hello imove~'}};\n console.log(fpget(obj, 'a.b'));\n return ctx.getPipe();\n}"
},
"ports": {
"groups": {

18
packages/compile-code/src/compileForOnline.ts

@ -1,5 +1,5 @@
import {Cell} from '@antv/x6';
import tpl from './template/runOnline';
import makeCode from './template/runOnline';
import simplifyDSL from './simplifyDSL';
interface DSL {
@ -69,6 +69,17 @@ const findStartNode = (dsl: DSL): Cell.Properties => {
return startNode;
};
const getNextNode = (curNode: Cell.Properties, dsl: DSL) => {
const nodes = dsl.cells.filter(cell => cell.shape !== 'edge');
const edges = dsl.cells.filter(cell => cell.shape === 'edge');
const foundEdge = edges.find(edge => edge.source.cell === curNode.id);
if(foundEdge) {
return nodes.find(node => node.id === foundEdge.target.cell);
}
};
const compileSimplifiedDSL = (dsl: DSL): string => {
const simplyfiedDSL = JSON.stringify(simplifyDSL(dsl), null, 2);
return `const dsl = ${simplyfiedDSL};`;
@ -96,9 +107,10 @@ const compileNodeFnsMap = (dsl: DSL): string => {
return `const nodeFns = {\n ${kvs.join(',\n ')}\n}`;
};
const compile = (dsl: DSL): string => {
const compile = (dsl: DSL, mockInput: any): string => {
const startNode = findStartNode(dsl);
return tpl
const mockNode = getNextNode(startNode, dsl);
return makeCode(mockNode, mockInput)
.replace(INSERT_DSL_COMMENT, compileSimplifiedDSL(dsl))
.replace(INSERT_NODE_FNS_COMMENT, compileNodeFnsMap(dsl))
.replace('$TRIGGER$', startNode.data.trigger);

33
packages/compile-code/src/template/runOnline.ts

@ -1,7 +1,7 @@
import logic from './logic';
import context from './context';
export default `
const makeCode = (mockNode: any, mockInput: any) => `
(async function run() {
// Context
${context.replace(/export\s+default/, '')}
@ -24,8 +24,37 @@ export default `
// nodeFns map
// define nodeFns here
// imove plugin
const mockPlugin = () => {
const mockNode = ${JSON.stringify(mockNode)};
const mockInput = ${JSON.stringify(mockInput)};
const mockKeys = [
['config', 'getConfig'],
['pipe', 'getPipe'],
['payload', 'getPayload'],
['context', 'getContext']
];
return {
ctxCreated(ctx) {
if(mockNode && mockInput) {
mockKeys.forEach(([inputType, method]) => {
const _method = ctx[method];
ctx[method] = () => {
if(ctx.curNode.id === mockNode.id) {
return mockInput[inputType];
} else {
return _method();
}
}
});
}
},
};
};
// instantiation and invoke
const logic = new Logic({ dsl });
logic.use(mockPlugin);
logic.invoke('$TRIGGER$', {}, (pipe) => {
const ctx = logic._getUnsafeCtx();
const context = ctx.getContext();
@ -33,3 +62,5 @@ export default `
});
})();
`;
export default makeCode;

4
packages/core/src/components/codeRun/index.tsx

@ -69,9 +69,9 @@ const CodeRun: React.FC<ICodeRunProps> = (props) => {
const onClickRun = useCallback(() => {
const selectedCelssJson = toSelectedCellsJSON(flowChart);
const compiledCode = compileForOnline(selectedCelssJson);
const compiledCode = compileForOnline(selectedCelssJson, input);
executeScript(compiledCode);
}, [flowChart]);
}, [flowChart, input]);
const onChangeInput = useCallback((val: any) => {
setInput(val);

Loading…
Cancel
Save