cycle-react - npm Package Compare versions

Comparing version 5.1.2 to 6.0.0-beta1

CHANGELOG.md

 # Changelog
 
+## 6.0.0
+
+### New Features
+
+- Support for [RxJS 5](https://github.com/ReactiveX/rxjs) has been implemented.
+- `cycle-react` now takes the advantage of React v16. Default element for empty
+Observable has been changed from `<div />` to empty fragment.
+
+### Breaking Changes
+
+- React v16 or above is required for `cycle-react` v6.
+- `props.get` and `props.getAll` are removed. Use [pluck](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pluck)
+instead.
+- `dispose` from `definitionFn` is renamed to `unsubscribe`.
+- `rootTagName` is removed. Default element is now empty fragment `[]`.
+
+### Migration
+
+For migrating RxJS v4 to v5, see https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md
+for details.
+
+#### import
+
+##### OLD
+
+```js
+import {component} from 'cycle-react';
+```
+
+##### NEW
+
+```js
+// RxJS v4
+import {component} from 'cycle-react/rx';
+// RxJS v5
+import {component} from 'cycle-react/rxjs';
+```
+
+#### props.get
+
+##### OLD
+
+```js
+props.get('foo').map(foo => <p>{foo}</p>);
+```
+
+##### NEW
+
+```js
+props.pluck('foo').map(foo => <p>{foo}</p>);
+// or
+props.map(({foo}) => <p>{foo}</p>);
+```
+
+#### dispose
+
+##### OLD
+
+```js
+const foo = component('Foo', () => {
+  // ...
+  const subscription = source.subscribe(signal => console.log(signal));
+  return {
+    view,
+    dispose: subscription
+  };
+});
+```
+
+##### NEW
+
+If you use `cycle-react/rx`, `cycle-react` disposes the object that has either `dispose` or `unsubscribe` implemented.
+On the other hand, `cycle-react/rxjs` only looks the object that has `unsubscribe` ([Subscription](https://github.com/ReactiveX/rxjs/blob/master/doc/subscription.md)).
+
+```js
+const foo = component('Foo', () => {
+  // ...
+  const subscription = source.subscribe(signal => console.log(signal));
+  return {
+    view,
+    unsubscribe: subscription
+  };
+});
+```
+
 ## 5.1.2
@@ -4,0 +89,0 @@

package.json

 {
   "name": "cycle-react",
-  "version": "5.1.2",
+  "version": "6.0.0-beta1",
   "author": {
@@ -24,36 +24,28 @@ "name": "pH200",
   ],
-  "main": "build/index.js",
-  "peerDependencies": {
-    "rx": "*"
-  },
+  "main": "index.js",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babelify": "^7.3.0",
-    "browserify": "^14.3.0",
+    "browserify": "^14.5.0",
     "cuid": "^1.3.8",
-    "envify": "^4.0.0",
-    "eslint": "^3.19.0",
-    "express": "^4.15.2",
-    "immutable": "^3.8.1",
-    "jest": "^19.0.2",
-    "prop-types": "^15.5.4",
-    "react": "^15.5.3",
-    "react-dom": "^15.5.3",
-    "react-test-renderer": "^15.5.3",
-    "rx": "4.1.0"
+    "envify": "^4.1.0",
+    "eslint": "^4.9.0",
+    "express": "^4.16.2",
+    "immutable": "^3.8.2",
+    "jest": "^21.2.1",
+    "lodash": "^4.17.4",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
+    "rx": "4.1.0",
+    "rxjs": "^5.5.0",
+    "shelljs": "^0.7.8"
   },
   "engines": {
     "node": ">=6.9.0"
-  },
-  "scripts": {
-    "lint": "eslint src examples test",
-    "test-jest": "jest",
-    "test": "npm run lint && jest",
-    "travis-test": "npm run lint && jest --verbose",
-    "examples": "node examples/web/server.js",
-    "build": "babel src --presets babel-preset-env --out-dir build",
-    "prepublish": "npm test && npm run build"
   }
 }

README.md

@@ -5,3 +5,3 @@ # Cycle-React
 
-An [RxJS](https://github.com/Reactive-Extensions/RxJS) functional interface
+An [RxJS](https://github.com/ReactiveX/rxjs) functional interface
 to [Facebook's React](https://reactjs.org/).
@@ -21,13 +21,18 @@
 ```
-npm install cycle-react react rx
+npm install cycle-react react rxjs
 ```
 
+React v16 or later is **required**.
+
+Both RxJS 5 and RxJS 4 are supported. For migrating RxJS with cycle-react v6, see release note for details.
+
 ## Example
 
 ```js
-const Cycle = require('cycle-react');
-const React = require('react');
-const ReactDOM = require('react-dom');
+import {component} from 'cycle-react/rxjs';
+import Rx from 'rxjs/Rx';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-const Hello = Cycle.component('Hello', function computer(interactions) {
+const Hello = component('Hello', function computer(interactions) {
   return interactions.get('OnNameChanged')
@@ -75,20 +80,20 @@ .map(ev => ev.target.value)
 ```js
-const Cycle = require('cycle-react');
-const React = require('react');
-const ReactDOM = require('react-dom');
-const Rx = require('rx');
+import {component} from 'cycle-react/rxjs';
+import Rx from 'rxjs/Rx';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 // "component" returns a native React component which can be used normally
 // by "React.createElement".
-const Counter = Cycle.component('Counter', function (interactions, props) {
-  return props.get('counter').map(counter =>
+const Counter = component('Counter', (interactions, props) =>
+  props.pluck('counter').map(counter =>
     <h3>Seconds Elapsed: {counter}</h3>
-  );
-});
+  )
+);
 
-const Timer = Cycle.component('Timer', function () {
-  return Rx.Observable.interval(1000).map(i =>
+const Timer = component('Timer', () =>
+  Rx.Observable.interval(1000).map(i =>
     <Counter counter={i} />
-  );
-});
+  )
+);
 
@@ -101,2 +106,6 @@ ReactDOM.render(
 
+## RxJS v4 & v5
+
+For using RxJS v4, import cycle-react with `import {component} from 'cycle-react/rx'`. In other words, use `cycle-react/rx` instead of `cycle-react/rxjs`. We plan to support more Observable implementations in the same way.
+
 ## Learn more
@@ -113,11 +122,9 @@
 
-To use Cycle-React with React Native, import Cycle-React with
-`cycle-react/native`.
 Example can be found at [examples/native](/examples/native)
 
 ```js
-var {component} = require('cycle-react/native');
-var Rx = require('rx');
+var {component} = require('cycle-react/rxjs');
+var Rx = require('rxjs');
 var Hello = component('Hello', () =>
-  Rx.Observable.just(<Text>Hello!</Text>)
+  Rx.Observable.of(<Text>Hello!</Text>)
 );
@@ -128,2 +135,6 @@ ```
 
+### How many files from RxJS 5 are being used in Cycle-React?
+
+Cycle-React has only imported `rxjs/Subject` and `rxjs/BehaviorSubject` from RxJS 5. And those two files are only imported if you import `cycle-react/rxjs`.
+
 ### Can I use Cycle-React with Flux (e.g. [redux](https://github.com/gaearon/redux))
@@ -130,0 +141,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Dependency count

0

decreased by-100%

Lines of code

527

increased by12.85%

Number of lines in readme file

180

increased by6.51%

Worsened metrics

Total package byte prevSize

44425

decreased by-6.61%

Dev dependency count

20

increased by25%

Number of package files

21

decreased by-16%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes