dom-for-node

_dom

v3.*

A light but powerful javascript library for html apps.

_dom.js is focused on html and css creation.

• Ultra light : < 60k or 121k unminified
• Easy creation of html elements and css rules.
• Use sass like syntax to optimise your css rules.
• Interacts exclusively with native browser methods.
  • No time comsuming proxies.
  • No code compilation for web.
  • No intrusive attributes in base elements.
  • Compatible nodejs
  • Compatiblee typescript
• Full html templating.
  • Low template architecture constraints.
  • No dom intrusion.

The purposes of _dom.js are:

• Create easily dynamic apps.
• Stay simple and minimal.
• Work on the lower level possible.
• Being integrable with any kind of web architecture.

Menu

• Use in web page
• Use with nodejs
• Html
  • _dom
• Css
  • _dom.rule
  • _dom.rules
• Templating
• V3 features

API documentation.

Use in web page

<script src="./path/to/_dom.js"></script>

Use with nodejs

For web translators like webpack.

Install :

npm install dom-for-node

Import (js) :

const _dom=require('dom-for-node');

Import (ts) :

import _dom from 'dom-for-node';

html

Instanciate html elements or structure

_dom(tagName,datas,childs,nameSpace)

• string tagName : element tagname
• object datas [optional] : element attributes.
• Array childs [optional] : element childs. can contain strings and html elements.
• string nameSpace [optional] : element namesapace if any.
• returns HTMLElement

Exemple:

var inpt=_dom('input',{type:'text',value:'hello'});
document.body.appendChild(inpt);

var div=_dom('div',{style:{border:'solid 1px #0f0'}},[
    'aaa',
    _dom('u',['bbb']}),
    'ccc'
]);
document.body.appendChild(div);

css

create dynamics css rules.

_dom.rule(selector, datas)

• string selector : the new rule rule query selector.
• object datas [optional] : style datas if any.
• returns CSSStyleRule

Exemple :

var tableRule=_dom.rule('table',{border:'solid 1px #0f0'});

setTimeout(function(){
    tableRule.style.borderColor='#00f';
},2000);

Create rules collection with sass like structures

_dom.rules(datas)

• object datas : sass like structured object.
• returns collection of CSSStyleRule by selector and alias.

Exemple :

var rules =_dom.rules({
    '$color1':'#0f0',
    '$color2':'#f00',
    'table':{
        border:'solid 1px $color1',
        '& td':{
            '&>div':{
                alias:'subdiv',
                border:'solid 1px $color2',
                display:'block'
            }
        }
    }
});

setTimeout(function(){
    rules.table.style.borderColor='#00f';
    rules.subdiv.style.color='#d06';
},2000);

Templating

Add custom structures to _dom

Exemple

TS :

/**
 * creates an Table of 1 line.
 * @param {Array} childlist columns contents.
 */
export class TableLineModel extends DomModel {
	static rulesData = {
		">table": {
			border: 'solid 1px #f00',
			'>tr>td': {
				border: 'solid 1px #00f',
			}
		},
	};
	private _container = _dom('td', {});
	_domOnBuild(children?: (HTMLElement|string):[]): HTMLTableElement {
		if(children)children.forEach(c=>this._container.append(c));
		return _dom('table', { cellPadding: 0, cellSpacing: 0, border: 0 }, [
			_dom('tbody', {}, [this._container])
		]);
	}
	push(element:HTMLElement|string){
		this._container.append(element);
	}
}

JS :

/**
 * creates an Table of 1 line.
 * @param {Array} childlist columns contents.
 */
export class TableLineModel extends _dom.DomModel {
	static rulesData = {
		">table": {
			border: 'solid 1px #f00',
			'>tr>td': {
				border: 'solid 1px #00f',
			}
		},
	};
	_container = _dom('td', {});
	_domOnBuild(children) {
		if(children)children.forEach(c=>this._container.append(c));
		return _dom('table', { cellPadding: 0, cellSpacing: 0, border: 0 }, [
			_dom('tbody', {}, [this._container])
		]);
	}
	push(element){
		this._container.append(element);
	}
}

Use :

var tl=new TableLineModel(['000',_dom('div',{},['abc'])]);
// append element.
document.body.appendChild(tl.dom);

setTimeout(function(){
    // calls component 'push' method.
    tl.push('def');
},2000);

Legacy js method :

_dom.model(tagName,constructor,cssRules)

• string tagName : the custom element name.
  Must contain at least one "-" to avoid conflict with natives HTMLElements.

• function constructor : Must return an HTMLElement.

  Receive the arguments from _dom but the dont have to respect the classical nomenclature excepted tagName (the first).

• object|function cssRules [optional] : is or returns an object describing rules like _dom.rules,
  but the created collection will be insancied only once and shared among interfaces.  

NB : You can use the Model creator to help generate model code.

_dom.model('table-line',function(tagName,children){
	var doms={};
	var build=function(){
		doms.container = _dom('td', {});
		if(children)children.forEach(c=>this._container.append(c));
		doms.root = _dom('table', { cellPadding: 0, cellSpacing: 0, border: 0 }, [
			_dom('tbody', {}, [doms.container])
		]);
		doms.root.push=function(element){
			this._container.append(element);
		};
	};
	build();
	return doms.root;
},{
	">table": {
		border: 'solid 1px #f00',
		'>tr>td': {
			border: 'solid 1px #00f',
		}
	},
});

// ------ use
var tl=_dom('table-line',['000',_dom('div',{},['abc'])]);
// append element.
document.body.appendChild(tl.dom);

setTimeout(function(){
    // calls component 'push' method.
    tl.push('def');
},2000);

Model creator.

To create fast and easy the backbone of your component, you can use the model creator.(legacy js).

V3 features

• Typescript
• class Models
• built in tools