Add ability to use with multiple stream libraries

Fixes #9

Author: jvanbruegge

examples/horizontal/src/index.ts

@@ -1,6 +1,6 @@
-import xs, { Stream } from 'xstream';
-import { run } from '@cycle/run';
-import { ul, li, div, h3, makeDOMDriver, DOMSource, VNode } from '@cycle/dom';
+import { Observable } from 'rxjs';
+import { run } from '@cycle/rxjs-run';
+import { ul, li, div, h3, p, makeDOMDriver, DOMSource, VNode } from '@cycle/dom';
 
 import { makeSortable } from '../../../src/makeSortable';
 
@@ -9,14 +9,15 @@ type Sources = {
 };
 
 type Sinks = {
-    DOM : Stream<VNode>;
+    DOM : Observable<VNode>;
 };
 
 function main({ DOM } : Sources) : Sinks
 {
-    const vdom$ : Stream<VNode> = xs.of(
+    const vdom$ : Observable<VNode> = Observable.of(
         div([
             h3('Horizontal too!'),
+            p('this is running with RxJS'),
             ul('.ul', [
                 li('.li', '', ['Option 1']),
                 li('.li', '', ['Option 2']),
@@ -27,7 +28,7 @@ function main({ DOM } : Sources) : Sinks
             ])
         ])
     )
-    .compose(makeSortable(DOM, {
+    .let(makeSortable<Observable<VNode>>(DOM, {
         parentSelector: '.ul'
     }));
 

examples/parentSelector/src/index.ts

@@ -27,7 +27,7 @@ function main({ DOM } : Sources) : Sinks
             ])
         ])
     )
-    .compose(makeSortable(DOM, {
+    .compose(makeSortable<Stream<VNode>>(DOM, {
         parentSelector: '.ul'
     }));
 

examples/simple/src/index.ts

@@ -24,7 +24,7 @@ function main({ DOM } : Sources) : Sinks
             li('.li', '', ['Option 6']),
         ])
     )
-    .compose(makeSortable(DOM));
+    .compose(makeSortable<Stream<VNode>>(DOM));
 
     return {
         DOM: vdom$

examples/updateEvent/src/index.ts

@@ -24,7 +24,7 @@ function main({ DOM } : Sources) : Sinks
             li('.li', '', ['Option 6']),
         ])
     )
-    .compose(makeSortable(DOM));
+    .compose(makeSortable<Stream<VNode>>(DOM));
 
     const update$ : Stream<VNode> = getUpdateEvent(DOM, '.ul')
         .map(o => 'You changed item Number ' + (o.oldIndex + 1) + ' to postion ' + (o.newIndex + 1))

package.json

@@ -33,18 +33,20 @@
     "@cycle/dom": ">=16.0.0"
   },
   "dependencies": {
+    "@cycle/run": "^3.0.0",
     "snabbdom-selector": "^1.1.1",
     "xstream": "^10.3.0"
   },
   "devDependencies": {
     "@cycle/dom": "^16.0.0",
-    "@cycle/run": "^3.0.0",
+    "@cycle/rxjs-run": "^7.0.0",
     "babel-preset-es2015": "^6.14.0",
     "babelify": "^7.3.0",
     "browserify": "^14.1.0",
     "cp-cli": "^1.0.2",
     "open-cli": "^1.0.5",
     "rimraf": "^2.5.4",
+    "rxjs": "^5.2.0",
     "typedoc": "^0.5.8",
     "typescript": "^2.2.1"
   }

src/makeSortable.ts

@@ -1,6 +1,7 @@
 import xs, { Stream } from 'xstream';
 import delay from 'xstream/extra/delay';
 import { DOMSource, VNode } from '@cycle/dom';
+import { adapt } from '@cycle/run/lib/adapt';
 
 import { SortableOptions, Transform, EventDetails } from './definitions';
 import { applyDefaults, addKeys } from './helpers';
@@ -15,29 +16,30 @@ export { SortableOptions, Transform, EventHandler, EventDetails } from './defini
  * @param {SortableOptions} options  @see {SortableOptions}
  * @return {Transform<VNode, VNode>} A function to be composed with a view VNode stream
  */
-export function makeSortable(dom : DOMSource, options? : SortableOptions) : Transform<VNode, VNode>
+export function makeSortable<T>(dom : DOMSource, options? : SortableOptions) : (s : T) => T
 {
-    return sortable => sortable
+    return sortable => adapt(
+        (xs.fromObservable(sortable as any) as Stream<VNode>)
         .map(node => {
             const defaults : SortableOptions = applyDefaults(options || {}, node);
 
-            const mousedown$ : Stream<MouseEvent> = dom.select(defaults.handle)
-                .events('mousedown') as Stream<MouseEvent>;
+            const mousedown$ : Stream<MouseEvent> = xs.fromObservable(dom.select(defaults.handle).events('mousedown')) as Stream<MouseEvent>;
 
             const mouseup$ : Stream<MouseEvent> = mousedown$
-                .mapTo(dom.select('body').events('mouseup').take(1))
+                .mapTo(xs.fromObservable(dom.select('body').events('mouseup').take(1)))
                 .flatten() as Stream<MouseEvent>;
 
             const mousemove$ : Stream<MouseEvent> = mousedown$
-                .mapTo(dom.select('body').events('mousemove'))
+                .mapTo(xs.fromObservable(dom.select('body').events('mousemove')))
                 .flatten()
                 .compose(emitBetween(mousedown$, mouseup$)) as Stream<MouseEvent>;
 
             const event$ : Stream<MouseEvent> = xs.merge(mousedown$, mouseup$, mousemove$);
 
             return event$.fold((acc, curr) => handleEvent(acc, curr, defaults), node);
         })
-        .flatten();
+        .flatten()
+    );
 }
 
 /**