yolk-create-custom-component.js

import { h, render, CustomComponent } from 'yolk';

const createCustomComponent = CustomComponent.extend;

const Custom = createCustomComponent({
  onMount (props, node) {
    this._instance = {
      update: (props) => {
        this._instance.currentProps = props;
        console.log(this._instance.currentProps);
      },
      destroy: () => {
        this._instance.currentProps = null;
        console.log('destroy');
      },
      currentProps: props
    };
  },
  onUpdate (props, node) {
    this._instance.update(props)
  },
  onUnmount () {
    this._instance.destroy()
  }
});

const Counter = ({ props, children, createEventHandler }) => {
  // map all plus button click events to 1
  const handlePlus = createEventHandler();
  const plusOne$ = handlePlus.map(() => 1);

  // map all minus button click events to -1
  const handleMinus = createEventHandler();
  const minusOne$ = handleMinus.map(() => -1);

  // merge both event streams together and keep a running count of the result
  const count$ = plusOne$.merge(minusOne$).scan((x, y) => x + y, 0).startWith(0);

  // prop keys are always cast as observables
  const title$ = props.title.map(title => `Awesome ${title}`);

  return (
    <div>
      <h1>{title$}</h1>
      <div>
        <button id="plus" onClick={handlePlus}>+</button>
        <button id="minus" onClick={handleMinus}>-</button>
      </div>
      <div>
        <span>Count: {count$}</span>
      </div>
      <Custom count={count$}/>
      {children}
    </div>
  );
}

render(<Counter title="Example" />, document.getElementById('container'))