Observable Rendering
James DiGioia
import Kefir from 'kefir';export default function EditorComponent(el, props$) {const keyup$ = Kefir.fromEvents(el, 'keyup');const keydown$ = Kefir.fromEvents(el, 'keydown');return props$.sampledBy(keyup$.debounce(150)).flatMapLatest(props =>createRenderStream(props).takeUntil(keydown$));function createRenderStream(props) {return Kefir.stream(emitter => {const loop = requestAnimationFrame(() => {// Update the elementemitter.end();});return () => cancelAnimationFrame(loop);});}};
component.js