customElementify
Cycle.js Experimental
Helper function that takes a Cycle.js component ((sources: Sources) => Sinks
) and returns a JavaScript class that can be registered as a Web Component custom element with document.registerElement
:
; { // ...} const customElementClass = ;document;
Installation
npm install cycle-custom-elementify
Required!
Your target browser must support Custom Elements v0. To install the polyfill:
npm install webcomponents.js
- Include
<script src="./node_modules/webcomponents.js/webcomponents.js"></script>
in your page
This library is experimental and so far only supports Cycle.js apps written with xstream. You can only customElementify
a function that expects xstream sources and sinks.
Usage
Your Cycle.js component function can expect sources to have DOM
and props
:
// TypeScript signature:
Your component's sinks should have DOM
and any other sink will be converted to DOM events on the custom element:
// TypeScript signature:
Write your function MyButton: (sources: Sources) => Sinks
like you would do with any typical Cycle.js app. sources.props
is a Stream of objects that contain attributes given to the custom element.
Then convert it to a custom element class:
; const customElementClass = ;
Then, register your custom element on the DOM with a tagName of your choice:
document;
If you want to use this my-button
inside another Cycle.js app, be careful to wait for the WebComponentsReady
event first:
window;
If your parent Cycle.js app passes attributes to the custom element, then they will be available as sources.props
in the child Cycle.js app (inside the custom element):
{ // ... const vnode$ = xs; // ...}
{ const color$ = sourcesprops; // ...}
Known issues
- This is an experimental library :)
- We're following the Custom Elements V0 spec, not yet V1
- The custom elements generated by this helper do not support children yet, only attributes
- Using this library might confuse the Cycle.js DevTool