v6.0.1 - RxJS 5 and React v16

New Features

• Support for RxJS 5 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
  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

import {component} from 'cycle-react';

NEW

// RxJS v4
import {component} from 'cycle-react/rx';
// RxJS v5
import {component} from 'cycle-react/rxjs';

props.get

OLD

props.get('foo').map(foo => <p>{foo}</p>);

NEW

props.pluck('foo').map(foo => <p>{foo}</p>);
// or
props.map(({foo}) => <p>{foo}</p>);

dispose

OLD

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).

const foo = component('Foo', () => {
  // ...
  const subscription = source.subscribe(signal => console.log(signal));
  return {
    view,
    unsubscribe: subscription
  };
});

v5.1.2 - Compatibility fix for react-scripts

Compatibility fix for create-react-app and react-scripts

The NPM package cycle-react now contains transpiled code that built
by Babel. This fixes react-scripts build's compatibility issue with
ES6.

The underlying component class has been changed from PureComponent
to Component, due to implementation of shouldComponentUpdate raises
warning message for PureComponent.

v5.0.0 - React v15.5.0 and ES6

Breaking change: Custom events is now subscribed only when listener props is provided upon componentDidMount event [#37]

For example, if you have following component:

<MyTimer />

And you add the event listener after the component has mounted:

<MyTimer onTick={listener('x')} />

The onTick event will no longer be raised for this cycle-react version.

Breaking change: mixin is removed along with the usage of createClass

Along with the new release of React v15.5.0, the internal usage of createClass in cycle-react has been removed. Cycle-react now uses PureComponent internally.

Breaking change: self and renderScheduler have been removed

As a result, lifecycles parameter has moved to the third parameter of definitionFn. For handling refs, please use interactions for generating callback function.

See "Working with React" for further details.

Breaking change: cycle-react is now native ES6

Use any transplier if you need backward compatibility for cycle-react. If you are using Babel already, then you should have no problem.

In addition, the following features are not used in cycle-react to ensure minimum dependency and good efficiency for all browsers.

• Async
• Iterators and generators
• Symbol
• for..of
• Destructuring assignment
• Default, spread and rest parameters
• Promise

You can still use any of the features above in your project with cycle-react. In fact, using destructuring assignment with cycle-react is recommended.

Preview: View component

View component is a new way to define cycle-react components by divorcing view function from the component. For example, the original component function allows you to define the component like this:

component('Hello', (interactions) =>
  interactions.get('OnNameChanged')
    .map(ev => ev.target.value)
    .startWith('')
    .map(name =>
      <div>
        <label>Name:</label>
        <input type="text" onChange={interactions.listener('OnNameChanged')} />
        <hr />
        <h1>Hello {name}</h1>
      </div>
    )
);

New view component extracts the view function out of component definition:

viewComponent(
  'Hello',
  (interactions) =>
    interactions.get('OnNameChanged')
      .map(ev => ev.target.value)
      .startWith(''),
  // View function
  (name, {OnNameChanged}) => (
    <div>
      <label>Name:</label>
      <input type="text" onChange={OnNameChanged} />
      <hr />
      <h1>Hello {name}</h1>
    </div>
  )
);

v3.1.0 Lifecycle observables

Breaking change: applyToDOM and makeDOMDriver are both removed. Use ReactDOM.render instead.

BEFORE

Cycle.applyToDOM('.js-container', function computer() {
  return Rx.Observable.just(<h3>view</h3>);
});

AFTER

const MyElement = Cycle.component('MyElement', function computer() {
  return Rx.Observable.just(<h3>view</h3>);
});
ReactDOM.render(<MyElement />, document.querySelector('.js-container'));

Deprecated: Deprecated bindThis option with the function as view.

Add feature: Support lifecycle events by the fourth parameter lifecycles for the component's definitionFn. [#18]

See Working with React - Lifecycle events for details.

v2.0.0 - React Native

Cycle-React now supports React Native. Thank @cem2ran for the PR.

Breaking change: The peer dependency of React has been removed. React will not be installed automatically with Cycle-React for NPM <3.0.0.

React 0.13 and React Native 0.7 are the supported versions of Cycle-React. Cycle-React will put the dependency of React back once the isomorphic module of React 0.14 has been released.

In addition, Cycle-React will move "applyToDOM" and "makeDOMDriver" into the separated package for the upcoming "react-dom" package.