Updated to 2.0.7

[Gurigraphics]

Add modules

TEMPLATE and FACTORY

Examples

Example more simples

HTML.header = { tag: "div", id:"header", html: "text value" }
DOM.add("header", "#app")

Example without "HTML data persistence" and without "reactivity"

var template = h({ 
  tag: "div", 
  html: h({ tag: "div", html: "value" })
})
DOM.add(template, "#app")

Example with "tag template"

var template = h({ 
  tag: "div", 
  html: h({ tag: "div", html: "value" })
})

HTML.header = { tag: "div", id:"header", template: template }

DOM.add("header", "#app")

Example with "tag template" and TEMPLATE

TEMPLATE.template = h({ 
  tag: "div", 
  html: h({ tag: "div", html: "value" })
})

HTML.header = { tag: "div", id:"header", template: "template" }

DOM.add("header", "#app")

Example with FACTORY and TEMPLATE imutable

FACTORY.base = function( value ){
  return h({
      id: "parent",
      html: h({ id: "child", html: value })
  })
}

TEMPLATE.name1 = FACTORY.base("name1")
TEMPLATE.name2 = FACTORY.base("name2")

HTML.element = { id:"element", template: "name1" } 

DOM.add("element", "#app")

// HTML.element.template = "name2" // change template

Example TEMPLATE and FACTORY with elements reactives

var DOM = new Dominus()
var HTML = DOM.HTML()
var TEMPLATE = DOM.TEMPLATE()
var FACTORY = DOM.FACTORY()
var h = DOM.h();

HTML.element_reactive = { tag:"img", id:"element_reactive", src: "images/image1.png" }

FACTORY.base = function( props ){ 
  return h({
      id: "parent",
      html: h({ id: props.id, html: "element_reactive" })
  })
}

TEMPLATE.name1 = { factory: "base", props: { id: "exampleID" } }

HTML.element = { id:"element", template: "name1" } 

DOM.add("element", "#app")

//HTML.element_reactive.src = "images/image2.png" // change image

Result:

<div id="app">
  <div id="element">
    <div id="parent">
      <div id="exampleID">
        <img id="element_reactive" src="images/image11.png">
      </div>
    </div>
  </div>
</div>