todom

v0.0.5

Published

2 years ago

Fast and lightweight JSON to DOM generation in less than 60 lines.

Downloads

0High
0Medium
0Low

cagosta

toDOM

Introduction

Fast and lightweight JSON to DOM generation in less than 60 lines.

You :

Do not like <html>
Do not want heavy templating system
Love javascript
Want performance
Are tired of document.createElement

Here is toDOM :


var scope = {};

var el = toDOM({
    attr : { className : 'my_class' },
    events : {
        click : function() {
            console.log('div clicked');
      },
  },
  children : [
    {
        tag : 'p',
        label : 'myParagraph',
        innerHTML : 'Hello',
        style : {
            backgroundColor : '#000'
        }
    }
  ]
}, scope);

document.body.appendChild(el);

Will create the following :

<body>
    <div class="my_class">
        <p style="background-color:#000">
            Hello
        </p>
    </div>
</body>

With a console.log on click and a reference of the <p> DOM element in scope :

    scope.myParagraph //  domElement
    scope.myParagraph.innerHTML // 'Hello'

Usage in object oriented javascript :


var View = function(o) {
    if (o.domDescription) {
      this.buildEl(o.domDescription);
    }
};

View.prototype = {
    buildEl : function(domDescription) {
        this.el = toDOM(domDescription, this);
  }
}

var myView = new View({
    domDescription : {
        tag : 'p',
        children : [
            {
                label : 'helloEl',
                innerHTML : 'hello!'
            }
        ]
    }
});

myView.el // DOM element
myView.helloEl // DOM element
myView.helloEl.innerHTML // 'hello!'

Also :

Default tag is 'div'

## Install ##

toDOM is coded as AMD module but can be installed with npm, bower or old-fashioned src=".min.js".

With npm:

npm install todom

and use it with nodejs:

var toDOM = require('todom')

With bower:

bower install toDOM

Point toDOM to [bower_components_path]/toDOM/app/toDOM.js into your requirejs path config and load it with requirejs:

require(['toDOM/toDOM'], function( toDOM ){

})

With src=" .min.js"

Inside the dist folder, download latest standalone minified version or development version and include it in your html page:

<script src="[path_to_source]/toDOM-latest-standalone-min.js%>"></script>

The module is available via the scope

window.toDOM

To do

## Documentation ##

See jsdoc-generated documentation in /documentation

Folder Structure

app         ->  development files
|- bower_components          ->  [bower](https://github.com/bower/bower) front-end packages
|- main.js                   ->  main file for browser and node.js, handle AMD config
|- to_dom   -> main AMD module
test        ->  unit tests
|
tasks       -> [Grunt](http://gruntjs.com/) tasks, see [generator-mangrove-module](https://github.com/cagosta/generator-mangrove-module)
|
dist        ->  distribution & build files
|
node_modules -> node packages
|
documentation  -> [jsdoc](http://usejsdoc.org/about-jsdoc3.html) generated documentation

Run unit tests

On the browser

Run grunt test:browser and open test/ on your browser.

#### On a headless browser ####

grunt test:headless will run your tests in a headless browser, with phantomjs and mocha

On node

grunt test:node will run your tests with node and mocha.

Because of requirejs, the mocha command does not work.

Build your own

This project uses Node.js, Grunt and Require.js for the build process. If for some reason you need to build a custom version install Node.js, npm install and run:

grunt build

## Yeoman Mangrove module Generator ##

This module is based on a Yeoman generator: Generator-mangrove-module
Check it for task-related references such as build, deploy etc ..

Authors

License

MIT License