Alternatives and detailed information of no-vdom

no-vdom

A haxelib used for static(in compile time) HTML data building

Installation

haxelib install no-vdom

Feature

Intelligent:
Zero Performance Loss, Zero runtime dependency
IE8+ Support.

HXX

Uses {{ }} as variable separator.

var title = "hi there";
var content = "click here";
var div = HXX(<div><a title="{{ title }}"> LL {{ content }} RR </a></div>);
document.body.appendChild(div);

Generated js:

document.body.appendChild(__h("div",null,__h("a",{ title : "hi there"}," LL " + "click here" + " RR ")));

If expr with prefix $ inside {{ }} then that will be explicitly treated as Element/Array<Element>.

var link = HXX(<a>here</a>);
var col = [];
for (i in 0...Std.random(20))
	col.push(HXX(<li>n : {{ i }}</li>));

var ul = HXX(<ul> click {{ $link }} {{ $col }} </ul>); // Explicitly mark variable as "Element"
var ul = HXX(<ul> click {{ link }} {{ col }} </ul>);   // Auto-sensing type, powered by haxe macro
document.body.appendChild(ul);

Generated js:

var link = __h("a",null,"here");
var col = [];
var _g = 0;
var _g1 = Std.random(20);
while(_g < _g1) col.push(__h("li",null,"n : " + _g++));
document.body.appendChild(__h("ul",null,[" click ",link,col]));

data binding

.....

Syntax

/**
@file: Specify an HTML file, Relative to current project.
@root: a css selector which will be queried as **root DOMElement** for the Component.
@defs: Specify property binding, for example:
  {
    btn :   $("button"),
    text:   $("label").textContext,
    value:  $("input[type=button]").attr.value,
    x:      $(null).style.left, // $(null) is self
    y:      $(null).style.top,
  }
*/
Nvd.build(file: String, root: String, ?defs: Dynamic<Defines>);

/**
@selector: a css selector that used to specify a child DOMElement , if null it's represented as root DOMElement.
*/
function $(selector:String) : AUTO;

/**
There are 4 types available:
  $(...)             ,  // DOMElement
  $(...).XXX         ,  // Property
  $(...).attr.XXX    ,  // Attribute,
  $(...).attr["XXX"] ,  // Attribute,
  $(...).style.XXX   ,  // Style-Property

  // Extended syntax
  @:keep $("selector").XXX   , // If "@:keep" then "selector" will be retained to output/runtime.
  ($("selector") : OtherType), // Explicitly type casting to OtherType
*/

sample:

<div id="login" style="width: 320px; font-size: 14px">
  <div style="clear: both">
    <label for="name" style="float:left;">Name</label>
    <input style="float:right" type="text" name="name" />
  </div>
  <div style="clear: both">
    <label for="email" style="float:left;">Email address</label>
    <input style="float:right" type="email" name="email">
  </div>
  <div style="clear: both">
    <label style="font-size: 12px"><input type="checkbox" /> Remember me </label>
    <label style="font-size: 12px"><input type="radio" name="herpderp" value="herp" checked="checked" /> Herp </label>
    <label style="font-size: 12px"><input type="radio" name="herpderp" value="derp" /> Derp </label>
    <button style="float:right" type="submit">Submit</button>
  </div>
</div>

Component:

@:build(Nvd.build("index.html", "#login", {
  btn:      $("button[type=submit]"),
  name:     $("input[name=name]").value,
  email:    $("input[name=email]").value,
  remember: $("input[type=checkbox]").checked,
  herpderp: @:keep $("input[type=radio][name=herpderp]:checked").value,
})) abstract LoginForm(nvd.Comp) {
  public inline function getData() {
    return {
      name: name,
      email: email,
      remember: remember,
      herpderp: herpderp,
    }
  }
}


class Demo {
  static function main() {
    // login
    var login = LoginForm.ofSelector("#login");
    login.btn.onclick = function() {
      trace(login.getData());
    }
  }
}

output:

// Generated by Haxe 4.0.0 (git build development @ e6f3b7d)
(function () { "use strict";
var Demo = function() { };
Demo.main = function() {
  var login = window.document.querySelector("#login");
  login.children[2].children[3].onclick = function() {
    console.log("Demo.hx:9:",{ name : login.children[0].children[1].value, email : login.children[1].children[1].value, remember : login.children[2].children[0].children[0].checked, herpderp : login.querySelector("input[type=radio][name=herpderp]:checked").value});
  };
};
Demo.main();
})();

CHANGES

0.8.0 :
- Some improvements to make it simple.
- Added explicit type casting. e.g: ($("selector") : TabComponent)
- [HXX] simple markup will be automatically inlined.
0.5.0.:
- Added Simple HXX
- Added SVG elements support(Only for Query)

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

R32 / no-vdom