The main concept is to render value, maybe modify when we need to. Render it in right way, you'll see the webpage you built with no code. And if you konw the data structure of value, you can modify it to whatever you want.
This value consists of component, not the other thing we use in react. It's an object to save data.
/**
* component example
*
* id: string, should be unique.
* name: string, use to determine the ComponentClass we render.
* props: object, the props for ComponentClass to render with.
*
*/
const component = {
id: 'compoent-1',
name: 'div',
props: {
style: {
color: 'red',
},
},
};/**
* value example
*
* componentMap: object, stor all components data,key means the id of component,value means the data of component.
* relationMap: object, store the association between components,key means the id of component.
* rootComponentIds: array, means the components you render for root.
*
*/
const value = {
componentMap: {
'parent-1': {
id: 'parent-1',
name: 'div',
props: {
style: {
fontSize: '14px',
},
},
},
'parent-2': {
id: 'parent-1',
name: 'div',
props: {
style: {
fontSize: '14px',
},
},
},
'child-1-1': {
id: 'child-1-1',
name: 'div',
props: {
style: {
padding: 10,
backgroundColor: 'red',
},
},
},
'child-1-2': {
id: 'child-1-2',
name: 'div',
},
'child-2-1': {
id: 'child-1-2',
name: 'div',
},
'child-2-2': {
id: 'child-1-2',
name: 'div',
},
},
relationMap: {
'parent-1': {
children: ['child-1-1', 'child-1-2'],
},
'parent-2': {
children: ['child-2-1', 'child-2-2'],
},
},
rootComponentIds: ['parent-1', 'parent-2'],
};This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including:
| Package | Docs | Description |
|---|---|---|
react-mc-render |
 |
Render the value we got. |
react-mc-template |
|
Render the value we got and modify if we want. |
react-mc-runner |
|
Render the value we got and bound the events. |
react-mc-dnd |
|
An easy way to use react-dnd. |
react-mc-dnd-frame |
|
Make react-dnd work for iframe. |
react-mc-diagrams |
|
Use react-dnd to draw diagrams. |
react-mc-workspace |
|
Build your own visual programming tool. |