em-react-helper.js

em-react-helper.js

//import { merge, template, forIn, isArray, isObject, isString } from 'lodash';
import merge from 'lodash/merge';
import { loadComponentProperties, getHookFunctions, getSsrCmpConfig, decodeSsrCmpConfig, parseSsrCmpConfig } from '../em-components';
import { evaluateObject } from './cmp-config-helper';

function clientPopulateCmpConfig(cmpConfig) {
    let { name } = cmpConfig;
    return new Promise((resolve, reject) => {
        let hooks = getHookFunctions(cmpConfig);
        const registryHost = cmpConfig.servicesConfig.config.endPoint;
        if (!registryHost) {
            reject('You need to provide a registry host in cmpConfig');
        }
        hooks.loadEnvConfig(cmpConfig, registryHost)
            .then(envConfig => {
                if (!cmpConfig.envConfig) {
                    cmpConfig.envConfig = {};
                }
                cmpConfig.envConfig = merge(cmpConfig.envConfig, envConfig);
                return cmpConfig;
            })
            .then(result => {
                hooks.loadContextBasedSettings(cmpConfig)
                    .then(result => {
                        cmpConfig = merge(cmpConfig, result);
                        cmpConfig = evaluateObject(cmpConfig, cmpConfig);
                        return hooks.preloadCustomProps(cmpConfig);
                    })
                    .then(result => {
                        cmpConfig = merge(cmpConfig, result);
                        resolve(cmpConfig);
                    })
                    .catch(err => {
                        console.log('Issues preloadGenericProps', err);
                        reject(err);
                    })
            })
    });
}

function clientRenderComponent(Component, cmpConfig) {
    let { name } = cmpConfig;
    return new Promise((resolve, reject) => {
        let hooks = getHookFunctions(cmpConfig);

        let targetNodeSelector = cmpConfig.targetNodeSelector || `[data-em-cmp="${name}"]`;
        var matches = document.querySelectorAll(targetNodeSelector);

        for (let index = 0; index < matches.length; index++) {
            let element = matches[index];

            cmpConfig = loadComponentProperties(element, cmpConfig);

            hooks.loadSsrConfig(cmpConfig, element)
                .then(ssrCmpConfig => {
                    if (ssrCmpConfig) {
                        cmpConfig = merge(cmpConfig, ssrCmpConfig);
                        cmpConfig = evaluateObject(cmpConfig, cmpConfig);
                    }
                    const envConfigDefaultEndpoint = `@@REGISTRY_HOST/config/v1`;
                    return hooks.loadEnvConfig(cmpConfig, envConfigDefaultEndpoint);
                })
                .then(envConfig => {
                    if (!cmpConfig.envConfig) {
                        cmpConfig.envConfig = {};
                    }
                    cmpConfig.envConfig = merge(cmpConfig.envConfig, envConfig);
                    return hooks.componentView(cmpConfig);
                })
                .then(result => {
                    hooks.loadContext(cmpConfig)
                        .then(result => {
                            cmpConfig = merge(cmpConfig, result);
                            cmpConfig = evaluateObject(cmpConfig, cmpConfig);
                            return hooks.loadContextBasedSettings(cmpConfig);
                        })
                        .then(result => {
                            // Give more priority to the ssrCmpConfig Loaded
                            if (cmpConfig.preferSsrConfig) {
                                cmpConfig = merge(result, cmpConfig);
                            } else {
                                cmpConfig = merge(cmpConfig, result);
                            }
                            cmpConfig = evaluateObject(cmpConfig, cmpConfig);
                            return hooks.preloadCustomProps(cmpConfig);
                        })
                        .then(result => {
                            cmpConfig = merge(cmpConfig, result);
                            return hooks.renderClientComponent(Component, cmpConfig, element);
                        })
                        .then(result => {
                            cmpConfig = merge(cmpConfig, result);
                            return hooks.removeLoadingState(Component, cmpConfig, element);
                        })
                        .catch(err => {
                            console.log('Issues preloadGenericProps', err);
                            reject(err);
                        })
                })
        }
        resolve(cmpConfig);

    });
}

function serverRenderComponent(Component, cmpConfig) {
    return new Promise((resolve, reject) => {
        let { name } = cmpConfig;
        console.log("rendering: ", name);
        let hooks = getHookFunctions(cmpConfig);
        // var compiled = template(JSON.stringify(cmpConfig), {...cmpConfig});
        // compiled({ 'user': 'fred' })

        cmpConfig = evaluateObject(cmpConfig, cmpConfig);

        hooks.loadContextBasedSettings(cmpConfig)
            .then(result => {
                if (cmpConfig.preferSsrConfig) {
                    cmpConfig = merge(result, cmpConfig);
                } else {
                    cmpConfig = merge(cmpConfig, result);
                }
                cmpConfig = evaluateObject(cmpConfig, cmpConfig);
                return hooks.preloadCustomProps(cmpConfig);
            })
            .then(result => {
                cmpConfig = merge(cmpConfig, result);
                console.log('Antes del renderServer', cmpConfig);
                return hooks.renderServerComponent(Component, cmpConfig);
            })
            .then(stringHTML => {
                resolve(stringHTML);
            })
            .catch(err => {
                console.log('Issues preloadGenericProps', err);
                reject(err);
            })
    });
}




export { clientRenderComponent, serverRenderComponent, clientPopulateCmpConfig };