{"id":13807180,"url":"https://github.com/nucleartide/ember-elm","last_synced_at":"2025-08-01T04:34:43.617Z","repository":{"id":15348475,"uuid":"77763870","full_name":"nucleartide/ember-elm","owner":"nucleartide","description":"Write Elm in your Ember app","archived":false,"fork":false,"pushed_at":"2022-12-09T17:24:28.000Z","size":13603,"stargazers_count":55,"open_issues_count":30,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-06T07:05:43.347Z","etag":null,"topics":["elm","ember-cli"],"latest_commit_sha":null,"homepage":"https://medium.com/@nucleartide/introducing-ember-elm-d47f2af73aff","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nucleartide.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-01T03:01:01.000Z","updated_at":"2020-08-14T11:58:08.000Z","dependencies_parsed_at":"2023-01-13T20:30:10.352Z","dependency_job_id":null,"html_url":"https://github.com/nucleartide/ember-elm","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fember-elm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fember-elm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fember-elm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fember-elm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucleartide","download_url":"https://codeload.github.com/nucleartide/ember-elm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858016,"owners_count":20359261,"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":["elm","ember-cli"],"created_at":"2024-08-04T01:01:22.170Z","updated_at":"2025-03-17T09:31:20.667Z","avatar_url":"https://github.com/nucleartide.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["Mad science"],"readme":"![ember-elm: Reliably ambitious web applications.](assets/title.png)\n\n[![Ember Observer Score](https://emberobserver.com/badges/ember-elm.svg)](https://emberobserver.com/addons/ember-elm)\n\nember-elm lets you write Ember components in [Elm](http://elm-lang.org/)! It\nintegrates cleanly with your existing Ember application, so you can experiment\nwith Elm without having to migrate to another front-end stack. It also\nintegrates with ember-cli, so you can develop Elm code with live reloading,\nwhile having access to the full power of ember-cli's addon ecosystem.\n\n## Demo\n\n\u003ca href=\"https://nucleartide.github.io/ember-elm/\"\u003e\u003cimg alt=\"Demo\" src=\"assets/demo.png\"\u003e\u003c/a\u003e\n\n## Features\n\n- Use your Elm code in Ember with `elm-component`\n- Generate Elm modules with `ember g elm-module`\n- Live reload with ember-cli\n- Leverage the power of the ember-cli and Elm ecosystems together in one stack\n\n## Setup\n\n### Prerequisites\n\nBefore you can install ember-elm, you need to have two things installed:\n\n1. **Node 6.0.0+ or up**. This is because this addon's [build code](index.js) uses\n   ES6.\n2. [**Elm**](https://guide.elm-lang.org/install.html). Don't worry, it's relatively\n   pain-free! This will be automated in the future.\n\n### Install\n\n```\n$ ember install ember-elm\n```\n\nAlternatively, if you're using Yarn:\n\n```\n$ yarn add ember-elm --dev \u0026\u0026 ember g ember-elm\n```\n\n## Use\n\n### Generate\n\nTo get started, let's get a simple \"Hello World\" example up and running.\n\nFirst, generate an Elm module:\n\n```\n$ ember g elm-module hello\n```\n\nThis will generate an Elm file in your project, located at\n`app/elm-modules/Hello.elm`. You will see that a very basic Elm program has\nalready been written for you:\n\n```elm\nmodule Hello exposing (..)\n\nimport Html exposing (text)\n\nmain =\n  text \"hello world\"\n```\n\nTake note of the `module Hello exposing (..)` declaration at the top of\n`Hello.elm`. Like an ES6 file, every Elm file defines its own module. This\nparticular module will simply output a `\u003cdiv\u003e` containing the text \"hello world\"\nto the screen.\n\n### Componentize\n\nGreat! Your project now contains an Elm module. To actually use that module,\ninclude the file `\u003cyour-app\u003e/elm-modules.js` into a controller/component, so\nthat you can use your Elm module in a template.\n\n\u003e _Note:_\n\u003e\n\u003e [Behind the scenes](broccoli-elm/index.js), ember-elm finds all Elm files in\n\u003e your app tree, and compiles all of them into a single `elm-modules.js` file at\n\u003e the root of your tree. So you can't import an Elm file directly – you have to\n\u003e import `elm-modules.js`, and access properties on the imported object to get\n\u003e the module you want.\n\nFor example:\n\n```js\n// routes/application.js\nimport Ember from 'ember'\nimport Elm from 'my-app/elm-modules'\n\nexport default Ember.Route.extend({\n  setupController(controller, model) {\n    controller.set('Elm', Elm)\n  }\n})\n```\n\n```hbs\n{{!-- templates/application.hbs --}}\n{{elm-component src=Elm.Hello}}\n```\n\nOnce that's done, you should see a simple \"hello world\" output to the screen:\n\n\u003e _Output:_\n\u003e\n\u003e \u003ca href=\"assets/example_full.png\"\u003e\u003cimg alt=\"Example\" src=\"assets/example.png\"\u003e\u003c/a\u003e\n\nCongrats! If you've made it this far, you are now up and running with Elm.\n\n## API\n\n### `{{elm-component src=\u003cObject\u003e flags=\u003c*\u003e setup=\u003cFunction\u003e}}`\n\nPass in an Elm module to use it:\n\n```hbs\n{{elm-component src=Elm.Hello}}\n```\n\nIf the Elm module requires [flags][3], pass them in and they will be passed to\nthe Elm module:\n\n```hbs\n{{elm-component src=Elm.HelloWithFlags flags=(hash name='Dog')}}\n```\n\nTo communicate with your Elm module, grab the functions that are passed via\n[ports][2]:\n\n```hbs\n{{elm-component src=Elm.Chat setup=(action 'setupPorts')}}\n```\n\n```js\nimport Ember from 'ember'\n\nexport default Ember.Controller.extend({\n  sendToElm(emojis) {},\n\n  actions: {\n    setupPorts(ports) {\n      this.set('sendToElm', ports.emoji.send)\n    },\n\n    winkyFace() {\n      this.get('sendToElm')(';)')\n    }\n  }\n})\n```\n\n## Notes\n\n### main\n\nCompilation of Elm files in version 0.19.1 requires a `main` value for all files\npassed to `elm-make`.\n\n```\n-- NO MAIN ---------------------------------------------------------------------\n\nWhen producing a JS file, I require that given files all have `main` values.\nThat way functions like Elm.CSS.ChatConversationStyle.init() are definitely\ndefined in the resulting file. I am missing `main` values in:\n\n... cut for brevity ...\n```\n\nTo target only files that have `main` values, use the ember-elm `includePaths`\nconfiguration option in `ember-cli-build.js` to limit compliation to only\nsafe directories.  The elm compiler will handle including any other module\ndependencies.\n\n```js\nelm: {\n  includePaths: ['app/elm-modules/Main']\n}\n```\n\n### elm-stuff\n\nember-elm (via [node-elm-compiler][4]) will install Elm dependencies to\n`elm-stuff/`.  To avoid committing Elm deps to version control, run:\n\n```\n$ echo elm-stuff/ \u003e\u003e .gitignore\n```\n\n### Babel\n\nBabel will start stripping whitespace from `elm-modules.js` when it exceeds\n100KB. This makes it harder to learn how it works. To disable this behavior, set\nthe Babel `compact` option to false in your `ember-cli-build.js`:\n\n```js\nmodule.exports = function(defaults) {\n  const app = new EmberApp(defaults, {\n    babel: {\n      compact: false\n    }\n  })\n}\n```\n\n## Badges\n\n![](https://img.shields.io/badge/license-MIT-blue.svg)\n![](https://img.shields.io/badge/status-stable-green.svg)\n\n---\n\n\u003e Jason Tu \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Tide Software \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e GitHub [@nucleartide](https://github.com/nucleartide) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@nucleartide](https://twitter.com/nucleartide) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Slack [@nucleartide](https://embercommunity.slack.com/messages/@nucleartide/)\n\n[1]: https://github.com/nucleartide/ember-elm/blob/7072c421333c072685b04f7a40d5d580d2cc2e92/tests/dummy/app/routes/application.js#L20\n[2]: https://guide.elm-lang.org/interop/javascript.html#ports\n[3]: https://guide.elm-lang.org/interop/javascript.html#flags\n[4]: https://github.com/rtfeldman/node-elm-compiler\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleartide%2Fember-elm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucleartide%2Fember-elm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleartide%2Fember-elm/lists"}