Scope all selectors to prevent messing with user apps, closes #11

examples/index.js

@@ -23,7 +23,7 @@ function model (click$) {
 }
 
 function intent (DOM) {
-  return DOM.select('.increment').events('click);
+  return DOM.select('.increment').events('click');
 }
 
 function main ({DOM}) {

src/time-travel.js

@@ -21,22 +21,31 @@ function calculateTimestamp (mouseX) {
   return mouseX / document.documentElement.clientWidth * 10000;
 }
 
-function logStreams (DOM, streams) {
+function scopedDOM (DOM, scope) {
+  return {
+    select (selector) {
+      return DOM.select(`${scope} ${selector}`);
+    }
+  };
+}
+
+function logStreams (DOM, streams, name = '.time-travel') {
   const timeTravel = {};
+  const timeTravelDOM = scopedDOM(DOM, name);
 
-  const mousePosition$ = DOM.select('.stream').events('mousemove')
+  const mousePosition$ = timeTravelDOM.select('.stream').events('mousemove')
     .map(getMousePosition)
     .startWith({x: 0, y: 0});
 
-  const click$ = DOM.select('.stream').events('mousedown');
+  const click$ = timeTravelDOM.select('.stream').events('mousedown');
   const release$ = Rx.Observable.fromEvent(document.body, 'mouseup');
 
   const dragging$ = Rx.Observable.merge(
     click$.map(_ => true),
     release$.map(_ => false)
   ).startWith(false);
 
-  const playingClick$ = DOM.select('.pause').events('click')
+  const playingClick$ = timeTravelDOM.select('.pause').events('click')
     .scan((previous, _) => !previous, true)
     .startWith(true);
 
@@ -124,7 +133,7 @@ function logStreams (DOM, streams) {
   return {
     DOM: Rx.Observable.combineLatest(time$, playing$, ...loggedStreams,
       (currentTime, playing, ...streamValues) => {
-        return h('.time-travel', [
+        return h(name, [
           stylesheet(),
           h('button.pause', playing ? 'Pause' : 'Play'),
           renderStreams(currentTime, ...streamValues)