Cyclejs Integration about router5

[troch]

I'll read about those links, and try to help if I can!

[staltz]

@ArnoBuschmann nope, I'm not working on it, go ahead :)

[bobfp]

I've been writing a driver for page.js, but I'm thinking about switching it to use this instead.

[ArnoBuschmann]

@bcoop713 Interesting as well, have you published it somewhere?
@staltz Haha yes, every Cycle dev should write a driver some day, right? Let's see how far I can get. Next week I'll have time to look at it.
@troch Thanks for creating router5 as it fits nicely to the reactive programming landscape. How comes you added 5 to its name?

[troch]

@ArnoBuschmann you're welcome. I added a 5 because of HTML5. I wanted to keep it simple and well... that stayed. Way better than other ideas which involved trying to fusion "functional", "reactive" and "router" in one word = "frouter" 😁.

[axefrog]

I've whipped up a Router5 driver for Cycle. It's a first version, and may be buggy, but it could serve as a starting point?

I've implemented it as a source/sink driver. Synchronous state-mutating methods which do not return a significant value, and asynchronous methods which do not require a callback can be called as sink requests by dispatching an array, the first element of which is the function to call, and subsequent elements for each argument. Asynchronous methods which are suitable as observable sources, ("start", "addListener", etc.) are wrapped as functions on the response source object.

Examples:

// source:
let navigateHome$ = responses.router
  .addNodeListener('home')
  .doOnNext(({ toState, fromState }) => {
    // do stuff here
  });

// sink:
return {
  routing: Rx.Observable.just(['navigate', 'home']);
}
// or just:
return {
  routing: Rx.Observable.just('start');
}

Implementation:

'use strict';

import {Router5, RouteNode} from 'router5';

// The set of valid sink functions includes synchronous state-affecting router functions that do not require a callback
// and which do not have a significant return value other than the router object itself.
const validSinkFuncs = ['add','addNode','canActivate','deregisterComponent','navigate','registerComponent','setOption','start','stop'];

function validateAndRemapSinkArgument(arg) {
  if(!arg || !arg.length) {
    return null;
  };
  if(typeof arg === 'string') {
    arg = [arg];
  }
  else if(!(arg instanceof Array)) {
    throw new Error('A Router5 sink argument should be a string or an array of arguments, starting with a function name');
  }
  if(validSinkFuncs.indexOf(arg[0]) === -1) {
    throw new Error(`"${arg[0]}" is not the name of a valid sink function call for the Router5 driver`);
  }
  if(typeof arg[arg.length - 1] === 'function') {
    throw new Error('Router5 invocations specifying callbacks should be made using the source (responses) object');
  }
  return arg;
}

function createStateChange$(router, fname, args) {
  return Rx.Observable.create(observer => {
    try {
      router[fname].apply(router, args.concat((toState, fromState) => {
        observer.onNext({ toState, fromState });
      }));
    }
    catch(e) {
      observer.onError(e);
    }
  });
}

function createDone$(router, fname, args) {
  return Rx.Observable.create(observer => {
    try {
      router[fname].apply(router, args.concat(() => {
        observer.onNext(true);
        observer.onCompleted();
      }));
    }
    catch(e) {
      observer.onError(e);
    }
  });
}

export function makeRouterDriver(routes, options) {
  let router = new Router5(routes, options);

  // The request stream allows certain synchronous [compatible] methods to be called in the form ['funcName', ...args].
  return function(request$) {
    request$
      .map(validateAndRemapSinkArgument)
      .subscribe(
        ([fname, ...args]) => router[fname].apply(router, args),
        err => console.error(err)
      );

    return {
      start: (...args) => createDone$(router, 'start', args),
      addListener: (...args) => createStateChange$(router, 'addListener', args),
      addNodeListener: (...args) => createStateChange$(router, 'addNodeListener', args),
      addRouteListener: (...args) => createStateChange$(router, 'addRouteListener', args),
      navigate: (...args) => createDone$(router, 'navigate', args)
    };
  }
}

[staltz]

At first inspection, looks good to me.

I feel uneasy with routes given to makeRouterDriver(routes, options) because routes is code for business logic, and the place for that is main(), not driver configuration, but I doubt there would be a neat driver API for router5 that would avoid such configuration makeRouterDriver(routes, options) due to the way router5 is.

By the way, we should probably move some of this discussion to https://github.com/cyclejs/cycle-core/labels/drivers, and keep an issue here only if docs for integration with Cycle.js need to be written.

[troch]

@axefrog thank you for getting started on this.

@staltz do you mean you would prefer a driver which is not instance specific? Or makeRouterDriver should take a router instance?

[axefrog]

Added an update here: cyclejs/cyclejs#159 (comment)