Merge pull request #33 from cyclejs-community/unified-support

Add support for multiple stream libraries (Cycle Unified)

Author: lmatteis

README.md

@@ -30,10 +30,10 @@ Handle redux async actions using [Cycle.js](https://cycle.js.org/).
 
 `npm install --save redux-cycles`
 
-Then use `createCycleMiddleware()` which returns the redux middleware function, but also has two function properties attached to it; namely `makeActionDriver()` and `makeStateDriver()` which you can use accordingly when you call `Cycle.run` (which can be installed via `npm i -s @cycle/xstream-run`).
+Then use `createCycleMiddleware()` which returns the redux middleware function with two driver factories attached: `makeActionDriver()` and `makeStateDriver()`. Use them when you call the Cycle `run` function (can be installed via `npm install --save @cycle/run`).
 
 ```js
-import { run } from '@cycle/xstream-run';
+import { run } from '@cycle/run';
 import { createCycleMiddleware } from 'redux-cycles';
 
 function main(sources) {
@@ -59,6 +59,21 @@ run(main, {
 })
 ```
 
+By default `@cycle/run` uses `xstream`. If you want to use another streaming library simply import it and use its `run` method instead.
+
+For RxJS:
+
+```js
+import { run } from '@cycle/rxjs-run';
+```
+
+For Most.js:
+
+```js
+import { run } from '@cycle/most-run';
+```
+
+
 ## Example
 
 Try out this [JS Bin](https://jsbin.com/bomugapuxi/2/edit?js,output).

example/configureStore.js

@@ -4,7 +4,7 @@ import { routerMiddleware } from 'react-router-redux';
 import rootReducer from './reducers';
 import main from './cycle';
 import { createCycleMiddleware } from 'redux-cycles';
-import {run} from '@cycle/xstream-run';
+import {run} from '@cycle/run';
 import {makeHTTPDriver} from '@cycle/http';
 import {timeDriver} from '@cycle/time';
 
@@ -29,6 +29,6 @@ export default function configureStore() {
     Time: timeDriver,
     HTTP: makeHTTPDriver(),
   })
-  
+
   return store;
 }

example/package.json

@@ -12,9 +12,8 @@
   "author": "Luca Matteis",
   "license": "MIT",
   "dependencies": {
-    "@cycle/dom": "^14.1.0",
     "@cycle/http": "^11.2.0",
-    "@cycle/xstream-run": "^4.0.0",
+    "@cycle/run": "^1.0.0",
     "history": "^2.1.2",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",
@@ -23,16 +22,16 @@
     "react-router-redux": "^4.0.5",
     "redux": "^3.5.2",
     "redux-cycles": "file:../",
-    "xstream": "^9.0.0"
+    "xstream": "^10"
   },
   "devDependencies": {
+    "@cycle/time": "^0.7.1",
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
-    "@cycle/time": "^0.2.1",
+    "jest": "^18.1.0",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "jest": "^18.1.0"
+    "webpack-dev-server": "^1.14.1"
   }
 }

package.json

