The as close as it gets to vanilla js speed template engine
- About
- Installation
- Setup
- Element basic
- Element attributes
- Element events
- Element nested
- Element reference
- Nested text nodes
- Nested functions
xscript was created to be as close as it gets to vanilla js speed.
xscript works directly with the dom to allow you to produce event driven html. Each element/node is only ever created once. This created element/node is from then onward cloned at each call for increased speed.
- xscript 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.
npm
stable release
$ npm install xscript --savedev release
git
$ git clone https://github.com/angeal185/xscript.gitbrowser
<html>
<head>
<meta charset="utf-8">
<script src="/path/to/xscript.mjs" type="module"></script>
<!-- or -->
<script src="/path/to/xscript.js"></script>
</head>
</html>The cpre variable within xscript could optionally contain a list of tags for elements
that you want to pre-clone. The tag name txt is reserved and should not
be used if creating custom tags;
// xscript.mjs || xscript.js
//pre-clone elements
cpre = ['div']each element is only ever created once. from then on, it will be cloned.
/**
* @x(tag, ...arguments)
* @param {string} tag ~ html tag
* @param {object|string|function} arguments
**/// create a basic element with text
let item = x('p', 'example plain text');
console.log(item)
// <p>example plain text</p>
document.body.append(item)// create an element with multiple attributes
let item = x('input', {
id: 'testid',
class: 'class1 class2 class3',
type: 'text',
placeHolder: 'example attributes',
style: 'color:red;background:black'
})
console.log(item)
// <input id="testid" class="class1 class2 class3" type="text" style="color:red;background:black" placeholder="example attributes">let item = x('p', {
id: 'testid',
class: 'class1 class2 class3',
onclick: function(){
console.log('item clicked!');
},
onmouseover: function(){
console.log('item mouseover!');
}
})
document.body.append(item);
item.click()
// item clicked!
item.onmouseover()
// item mouseover!let items = x('p',
x('p', 'level 2.1'),
"some text",
x('p', 'level 2.2',
x('p', 'level 3',
x('p', 'level 4.1'),
function(){
// some function element
return x('p', 'level 4.2')
},
x('p', 'level 4.3'),
function(){
return 'some function text node'
}
)
),
'level 1'
)
document.body.append(items);once created, an node can be referenced like any other js node.
let item = x('p')
item.id = 'testid';
item.textContent = 'click me';
let somefunction = function(){
item.removeEventListener('click', somefunction);
item.textContent = 'clicked'
somefunction = item = null;
console.log(somefunction, item)
}
item.addEventListener('click', somefunction, false)
document.body.append(item);let items = x('p',
'prepended text',
x('p', 'basic 1', 'basic 2', () => 'basic 3'),
'nested text',
x('p', 'basic 4', 'basic 5', () => 'basic 6'),
'appended text text'
);
console.log(items);
/*
<p>
"prepended text"
<p>"basic 1" "basic 2" "basic 3"</p>
"nested text"
<p>"basic 4" "basic 5" "basic 6"</p>
"appended text text"
</p>
*/- functions should only return element or text nodes.
let items = x('p',
() => 'you',
() => 'can',
() => 'add',
() => 'as',
() => 'many',
() => x('p','as'),
() => 'you',
() => 'want',
() => 'wherever',
() => 'you',
() => 'want',
);
console.log(items);