Browse Source

feat: supports mock input when running code online

master
smallstonesk 5 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}", "configSchema": "{\n \n}",
"configData": {}, "configData": {},
"dependencies": "{\n \"lodash.get\": \"4.4.2\"\n}", "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": { "ports": {
"groups": { "groups": {

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

@ -1,5 +1,5 @@
import {Cell} from '@antv/x6'; import {Cell} from '@antv/x6';
import tpl from './template/runOnline'; import makeCode from './template/runOnline';
import simplifyDSL from './simplifyDSL'; import simplifyDSL from './simplifyDSL';
interface DSL { interface DSL {
@ -69,6 +69,17 @@ const findStartNode = (dsl: DSL): Cell.Properties => {
return startNode; 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 compileSimplifiedDSL = (dsl: DSL): string => {
const simplyfiedDSL = JSON.stringify(simplifyDSL(dsl), null, 2); const simplyfiedDSL = JSON.stringify(simplifyDSL(dsl), null, 2);
return `const dsl = ${simplyfiedDSL};`; return `const dsl = ${simplyfiedDSL};`;
@ -96,9 +107,10 @@ const compileNodeFnsMap = (dsl: DSL): string => {
return `const nodeFns = {\n ${kvs.join(',\n ')}\n}`; return `const nodeFns = {\n ${kvs.join(',\n ')}\n}`;
}; };
const compile = (dsl: DSL): string => { const compile = (dsl: DSL, mockInput: any): string => {
const startNode = findStartNode(dsl); const startNode = findStartNode(dsl);
return tpl const mockNode = getNextNode(startNode, dsl);
return makeCode(mockNode, mockInput)
.replace(INSERT_DSL_COMMENT, compileSimplifiedDSL(dsl)) .replace(INSERT_DSL_COMMENT, compileSimplifiedDSL(dsl))
.replace(INSERT_NODE_FNS_COMMENT, compileNodeFnsMap(dsl)) .replace(INSERT_NODE_FNS_COMMENT, compileNodeFnsMap(dsl))
.replace('$TRIGGER$', startNode.data.trigger); .replace('$TRIGGER$', startNode.data.trigger);

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

@ -1,7 +1,7 @@
import logic from './logic'; import logic from './logic';
import context from './context'; import context from './context';
export default ` const makeCode = (mockNode: any, mockInput: any) => `
(async function run() { (async function run() {
// Context // Context
${context.replace(/export\s+default/, '')} ${context.replace(/export\s+default/, '')}
@ -24,8 +24,37 @@ export default `
// nodeFns map // nodeFns map
// define nodeFns here // 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 // instantiation and invoke
const logic = new Logic({ dsl }); const logic = new Logic({ dsl });
logic.use(mockPlugin);
logic.invoke('$TRIGGER$', {}, (pipe) => { logic.invoke('$TRIGGER$', {}, (pipe) => {
const ctx = logic._getUnsafeCtx(); const ctx = logic._getUnsafeCtx();
const context = ctx.getContext(); 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 onClickRun = useCallback(() => {
const selectedCelssJson = toSelectedCellsJSON(flowChart); const selectedCelssJson = toSelectedCellsJSON(flowChart);
const compiledCode = compileForOnline(selectedCelssJson); const compiledCode = compileForOnline(selectedCelssJson, input);
executeScript(compiledCode); executeScript(compiledCode);
}, [flowChart]); }, [flowChart, input]);
const onChangeInput = useCallback((val: any) => { const onChangeInput = useCallback((val: any) => {
setInput(val); setInput(val);

Loading…
Cancel
Save