cyclejs / cycle-time-travel

A time traveling debugger for Cycle.js
MIT License
217 stars 10 forks source link

Suggestion to make API simpler #10

Open staltz opened 9 years ago

staltz commented 9 years ago

Instead of this:

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, [
    {stream: count$, label: 'count$'},          
    {stream: action$, label: 'action$'}      
  ]);

How about this?

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, {
  count$,
  action$
});

You can loop over the properties of an object and get its key. That above was sugar for ES5:

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, {
  count$: count$,
  action$: action$
});

Meaning you will have both the key as a string and the value. Gladly ES6 makes it easy to avoid this repetition.

Widdershin commented 9 years ago

This is actually the interface I started with, the only problem is that we need some way of specifying the order that streams are displayed in. When using this object style, the order will change across runs, which isn't the best UX.

There is also the consideration of wanting to pass along more options with the stream. This is actually already an undocumented feature.

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, [
    {stream: count$, label: 'count$', feature: true},          
    {stream: action$, label: 'action$'}      
  ]);

I am open to something like this, but it would mean that trouble would happen if a user happened to supply a stream with the same name as an optional argument.

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, [
    {count$, feature: true},          
    {action$}      
  ]);

To mitigate that problem I could always use an options object.

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, [
    {count$, options: {feature: true}},          
    {action$}      
  ]);

Thoughts?

staltz commented 9 years ago

This is actually the interface I started with, the only problem is that we need some way of specifying the order that streams are displayed in.

Ok, good to know.

let {DOM: timeTravelBar$, timeTravel} = makeTimeTravel(DOM, [
    {count$, feature: true},          
    {action$}      
  ]);

I don't think this would be a problem. You can whitelist those options that you expect, and either throw an error when a user tries to give a property that collides with an option name, or always assume streams to be given with a $ suffix.