How to use @cycle/history - 10 common examples

test('Main component tests', function(t) {
  t.plan(3);
  // mock the Main component and pass it the sources
  function mainComponent(sources) {
    let requests = Main(sources)
    return requests
  }

  // Pass Main through our RenderTarget
  let {sinks, sources} = run(mainComponent, {
    DOM: makeDOMDriver(createRenderTarget()),
    History: makeHistoryDriver({
      hash: false,
      queries: true,
    }),
  });
  // take our sources.Dom and select a class from it then subscribe and start testing against the results
  sources.DOM.select('.pure-g').observable.skip(1).take(1).subscribe(function (el) {

    t.equal(Array.isArray(el), true, 'Our subscription output is an array');
    const childrenEls = el[0].childNodes;
    t.equal(childrenEls[0].className, "sidebar pure-u-1 pure-u-md-1-4", "the first node should be the sidebar");
    t.equal(childrenEls[1].className, "content pure-u-1 pure-u-md-3-4", "the second node should be the content");
  });
});

const view = (content) => div('.routertest', [content]);

  function app(sources) {
    const Content = contentRouter(sources);
    const view$ = Rx.Observable.just(view(Content.DOM));

    return {
      DOM: view$,
      History: Rx.Observable.from([url.home]),
    }
  }

  let {sources} = Cycle.run(app, {
    DOM: makeDOMDriver(createRenderTarget()),
    History: makeHistoryDriver({hash: false, queries: true,}),
    // this is our counter Prop value of 2
    Props: () => Rx.Observable.just(2)
  });

  sources.DOM.select('.homepage').observable.skip(1).take(1).subscribe(function (element) {

    t.equal(Array.isArray(element), true, 'element is an array')
    t.equal(element[0].className, 'homepage', 'element has homepage class');

    const childrenElCounter = element[0].childNodes[2];

    t.equal(childrenElCounter.className, 'pure-u-1-2 counter-table', 'child element is counter table');

    const counterResults = childrenElCounter.childNodes[2].childNodes[0];
    const counterValue = counterResults.innerHTML.replace('Counter: ', '')

const view = (content) => div('.routertest', [content]);

  function app(sources) {
    const Content = contentRouter(sources);
    const view$ = Rx.Observable.just(view(Content.DOM));

    return {
      DOM: view$,
      History: Rx.Observable.from([url.home]),
    }
  }

  let {sources} = Cycle.run(app, {
    DOM: makeDOMDriver(createRenderTarget()),
    History: makeHistoryDriver({hash: false, queries: true,}),
    // this is our counter Prop value of 2
    Props: () => Rx.Observable.just(2)
  });

  sources.DOM.select('.homepage').observable.skip(1).take(1).subscribe(function (element) {

    t.equal(Array.isArray(element), true, 'element is an array')
    t.equal(element[0].className, 'homepage', 'element has homepage class');

    const childrenElCounter = element[0].childNodes[2];

    t.equal(childrenElCounter.className, 'pure-u-1-2 counter-table', 'child element is counter table');

    const counterResults = childrenElCounter.childNodes[2].childNodes[0];
    const counterValue = counterResults.innerHTML.replace('Counter: ', '')

import isolate from '@cycle/isolate'
import {restart, restartable} from 'cycle-restart'

let app = require('./app/app').default

//Define selector string of root vTree element.
//See the (module.hot) section below for explanation.
const ROOT_SELECTOR = '.app-container'

//Define what drivers our Cycle app will use
const drivers = {
  DOM: restartable(makeDOMDriver(ROOT_SELECTOR, {
    modules: [StyleModule, PropsModule, AttrsModule, ClassModule, HeroModule],
  }), {pauseSinksWhileReplaying: false}),
  HTTP: restartable(makeHTTPDriver()),
  History: restartable(makeHistoryDriver({hash: false, queries: true}), {pauseSinksWhileReplaying: true}),
}

//Initialize Cycle.js!
const {sinks, sources} = Cycle.run(app, drivers)

//Code to enable Webpack Hot Module Replacement.
if (module.hot) {
  module.hot.accept('./app/app', () => {
    //reassign 'app' variable to the updated version
    app = require('./app/app').default
    //restart the cycle app
    restart(app, drivers, {sinks, sources}, isolate)
  })
  // module.hot.dispose(() => {
  //   /*
  //     SNABBDOM-SPECIFIC WORKAROUND

driverFn = () => ({
    DOM: restartable(makeDOMDriver('#app'), {
        pauseSinksWhileReplaying: false
    }),
    HTTP: restartable(makeHTTPDriver()),
    Time: timeDriver,
    History: captureClicks(makeHistoryDriver())
});
/// #endif

function parseQR(url) {
  const p = urlutil.parse(url)

  return (p && p.host)
  ? { serverUrl: p.search ? url.substr(0, url.indexOf('?')) : url
    , accessKey: p.search && p.search.startsWith(keyMarker) ? p.search.substr(keyMarker.length) : null }
  : null
}

run(main, {
  DOM: makeDOMDriver('#app')
, IPC: process.env.BUILD_TARGET === 'electron'
  ? require('./driver/electron-ipc')
  : _ => _ => O.of() // noop driver
, storage: storageDriver
, route: makeRouteDriver(makeHashHistoryDriver())
, conf$: makeConfDriver(storageDriver)
, scan$: process.env.BUILD_TARGET === 'cordova'
  ? require('./driver/cordova-qrscanner')
  : require('./driver/instascan')({ mirror: false, backgroundScan: false })
})

//TODO: Add some of this information to the route definitions, then read them here.
  const ssrOptions = {
    domToTake: 1,
    httpToTake: 1, //potentially tie this to route defs.  some routes don't have HTTP
    isDevMode: process.env.NODE_ENV !== 'production',
  }

  let wrappedAppFn = wrapAppResultWithBoilerplate(app, ssrOptions)

  console.log('Server rendering!')

  //Run the Cycle app.
  let cycleApp = Cycle.run(wrappedAppFn, {
    DOM: makeHTMLDriver(),
    HTTP: makeHTTPDriver(),
    History: makeServerHistoryDriver({pathname: req.url}),
  })
  let sources = cycleApp.sources

  //Subscribe to the HTML Driver events
  //HTML driver returns a string representation of the vTree
  //When the string is emitted, send the HTML response to the client.
  let html$ = sources.DOM.map(prependHTML5Doctype)
  html$.subscribe(appHTML => {
    //As if by magic, this knows when your DOM is done being updated.
    //To illustrate this, the repo-list.js component emmits the DOM 4 times.
    //This log message only happens once, after all the DOM updates are done!
    //I made the HTTP request delayed by 1000ms, and this still only replied at the end.
    console.log(`${new Date().toString()} - Sending HTML reply!`)
    res.send(appHTML)
  })
}

function makeRouterDriver(history: History, routeMatcher: RouteMatcher) {
  if (!history) {
    throw new Error('Cyclic router must be given a history object');
  }
  const historyDriver = makeHistoryDriver(history);
  /**
   * The actual router driver.
   * @public
   * @typedef {routerDriver}
   * @name routerDriver
   * @method routerDriver
   * @param  {Stream} sink$ - This is the same input that the
   * history driver would expect.
   * @return {routerAPI}
   */
  return function routerDriver(sink$: RouterSink) {
    const history$ = historyDriver(sink$).remember();
    return new RouterSource(history$, [], history.createHref, routeMatcher);
  };
}

import {restart, restartable} from 'cycle-restart'

const ROOT_SELECTOR = '.app-container'

const snabbdomModules = [
  require(`snabbdom/modules/class`),
  require(`snabbdom/modules/hero`),
  require(`snabbdom/modules/style`),
  require(`snabbdom/modules/props`),
  require(`snabbdom/modules/attributes`),
]

const drivers = {
  DOM: restartable(makeDOMDriver(ROOT_SELECTOR, snabbdomModules), {pauseSinksWhileReplaying: false}),
  HTTP: restartable(makeHTTPDriver()),
  History: restartable(makeHistoryDriver({hash: false, queries: true}), {pauseSinksWhileReplaying: true}),
}

const {sinks, sources} = Cycle.run(app, drivers)

//Code to enable Webpack Hot Module Replacement.
if (module.hot) {
  module.hot.accept('./app', () => {
    app = require('./app').default
    restart(app, drivers, {sinks, sources}, isolate)
  })
}

function makeRouterDriver(...historyArgs) {
  const historyDriver = makeHistoryDriver(...historyArgs)
  /**
   * The actual router driver.
   * @public
   * @typedef {routerDriver}
   * @name routerDriver
   * @method routerDriver
   * @param  {Observable} sink$ - This is the same input that the
   * history driver would expect.
   * @return {routerAPI}
   */
  function routerDriver(sink$, runSA) {
    const history$ = historyDriver(sink$, runSA)
    const rxHistory$ = RxAdapter.adapt(history$, runSA.streamSubscribe)
    return createAPI(rxHistory$.share(), [], history$.createHref)
  }