{"id":17950020,"url":"https://github.com/ciscoheat/mithril-hx","last_synced_at":"2025-04-03T15:43:50.064Z","repository":{"id":23387822,"uuid":"26749504","full_name":"ciscoheat/mithril-hx","owner":"ciscoheat","description":"Haxe externs for Mithril (JS MVC framework)","archived":false,"fork":false,"pushed_at":"2023-01-11T22:19:56.000Z","size":606,"stargazers_count":181,"open_issues_count":5,"forks_count":12,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-25T09:35:34.500Z","etag":null,"topics":["haxe","mithril","mvc"],"latest_commit_sha":null,"homepage":null,"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/ciscoheat.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}},"created_at":"2014-11-17T09:26:33.000Z","updated_at":"2024-08-08T23:32:00.000Z","dependencies_parsed_at":"2023-01-13T23:13:45.249Z","dependency_job_id":null,"html_url":"https://github.com/ciscoheat/mithril-hx","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/ciscoheat%2Fmithril-hx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciscoheat%2Fmithril-hx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciscoheat%2Fmithril-hx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ciscoheat%2Fmithril-hx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ciscoheat","download_url":"https://codeload.github.com/ciscoheat/mithril-hx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247031433,"owners_count":20872297,"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","mithril","mvc"],"created_at":"2024-10-29T09:36:45.318Z","updated_at":"2025-04-03T15:43:50.043Z","avatar_url":"https://github.com/ciscoheat.png","language":"Haxe","funding_links":[],"categories":["Externs"],"sub_categories":[],"readme":"# Mithril for Haxe\n\n[Mithril](http://mithril.js.org/) is a small, yet great javascript MVC framework that is faster and more flexible than most others. Here's the [Haxe](http://haxe.org/) version for Mithril 2, with some useful extra features thanks to macros and the type inference.\n\n# Installation\n\nStandard procedure: `haxelib install mithril` and then `-lib mithril` in your .hxml file.\n\n# How to use\n\nMithril has a great introduction on its website and plenty of documentation, so I'll only highlight what you need to get started with the Haxe version here.\n\n## Implement the Mithril interface\n\nWhen using Mithril, you will create [components](http://mithril.js.org/components.html) that will be used with the Mithril API. The recommended way to create a component is using a class that implements the `Mithril` interface. Here's an example of a Mithril component:\n\n```haxe\nimport mithril.M;\n\nclass TodoComponent implements Mithril\n{\n    var todos : Array\u003cTodo\u003e;\n\n    public function new(todos) {\n        this.todos = todos;\n    }\n\n    // When implementing Mithril, the last m() expression \n    // or Array of m() is returned automatically.\n    public function view()\n        m(\"div\", [\n            m(\"h1\", \"To do\"),\n            m(\"table\", [for(todo in todos)\n                m(\"tr\", [\n                    m(\"td\", m(\"input[type=checkbox]\", { \n                        onclick: e -\u003e todo.done = e.target.checked,\n                        checked: todo.done\n                    })),\n                    m(\"td\", todo.description)\n                ])\n            ])\n        ]);\n}\n\n/**\n * The model\n */\nclass Todo\n{\n    public var done : Bool;\n    public var description : String;\n\n    public function new(description, done = false) {\n        this.description = description;\n        this.done = done;\n    }\n}\n\nclass Main\n{\n    // Program entry point\n    static function main() {\n        var todos = [\n            new Todo(\"Learn Haxe\"),\n            new Todo(\"??\"),\n            new Todo(\"Profit!\")\n        ];\n        \n        M.mount(js.Browser.document.body, new TodoComponent(todos));\n    }\n}\n```\n\n## The major API differences\n\n- **Use M, not m!** `import mithril.M;`, then use `M` instead of `m` for the whole API. As you see above, the only exception is when using `m()`, you can use that without prefixing with `M`.\n- `m.redraw.sync()` is available through `M.redrawSync()`.\n\n### Upgrading from 1.x to 2.x\n\n- The `M.route` methods can now be called as in the Mithril syntax, `M.route.param` etc. To call `M.route` however, use `M.route.route`.\n- `M.withAttr` has been removed. Use an `e -\u003e e.target` lambda function instead.\n\n## When using Node.js\n\nIf you're using Node.js, you can install and use Mithril from npm instead of the Haxe port (see below for server side examples). To do that, define `-D mithril-native`.\n\n## Side note: \"this\" is slightly different in native javascript\n\nBecause of the slight mismatch between Haxe classes and the classless Mithril structure, in [lifecycle methods](http://mithril.js.org/components.html#lifecycle-methods), the native javascript `this` points to `vnode.tag` instead of `vnode.state`. Otherwise it would have pointed to another object when inside instance methods.\n\nThis is usually nothing you have to worry about if you're using Haxe classes for your components and state. In that context, `this` works as expected.\n\n# Haxe examples\n\nThis repo has some examples that can be interesting to test. Clone it, open a prompt in the directory and run:\n\n`haxelib install mithril`\n\nThen select one of the following:\n\n## Some small apps\n\nA collection of two demo apps, available on the Mithril site.\n\n1. `haxe client.hxml`\n1. `nekotools server -d bin`\n1. Open [http://localhost:2000/](http://localhost:2000/) in a browser.\n\n## Webshop\n\nA simple e-commerce site to demonstrate the power of Mithril.\n\n1. `haxe webshop.hxml`\n1. `nekotools server -d bin/webshop`\n1. Open [http://localhost:2000/](http://localhost:2000/) in a browser.\n\n**Live demo here:** [http://ciscoheat.github.io/webshop](http://ciscoheat.github.io/webshop)\n\n## From scratch\n\nIf you prefer a bare-bones example (doesn't require cloning), create the following two files and follow the instructions below:\n\n**index.html**\n\n```html\n\u003c!doctype html\u003e\n\u003cbody\u003e\n\u003cscript src=\"https://unpkg.com/mithril/mithril.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"example.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n**Example.hx**\n\n```haxe\nimport mithril.M;\n\nclass User\n{\n    public var name : String;\n\n    public function new(name) {\n        this.name = name;\n    }\n}\n\nclass Example implements Mithril\n{\n    var user : User;\n\n    public function new() {\n        this.user = new User(\"Thorin Oakenshield\");     \n    }\n\n    public function view() [\n        // Display an input field\n        m('input', {\n            // Updates the model on input\n            oninput: e -\u003e user.name = e.target.value,\n\n            // The redraw triggered by the oninput event will update\n            // the input field value from the model automatically\n            value: user.name\n        }),\n        \n        // Display a div with class .user and some style\n        m('.user', {style: {margin: \"15px\"}}, user.name)\n    ];\n\n    // Program entry point\n    static function main() {\n        M.mount(js.Browser.document.body, new Example());\n    }\n}\n```\n\nCompile and run with:\n\n1. `haxe -lib mithril -js example.js -main Example`\n1. Open index.html in a browser.\n\n## Server side - All targets\n\nThe rendering part of Mithril has been ported to Haxe, so you can now enjoy writing Mithril templates and have them rendered to HTML anywhere. Here's a class to get you started:\n\n```haxe\nimport mithril.MithrilNodeRender;\nimport mithril.M.m;\n\nclass Main {\n    static function main() {\n        var view = m(\"ul\", [\n            m(\"li\", \"item 1\"),\n            m(\"li\", \"item 2\"),\n        ]);\n\n        // \u003cul\u003e\u003cli\u003eitem 1\u003c/li\u003e\u003cli\u003eitem 2\u003c/li\u003e\u003c/ul\u003e\n        Sys.println(new MithrilNodeRender().render(view)); \n    }\n}\n```\n\n(Note: The above code may not work in interp mode. Test it with neko instead.)\n\n## Server side - Node.js \u0026 isomorphism\n\nWithout too much hassle, it's possible to render a Mithril component/view serverside on Node.js. Run the following in the repo directory:\n\n1. `npm install`\n1. `haxelib install hxnodejs`\n1. `haxe server.hxml`\n1. `cd bin`\n\n### Example 1: Simple rendering\n\n`node server.js` outputs a simple HTML rendering example.\n\n### Example 2: Isomorphic code\n\n`node server.js server`\n\nStarts a server on [http://localhost:2000](http://localhost:2000) that executes the same code on server and client. The server generates the HTML so the page is perceived to load quickly and search engines can index it, then the client enables the functionality.\n\n### Example 3: Cross-platform rendering\n\nAs a bonus, a Neko version of Example 1 will also be compiled. Test it with\n\n`neko server.n`\n\nThe `MithrilNodeRender` is tested with [travix](https://github.com/back2dos/travix/) and should work on all targets. \n\n# Feedback please!\n\nFeedback is always welcome! [Open an issue](https://github.com/ciscoheat/mithril-hx/issues) and give me a piece of your mind. :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciscoheat%2Fmithril-hx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fciscoheat%2Fmithril-hx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciscoheat%2Fmithril-hx/lists"}