How to use the xstream/extra/debounce function in xstream

const clientWidth$ = DOM.select(':root').elements().map(target => target.clientWidth);
  const mouseDown$ = DOM.select('.handler').events('mousedown');
  const mouseUp$ = DOM.select('.tricycle').events('mouseup');
  const mouseMove$ = DOM.select('.tricycle').events('mousemove');
  const mouseLeave$ = DOM.select('.tricycle').events('mouseleave');

  const MAX_RESULT_WIDTH = 0.9;
  const MIN_RESULT_WIDTH = 0.1;

  const windowSize$ = xs.combine(
      mouseDown$
        .map(mouseDown => mouseMove$.takeUntil(mouseUp$.merge(mouseLeave$)))
        .flatten(),
      // TODO: This debounce should be throttle
      clientWidth$.compose(debounce(100))
    )
    .map((mouseDrag, clientWidth) =>
      (clientWidth - mouseDrag.clientX) / clientWidth
    )
    .filter(fraction =>
      fraction < MAX_RESULT_WIDTH && fraction > MIN_RESULT_WIDTH
    )
    .map(fraction => ({
      codeWidth: `${100*(1 - fraction)}%`,
      resultWidth: `${100*fraction}%`
    }));

  return {
    DOM: xs.combine(
      xs.merge(props, windowSize$),
      error$.startWith('')

if (window.editor) {
          window.editor.setKeyboardHandler(keyHandler);
        }
      },
      error (err) {
        console.error(err);
      },
      complete () {}
    });

  const restartEnabled$ = DOM.select('.instant-checkbox').events('change')
    .map(ev => ev.target.checked)
    .startWith(true);

  xs.merge(props, code$)
    .compose(debounce(300))
    .map(transformES6(error$))
    .compose(sampleCombine(restartEnabled$))
    .addListener({
      next ([{code}, restartEnabled]) {
        runOrRestart(code, restartEnabled)
      },
      error (err) {
        console.error(err);
      },
      complete () {}
    })

  function runOrRestart(code, restartEnabled) {
    if (sources) {
      sources.dispose();
    }

.select('.message')
        .events('keyup')
        .filter(e => {
            let trimmed = String(e.target.value).trim();
            return trimmed;
        })
        .map(e => ({
            type: 'message',
            sent: e.keyCode == ENTER_KEY,
            payload: String(e.target.value),
        }));

    const scroll$ = dom
        .select('.list-container')
        .events('scroll')
        .compose(debounce(60))
        .map(e => ({
            type: 'feed-scroll',
            lock:
                e.target.scrollHeight -
                    e.target.scrollTop -
                    e.target.clientHeight <
                1,
        }));

    const channel$ = dom
        .select('.channel')
        .events('click')
        .map(e => e.target.dataset.id);

    /**
     * Video player options.

export default function makeReducer$ ({DOM, props$}) {
  const mouseUp$ = DOM
    .select('document')
    .events('mouseup')
    .map(ev => state => ({...state, activeInput: state.activeInput.set('none')}));

  const setStateFromHexInput$ = DOM
    .select('.hex-input')
    .events('input')
    .compose(debounce(300))
    .filter(ev => tinycolor(ev.target.value).isValid())
    .map(ev => setStateFromInput({value: ev.target.value}));

  const inputSwitcher$ = DOM
    .select('.switcher')
    .events('click')
    .map(changeColorInputFormat);

  const setStateFromProps$ = props$
    .map(setStateFromProps);

  return xs.merge(
    setStateFromProps$,
    setStateFromHexInput$,
    inputSwitcher$,

)
        )
        .flatten()
        .map(({ items = [] }) => items.slice(0, 10))
        .map(suggestions => ({ suggestions }))
        .map(toState)

    const clearSuggestions$ = search$
        .filter(search => search === '')
        .map(() => ({ suggestions: [] }))
        .map(toState)

    const user$ = component
        .observe('selection')
        .filter(Boolean)
        .compose(debounce(200))
        .map(selection =>
            xs.fromPromise(
                fetch(`https://api.github.com/users/${selection}`).then(res =>
                    res.json()
                )
            )
        )
        .flatten()
        .map(user => ({ user }))
        .map(toState)

    return xs.merge(suggestions$, clearSuggestions$, user$)
}

event.stopPropagation();

                return { path: currentTarget.getAttribute('href') };
            }),

        DOM.select('article.post')
            .events('click')
            .map(event => ({ path: event.currentTarget.dataset.href }))
    );

    /**
     * DOM intents including:
     */
    const scroll$ = DOM.select('.feed .list')
        .events('scroll')
        .compose(debounce(120))
        .map(e => ({
            bottom:
                e.target.scrollHeight -
                    e.target.scrollTop -
                    e.target.clientHeight <
                1,
        }));

    const loadNewPosts$ = DOM.select('a.load-more')
        .events('click')
        .map(() => ({
            type: 'reload',
        }))
        .remember();

    /**

import fromEvent from 'xstream/extra/fromEvent';
import debounce from 'xstream/extra/debounce';
import throttle from 'xstream/extra/throttle';

export const onWindowResizeDebounce$ = fromEvent(window, 'resize').compose(debounce(500));
export const onWindowScrollThrottle$ = fromEvent(window, 'scroll').compose(throttle(100));
export const onWindowScrollDebounce$ = fromEvent(window, 'scroll').compose(debounce(500));
export const onWindowOrientationChange$ = fromEvent(window, 'orientationchange');
export const documentReadyState$ =
  fromEvent(document, 'readystatechange')
    .map(() => document.readyState)
    .startWith(document.readyState)
    .remember();