❤
npm
Sign UpSign In

clonescript

1.0.0 • Public • Published

A lightning fast, ultra small javascript template engine

for when speed matters.

cd-img dep-img sz-img

NPM Version lic-img

Documentation

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

<html>
  <head>
    <meta charset="utf-8">
    <script src="/path/to/clonescript.mjs" type="module"></script> 
    <!--- 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 and default 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 {string} tag ~ html tag
 *  @param {object|string} object ~ element options | string ~ element textContent
 *  @param {string} txt ~ element textContent
 **/
 
/**
 *  @cs.add(tag, obj, txt)
 *  @param {string} tag ~ html tag
 *  @param {object|string} object ~ element options | string ~ element textContent
 *  @param {string} txt ~ element textContent
 **/
 
/**
 *  @cs.val() ~ returns html to be appended to page
 **/

element basic

// create a basic element with text
 
let x = cs.clone('p', 'example plain text').val();
 
console.log(x)
// <p>example plain text</p>
 
document.body.append(x)
 

element id

// create an element with an id
 
let x = cs.clone('p', {
  id: 'test' // add id
}, 'example id').val();
 
console.log(x);
// <p id="test">example id</p>
 

element class

// create an element with an multiple classes
 
cs.clone('p', {
  class: ['class1', 'class2'], // array of class/es
}, 'example class').val();
 
console.log(x);
// <p class="class1 class2">example class</p>
 

element attributes

// create an element with an multiple attributes
 
cs.clone('input', {
  attr: { // attributes
    type: 'text',
    placeHolder: 'example attributes',
    style: 'color:red;background:black'
  }
}).val()
 
console.log(x)
// <input type="text" style="color:red;background:black" placeholder="example attributes">
 

element events

 
cs.clone('p', {
  fn: { // functions
    onclick: function(){
      console.log('item clicked!');
    },
    onmouseover: function(){
      console.log('item mouseover!');
    }
  }
}, 'example function').val();
 
console.log(x.click())
// item clicked!
console.log(x.onmouseover());
// item mouseover!

element append

 
let x = cs.clone('p', {
  append: [
    cs.add('p', 'level 2.1'),
    cs.add('p', 'level 2.2')
  ]
}, 'level 1').val();
 
console.log(x);
/*
<p>
    level 1
    <p>level 2.1</p>
    <p>level 2.2</p>
</p>
*/

nested text nodes

 
let x = cs.clone('p', {
  append: [
    cs.add('p', 'basic 1'),
    cs.add('txt','nested text'),
    cs.add('p', 'basic 2'),
    cs.add('txt', 'appended text text')
  ]
}, 'prepended text').val();
 
console.log(x);
/*
<p>
    prepended text
    <p>basic 1</p>
    nested text
    <p>basic 2</p>
    appended text text
</p>
*/

Readme

Keywords

Package Sidebar

Install

npm i clonescript

Repository

github.com/angeal185/clonescript

Homepage

github.com/angeal185/clonescript#readme

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

9.54 kB

Total Files

6

Last publish

Collaborators

  • angeal185
Try on RunKit
Report malware