{"id":17579461,"url":"https://github.com/fponticelli/doom","last_synced_at":"2025-04-28T16:29:59.300Z","repository":{"id":142256149,"uuid":"45229779","full_name":"fponticelli/doom","owner":"fponticelli","description":"Virtual Dom Library for Haxe","archived":false,"fork":false,"pushed_at":"2018-01-02T20:29:16.000Z","size":1670,"stargazers_count":35,"open_issues_count":1,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-18T18:33:15.805Z","etag":null,"topics":["haxe","html","react","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"Haxe","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fponticelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2015-10-30T04:50:45.000Z","updated_at":"2025-01-22T18:54:37.000Z","dependencies_parsed_at":"2023-05-12T04:15:47.893Z","dependency_job_id":null,"html_url":"https://github.com/fponticelli/doom","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fponticelli%2Fdoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fponticelli%2Fdoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fponticelli%2Fdoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fponticelli%2Fdoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fponticelli","download_url":"https://codeload.github.com/fponticelli/doom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251345620,"owners_count":21574750,"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":["haxe","html","react","virtual-dom"],"created_at":"2024-10-22T00:44:52.205Z","updated_at":"2025-04-28T16:29:59.275Z","avatar_url":"https://github.com/fponticelli.png","language":"Haxe","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Doom\n\nDoom is a Virtual Dom Library for Haxe. It is strictly typed (no `Dynamic`s\nlurking around) and built to be easy to use.\n\n## Demos\n\nExamples and demos with source code can be found [here](https://github.com/fponticelli/doom-demos/).\n\n## Tests\n\nMake sure to have [phantomjs](http://phantomjs.org/) installed.\n\nRun the following commands from the root of the projects:\n\n```bash\nhaxelib install hmm\nhmm install\nhaxe build.hxml\n```\n\n## VNode\n\nA `VNode` (virtual node) is the basic rendering element in Doom. It can\nrepresent an element (like a `DIV` or an `A`), simple text or a Component.\n\nGenerating a `VNode` doesn't automatically render it. A `VNode` needs to be\ntranslated into browser DOM nodes. There are two ways to do that:\n\n* mount the `VNode` directly in the DOM\n* generate and return a `VNode` from a `Component.render` method.\n\nTo mount a `VNode` use `Doom.render.mount()`:\n\n```haxe\nimport doom.html.Html.*;\nimport js.Browser.document as doc;\n\nclass Main {\n  static function main()\n    Doom.browser.mount(\n      h1(\"I'm just a simple element\"),\n      doc.getElementById(\"main\")\n    );\n}\n```\n\n### VNode Types\n\nThe following `VNode` types exist:\n\n* `Element(name: String, attributes: Map\u003cString, AttributeValue\u003e, children: VNodes)`\n* `Comment(comment: String)`\n* `Raw(code: String)`\n* `Text(text: String)`\n* `Comp\u003cProps, El\u003e(comp: Component\u003cProps, El\u003e)`\n\nThese can be generated using the homonymous methods on `doom.core.VNode`, `doom.html.Html` and/or `doom.html.Svg` (the last two are convenient aliases). The methods are `el`, `comp`, `comment`, `raw` and `text`. `doom.html.Html` also contains shortcut methods like `div` or `input` to generate equivalent\nnodes.\n\n### VNodes\n\nMost elements accept child elements, there are typed as `VNodes` which is an abstract on `Array\u003cVNode\u003e` with a few additional benefits (mostly implicit cast from common types).\n\n### AttributeValue\n\nElements expect a `Map\u003cString, AttributeValue\u003e` to set the node attributes and properties. `AttributeValue` is a convenient abstract that simplifies assigning the right values to the attributes.\n\n`AttributeValue` has 3 constructors:\n\n* `BoolAttribute(b : Bool)`\n* `StringAttribute(s : String)`\n* `EventAttribute\u003cT : Event\u003e(f : T -\u003e Void)`\n\nHere are the types that are implicitly converted to `AttributeValue`:\n\n* `String` for attributes like `id` or `class`\n* `Map\u003cString, Bool\u003e` mainly to be used with `class`. It is convenient to turn\n    on and off class names:\n\n```haxe\ndiv([\n  \"class\" =\u003e [\n    \"button\" =\u003e true,\n    \"active\" =\u003e props.active,\n    style    =\u003e null != style\n  ]\n]);\n```\n\n* `Bool` used with attributes like `disabled` or `checked`\n* `Void -\u003e Void` an event handler that doesn't care about information\n  related to the even itself. `click` is the perfect example for it.\n* `(T : Event) -\u003e Void` when you want an event handler and have full control\n  on the `Event` object.\n* `(T : Element) -\u003e Void`, the handler receives the original element that\n  triggered the event.\n* `String -\u003e Void`, the handler receives the text content of the element\n  that triggered the event. The text content is retrieved in different ways\n  according to the type of element (`input`, `textarea`, `select`, ...).\n* `Bool -\u003e Void`, the handler receives a flag value from the `checked`\n  attribute.\n* `Int -\u003e Void`, works like `String -\u003e Void` but tries to convert the value\n  into an `Int`. If that cannot happen the handler is not invoked.\n* `Float -\u003e Void`, same as `Int -\u003e Void` but for floats.\n\n*Note*: All event handlers except for `(T : Event) -\u003e Void` will automatically\ncall `event.preventDefault()`.\n\n## Components\n\nA component is anything between a full UI application and a button. A component\nlives inside another component (as a VNode returned by the `render` method) or it can be mounted directly in the dom.\n\n```haxe\nimport doom.html.Component;\nimport doom.html.Html.*;\nusing thx.Objects;\nimport thx.Timer;\n\nclass Main {\n  static function main() {\n    var div = js.Browser.document.getElementById(\"main\");\n    Doom.browser.mount(new BannerComponent({\n      messages : [ \"Doom\", \"is\", \"Magic\", \"(but the good kind)\" ],\n      delay : 500,\n      toDisplay : 0\n    }), div);\n  }\n}\n\nclass BannerComponent extends Component\u003cBannerProps\u003e {\n  override function render() {\n    Timer.delay(function() {\n      update(props.shallowMerge({\n        toDisplay : (props.toDisplay + 1) % props.messages.length\n      }));\n    }, props.delay);\n    return h1(props.messages[props.toDisplay]);\n  }\n}\n\ntypedef BannerProps = {\n  messages : Array\u003cString\u003e,\n  delay : Int,\n  toDisplay : Int\n}\n```\n\n### API documentation\n* [Generated documentation](https://rawgit.com/fponticelli/doom/master/docs/index.html)\n\n## TODO\n* TODO describe update\n* TODO describe state\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffponticelli%2Fdoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffponticelli%2Fdoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffponticelli%2Fdoom/lists"}