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.

2.0.0-beta1

Diff

minamo

published 2.0.0-beta1 • 9 years ago

1.0.1

Diff

minamo

published 1.0.1 • 9 years ago

Changelog

Source

1.0.1

MAJOR RELEASE: 1.0.1 is the stable version of Cycle-React.

Add feature: props.getAll() returns the Observable of the whole properties object [#10]

Alternatively, you can use props.get('*') or simply props for the exact same effect.

Breaking change: props.get(propertyName) uses (x === y) comparison instead of deep-equal comparison for the target property

Use props.get('*') or props if you have changes inside a nested object.

Alternatively, you can provide the customized comparer by props.get(name, (x, y) => {})

Breaking change: renderAsHTML has been removed

Use React.renderToString with Cycle.component instead. Examples can be found at test/node/html-render.js and examples/isomorphic.

Breaking change: The h hyperscript helper has been removed [#11]

Breaking change: Interactions API no longer uses selector for querying events [#8, #12]

The selector API cannot handle both Cycle-React components and other React components that use event handlers. We want to keep the compatibility with the original React while not confusing developers. Therefore, the selector API has been removed in favor of event handler API. Information of the new interactions API can be found at docs/interactions.md

The migration guide can be found below.

Breaking change: on prefix is no longer appended to event handlers for Cycle-React components

Breaking change: Event detail is no longer wrapped by CustomEvent

Breaking change: The option "noDOMDispatchEvent" has been removed since Cycle-React no longer dispatches events from DOM right now

BEFORE

// Component:
let MyComponent = Cycle.component('MyComponent', function (interactions, props) {
  let vtree$ = interactions.get('.myinput', 'change')
    .map(ev => ev.target.value)
    .startWith('')
    .map(name =>
      <div>
        <input className="myinput" type="text" />
        <h1>Hello {name}</h1>
      </div>
    );
  return {
    view: vtree$,
    events: {
      myComponentTick: Rx.Observable.interval(1000)
    }
  };
});
// Intentions:
interactions.subject('tick').map(ev => ev.detail);
// View:
<MyComponent onMyComponentTick={interactions.subject('tick').onEvent} />

AFTER

// Component:
let MyComponent = Cycle.component('MyComponent', function (interactions, props) {
  // You must use `get` to query events
  // and use `listener` to create event handlers.
  let vtree$ = interactions.get('OnMyInputChange')
    .map(ev => ev.target.value)
    .startWith('')
    .map(name =>
      <div>
        <input className="myinput" type="text"
               onChange={interactions.listener('OnMyInputChange')} />
        <h1>Hello {name}</h1>
      </div>
    );
  return {
    view: vtree$,
    events: {
      // The event handler is no longer auto-prefixed by "on"
      onMyComponentTick: Rx.Observable.interval(1000)
    }
  };
});
// Intentions:
// Event arguments from Cycle-React components are no longer
// wrapped by CustomEvent.
interactions.get('tick').map(ev => ev);
// View:
// Use interactions.listener(name) to create event handler
<MyComponent onMyComponentTick={interactions.listener('tick')} />

Migration

Append the "on" prefix to every event observable inside the events object of the component
Rewrite the code that used interactions.get(selector, eventType) by using interactions.get(eventName) and interactions.listener(eventName) like the example above
Replace interactions.subject(name).onEvent with interactions.listener(name)
Replace interactions.subject(name) and interactions.getEventSubject(name) with interactions.get(name)
Replace ev.detail with ev