How to use @cycle/run - 10 common examples

History: captureClicks(makeHistoryDriver())
};
/// #else
driverFn = () => ({
    DOM: restartable(makeDOMDriver('#app'), {
        pauseSinksWhileReplaying: false
    }),
    HTTP: restartable(makeHTTPDriver()),
    Time: timeDriver,
    History: captureClicks(makeHistoryDriver())
});
/// #endif
export const driverNames: string[] = Object.keys(drivers || driverFn());

/// #if PRODUCTION
run(main as any, drivers);
// register service worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker
        .register('/service-worker.js')
        .then(registration => console.log('SW registration successful with scope: ', registration.scope));
}
/// #else
const rerun = rerunner(setup, driverFn, isolate);
rerun(main as any);

if (module.hot) {
    module.hot.accept('./app', () => {
        const newApp = require('./app').App;

        rerun(onionify(newApp));
    });

// single item
        return collection.add(sourcesList);
      }
    });
    const removeReducer$ = removeProxy$.map(item => collection => collection.remove(item));
    const reducer$ = xs.merge(removeReducer$, addReducer$);

    const emptyCollection = collection({ component, sources, removeSelector });
    const collection$ = reducer$
      .fold((collection, reducer) => reducer(collection), emptyCollection)
      .map(collection => collection.asArray());

    const remove$ = Collection.merge(collection$, item => item._remove$, true);
    removeProxy$.imitate(remove$);

    return adapt(collection$);
  }

key(n: number) {
      return adapt(storageKey(n, request$, type));
    },
    // Function returning stream of item values.

const sandbox: ISpawn = (
      resource,
      sources,
      bridges = {}
    ) => {
      let channels: MessageChannels;
      let subscription: FantasySubscription;
      let worker: Worker;
      let receivePorts: MessagePorts = {};
      const instanceId = uuid();
      return adapt(xs.create({
        start (observer) {
          const sourceKeys = Object.keys(sources);
          channels = createChannels(sourceKeys);
          // { DOM: channel}

          worker = open(resource);

          // make a object of destination ports (rx in thread) wiil be transfered to thread
          const transferPorts = portMap(channels, 2);
          
          // make a object of entry ports (tx in main)
          const sendPorts = portMap(channels, 1);

          const message: SandboxMessage = {
            cmd: SandboxMessageCommand.init,
            ports: transferPorts,

export interface CycleProgram<
  D extends MatchingDrivers,
  M extends MatchingMain
> {
  sources: ToMostStreams>;
  sinks: Sinks;
  run(): DisposeFunction;
}

export interface Engine {
  sources: Sources;
  run>(sinks: Sinks): DisposeFunction;
  dispose(): void;
}

setAdapt(function adaptXstreamToMost(stream: Stream): MostStream {
  return most.from(stream as any);
});

/**
 * Takes a `main` function and circularly connects it to the given collection
 * of driver functions.
 *
 * **Example:**
 * ```js
 * import run from '@cycle/most-run';
 * const dispose = run(main, drivers);
 * // ...
 * dispose();
 * ```
 *
 * The `main` function expects a collection of "source" streams (returned from

import model  from './model'
import view   from './view'
import rpc    from './rpc'

if (process.env.BUILD_TARGET === 'web') {
  require('pwacompat')
}

// Send Cordova/Electron users directly to server settings if there are none
if (process.env.BUILD_TARGET !== 'web' && !localStorage.serverInfo) {
  location.href = 'settings.html' // @xxx side-effects outside of drivers
  throw new Error('Missing server settings, redirecting')
}

// Get cyclejs to use rxjs-compat-enabled streams
require("@cycle/run/lib/adapt").setAdapt(stream$ => O.from(stream$))

const serverInfo = process.env.BUILD_TARGET === 'web'
  ? { serverUrl: '.', accessKey: document.querySelector('[name=access-key]').content }
  : JSON.parse(localStorage.serverInfo)

const main = ({ DOM, HTTP, SSE, route, conf$, scan$, urihandler$ }) => {

  const actions = intent({ DOM, route, conf$, scan$, urihandler$ })
      , resps   = rpc.parseRes({ HTTP, SSE })

      , state$  = model({ HTTP, ...actions, ...resps })

      , rpc$     = rpc.makeReq(actions)
      , vdom$    = view.vdom({ state$, ...actions, ...resps })
      , navto$   = view.navto({ ...resps, ...actions })
      , notif$   = view.notif({ state$, ...resps })

import urlutil from 'url'
import run from '@cycle/rxjs-run'
import serialize from 'form-serialize'
import { Observable as O } from './rxjs'
import { makeDOMDriver } from '@cycle/dom'
import { makeHashHistoryDriver, captureClicks } from '@cycle/history'
import storageDriver from '@cycle/storage'

// Get cyclejs to use rxjs-compat-enabled streams
require("@cycle/run/lib/adapt").setAdapt(stream$ => O.from(stream$))

import makeRouteDriver from './driver/route'
import makeConfDriver  from './driver/conf'

import { combine, dbg } from './util'

import { layout } from './views/layout'
import view from './views/server-settings'

// Settings manager for Cordova/Electron builds.
// This is a standalone cycle app loaded using a separate HTML file (settings.html).

const main = ({ DOM, IPC, storage, route, conf$, scan$ }) => {
  const
    on = (sel, ev, pd=false) => DOM.select(sel).events(ev, { preventDefault: pd })

export interface CycleProgram<
  D extends MatchingDrivers,
  M extends MatchingMain
> {
  sources: ToObservables>;
  sinks: Sinks;
  run(): DisposeFunction;
}

export interface Engine {
  sources: Sources;
  run>(sinks: Sinks): DisposeFunction;
  dispose(): void;
}

setAdapt(function adaptXstreamToRx(stream: Stream): Observable {
  return from(stream as any);
});

/**
 * Takes a `main` function and circularly connects it to the given collection
 * of driver functions.
 *
 * **Example:**
 * ```js
 * import run from '@cycle/rxjs-run';
 * const dispose = run(main, drivers);
 * // ...
 * dispose();
 * ```
 *
 * The `main` function expects a collection of "source" Observables (returned

.path('/some')
                    .path('/nested')
                    .define(defintion);
                match$.subscribe(({ path, value, location }) => {
                    assert.strictEqual(path, '/correct/route');
                    assert.strictEqual(value, 123);
                    assert.strictEqual(
                        location.pathname,
                        '/some/nested/correct/route'
                    );
                    done();
                });
                return {};
            };
            routerify(app, switchPath)({
                history: adapt(
                    makeServerHistoryDriver()(
                        of('/wrong/path', '/some/nested/correct/route').pipe(
                            delay(0)
                        )
                    )
                )
            });
        });

return function(sources: Sources): Sinks {
        const messageProxy$: Stream = xs.create();

        const parentSinks: Sinks = main({
            ...sources,
            [name]: adapt(messageProxy$)
        });

        const sinks: Sinks = Object.keys(parentSinks)
            .map(k => ({ [k]: xs.fromObservable(parentSinks[k]) }))
            .reduce((prev, curr) => Object.assign(prev, curr), {});

        if (sinks[name]) {
            const modalProxy$: Stream = xs.create();
            const modalStack$: Stream = xs
                .merge(sinks[name] as Stream, modalProxy$)
                .fold((acc, curr) => {
                    if (curr.type === 'close') {
                        const count: number = curr.count || 1;
                        return acc.slice(0, Math.max(acc.length - count, 0));
                    } else if (curr.type === 'open') {
                        const _sources: Sources =