@@ -31,42 +31,48 @@
   },
   "license": "MIT",
   "babel": {
-    "presets": ["es2015"]
+    "presets": [
+      "es2015"
+    ]
   },
   "eslintConfig": {
     "env": {
-        "browser": true,
-        "es6": true,
-        "node": true
+      "browser": true,
+      "es6": true,
+      "node": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {
-        "sourceType": "module"
+      "sourceType": "module"
     },
     "rules": {
-        "indent": [
-            "error",
-            2
-        ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "never"
-        ]
+      "indent": [
+        "error",
+        2
+      ],
+      "linebreak-style": [
+        "error",
+        "unix"
+      ],
+      "quotes": [
+        "error",
+        "single"
+      ],
+      "semi": [
+        "error",
+        "never"
+      ]
     }
   },
   "dependencies": {
-    "xstream": "^9.0.0"
+    "@cycle/run": "*"
+  },
+  "peerDependencies": {
+    "xstream": "*"
   },
   "devDependencies": {
-    "@cycle/xstream-run": "^4.0.0",
+    "@cycle/rxjs-run": "^4.1.0",
+    "rxjs": "^5.2.0",
     "babel-cli": "^6.18.0",
     "babel-jest": "^18.0.0",
     "babel-preset-es2015": "^6.9.0",

src/combineCycles.js

@@ -12,7 +12,7 @@ export default function combineCycles(...mains) {
       .reduce((combinedSinks, driver) => {
         const driverSinks = sinks
           .filter(sink => sink[driver])
-          .map(sink => sink[driver])
+          .map(sink => xs.from(sink[driver]))
 
         combinedSinks[driver] = xs.merge(...driverSinks)
         return combinedSinks

src/createCycleMiddleware.js

@@ -1,4 +1,5 @@
 import xs from 'xstream'
+import {adapt} from '@cycle/run/lib/adapt'
 
 export default function createCycleMiddleware () {
   let store = null
@@ -33,20 +34,20 @@ export default function createCycleMiddleware () {
         complete: () => {},
       })
 
-      return xs.create({
+      return adapt(xs.create({
         start: listener => {
           actionListener = listener
         },
         stop: () => {},
-      })
+      }))
     }
   }
 
   cycleMiddleware.makeStateDriver = () => {
     const isSame = {}
     return function stateDriver() {
       const getCurrent = store.getState
-      return xs.create({
+      return adapt(xs.create({
         start: listener => {
           stateListener = listener
         },
@@ -62,7 +63,7 @@ export default function createCycleMiddleware () {
         return currState
       }, getCurrent)
       .map(state => state === getCurrent ? getCurrent() : state)
-      .filter(state => state !== isSame)
+      .filter(state => state !== isSame))
     }
   }
 

test/createCycleMiddleware.test.js

@@ -1,8 +1,12 @@
 /* eslint-disable no-undef */
-import { createCycleMiddleware } from '../'
+/* eslint-disable no-console */
+import { createCycleMiddleware, combineCycles } from '../'
 import { createStore, applyMiddleware } from 'redux'
 import xs from 'xstream'
-import {run} from '@cycle/xstream-run'
+import {run} from '@cycle/run'
+import {run as rxjsRun} from '@cycle/rxjs-run'
+import {Observable} from 'rxjs/Rx'
+import {setAdapt} from '@cycle/run/lib/adapt'
 jest.useFakeTimers()
 
 function initStore(main, drivers, reducer = null, r = run) {
@@ -23,7 +27,9 @@ function initStore(main, drivers, reducer = null, r = run) {
   return store
 }
 
-describe('Redux cycle middleware', () => {
+describe('Redux cycle middleware xstream', () => {
+  beforeEach(() => setAdapt(stream => stream))
+
   it('dispatches a PING to see whether the middleware dispatches a PONG', (done) => {
     function main(sources) {
       const pong$ = sources.ACTION
@@ -40,7 +46,7 @@ describe('Redux cycle middleware', () => {
       { type: 'PING' },
       { type: 'PONG' }
     ]
-    const store = initStore(main, {})
+    const store = initStore(combineCycles(main), {})
 
     store.dispatch({ type: 'PING' })
 
@@ -54,9 +60,9 @@ describe('Redux cycle middleware', () => {
       const pong$ = sources.ACTION
         .filter(action => action.type === 'PING')
         .map(() =>
-            xs.periodic(10000)
-                .take(1)
-                .mapTo({ type: 'PONG' })
+          xs.periodic(10000)
+            .take(1)
+            .mapTo({ type: 'PONG' })
         )
         .flatten()
 
@@ -145,3 +151,34 @@ describe('Redux cycle middleware', () => {
 
   })
 })
+
+describe('Redux cycle middleware RxJS', () => {
+  beforeEach(() => setAdapt(stream => Observable.from(stream)))
+
+  it('uses rxjs-run with Cycle Unified', (done) => {
+    function main(sources) {
+      const pong$ = sources.ACTION
+        .filter(action => action.type === 'PING')
+        .do(_ => _) // do() only exists in RxJS
+        .mapTo({ type: 'PONG' })
+
+      return {
+        ACTION: pong$
+      }
+    }
+
+    const store = initStore(combineCycles(main), {}, null, rxjsRun)
+
+    store.dispatch({ type: 'PING' })
+
+    const expectedActions = [
+      { type: '@@redux/INIT' },
+      { type: 'PING' },
+      { type: 'PONG' }
+    ]
+    expect(store.getState()).toMatchObject(expectedActions)
+
+    done()
+
+  })
+})