Update RxJS to v3

Implies a breaking change to Cycle DOM because RxJS v3 (inside Cycle Core) is a breaking change. Most noteworthy breaking change is the signature change of scan operator. Read more here.

Add support for virtual-dom Widgets

You can use plain virtual-dom Widget in a VTree, besides a Cycle.js custom element (which used to be the only type of supported Widget).

Uses Cycle Core v2.0

Only breaking change is update to Cycle Core v2.0, which in itself is a small breaking change.

If you don't use responses.dispose() from let [requests, responses] = Cycle.run(main, drivers), you can safely update Cycle Core to v2.0 and Cycle DOM to v4.0, no code migration needed.

virtual-hyperscript can have Observable<VTree> children

NEW FEATURE

DOM Driver will automatically time-flatten a VTree with children as Observable, enabling you to write code as such:

let clock$ = Rx.Observable.interval(1000);

let child$ = clock$.map(i => h('h2', `${i} seconds elapsed`));

let vtree$ = Rx.Observable.just(
  h('div.my-class', [
    h('p', 'Ordinary paragraph'),
    child$ // <-- this is an Observable, child of the div.my-class VTree
  ])
);

When given to the DOM Driver, vtree$ will be hierarchically time-flattened, and would be equivalent to:

let clock$ = Rx.Observable.interval(1000);

let vtree$ = clock$.map(i =>
  h('div.my-class', [
    h('p', 'Ordinary paragraph'),
    h('h2', `${i} seconds elapsed`)
  ])
);

BUG FIX
Unwanted empty id (issue #3) fixed.

Update virtual-dom to 2.1.0

virtual-dom updated to 2.1.0 so that numbers are automatically coerced to strings when used as children in h().

Rename Cycle Web to Cycle DOM

Rename this package to refer mainly to the DOM Driver (and its companion for server-side rendering, HTML Driver). Other web related drivers (canvas, web worker, localStorage, etc) will leave as their own packages.

This rename is a breaking change.

Migration guide

BEFORE

npm install @cycle/web

import Cycle from '@cycle/core';
import {makeDOMDriver, h} from '@cycle/web';

AFTER

npm install @cycle/dom

import Cycle from '@cycle/core';
import {makeDOMDriver, h} from '@cycle/dom';

Add hJSX() helper to ease JSX usage in Babel

Now it is (a bit) easier to use JSX with Cycle.js

If you are using Babel, then add the following line at the top of the file which will use JSX:

/** @jsx hJSX */

Then import hJSX:

import {hJSX} from '@cycle/web';

And now JSX will render VTrees:

return (
  <ul>
    <li><a className="link" href="/">Home</a></li>
    <li><a className="link" href="/about">About</a></li>
  </ul>
);

equivalent to

return h('ul', [
  h('li', [
    h('a.link', {href: '/'}, 'Home')
  ]),
  h('li', [
    h('a.link', {href: '/about'}, 'About')
  ])
]);

Fix bug related to custom elements and ids

When using Cycle custom elements, if they were built with an id (e.g. h('my-button#submit')), the id (e.g. #submit) was missing when the element was rendered on the DOM. This version fixes this bug.

DOM response events made hot Observables always

With this version, responses.DOM.get(selector, eventType) will return a hot Observable, so you don't need to call .share() or .publish().refCount() on it.

In previous versions, this phenomenon caused bugs when using the Observable assuming it was hot. In fact in RxJS fromEvent() returns a hot Observable, but because of other additional operators inside Cycle Web, that hot Observable became cold, and another .publish().refCount() was needed. This now happens inside Cycle Web so you don't need to apply .publish().refCount() always. However, you do not need to migrate your code because .publish().refCount() is idempotent. We still recommend removing your .publish().refCount() calls if they exist after get(selector, eventType), but existing code will continue functioning if you upgrade to v2.1.0.

get(':root') has different semantics

Oh my goodness! v2.0!

Nothing special, folks, this is just semver-compliant. Almost nothing changed with v2.0, only one feature with a breaking API:

• DOM.get(':root') first emits the top-most container element given to makeDOMDriver()

This means the first event emitted by get(':root') will not anymore be the first diff & patch rendering. Instead, it will be exactly the same element you gave as container in makeDOMDriver(container). This feature enables client-side rendering to be skipped for the first UI tree if it has been rendered server-side. See this isomorphic example.