2020-01-28 15:14:53 +01:00
|
|
|
|
|
|
|
export const renderComponent = ({
|
|
|
|
componentConstructor, uiFunctions,
|
2020-01-30 00:01:14 +01:00
|
|
|
htmlElement, anchor, props,
|
2020-02-01 00:11:50 +01:00
|
|
|
initialProps, bb,
|
2020-01-30 00:01:14 +01:00
|
|
|
parentNode}) => {
|
2020-01-28 15:14:53 +01:00
|
|
|
|
2020-01-30 00:01:14 +01:00
|
|
|
const func = initialProps._id
|
|
|
|
? uiFunctions[initialProps._id]
|
2020-01-28 15:14:53 +01:00
|
|
|
: undefined;
|
2020-01-30 00:01:14 +01:00
|
|
|
|
|
|
|
const parentContext = (parentNode && parentNode.context) || {};
|
2020-01-28 15:14:53 +01:00
|
|
|
|
2020-01-30 00:01:14 +01:00
|
|
|
let renderedNodes = [];
|
2020-01-28 15:14:53 +01:00
|
|
|
const render = (context) => {
|
|
|
|
|
2020-01-30 00:01:14 +01:00
|
|
|
let componentContext = parentContext;
|
2020-01-28 15:14:53 +01:00
|
|
|
if(context) {
|
|
|
|
componentContext = {...componentContext};
|
|
|
|
componentContext.$parent = parentContext;
|
|
|
|
}
|
|
|
|
|
2020-01-30 00:01:14 +01:00
|
|
|
const thisNode = createTreeNode();
|
|
|
|
thisNode.context = componentContext;
|
|
|
|
thisNode.parentNode = parentNode;
|
2020-01-31 17:01:58 +01:00
|
|
|
thisNode.props = props;
|
2020-01-30 00:01:14 +01:00
|
|
|
|
|
|
|
parentNode.children.push(thisNode);
|
|
|
|
renderedNodes.push(thisNode);
|
|
|
|
|
|
|
|
initialProps._bb = bb(thisNode, props);
|
|
|
|
|
|
|
|
thisNode.component = new componentConstructor({
|
2020-01-28 15:14:53 +01:00
|
|
|
target: htmlElement,
|
2020-01-30 00:01:14 +01:00
|
|
|
props: initialProps,
|
2020-01-28 15:14:53 +01:00
|
|
|
hydrate:false,
|
|
|
|
anchor
|
2020-01-30 00:01:14 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
thisNode.rootElement = htmlElement.children[
|
|
|
|
htmlElement.children.length - 1];
|
2020-01-31 17:01:58 +01:00
|
|
|
|
|
|
|
if (initialProps._id) {
|
|
|
|
thisNode.rootElement.classList.add(`pos-${initialProps._id}`)
|
|
|
|
}
|
2020-01-28 15:14:53 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if(func) {
|
|
|
|
func(render, parentContext);
|
|
|
|
} else {
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
|
2020-01-30 00:01:14 +01:00
|
|
|
return renderedNodes;
|
2020-01-28 15:14:53 +01:00
|
|
|
}
|
|
|
|
|
2020-01-30 00:01:14 +01:00
|
|
|
export const createTreeNode = () => ({
|
|
|
|
context: {},
|
2020-01-31 17:01:58 +01:00
|
|
|
props: {},
|
2020-01-30 00:01:14 +01:00
|
|
|
rootElement: null,
|
|
|
|
parentNode: null,
|
|
|
|
children: [],
|
|
|
|
component: null,
|
|
|
|
unsubscribe: () => {}
|
|
|
|
});
|
|
|
|
|