@motorcycle/mostly-dom/lib/makeDomComponent.js

Motorcycle.ts adapter for mostly-dom. Built on @motorcycle/dom.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var dom_1 = require("@motorcycle/dom");
var mostly_dom_1 = require("mostly-dom");
var stream_1 = require("@motorcycle/stream");
var prelude_1 = require("@typed/prelude");
var vNodeWrapper_1 = require("./vNodeWrapper");
var toElement = stream_1.map(prelude_1.prop('element'));
/**
 * Takes an element and returns a DOM component function.
 *
 * @name makeDomComponent(element: Element): (sinks: DomSinks) => DomSources
 * @example
 * import {
 *   makeDomComponent,
 *   DomSources,
 *   DomSinks,
 *   VNode,
 *   events,
 *   query,
 *   div,
 *   h1,
 *   button
 * } from '@motorcycle/mostly-dom'
 * import { run } from '@motorcycle/run'
 *
 * const element = document.querySelector('#app')
 *
 * if (!element) throw new Error('unable to find element')
 *
 * run(Main, makeDomComponent(element))
 *
 * function Main(sources: DomSources): DomSinks {
 *   const { dom } = sources
 *
 *   const click$: Stream<Event> = events('click', query('button'))
 *
 *   const amount$: Stream<number> = scan(x => x + 1, 0, click$)
 *
 *   const view$: Stream<VNode> = map(view, amount$)
 *
 *   return { view$ }
 * }
 *
 * function view(amount: number) {
 *   return div([
 *     h1(`Clicked ${amount} times`),
 *     button(`Click me`)
 *   ])
 * }
 */
function makeDomComponent(element) {
    var rootVNode = mostly_dom_1.elementToVNode(element);
    var wrapVNode = stream_1.map(vNodeWrapper_1.vNodeWrapper(element));
    var patch = stream_1.scan(mostly_dom_1.init(), rootVNode);
    return function Dom(sinks) {
        var view$ = sinks.view$;
        var elementVNode$ = patch(wrapVNode(view$));
        var element$ = stream_1.hold(toElement(elementVNode$));
        var dom = dom_1.createDomSource(element$);
        stream_1.drain(element$);
        return { dom: dom };
    };
}
exports.makeDomComponent = makeDomComponent;
//# sourceMappingURL=makeDomComponent.js.map