template-engine.ts

/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
/**
 * Template Engine Bridge
 */
import { compile as render } from './template';
import { createElement } from './dom';
import { isNullOrUndefined, isBlazor } from './util';

const HAS_ROW: RegExp = /^[\n\r.]+<tr|^<tr/;
const HAS_SVG: RegExp = /^[\n\r.]+<svg|^<path|^<g/;
export const blazorTemplates: object = {};

/**
 *
 * @returns {string} ?
 */
export function getRandomId(): string {

    return '-' + Math.random().toString(36).substr(2, 5);
}

/**
 * Interface for Template Engine.
 */
export interface ITemplateEngine {
    compile: (templateString: string | Function, helper?: Object, ignorePrefix?: boolean) => (data: Object | JSON) => string;
}

/**
 * Compile the template string into template function.
 *
 * @param {string | Function} templateString - The template string which is going to convert.
 * @param {Object} helper - Helper functions as an object.
 * @param {boolean} ignorePrefix ?
 * @returns {NodeList} ?
 * @private
 */
export function compile(templateString: string | Function, helper?: Object, ignorePrefix?: boolean):
(data: Object | JSON, component?: any, propName?: any) => NodeList {
    const compiler: Function = engineObj.compile(templateString, helper, ignorePrefix);
    return (data: Object, component?: any, propName?: any, templateId?: any, isStringTemplate?: boolean,
            index?: number, element?: any, root?: any): NodeList => {
        const result: object = compiler(data, component, propName, element, root);
        const blazorTemplateId: string = 'BlazorTemplateId';
        if (isBlazor() && !isStringTemplate) {
            const randomId: string = getRandomId();
            let blazorId: string = templateId + randomId;
            if (!blazorTemplates[`${templateId}`]) {
                blazorTemplates[`${templateId}`] = [];
            }
            if (!isNullOrUndefined(index)) {
                const keys: string[] = Object.keys(blazorTemplates[`${templateId}`][parseInt(index.toString(), 10)]);
                for (const key of keys) {
                    if (key !== blazorTemplateId && data[`${key}`]) {
                        blazorTemplates[`${templateId}`][parseInt(index.toString(), 10)][`${key}`] = data[`${key}`];
                    }
                    if (key === blazorTemplateId) {
                        blazorId = blazorTemplates[`${templateId}`][parseInt(index.toString(), 10)][`${key}`];
                    }
                }
            } else {
                data[`${blazorTemplateId}`] = blazorId;
                blazorTemplates[`${templateId}`].push(data);
            }
            return propName === 'rowTemplate' ? [createElement('tr', { id: blazorId, className: 'e-blazor-template' })] as any :
                [createElement('div', { id: blazorId, className: 'e-blazor-template' })] as any;

        }
        if (typeof result === 'string') {
            if (HAS_SVG.test(result)) {
                const ele: HTMLElement = createElement('svg', { innerHTML: result });
                return <NodeList>ele.childNodes;
            } else {
                const ele: HTMLElement = createElement((HAS_ROW.test(result) ? 'table' : 'div'), { innerHTML: result });
                return <NodeList>ele.childNodes;
            }
        } else {
            return <NodeList>result;
        }
    };
}

/**
 *
 * @param {string} templateId ?
 * @param {string} templateName ?
 * @param {string} comp ?
 * @param {boolean} isEmpty ?
 * @param {Function} callBack ?
 * @returns {void} ?
 */
export function updateBlazorTemplate(
    templateId?: string, templateName?: string, comp?: object,
    isEmpty?: boolean, callBack?: Function): void {
    if (isBlazor()) {
        const ejsIntrop: string = 'sfBlazor';
        window[`${ejsIntrop}`].updateTemplate(templateName, blazorTemplates[`${templateId}`], templateId, comp, callBack);
        if (isEmpty !== false) {
            blazorTemplates[`${templateId}`] = [];
        }
    }
}

/**
 *
 * @param {string} templateId ?
 * @param {string} templateName ?
 * @param {number} index ?
 * @returns {void} ?
 */
export function resetBlazorTemplate(templateId?: string, templateName?: string, index?: number): void {
    const templateDiv: HTMLElement = document.getElementById(templateId);
    if (templateDiv) {
        const innerTemplates: HTMLElement[] = templateDiv.getElementsByClassName('blazor-inner-template') as any;
        for (let i: number = 0; i < innerTemplates.length; i++) {
            let tempId: string = ' ';
            if (!isNullOrUndefined(index)) {
                tempId = innerTemplates[parseInt(index.toString(), 10)].getAttribute('data-templateId');
            } else {
                tempId = innerTemplates[parseInt(i.toString(), 10)].getAttribute('data-templateId');
            }
            const tempElement: HTMLElement = document.getElementById(tempId);
            if (tempElement) {
                const length: number = tempElement.childNodes.length;
                for (let j: number = 0; j < length; j++) {
                    if (!isNullOrUndefined(index)) {
                        innerTemplates[parseInt(index.toString(), 10)].appendChild(tempElement.childNodes[0]);
                        i = innerTemplates.length;
                    } else {
                        innerTemplates[parseInt(i.toString(), 10)].appendChild(tempElement.childNodes[0]);
                    }
                }

            }
        }
    }
}

/**
 * Set your custom template engine for template rendering.
 *
 * @param  {ITemplateEngine} classObj - Class object for custom template.
 * @returns {void} ?
 * @private
 */
export function setTemplateEngine(classObj: ITemplateEngine): void {
    engineObj.compile = classObj.compile;
}

/**
 * Get current template engine for template rendering
 *
 * @returns {string} ?
 * @private
 */
export function getTemplateEngine(): (template: string, helper?: Object) => (data: Object | JSON) => string {
    return engineObj.compile;
}

/**
 * Set the current template function to support Content Security Policy.
 *
 * @param {Function} template - The template function that is going to render.
 * @param {any} helper - The data utilized by the template from the helper.
 * @returns {Function} ?
 * @private
 */
export function initializeCSPTemplate (template : Function, helper?: any): Function {
    let boundFunc : Function;
    template.prototype.CSPTemplate =  true;
    if (!isNullOrUndefined(helper)) {
        boundFunc = template.bind(helper);
        boundFunc.prototype = Object.create(template.prototype);
    } else {
        boundFunc = template;
    }
    return boundFunc;
}

//Default Engine Class
class Engine implements ITemplateEngine {
    public compile(templateString: string, helper: Object = {}, ignorePrefix?: boolean): (data: Object | JSON) => string {
        return render(templateString, helper);
    }
}

const engineObj: ITemplateEngine = { compile: new Engine().compile };