@motorcycle/mostly-dom/lib/makeDomComponent.d.ts

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

import { DomSource } from '@motorcycle/dom';
import { VNode } from 'mostly-dom';
import { IOComponent, Stream } from '@motorcycle/types';
/**
 * Sources type expected by a DOM component.
 * @name DomSources
 * @example
 * export type DomSources<A = Element, B = Event> = { readonly dom: DomSource<A, B> }
 * @type
 */
export declare type DomSources<A = Element, B = Event> = {
    readonly dom: DomSource<A, B>;
};
/**
 * Sinks type returns by a DOM component.
 * @name DomSinks
 * @example
 * export type DomSinks = { readonly view$: Stream<VNode> }
 * @type
 */
export declare type DomSinks = {
    readonly view$: Stream<VNode>;
};
/**
 * 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`)
 *   ])
 * }
 */
export declare function makeDomComponent(element: Element): IOComponent<DomSinks, DomSources>;