https://github.com/angeal185/clonescript
A lightning fast, ultra small javascript template engine for when speed matters.
https://github.com/angeal185/clonescript
browser javascript minimal template-engine templating
Last synced: 8 months ago
JSON representation
A lightning fast, ultra small javascript template engine for when speed matters.
- Host: GitHub
- URL: https://github.com/angeal185/clonescript
- Owner: angeal185
- License: mit
- Created: 2020-06-25T08:56:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-25T14:55:34.000Z (over 5 years ago)
- Last Synced: 2025-02-06T20:46:58.608Z (8 months ago)
- Topics: browser, javascript, minimal, template-engine, templating
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#### A lightning fast, ultra small javascript template engine
#### for when speed matters.
![cd-img] ![dep-img] ![sz-img]
[![NPM Version][npm-img]][npm-url] ![lic-img]
# Documentation
- [About](#about)
- [Installation](#installation)
- [Setup](#setup)
- [Element basic](#element-basic)
- [Element id](#element-id)
- [Element class](#element-class)
- [Element attributes](#element-attributes)
- [Element events](#element-events)
- [Element append](#element-append)
- [Nested Text Nodes](#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
```sh
$ npm install clonescript --save
```
dev release
git
```sh
$ git clone https://github.com/angeal185/clonescript.git
```
browser
```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
```js
// clonescript.mjs
// add used elements to create clones of
const eles = ['div', 'span', 'p', 'input', 'label']
```
# API
```js
/**
* @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
```js
// create a basic element with text
let x = cs.clone('p', 'example plain text').val();
console.log(x)
//
example plain text
document.body.append(x)
```
# element id
```js
// create an element with an id
let x = cs.clone('p', {
id: 'test' // add id
}, 'example id').val();
console.log(x);
//
example id
```
# element class
```js
// create an element with an multiple classes
cs.clone('p', {
class: ['class1', 'class2'], // array of class/es
}, 'example class').val();
console.log(x);
//
example class
```
# element attributes
```js
// 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)
//
```
# element events
```js
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
```js
let x = cs.clone('p', {
append: [
cs.add('p', 'level 2.1'),
cs.add('p', 'level 2.2')
]
}, 'level 1').val();
console.log(x);
/*
level 1
level 2.1
level 2.2
*/
```
# nested text nodes
```js
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);
/*
prepended text
basic 1
nested text
basic 2
appended text text
*/
```
[cd-img]: https://app.codacy.com/project/badge/Grade/e306036b67264c03a4a0f3e346c677af
[npm-img]: https://badgen.net/npm/v/clonescript?style=flat-square
[dep-img]:https://badgen.net/david/dep/angeal185/clonescript?style=flat-square
[sz-img]:https://badgen.net/packagephobia/publish/clonescript?style=flat-square
[lic-img]: https://badgen.net/github/license/angeal185/clonescript?style=flat-square
[npm-url]: https://npmjs.org/package/clonescript