Make driver stream library agnostic

Author: raquelxmoss

README.md

@@ -3,6 +3,8 @@
 
 This driver for Cycle.js helps you to manage key events on the document easily.
 
+Cycle Keys is stream library agnostic -- you can use it with xstream, rxjs, or any other stream library you like. If you have any issues with a particular library, let me know!
+
 ## Installation
 
 You can install Cycle Keys with npm
@@ -46,6 +48,7 @@ function main({Keys}) { /* Your amazing main function */ }
 `Keys.up()` - returns a stream of keyup events.
 
 `Keys.press()` - returns a stream of keypress events.
+
 `Keys.isDown(key)` - returns a stream of booleans, `true` if the given key is currently _down_, `false` if the given key is currently _up_. Must be called with a key argument.
 
 All methods take a key argument. Calling a method with a key argument will return a stream of key events filtered to that particular key.
@@ -73,23 +76,21 @@ In this example, a user can hit 'enter' to change the background colour. The hea
 ```js
 import {run} from '@cycle/core';
 import {makeDOMDriver, p, h1, div} from '@cycle/dom';
-import {Observable} from 'rx';
 import {makeKeysDriver} from 'cycle-keys';
-import combineLatestObj from 'rx-combine-latest-obj';
+import xs from 'xstream';
 
 function main({DOM, Keys}){
   const colours = ["#F6F792", "#333745", "#77C4D3", "#DAEDE2", "#EA2E49"];
 
-  const isDown$ = Keys.isDown('space')
-    .startWith(false);
+  const isDown$ = Keys.isDown('space');
 
   const colour$ = Keys.press('enter')
     .map(ev => +1)
-    .scan((acc, int) => acc + int, 0)
-    .startWith(0)
+    .fold((acc, int) => acc + int, 0)
     .map(int => colours[int % colours.length]);
 
-  const state$ = combineLatestObj({isDown$, colour$});
+  const state$ = xs.combine(isDown$, colour$)
+    .map(([isDown, colour]) => ({isDown, colour}));
 
   return {
     DOM: state$.map(state => (
@@ -106,7 +107,7 @@ function main({DOM, Keys}){
       )
     )
    )
-  }
+  };
 }
 
 const drivers = {
@@ -115,4 +116,4 @@ const drivers = {
 };
 
 run(app, drivers);
-```
+```

package.json

@@ -33,11 +33,13 @@
   },
   "homepage": "https://github.com/raquelxmoss/cycle-keys#readme",
   "dependencies": {
+    "@cycle/xstream-adapter": "^3.0.3",
     "keycode": "^2.1.1",
     "xstream": "^5.3.2"
   },
   "devDependencies": {
     "@cycle/dom": "^12.0.3",
+    "@cycle/rx-adapter": "^3.0.0",
     "@cycle/xstream-run": "^3.0.4",
     "babel-cli": "^6.7.7",
     "babel-core": "^6.7.7",

src/keys-driver.js

@@ -1,9 +1,10 @@
 import xs from 'xstream';
 import fromEvent from 'xstream/extra/fromEvent';
+import xstreamAdapter from '@cycle/xstream-adapter';
 import keycode from 'keycode';
 
 export function makeKeysDriver () {
-  return function keysDriver() {
+  return function keysDriver(sinks, streamAdapter) {
     const methods = {};
     const events = ['keypress', 'keyup', 'keydown'];
 
@@ -19,7 +20,7 @@ export function makeKeysDriver () {
           event$ = event$.filter(event => event.keyCode === code);
         }
 
-        return event$;
+        return streamAdapter.adapt(event$, xstreamAdapter.streamSubscribe);
       }
     });
 
@@ -34,10 +35,12 @@ export function makeKeysDriver () {
         .filter(ev => ev.keyCode === code)
         .map(ev => false);
 
-      return xs.merge(
+      const isDown$ = xs.merge(
         down$,
         up$
       ).startWith(false);
+
+      return streamAdapter.adapt(isDown$, xstreamAdapter.streamSubscribe);
     }
 
     return methods;

test/keys-test.js

@@ -1,4 +1,6 @@
 import {makeKeysDriver} from '../src/keys-driver';
+import xstreamAdapter from '@cycle/xstream-adapter';
+import rxAdapter from '@cycle/rx-adapter';
 
 import assert from 'assert';
 import simulant from 'simulant';
@@ -11,9 +13,21 @@ const subscribe = listener => stream =>
   });
 
 describe("makeKeysDriver", () => {
+  describe("keysDriver", () => {
+    it("is stream library agnostic", () =>  {
+      const sources = makeKeysDriver()({}, rxAdapter);
+
+      sources.up('enter').take(1).subscribe(() => done());
+
+      const event = simulant('keyup', {keyCode: 13});
+
+      simulant.fire(document.body, event);
+    });
+  }),
+
   describe("press", () => {
     it("returns a stream of all keypresses", () => {
-      const sources = makeKeysDriver()();
+      const sources = makeKeysDriver()({}, xstreamAdapter);
 
       const keyCodes = [74, 75, 76];
       let keypressEvents;
@@ -38,7 +52,7 @@ describe("makeKeysDriver", () => {
     });
 
     it("returns a stream of keypress events for the given key", (done) => {
-      const sources = makeKeysDriver()();
+      const sources = makeKeysDriver()({}, xstreamAdapter);
 
       sources.press('enter').take(1)
         .compose(subscribe(() => done()));
@@ -49,7 +63,7 @@ describe("makeKeysDriver", () => {
     });
 
     it("returns a stream of keyup events for the given key", (done) => {
-      const sources = makeKeysDriver()();
+      const sources = makeKeysDriver()({}, xstreamAdapter);
 
       sources.up('enter').take(1)
         .compose(subscribe(() => done()));
@@ -60,7 +74,7 @@ describe("makeKeysDriver", () => {
     });
 
     it("returns a stream of keydown events for the given key", (done) => {
-      const sources = makeKeysDriver()();
+      const sources = makeKeysDriver()({}, xstreamAdapter);
 
       sources.down('enter').take(1)
         .compose(subscribe(() => done()));
@@ -71,7 +85,7 @@ describe("makeKeysDriver", () => {
     });
 
     it("emits events only for the given key", () => {
-      const sources = makeKeysDriver()();
+      const sources = makeKeysDriver()({}, xstreamAdapter);
       let enterPressed = false;
 
       sources.press('enter')
@@ -91,7 +105,7 @@ describe("makeKeysDriver", () => {
     });
 
     it("Gives a stream of true/false for key up/down events on a given key", () => {
-      const sources = makeKeysDriver()();
+      const sources = makeKeysDriver()({}, xstreamAdapter);
       let keyIsDown = true;
 
       sources.isDown('enter')