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

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>);
document.body.appendChild(ul);

/**
@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,  // if selector is null/"" then self(root DOMElement).
    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.
@keep: Optional, if true that will keep the "css-selector" in output.
*/
function $(selector:String, ?keep: Bool):AUTO;

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

@: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,
  // Note: IE8 does not support the pseudo-selector ":checked"
  herpderp: $("input[type=radio][name=herpderp]:checked", true).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());
    }
  }
}