Purescript-halogen-nselect and purescript-halogen-custom-element

Announcements
,
#1

https://github.com/nonbili/purescript-halogen-nselect and
https://github.com/nonbili/purescript-halogen-custom-element

purescript-halogen-nselect is not a new project, but I finally managed to put some documentation together.

https://nonbili.github.io/purescript-halogen-nselect/

The documentation itself is a demo of purescript-halogen-custom-element. With purescript-halogen-custom-element, I can convert Halogen components to custom elements.

For example, I can convert Example.Hello.component to a <halogen-hello> custom element, then I can put <halogen-hello> anywhere inside html or markdown file. And the halogen component will be rendered at that position.

It’s fun to use Halogen and custom elements (web components) together, in both directions: use custom element inside a Halogen component, and use Halogen component as a custom element. I will write more about it in the future.

1 Like
#2

What are the differences between your purescript-halogen-nselect and the pre-existing purescript-halogen-select?

What motivated this new package? Was there anything you found lacking or wanted to change?

I haven’t dug too deep into either package yet, but one difference I see is that original select has de-bouncing features.

#3

Good question. There was a section about the differences in the README, but removed because I don’t know if they’re still accurate.

In short, there were things I can’t easily do with -select, like rendering another input inside a dropdown. More details: https://github.com/nonbili/purescript-halogen-nselect/issues/6

As for de-bouncing, to me it’s a user side thing. It’s not too difficult to throttle or de-bounce when receiving the InputValueChanged message.