https://github.com/r32/no-vdom

a haxelib used for static html data binding
https://github.com/r32/no-vdom

Last synced: about 1 year ago
JSON representation

a haxelib used for static html data binding

• Host: GitHub
• URL: https://github.com/r32/no-vdom
• Owner: R32
• Created: 2017-07-28T11:23:07.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-06-26T16:35:20.000Z (almost 3 years ago)
• Last Synced: 2025-02-12T03:17:19.277Z (over 1 year ago)
• Language: Haxe
• Homepage:
• Size: 1.09 MB
• Stars: 16
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
no-vdom

--------

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

## Installation

```bash

haxelib install no-vdom

```

## Feature

* Intelligent:

  ![screen shot](demo/demo-3.gif)

* **Zero Performance Loss**, Zero runtime dependency

* IE8+ Support.

### HXX

Uses `{{` `}}` as variable separator.

```haxe

var title = "hi there";

var content = "click here";

var div = HXX(
 LL {{ content }} RR 
);

document.body.appendChild(div);

```


Generated js:

```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`.

```haxe

var link = HXX(here);

var col = [];

for (i in 0...Std.random(20))

	col.push(HXX(
n : {{ i }}
));


var ul = HXX(
 click {{ $link }} {{ $col }} 
); // Explicitly mark variable as "Element"

var ul = HXX(
 click {{ link }} {{ col }} 
);   // Auto-sensing type, powered by haxe macro

document.body.appendChild(ul);

```


Generated js:

```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

```haxe

/**

@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);

/**

@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:

```html



  


    Name

    

  

  


    Email address

    

  

  


     Remember me 

     Herp 

     Derp 

    Submit

  



```


Component:

```hx

@: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());

    }

  }

}

```

![screen shot](demo/demo.gif)

![screen shot](demo/demo-2.gif)

output:

```js

// 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)