{"id":23239435,"url":"https://github.com/r32/no-vdom","last_synced_at":"2025-04-05T22:13:45.502Z","repository":{"id":78669594,"uuid":"98642844","full_name":"R32/no-vdom","owner":"R32","description":"a haxelib used for static html data binding","archived":false,"fork":false,"pushed_at":"2023-06-26T16:35:20.000Z","size":1141,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-12T03:17:19.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Haxe","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/R32.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-28T11:23:07.000Z","updated_at":"2022-01-14T02:09:30.000Z","dependencies_parsed_at":"2023-06-28T19:46:38.746Z","dependency_job_id":null,"html_url":"https://github.com/R32/no-vdom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R32%2Fno-vdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R32%2Fno-vdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R32%2Fno-vdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/R32%2Fno-vdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/R32","download_url":"https://codeload.github.com/R32/no-vdom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406110,"owners_count":20933806,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-19T04:28:13.600Z","updated_at":"2025-04-05T22:13:45.480Z","avatar_url":"https://github.com/R32.png","language":"Haxe","funding_links":[],"categories":[],"sub_categories":[],"readme":"no-vdom\r\n--------\r\n\r\nA haxelib used for static(in compile time) HTML data building\r\n\r\n## Installation\r\n\r\n```bash\r\nhaxelib install no-vdom\r\n```\r\n\r\n## Feature\r\n\r\n* Intelligent:\r\n\r\n  ![screen shot](demo/demo-3.gif)\r\n\r\n* **Zero Performance Loss**, Zero runtime dependency\r\n\r\n* IE8+ Support.\r\n\r\n### HXX\r\n\r\nUses `{{` `}}` as variable separator.\r\n\r\n```haxe\r\nvar title = \"hi there\";\r\nvar content = \"click here\";\r\nvar div = HXX(\u003cdiv\u003e\u003ca title=\"{{ title }}\"\u003e LL {{ content }} RR \u003c/a\u003e\u003c/div\u003e);\r\ndocument.body.appendChild(div);\r\n```\r\n\r\nGenerated js:\r\n\r\n```js\r\ndocument.body.appendChild(__h(\"div\",null,__h(\"a\",{ title : \"hi there\"},\" LL \" + \"click here\" + \" RR \")));\r\n```\r\n\r\nIf expr with prefix `$` inside `{{ }}` then that will be explicitly treated as `Element/Array\u003cElement\u003e`.\r\n\r\n```haxe\r\nvar link = HXX(\u003ca\u003ehere\u003c/a\u003e);\r\nvar col = [];\r\nfor (i in 0...Std.random(20))\r\n\tcol.push(HXX(\u003cli\u003en : {{ i }}\u003c/li\u003e));\r\n\r\nvar ul = HXX(\u003cul\u003e click {{ $link }} {{ $col }} \u003c/ul\u003e); // Explicitly mark variable as \"Element\"\r\nvar ul = HXX(\u003cul\u003e click {{ link }} {{ col }} \u003c/ul\u003e);   // Auto-sensing type, powered by haxe macro\r\ndocument.body.appendChild(ul);\r\n```\r\n\r\nGenerated js:\r\n\r\n```js\r\nvar link = __h(\"a\",null,\"here\");\r\nvar col = [];\r\nvar _g = 0;\r\nvar _g1 = Std.random(20);\r\nwhile(_g \u003c _g1) col.push(__h(\"li\",null,\"n : \" + _g++));\r\ndocument.body.appendChild(__h(\"ul\",null,[\" click \",link,col]));\r\n```\r\n\r\n### data binding\r\n\r\n.....\r\n\r\n#### Syntax\r\n\r\n```haxe\r\n/**\r\n@file: Specify an HTML file, Relative to current project.\r\n@root: a css selector which will be queried as **root DOMElement** for the Component.\r\n@defs: Specify property binding, for example:\r\n  {\r\n    btn :   $(\"button\"),\r\n    text:   $(\"label\").textContext,\r\n    value:  $(\"input[type=button]\").attr.value,\r\n    x:      $(null).style.left, // $(null) is self\r\n    y:      $(null).style.top,\r\n  }\r\n*/\r\nNvd.build(file: String, root: String, ?defs: Dynamic\u003cDefines\u003e);\r\n\r\n/**\r\n@selector: a css selector that used to specify a child DOMElement , if null it's represented as root DOMElement.\r\n*/\r\nfunction $(selector:String) : AUTO;\r\n\r\n/**\r\nThere are 4 types available:\r\n  $(...)             ,  // DOMElement\r\n  $(...).XXX         ,  // Property\r\n  $(...).attr.XXX    ,  // Attribute,\r\n  $(...).attr[\"XXX\"] ,  // Attribute,\r\n  $(...).style.XXX   ,  // Style-Property\r\n\r\n  // Extended syntax\r\n  @:keep $(\"selector\").XXX   , // If \"@:keep\" then \"selector\" will be retained to output/runtime.\r\n  ($(\"selector\") : OtherType), // Explicitly type casting to OtherType\r\n*/\r\n```\r\n\r\nsample:\r\n\r\n```html\r\n\u003cdiv id=\"login\" style=\"width: 320px; font-size: 14px\"\u003e\r\n  \u003cdiv style=\"clear: both\"\u003e\r\n    \u003clabel for=\"name\" style=\"float:left;\"\u003eName\u003c/label\u003e\r\n    \u003cinput style=\"float:right\" type=\"text\" name=\"name\" /\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv style=\"clear: both\"\u003e\r\n    \u003clabel for=\"email\" style=\"float:left;\"\u003eEmail address\u003c/label\u003e\r\n    \u003cinput style=\"float:right\" type=\"email\" name=\"email\"\u003e\r\n  \u003c/div\u003e\r\n  \u003cdiv style=\"clear: both\"\u003e\r\n    \u003clabel style=\"font-size: 12px\"\u003e\u003cinput type=\"checkbox\" /\u003e Remember me \u003c/label\u003e\r\n    \u003clabel style=\"font-size: 12px\"\u003e\u003cinput type=\"radio\" name=\"herpderp\" value=\"herp\" checked=\"checked\" /\u003e Herp \u003c/label\u003e\r\n    \u003clabel style=\"font-size: 12px\"\u003e\u003cinput type=\"radio\" name=\"herpderp\" value=\"derp\" /\u003e Derp \u003c/label\u003e\r\n    \u003cbutton style=\"float:right\" type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nComponent:\r\n\r\n```hx\r\n@:build(Nvd.build(\"index.html\", \"#login\", {\r\n  btn:      $(\"button[type=submit]\"),\r\n  name:     $(\"input[name=name]\").value,\r\n  email:    $(\"input[name=email]\").value,\r\n  remember: $(\"input[type=checkbox]\").checked,\r\n  herpderp: @:keep $(\"input[type=radio][name=herpderp]:checked\").value,\r\n})) abstract LoginForm(nvd.Comp) {\r\n  public inline function getData() {\r\n    return {\r\n      name: name,\r\n      email: email,\r\n      remember: remember,\r\n      herpderp: herpderp,\r\n    }\r\n  }\r\n}\r\n\r\n\r\nclass Demo {\r\n  static function main() {\r\n    // login\r\n    var login = LoginForm.ofSelector(\"#login\");\r\n    login.btn.onclick = function() {\r\n      trace(login.getData());\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n![screen shot](demo/demo.gif)\r\n\r\n![screen shot](demo/demo-2.gif)\r\n\r\noutput:\r\n\r\n```js\r\n// Generated by Haxe 4.0.0 (git build development @ e6f3b7d)\r\n(function () { \"use strict\";\r\nvar Demo = function() { };\r\nDemo.main = function() {\r\n  var login = window.document.querySelector(\"#login\");\r\n  login.children[2].children[3].onclick = function() {\r\n    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});\r\n  };\r\n};\r\nDemo.main();\r\n})();\r\n```\r\n\r\n## CHANGES\r\n\r\n* `0.8.0` :\r\n  - Some improvements to make it simple.\r\n  - Added explicit type casting. e.g: `($(\"selector\") : TabComponent)`\r\n  - [HXX] simple markup will be automatically inlined.\r\n* `0.5.0.`:\r\n  - Added Simple `HXX`\r\n  - Added SVG elements support(Only for Query)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr32%2Fno-vdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr32%2Fno-vdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr32%2Fno-vdom/lists"}