https://github.com/jhbertra/purescript-halogen-custom-element
A library to convert Halogen components to custom elements.
https://github.com/jhbertra/purescript-halogen-custom-element
custom-element purescript-halogen web-components
Last synced: 11 months ago
JSON representation
A library to convert Halogen components to custom elements.
- Host: GitHub
- URL: https://github.com/jhbertra/purescript-halogen-custom-element
- Owner: jhbertra
- License: bsd-3-clause
- Created: 2020-02-10T06:45:32.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-01T08:37:11.000Z (about 4 years ago)
- Last Synced: 2025-03-29T07:21:51.320Z (12 months ago)
- Topics: custom-element, purescript-halogen, web-components
- Language: PureScript
- Homepage:
- Size: 7.81 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# purescript-halogen-custom-element
A library to convert Halogen components to [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
## Usage
```
import Halogen.CustomElement as CustomElement
main :: Effect Unit
main = do
CustomElement.define "halogen-hello" component
```
Now include `main.js` in your HTML file, then put `` anywhere in your HTML, and the Halogen component will be rendered there.
The 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.
## Limitation
Currently, the component passed to `CustomElement.define` is required to have `Unit` as input type.
```purescript
module Halogen.CustomElement (define) where
define
:: forall query output
. String
-> H.Component HH.HTML query Unit output Aff
-> Effect Unit
```
However, 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.
## Development
```
cd example
yarn start
```