xscript

    1.0.0 • Public • Published

    xscript

    The as close as it gets to vanilla js speed template engine

    cd-img dep-img sz-img

    NPM Version lic-img

    Documentation

    about

    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.

    Installation

    npm

    stable release

    $ npm install xscript --save

    dev release

    git

    $ git clone https://github.com/angeal185/xscript.git

    browser

    <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>

    Setup

    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.

    API

     
    /**
     *  @x(tag, ...arguments)
     *  @param {string} tag ~ html tag
     *  @param {object|string|function} arguments 
     **/
     

    element basic

    // 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)
     

    element attributes

    // 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">
     

    element events

     
    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!

    element nested

     
    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);

    element reference

    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);
     

    nested text nodes

     
    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>
    */

    nested functions

    • 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);
     

    Install

    npm i xscript

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    9.55 kB

    Total Files

    6

    Last publish

    Collaborators

    • angeal185