{"id":26223554,"url":"https://github.com/jhbertra/purescript-halogen-custom-element","last_synced_at":"2025-04-19T11:32:57.930Z","repository":{"id":44667063,"uuid":"239445634","full_name":"jhbertra/purescript-halogen-custom-element","owner":"jhbertra","description":"A library to convert Halogen components to custom elements.","archived":false,"fork":false,"pushed_at":"2022-02-01T08:37:11.000Z","size":8,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T07:21:51.320Z","etag":null,"topics":["custom-element","purescript-halogen","web-components"],"latest_commit_sha":null,"homepage":"","language":"PureScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhbertra.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}},"created_at":"2020-02-10T06:45:32.000Z","updated_at":"2024-02-05T00:40:48.000Z","dependencies_parsed_at":"2022-09-15T11:50:52.727Z","dependency_job_id":null,"html_url":"https://github.com/jhbertra/purescript-halogen-custom-element","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/jhbertra%2Fpurescript-halogen-custom-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhbertra%2Fpurescript-halogen-custom-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhbertra%2Fpurescript-halogen-custom-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhbertra%2Fpurescript-halogen-custom-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhbertra","download_url":"https://codeload.github.com/jhbertra/purescript-halogen-custom-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249685171,"owners_count":21310558,"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":["custom-element","purescript-halogen","web-components"],"created_at":"2025-03-12T17:39:02.138Z","updated_at":"2025-04-19T11:32:57.901Z","avatar_url":"https://github.com/jhbertra.png","language":"PureScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# purescript-halogen-custom-element\n\nA library to convert Halogen components to [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).\n\n## Usage\n\n```\nimport Halogen.CustomElement as CustomElement\n\nmain :: Effect Unit\nmain = do\n  CustomElement.define \"halogen-hello\" component\n```\n\nNow include `main.js` in your HTML file, then put `\u003chalogen-hello\u003e\u003c/halogen-hello\u003e` anywhere in your HTML, and the Halogen component will be rendered there.\n\nThe original purpose of this library is to support putting Halogen component inside Markdown, so that write documentation together with demos becomes easy. See the [documentation of halogen-nselect](https://nonbili.github.io/purescript-halogen-nselect/) as an example.\n\n## Limitation\n\nCurrently, the component passed to `CustomElement.define` is required to have `Unit` as input type.\n\n```purescript\nmodule Halogen.CustomElement (define) where\n\ndefine\n  :: forall query output\n   . String\n  -\u003e H.Component HH.HTML query Unit output Aff\n  -\u003e Effect Unit\n```\n\nHowever, I think it's possible to collect all attributes of the defined custome element, and pass a `Foreign` or `Json` back to the underlying Halogen component.\n\n\n## Development\n\n```\ncd example\nyarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhbertra%2Fpurescript-halogen-custom-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhbertra%2Fpurescript-halogen-custom-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhbertra%2Fpurescript-halogen-custom-element/lists"}