LiphteTS

                
<ul id="list-id"><i>Element 01</li><li>Element 02</li><li>Element 03</li></ul>
Documentation Download
Lightweight HTML Builder library for JS or TS
 

About

Welcome to Liphte.TS!

Liphte TS (liphte.ts) is a lightweight html builder or html generator library which is based on HTML and HTML5 tags.

It's a fork of Liphte for PHP and as same as Liphte PHP inspired by projects rudykocur/pyeve and rudykocur/breve which is simplest way to create or generate html from controllers or views and others php files.

Benefits:

  1. No problem with languages mixing!
    Example problem
    (for Angular2 Component)
    You can change this mixing code:
    
                             To this more clean code:
                            
    
                        
  2. No more tag closure.

    If you open tag - you open it as function and it must have parenthesis. You don't need to remember close tags.

    
                        
  3. You can create renderable objects
    
                        
  4. No need to write special macros for components.


  5. No need templates - it is anti-template idea or anti-pattern.

    Code can be written from JS or TS View Class or View-Controller (Presenter) or JS / TS Html helper (utils) class.

  6. More readable code.

    Your HTML is more readable and clean html code.

    Example
    
                        

Documentation

Requirerments:

  • IDE for TypeScript and one of traspiler from TS to JS OR
  • IDE for JavaScript OR
  • Node.js OR
  • Browser

Installing Liphte

To start using this library you can install from Node Package Manager (npm):


                

Or download ZIP and unzip from GitHub:


            

Enjoy! Import library and use like in example.

Liphte Quickstart

First of all you need import the main class which is Set of HTML tags.

Example (Your HTML file or template):


                

Example (import in one of Your TypeScript / Angular2 file:


                

Example (JavaScript file):


                

Example - (JavaScript file) When you are using require.js:


                

Or for Node.js:

var liphte = require('liphte.ts');

The next step is create class or method in your favourite class or add below code to your existing method:


            

Syntax

Let's go to learn method syntax and API documentation. Each method in Tag class is extended by Mark class. But if You need to create another method like 'template' which is generate '' tag. You must use append method from Tag. After that You can write after "." your custom function, each method name, it's become HTML tag.

Below methods was defined by empty implementation at the Mark class. They are extended in class Tag!

Tag extendsMarkup

Tag class extends an abstract class Markup with definition of HTML(5) markup methods.

Example:


                


Markup class is a main abstract class which includes empty implementation of HTML(5) markups methods, because implementation for each method is the same. Initialisation of implementation for each method is realised in subclass of class Markup which is named Tag.

Tag is a Singleton class (Singleton - Design Patterns [GOF and others] because we don't need create a lot of objects of Tag class.

Inherited methods list:

Methods


{{ method.name }} method - {{ method.explanation }}: <{{ method.name }}> tag

{{ method.name }}( ... attributesOrContents : any ) : string 

Description

{{ method.description }}

Parameters

Type
Name
Description
JSON | Array<JSON> | Array<Array<...>> | Array<String> | String
...attributesOrContents
The list of tag attributes or contents.
If it is JSON then render as Attribute !
If it is String or not Attribute then render as Content object!

Example usage:

T.{{ method.name }}( {id: '{{method.name}}-id'}, 'Example content' );

Examples of complex syntax: