cycle-react - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0-beta1

CHANGELOG.md

@@ -34,2 +34,3 @@ # Changelog
 has been removed in favor of event handler API.
+> Information of the new interactions API can be found at docs/interactions.md
 
@@ -101,3 +102,3 @@ > The migration guide can be found below.
 // wrapped by CustomEvent.
-interactions.subject('tick').map(ev => ev);
+interactions.get('tick').map(ev => ev);
 // View:
@@ -110,3 +111,4 @@ // Use interactions.listener(name) to create event handler
 
-1. Append the "on" prefix to every event observables inside events object
+1. Append the "on" prefix to every event observable inside the events object
+of the component
 2. Rewrite the code that used `interactions.get(selector, eventType)` by using
@@ -113,0 +115,0 @@ `interactions.get(eventName)` and `interactions.listener(eventName)` like the

index.js

 'use strict';
 var applyToDOM = require('./src/render-dom');
-var component = require('./src/create-react-class');
+var createReactClass = require('./src/create-react-class');
 var makeDOMDriver = require('./src/cycle-driver');
@@ -53,3 +53,3 @@ var React = require('react');
    */
-  component: component,
+  component: createReactClass(React),
 
@@ -56,0 +56,0 @@ /**

package.json

 {
   "name": "cycle-react",
-  "version": "1.0.1",
+  "version": "2.0.0-beta1",
   "author": {
@@ -28,7 +28,3 @@ "name": "pH200",
   },
-  "peerDependencies": {
-    "react": "0.13.x"
-  },
   "devDependencies": {
-    "@cycle/core": "^1.0.0",
     "babel": "^5.6.4",
@@ -63,4 +59,4 @@ "babel-eslint": "^3.1.21",
     "dist": "mkdir -p dist && npm run browserify && npm run uglify",
-    "examples": "node examples/server.js"
+    "examples": "node examples/web/server.js"
   }
 }

src/create-react-class.js

 'use strict';
-var React = require('react');
 var Rx = require('rx');
@@ -32,144 +31,146 @@ var digestDefinitionFnOutput = require('./util').digestDefinitionFnOutput;
 
-function component(
-  displayName,
-  definitionFn,
-  componentOptions,
-  observer,
-  eventObserver) {
-  if (typeof displayName !== 'string') {
-    throw new Error('Invalid displayName');
-  }
-  if (typeof definitionFn !== 'function') {
-    throw new Error('Invalid definitionFn');
-  }
-  var options = componentOptions || {};
-  // The option for the default root element type.
-  var rootTagName = options.rootTagName || 'div';
-  // The option for passing "this" to definitionFn
-  var bindThis = !!options.bindThis;
+function createReactClass(React) {
+  return function component(
+    displayName,
+    definitionFn,
+    componentOptions,
+    observer,
+    eventObserver) {
+    if (typeof displayName !== 'string') {
+      throw new Error('Invalid displayName');
+    }
+    if (typeof definitionFn !== 'function') {
+      throw new Error('Invalid definitionFn');
+    }
+    var options = componentOptions || {};
+    // The option for the default root element type.
+    var rootTagName = options.rootTagName || 'div';
+    // The option for passing "this" to definitionFn
+    var bindThis = !!options.bindThis;
 
-  var reactClassProto = {
-    displayName: displayName,
-    getInitialState: function getInitialState() {
-      this.hasMounted = false;
-      return {vtree: null};
-    },
-    _subscribeCycleComponent: function _subscribeCycleComponent() {
-      var self = this;
-      this.disposable = new Rx.CompositeDisposable();
-      var propsSubject$ = makePropsObservable(this.props);
-      this.propsSubject$ = propsSubject$;
-      var interactions = makeInteractions();
-      var cycleComponent = digestDefinitionFnOutput(
-        bindThis ?
-        definitionFn(interactions, this.propsSubject$, this) :
-        definitionFn(interactions, this.propsSubject$)
-      );
-      this.cycleComponent = cycleComponent;
-      this.cycleComponentDispose = cycleComponent.dispose;
-      this.onMount = cycleComponent.onMount;
-      var vtree$ = cycleComponent.vtree$;
-      var vtreeDoSet$ = vtree$.doOnNext(function onNextVTree(vtree) {
-        self.setState({vtree: vtree});
-      });
-      var subscription = observer ?
-        vtreeDoSet$.subscribe(observer) : vtreeDoSet$.subscribe();
-      this.disposable.add(this.propsSubject$);
-      this.disposable.add(subscription);
-    },
-    _unsubscribeCycleComponent: function _unsubscribeCycleComponent() {
-      if (this.propsSubject$) {
-        this.propsSubject$.onCompleted();
-      }
-      if (this.cycleComponentDispose) {
-        var dispose = this.cycleComponentDispose;
-        if (typeof dispose === 'function') {
-          this.disposable.add(Rx.Disposable.create(dispose));
-        } else if (typeof dispose.dispose === 'function') {
-          this.disposable.add(dispose);
+    var reactClassProto = {
+      displayName: displayName,
+      getInitialState: function getInitialState() {
+        this.hasMounted = false;
+        return {vtree: null};
+      },
+      _subscribeCycleComponent: function _subscribeCycleComponent() {
+        var self = this;
+        this.disposable = new Rx.CompositeDisposable();
+        var propsSubject$ = makePropsObservable(this.props);
+        this.propsSubject$ = propsSubject$;
+        var interactions = makeInteractions();
+        var cycleComponent = digestDefinitionFnOutput(
+          bindThis ?
+          definitionFn(interactions, this.propsSubject$, this) :
+          definitionFn(interactions, this.propsSubject$)
+        );
+        this.cycleComponent = cycleComponent;
+        this.cycleComponentDispose = cycleComponent.dispose;
+        this.onMount = cycleComponent.onMount;
+        var vtree$ = cycleComponent.vtree$;
+        var vtreeDoSet$ = vtree$.doOnNext(function onNextVTree(vtree) {
+          self.setState({vtree: vtree});
+        });
+        var subscription = observer ?
+          vtreeDoSet$.subscribe(observer) : vtreeDoSet$.subscribe();
+        this.disposable.add(this.propsSubject$);
+        this.disposable.add(subscription);
+      },
+      _unsubscribeCycleComponent: function _unsubscribeCycleComponent() {
+        if (this.propsSubject$) {
+          this.propsSubject$.onCompleted();
         }
-      }
-      if (this.disposable) {
-        this.disposable.dispose();
-      }
-    },
-    _subscribeCycleEvents: function _subscribeCycleEvents() {
-      var self = this;
-      var eventObservables = composingEventObservables(
-        this.cycleComponent.customEvents,
-        self
-      );
-      if (eventObservables.length > 0) {
-        var eventSubscription;
-        if (eventObserver) {
-          eventSubscription =
-            Rx.Observable.merge(eventObservables).subscribe(eventObserver);
-        } else {
-          eventSubscription =
-            Rx.Observable.merge(eventObservables).subscribe();
+        if (this.cycleComponentDispose) {
+          var dispose = this.cycleComponentDispose;
+          if (typeof dispose === 'function') {
+            this.disposable.add(Rx.Disposable.create(dispose));
+          } else if (typeof dispose.dispose === 'function') {
+            this.disposable.add(dispose);
+          }
         }
-        this.disposable.add(eventSubscription);
-      }
-    },
-    shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
-      // Only care about the state since the props have been observed.
-      return this.state !== nextState;
-    },
-    componentWillMount: function componentWillMount() {
-      // componentWillMount is called for both client and server
-      // https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount
-      this._subscribeCycleComponent();
-    },
-    componentWillUnmount: function componentWillUnmount() {
-      // componentWillMount is not being called for server
-      this._unsubscribeCycleComponent();
-    },
-    componentDidMount: function componentDidMount() {
-      this._subscribeCycleEvents();
-      if (this.onMount) {
-        this.onMount(this);
-      }
-      this.hasMounted = true;
-    },
-    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-      this.propsSubject$.onNext(nextProps);
-    },
-    render: function render() {
-      if (this.state && this.state.vtree) {
-        if (bindThis && typeof this.state.vtree === 'function') {
-          // `this` is bound automatically by React.createClass so the element
-          // will have the owner set by this component
-          return this.state.vtree();
+        if (this.disposable) {
+          this.disposable.dispose();
         }
-        return this.state.vtree;
-      }
-      return React.createElement(rootTagName);
-    }
-  };
-
-  if (Array.isArray(options.mixins)) {
-    reactClassProto.mixins = options.mixins;
-  }
-  if (options.propTypes) {
-    reactClassProto.propTypes = options.propTypes;
-  }
-  // Override forceUpdate for react-hot-loader
-  if (options._testForceHotLoader ||
-    (!options.disableHotLoader && module.hot))
-  {
-    reactClassProto.forceUpdate = function hotForceUpdate(callback) {
-      if (this.hasMounted) {
+      },
+      _subscribeCycleEvents: function _subscribeCycleEvents() {
+        var self = this;
+        var eventObservables = composingEventObservables(
+          this.cycleComponent.customEvents,
+          self
+        );
+        if (eventObservables.length > 0) {
+          var eventSubscription;
+          if (eventObserver) {
+            eventSubscription =
+              Rx.Observable.merge(eventObservables).subscribe(eventObserver);
+          } else {
+            eventSubscription =
+              Rx.Observable.merge(eventObservables).subscribe();
+          }
+          this.disposable.add(eventSubscription);
+        }
+      },
+      shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
+        // Only care about the state since the props have been observed.
+        return this.state !== nextState;
+      },
+      componentWillMount: function componentWillMount() {
+        // componentWillMount is called for both client and server
+        // https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount
+        this._subscribeCycleComponent();
+      },
+      componentWillUnmount: function componentWillUnmount() {
+        // componentWillUnmount is not being called for server
         this._unsubscribeCycleComponent();
-        this._subscribeCycleComponent();
+      },
+      componentDidMount: function componentDidMount() {
         this._subscribeCycleEvents();
+        if (this.onMount) {
+          this.onMount(this);
+        }
+        this.hasMounted = true;
+      },
+      componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+        this.propsSubject$.onNext(nextProps);
+      },
+      render: function render() {
+        if (this.state && this.state.vtree) {
+          if (bindThis && typeof this.state.vtree === 'function') {
+            // `this` is bound automatically by React.createClass so the element
+            // will have the owner set by this component
+            return this.state.vtree();
+          }
+          return this.state.vtree;
+        }
+        return React.createElement(rootTagName);
       }
-      if (callback) {
-        callback();
-      }
     };
-  }
 
-  return React.createClass(reactClassProto);
+    if (Array.isArray(options.mixins)) {
+      reactClassProto.mixins = options.mixins;
+    }
+    if (options.propTypes) {
+      reactClassProto.propTypes = options.propTypes;
+    }
+    // Override forceUpdate for react-hot-loader
+    if (options._testForceHotLoader ||
+      (!options.disableHotLoader && module.hot))
+    {
+      reactClassProto.forceUpdate = function hotForceUpdate(callback) {
+        if (this.hasMounted) {
+          this._unsubscribeCycleComponent();
+          this._subscribeCycleComponent();
+          this._subscribeCycleEvents();
+        }
+        if (callback) {
+          callback();
+        }
+      };
+    }
+
+    return React.createClass(reactClassProto);
+  };
 }
 
-module.exports = component;
+module.exports = createReactClass;

src/cycle-driver.js

 'use strict';
 var Rx = require('rx');
 var applyToDOM = require('./render-dom');
-var makeInteractions = require('./interactions').makeInteractions;
 
-function makeGet(interactions, rootElem$) {
+function makeGet(rootElem$) {
   return function get(selector) {
@@ -20,3 +19,2 @@ if (selector === ':root') {
     var rootElem$ = new Rx.Subject();
-    var interactions = makeInteractions(rootElem$);
     var subscription = definition$.subscribe(function render(definitionFn) {
@@ -28,3 +26,3 @@ var renderMeta = applyToDOM(container, definitionFn);
     return {
-      get: makeGet(interactions, rootElem$),
+      get: makeGet(rootElem$),
       dispose: function dispose() {
@@ -31,0 +29,0 @@ subscription.dispose();

src/render-dom.js

 /* eslint-env browser */
 'use strict';
 var React = require('react');
-var component = require('./create-react-class');
+var component = require('./create-react-class')(React);
 
@@ -6,0 +6,0 @@ function isElement(obj) {

test/browser/driver.js

 'use strict';
 /* global describe, it, beforeEach */
 let assert = require('assert');
-let {run} = require('@cycle/core');
+let {run} = require('./lib/cycle');
 let Cycle = require('../../');
@@ -6,0 +6,0 @@ let {Rx, React} = Cycle;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3237574

increased by0.17%

Dependency count

1

decreased by-50%

Dev dependency count

13

decreased by-7.14%

Number of package files

44

increased by4.76%

Lines of code

62219

increased by0.24%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes