Kendo UI - "Template Loader" - improved and in TypeScript !

TemplateLoader.ts

/**
This defines a class that can load external templates.
It handles multiple "Templates" (Or "Views") loading,
by operating on an array of JSON objects of type {url: "url to file", id: "id of the script's tag to attach to DOM"}

This way you can load multiple templates, each with it's own tag so they can be referenced seperatly,

Templates can be written in a much "cleaner" manner - as they are not wrapped by a "script" tag, IDE's will recognize the html.

A promise will be resolved after template loading has completed (loading & attaching to DOM)

Usage:

Call "TemplateLoader.loadTemplates" on your array, then use the returned promise.
The promise data is an updated array of TemplateObj where the html property is set to the content of the template


Usage example:
    import { TemplateLoader } from "path/to/TemplateLoader.js";

    // first way
    var p = TemplateLoader.loadTemplates(
        { path: "/templates/first.tmpl.htm" , tag: "first-template"  },
        { path: "/templates/second.tmpl.htm", tag: "second-template" }
    );

    // or second way
    var tmplArr = [ { path: "/templates/first.tmpl.htm" , tag: "first-template"  },
                    { path: "/templates/second.tmpl.htm", tag: "second-template" } ];
    var p = TemplateLoader.loadTemplates( ...tmplArr );

    // then use the promise
    p.then(
        templates => {
            console.log( 'Templates loaded', templates );
            
            var firstTemplate = kendo.template( $( "#first-template" ).html(), { useWithBlock: false } );
            var result = firstTemplate();
            $( "#firstcontainer" ).html( result );

            var secondTemplate = kendo.template( $( "#second-template" ).html(), { useWithBlock: false } );
            var result2 = secondTemplate();
            $( "#second" ).html( result2 );
        }
    );

*/

// this interface will enforce the type of the objects passed in the Array
interface TemplateObj {
    url: string;
    id: string;
    html?: string;
}

class TemplateLoader {

    /**
     * Name: loadTemplates
     * Params:
     *   templatesArray: ...array of JSON-Object or JSON objects between parenthesis, each 
     *                   with format: {url:"<url to template", id:"<unique id for template script tag>"}
     * 
     * What do I Do ?
     *    Loads external template from path and injects in to page DOM
     *    Template will be injected in a <script type="text/x-kendo-template"> tag, and selected id value.
     *    browser does not run scripts with unknown types - thus it will not run this injected script !
     * 
     */
    
    public static async loadTemplates ( ...templatesArray: TemplateObj[] ) {
        try {
            var templates = await Promise.all(
                templatesArray.map(
                    tmpl => fetch( tmpl.url ).then(
                        response => response.text()
                    ).then(
                        template => tmpl.html = '<script id="' + tmpl.id + '" type="text/x-kendo-template">' + template + "</script>"
                    )
                )
            );
            document.body.insertAdjacentHTML( "beforeend", templates.join( "\n" ) )
            return templatesArray;
        } catch (error) {
            console.log( error );
            throw( error );
        }
    }
}

export { TemplateLoader, TemplateObj };

Please update with a working example with complied Typescript, I have tried to make this work but not been successful at all.

I would love a working example, too!