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

up () {
        const up$ = fromEvent(document, 'mouseup');

        return streamAdapter.adapt(up$, xstreamAdapter.streamSubscribe);
      },
      down () {

const aperture = () => {
    const visible$ = fromEvent(document, 'visibilitychange')
        .map(isVisible)
        .startWith(isVisible())
    const online$ = xs
        .merge(
            fromEvent(window, 'online').mapTo(true),
            fromEvent(window, 'offline').mapTo(false)
        )
        .startWith(isOnline())

    return xs
        .combine(online$, visible$)
        .map(([online, visible]) => online && visible)
        .compose(dropRepeats())
        .map(
            onlineAndVisible =>
                onlineAndVisible
                    ? xs
                          .periodic(10)
                          .mapTo({
                              type: 'TICK'
                          })
                          .startWith({ type: 'RESUME' })

down () {
        const down$ = fromEvent(document, 'mousedown');

        return streamAdapter.adapt(down$, xstreamAdapter.streamSubscribe);
      },
      click () {

positions () {
        const positions$ = fromEvent(document, 'mousemove')
          .map(ev => {
            return {x: ev.clientX, y: ev.clientY};
          }
        )
        .startWith({x: 0, y: 0});

        return streamAdapter.adapt(positions$, xstreamAdapter.streamSubscribe);
      },
      up () {

const aperture = () => {
    const visible$ = fromEvent(document, 'visibilitychange')
        .map(isVisible)
        .startWith(isVisible())
    const online$ = xs
        .merge(
            fromEvent(window, 'online').mapTo(true),
            fromEvent(window, 'offline').mapTo(false)
        )
        .startWith(isOnline())

    return xs
        .combine(online$, visible$)
        .map(([online, visible]) => online && visible)
        .compose(dropRepeats())
        .map(
            onlineAndVisible =>
                onlineAndVisible

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();

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();

const activeTab$ = component.observe('setActiveTab')

    return xs.merge(
        xs.of({
            type: 'NAVIGATION',
            replace: true,
            state: { activeTab: initialProps.activeTab }
        }),

        activeTab$.map(activeTab => ({
            type: 'NAVIGATION',
            replace: false,
            state: { activeTab }
        })),

        fromEvent(window, 'popstate').map(evt => ({
            type: 'STATE',
            state: evt.state || { activeTab: null }
        }))
    )
}

  Keydown: () => fromEvent(document, 'keydown'),
  DOM: makeDOMDriver('#main-container'),

click () {
        const click$ = fromEvent(document, 'click');

        return streamAdapter.adapt(click$, xstreamAdapter.streamSubscribe);
      }
    };