RxJS-DOM version 4.0.1

This release is a minor update from version 4.0.0 which includes support for [Server-Sent Events].

Server-Sent Events

Server-Sent Events are enable servers to push data to Web pages over HTTP or using dedicated server-push protocols through the window.EventSource object. This allows the browser to automatically receive events pushed from the server instead of long polling which we've seen in the past with XMLHttpRequest objects.

Now, we have the ability with rx.dom.js to convert an EventSource to an observable sequence.

// Not handling the open event
var source = Rx.DOM.fromEventSource('foo.php');

source.subscribe(function (e) {
  console.log('Received data: ' + e.data);
});

// Using an observer for the open
var observer = Rx.Observer.create(function (e) {
  console.log('Opening');
});

var source = Rx.DOM.fromEventSource('foo.php', observer);

source.subscribe(function (e) {
  console.log('Received data: ' + e.data);
});

RxJS Bindings for the DOM version 4.0

This is a major new release of the Reactive Extensions bindings for the DOM. There are many breaking changes as will be noted in this release.

Some of the changes include the following:

• Adding back Rx.DOM.fromEvent to the API
• Event shortcuts added
• Pointer events
• Touch events
• Deprecation of hot versus cold APIs
• Name Changes
• Added Documentation and Samples

Adding Back Events

Event support was removed directly from rx.dom.js during version 3.0 in favor of using Rx.Observable.fromEvent directly from RxJS. However, in order to keep this library to be used directly with rx.js among other libraries, without having to include rx.async.js, it was best to re-add the events. Not only that, but it also made it easy to then create event shortcuts.

Event shortcuts

The following event shortcuts have been added, so they can be reference such as Rx.DOM.blur(element):

• blur
• focus
• focusin
• focusout
• load
• resize
• scroll
• unload
• click
• dblclick
• mousedown
• mouseup
• mousemove
• mouseover
• mouseout
• mouseenter
• mouseleave
• change
• select
• submit
• keydown
• keypress
• keyup
• error
• contextmenu

Pointer Events

In addition to regular events, Pointer Events support has also been added for browsers that support them.

Today, most HTML5 content is used with and/or designed for mouse input. Those that handle input in a custom manner typically code to Mouse Events. Newer computing devices today, however, incorporate other forms of input, like touchscreens or pen input. Event types have been proposed for handling each of these forms of input individually. However, that approach requires a step function in opportunity cost to authors when adding support for a new input type. This often creates a compatibility problem when content is written with only one device type in mind. Additionally, for compatibility with existing mouse-based content, most user agents fire Mouse Events for all input types. This makes it ambiguous whether a Mouse Event represents an actual mouse device or is being produced from another input type for compatibility, which makes it hard to code to both device types simultaneously.

To reduce the cost of coding to multiple input types and also to help with the above described ambiguity with Mouse Events, this specifications defines a more abstract form of input, called a pointer. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. This model makes it easier to write sites and applications that work well no matter what hardware the user has. For scenarios when device-specific handling is desired, this specification also defines properties for inspecting the device type which produced the event. The primary goal is to provide a single set of events and interfaces that allow for easier authoring for cross-device pointer input while still allowing for device-specific handling when necessary. An additional key goal is to enable multi-threaded user agents to handle default touch actions, such as scrolling, without blocking on script execution.

The events for handling generic pointer input look a lot like those for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. This facilitates easy content migration from Mouse Events to Pointer Events. Pointer Events provide all the usual properties present in Mouse Events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. So authors can easily code to Pointer Events to share logic between different input types where it makes sense, and customize for a particular type of input only where necessary to get the best experience.

The following shortcuts have been added which can be referenced such as Rx.DOM.pointerdown(element)

• pointerdown
• pointerup
• pointermove
• pointerover
• pointerout
• pointerenter
• pointerleave

Touch Events

Touch events have also been added to rx.dom.js for those browsers that support them. Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the context of a touchscreen, implies multi-touch. The touch events were introduced to browsers to handle this demand.

The following shortcuts have been added which can be referenced such as Rx.DOM.touchstart(element)

• touchstart
• touchend
• touchmove
• touchcancel

Deprecation of hot versus cold APIs

In previous versions of this library, there were both hot and cold versions of such operators as ajax and ajaxCold. This caused much unneeded confusion, so we have made them cold observables and removed the hot versions.

Removed operators:

• ajaxCold
• getJSONPRequestCold

Name Changes

In addition to the removal of some of the operators, we have also removed the Request object, so now you can easily get to Ajax operators such as get, getJSON, ajax etc through Rx.DOM.ajax, etc.

The Geolocation object was also changed for those who need the geolocation API. The Geolocation object has been renamed to geolocation to fit in better with JavaScript semantics.

Added Documentation and Samples

As always, documentation is important. You can now find all of the documentation for each operator listed here. In addition, the examples have been updated, including a more advanced version of Canvas Paint which allows you to choose different colors while painting.