{"id":13850433,"url":"https://github.com/billstclair/elm-code-mirror","last_synced_at":"2025-04-11T13:53:53.194Z","repository":{"id":66592580,"uuid":"151933229","full_name":"billstclair/elm-code-mirror","owner":"billstclair","description":"An example of using HTML Custom Elements in Elm","archived":false,"fork":false,"pushed_at":"2018-10-07T18:48:46.000Z","size":117,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T23:48:26.910Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://xossbow.com/elm-code-mirror","language":"JavaScript","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/billstclair.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-10-07T11:14:59.000Z","updated_at":"2023-03-01T16:02:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"556f9a9a-587f-42c7-a778-fd42135ec8ce","html_url":"https://github.com/billstclair/elm-code-mirror","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/billstclair%2Felm-code-mirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-code-mirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-code-mirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-code-mirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/billstclair","download_url":"https://codeload.github.com/billstclair/elm-code-mirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248412089,"owners_count":21099048,"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-08-04T20:01:12.160Z","updated_at":"2025-04-11T13:53:53.171Z","avatar_url":"https://github.com/billstclair.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Code Mirror Custom Element Example\n\nThis is a simple demonstration of using [HTML Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) in Elm.\n\nInspired by [Luke Westby](https://github.com/lukewestby)'s [Elm Europe talk](https://youtu.be/tyFe9Pw6TVE). The JavaScript custom element code is almost a verbatim copy.\n\nTo run it:\n\n```bash\n$ git clone git@github.com:billstclair/elm-code-mirror.git\n$ cd elm-code-mirror\n$ elm make Main.elm --output site/elm.js\n$ elm reactor\n```\n\nThen aim your browser at http://localhost:8000/site/index.html\n\nThe code is live at [xossbow.com/elm-code-mirror](https://xossbow.com/elm-code-mirror/).\n\n[custom-elements.txt](custom-elements.txt) is my notes while watching the talk.\n\n# Compatibility\n\nThe [Custom Elements Registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) is still a fairly new part of the web browser DOM. It isn't supported by all browsers, as outlined in the compatibility table on that page.\n\nIn particular, Microsoft Internet Explorer and Edge do not support custom elements. There's a polyfill, and I included that in `site/lib/custom-elements.min.js`, but it didn't make the example work in IE on my Windows machine, though it DID make it work in Firefox on my Mac desktop, without setting `dom.webcomponents.customelements.enabled` true in `about:config` (the polyfill isn't necessary, if you do that). I commented out the inclusion of the polyfill in `site/index.html`. Use it if you wish.\n\nBill St. Clair, 7 October 2018\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillstclair%2Felm-code-mirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbillstclair%2Felm-code-mirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillstclair%2Felm-code-mirror/lists"}