budibase/packages/client/src/render/initialiseChildren.js

import { 
    setupBinding 
} from "../state/stateBinding";
import { 
    split,
    last
} from "lodash/fp";
import { $ } from "../core/common";
import { renderComponent } from "./renderComponent";

export const _initialiseChildren = (initialiseOpts) => 
                            (childrenProps, htmlElement, anchor=null) => {

    const { uiFunctions, bb, coreApi, 
        store, componentLibraries, treeNode,
        appDefinition, document, hydrate } = initialiseOpts;

    for(let childNode of treeNode.children) {
        if(childNode.unsubscribe)
            childNode.unsubscribe();
        if(childNode.component)
            childNode.component.$destroy();
    }

    if(hydrate) {
        while (htmlElement.firstChild) {
            htmlElement.removeChild(htmlElement.firstChild);
        }
    }
    
    htmlElement.classList.add(`lay-${treeNode.props._id}`)

    const renderedComponents = [];
    for(let childProps of childrenProps) {       
        
        const {componentName, libName} = splitName(childProps._component);

        if(!componentName || !libName) return;
        
        const {initialProps, bind} = setupBinding(
                store, childProps, coreApi,  
                appDefinition.appRootPath);
       
        const componentConstructor = componentLibraries[libName][componentName];

        const renderedComponentsThisIteration = renderComponent({
            props: childProps,
            parentNode: treeNode,
            componentConstructor,uiFunctions, 
            htmlElement, anchor, initialProps, 
            bb});
        
        for(let comp of renderedComponentsThisIteration) {
            comp.unsubscribe = bind(comp.component);
            renderedComponents.push(comp);
        }   
    }

    return renderedComponents;
}

const splitName = fullname => {
    const componentName = $(fullname, [
        split("/"),
        last
    ]);

    const libName =fullname.substring(
        0, fullname.length - componentName.length - 1);

    return {libName, componentName}; 
}