Developing New Tmplits

Creating a User Tmplit

Creating a tmplit is as simple as defining a function with the prefix tmplit and adding the file source to the project. The name used after tmplit will be how the function is implemented in the Partial. This file will live in the JS folder and be linked to the project by either adding a source tag to index.html or as a library in the tmplits.json file.

The tmplit itself uses two arguments:

context includes the values that are not directly equal to an attribute and come in as an array in order of how they are used in the implementation (ex: ‘ButtonLabel’).
args are all the contents that are equal to a specific attribute (ex: data-var-name=“plcVar”).

function TmplitMyTmplit(context, args){
//Code to create the tmplit

return
  <div>"Hello World"</div>
}

Usage Example:

{{tmplit 'MyTmplit' 'context' args=''}}

Anatomy of a Tmplit

A typical tmplit will have the following structure:

Read in the arguments that this tmplit will specifically use
Leave the rest of the arguments for the user to use
Clean the arguments to get the classList and attr
Generate the html

import * as util from "../tmplits-utilities/module.js"

export function TmplitBasicStructure(context, args) {
    //Pull out any attributes we specifically use for this template
    // The rest of the arguments will get placed in _args
    let {
        label = '', style = '', ..._args
    } = args.hash

    //Read the children from the context
    let children = args.children

    //Get cleaned values
    let {
        //Class is an illegal javascript variable name
        //  so we use classList to hold the classes the user passes in
        classList,  

        //This is any left over attributes that the user passes in
        //  these should be passed to the element that makes sense for
        //  the template
        //  These attributes can be directly added to the element using ${attr}
        //  because they are already formatted correctly
        attr        
    } = util.cleanArgs(_args)

    //Add any classes that we need to
    classList = classList.concat(['lui-grid'])
    
    //Add any styles that we need to
    style += `;width: 100%;`

//Generate the html
return `
    <div ${attr} class='${classList.join(' ')}' style="${style};">
        ${label}
        ${children}
    </div>
    `
}

Creating a Partial in a Library

New Partials within libraries need their JavaScript files added to tmplits.json in order to have access to the content. These Partials need the type definition in order to take advantage of the Handlebars system.

In this example, a simple <span> element with Hello World will be added.

<script id="helloWorld" type="text/x-handlebars-template">
  <span> Hello World! </span>
</script>

Usage Example:

{{> helloWorld}}

Creating a Page for the DOM

Pages are reusable layouts within an HMI, containing other tmplits, native HTML, and Partials. They are referred to by their name defined in tmplits.json.

{{> hellowWorld}}
{{tmplit 'MyTmplit' 'context' args=''}}