A lightning fast, ultra small javascript template engine
for when speed matters.
Documentation
- About
- Installation
- Setup
- Element basic
- Element id
- Element class
- Element attributes
- Element events
- Element append
- Nested Text Nodes
about
Clonescript works directly with the dom to allow you to produece event driven html. Each html element added to your list of used elements is only ever created once. This created element is from then onwards cloned at each call for increased speed.
- clonescript works directly with the dom
- less than 1kb in size
- no regex/unsafe functions
- about as close to using vanilla js speed as it gets.
Installation
npm
stable release
$ npm install clonescript --save
dev release
git
$ git clone https://github.com/angeal185/clonescript.git
browser
<!--- or ---> <script src="/path/to/clonescript.js"></script> </head></html>
Setup
The eles
const should contain a list of all your used element tags.
These will be generated once and then cloned at every call for that element.
- The tag names
txt
anddefault
are reserved and cannot be used. - Tag names should be in order of usage
// clonescript.mjs // add used elements to create clones of const eles = 'div' 'span' 'p' 'input' 'label'
API
/** * @cs.clone(tag, obj, txt) * @param * @param * @param **/ /** * @cs.add(tag, obj, txt) * @param * @param * @param **/ /** * @cs.val() ~ returns html to be appended to page **/
element basic
// create a basic element with text let x = cs; console// <p>example plain text</p> documentbody
element id
// create an element with an id let x = cs; console;// <p id="test">example id</p>
element class
// create an element with an multiple classes cs; console;// <p class="class1 class2">example class</p>
element attributes
// create an element with an multiple attributes cs console// <input type="text" style="color:red;background:black" placeholder="example attributes">
element events
cs; console// item clicked!console;// item mouseover!
element append
let x = cs; console;/*<p> level 1 <p>level 2.1</p> <p>level 2.2</p></p>*/
nested text nodes
let x = cs; console;/*<p> prepended text <p>basic 1</p> nested text <p>basic 2</p> appended text text</p>*/