reactive-extensions / rxjs-dom Goto Github PK

It looks like the normalization process here is not correct in case of "requestType": "json" at least. I've just tried to use Rx.DOM.getJSON from the latest release and got an issue: in response I've got a string instead of JS object (parsed string with JSON.parse).

sinon fake XMLHttpRequest hides this problem by using only responseText instead of both response & responseText fields.

My suggestion is to update the normalizeAjaxLoadEvent function like this:

function normalizeAjaxLoadEvent(e, xhr, settings) {
    var response = ('response' in xhr) ? xhr.response : xhr.responseText;
    response = settings.responseType === 'json' ? JSON.parse(response) : response;
    return {
      response: response,
      status: xhr.status,
      responseType: xhr.responseType,
      xhr: xhr,
      originalEvent: e
    };
  }

Thank you.

I think it would be really nice if this project has some support for ServiceWorkers.

Thanks.

RxJS-DOM can be easily partitioned into sub-libraries, since these partitions seem to be orthogonal with regard to functionality. Partitions being

• DOM Events: fromEvent, ready, event shortcuts, pointer events, touch events.
• Ajax
• Server-Sent Events
• Web Sockets
• Web Workers
• Mutation Observers
• Geolocation
• Schedulers
• FileReader

These could be respectively split into:

• rx.dom.events.js
• rx.dom.ajax.js
• rx.dom.sse.js
• rx.dom.websockets.js
• rx.dom.webworkers.js
• rx.dom.mutations.js
• rx.dom.geolocation.js
• rx.dom.schedulers.js
• rx.dom.filereader.js

The advantage of splitting is we can use only a subset of RxJS-DOM while not having to carry all the load of the whole library. For instance, for frameworks which already handle DOM events, like Cycle.js (and others, this isn't the only one), the DOM Events part of RxJS-DOM is not necessary, and we might want to take only the Ajax helpers.

I can help with this issue.

I noticed that RxJS-DOM does not support all (standard) events.

Is there a reason for that or is it just a matter of writing up the corresponding documentation?

Hi!

The last version of RxJS-DOM is not available on cdnjs and jsDelivr.

Currently, rx supports Browserify, but rx-dom does not.

Uncaught TypeError: Cannot read property 'Observable' of undefined 

For the following code:

var Rx = require('rx'),
    Rx = require('rx-dom');

Or:

var Rx = require('rx');
require('rx-dom');

I think this is a better idea for issue #29

Basically, if the onClose event hits the socket with anything that isn't "happy", it should observe an error on that socket.

Creating an Ajax request with the option crossDomain set to true does not set withCredentials.
Furthermore, there is no option to manually change this option.

Is this expected? I have overcome this issue by updating the source and adding a new line in getCORSRequest():

if ('withCredentials' in xhr) {
  return xhr;
}

is now:

if ('withCredentials' in xhr) {
  xhr.withCredentials = true;
  return xhr;
}

Any help/advice would be appreciated.

First, IE8 doesn't support document.createEvent which is used in src/events/addeventlistenerpolyfill.js. The last working version is 6.0.0.

Second, requests via Rx.DOM.get never complete in IE8. Last working version for this is (ironically) 4.0.4. Here's a minimal example to demonstrate:

function logStart() {
    console.log('start');
}

function logEnd(data) {
    console.log('end');
}

var requests = Rx.Observable.just(1);
var responses = requests.flatMap(function() {
    return Rx.DOM.get('.');
});

requests.subscribe(logStart);
responses.subscribe(logEnd);

It should print

start
end

But in IE8 with any version of RxJS-DOM later than 4.0.4 it only prints start.

according to the MDN documentation, when document.readyState === 'interactive' then the DOMContentLoaded has already fired.

The Rx.DOM.ready() observable checks to see if the readyState === 'complete', otherwise it listens for the DOMContentLoaded event. This seems incorrect to me, as the observable will be forever empty if the DOMContentLoaded event has already fired, and the readyState === 'interactive'.

I would like a release which contains the fix for:

#64

Can someone please release another version (and publish it to npm)?

Current state.
define(['rx', 'exports'], function (Rx, exports) {

Change request
define(['./rx', 'exports'], function (Rx, exports)

The link is broken
https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/mouseout.md

Status 0 should be an error. If you get back an empty response from a server for whatever reason, status you will receive status code 0, even if the response was sent in error.

https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/src/ajax.js#L99

Likewise, there's really no circumstance by which a status code of '' should arrive.

This is all due to some bug in PhantomJS.

What happens is that PhantomJS strips the Authorization Header.

To fix, change you call to ajax() from:

RxDom.DOM.ajax({url:"http://example.com",user:"noob",password:"123456",headers:{"Authorization":api.auth}});

to:

RxDom.DOM.ajax({url:"http://example.com",headers:{"Authorization":"Basic "+btoa("noob:123456")}});

Watchout, btoa is not supported on <= IE 9. Use some other base64 encoding script in case you need IE9 support.

If RxJS-DOM could detect Phantom-JS environment it might auto-apply this workaround.

Add support for setting timeout on an AJAX request ( e.g. Rx.DOM.ajax({ url: '/unresponsive/endpoint', timeout: 10000 }) ). Trigger subscription's onError() when timed out.

Using browserify & npm to include rx-dom doesn't work unless Rx is defined on window.

var Rx = require('rx');
require('rx-dom');

Results in Uncaught TypeError: Cannot read property 'Observable' of undefined on this line:

https://github.com/Reactive-Extensions/RxJS-DOM/blob/v2.0.8/rx.dom.js#L31

Looks like it's fixed in master though:

https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L36

For now, this is my workaround:

window.Rx = require('rx');
require('rx-dom');

Wishlist:

• Add method: post_json(url, json)
• Add urlparams: get(url, urlparams)
• Add urlparams: getJson(url, urlparams)

Even better if urlparams could be either an object value or an Rx subject itself.

The use case here is this:

If I have a websocket that is using publish().refCount(), and I'm buffering messages to be sent over the socket, and I need to flush that buffer before I tell the socket to close, I'm currently unable to do so, because onCompleted is called when the socket has been closed, and there are no hooks to trigger it before disposal.

RxJS is a nice fit, particularly for the SpeechRecognition api.

Here's a fun demo of both speech recognition and synthesis with RxJS (if you have your speakers on, it "hears" itself, LOL): http://jsbin.com/nunije/1/edit?js,output

The SpeechRecognition bit looks like this:

var SpeechRecognition = root.SpeechRecognition ||
                          root.webkitSpeechRecognition ||
                          root.mozSpeechRecognition ||
                          root.msSpeechRecognition ||
                          root.oSpeechRecognition;


function fromSpeechRecognition(options) {
  var config = extend({
    continuous: false,
    maxAlternatives: 5,
    lang: 'en-US'
  }, options);

  return Observable.create((obs) => {
    if(!SpeechRecognition) {
      throw new Error('speech recognition not supported');
    }

    var recognition = new SpeechRecognition();
    recognition.continuous = config.continuous;

    recognition.onresult = (e) => {
      obs.onNext(e);
      //obs.onCompleted();
    };

    recognition.onerror = (e) => {
      obs.onError(e);
    };

    recognition.onend = (e) => {
      console.log(e);
      obs.onCompleted();
    };

    recognition.start();

    return () => {
      recognition.stop();
    };
  });
}

And the speech synthesis looks like this:

function fromSpeechUtterance(text) {
  return Observable.create((obs) => {
    var msg = new SpeechSynthesisUtterance(text);

    speechSynthesis.speak(msg);

    msg.onend = (e) => {
      obs.onNext(msg);
      obs.onCompleted();
    }
  });
}

Need to support CORS for Ajax requests. See here for implementation details.

It looks like a typo on line 17: observerOrOnNext should maybe be openObserver?

The following are items for rx.dom.js 4.0:

• Removal of cold versus hot observables for ajax requests and JSONP
• Re-adding fromEvent to deal with DOM only events
• Adding shortcuts for the following events:
  • 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

In addition, we would support pointer events if they exist on the platform such as:

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

• socketSubject.onCompleted() should simply call .close() on the socket.
• socketSubject.onError(x) should call .close(code, reason) on the socket, provided that a reason and code were passed to the onError(x) call (e.g. onError('reason') or onError({ reason: 'reason', code: 3001 }).

cdnjs and jsdelivr both have old versions, is someone working on it? If not happy to try and get them updated?

Hello.

The version 5.0.0 of Rx (https://github.com/ReactiveX/RxJS) is in beta.

Will RxJS-DOM be supporting the new version?

Thank you.

Hey,
would it be possible to add an observable that tracks the URL in the address bar?

Hey, would it be possible to add input to the list of supported events?

Hi,

I've already sent a pull-request to fix that issue:

fix

I am using Rx.DOM.fromMutationObserver. Browser gives this error. Adding observableCreate = Rx.Observable.create to rx-dom/dist/rx.dom.js solves this. Seems src/basicheader.js is the right place.

I've simply put my scripts like this:

<script src='/scripts/rx.all.min.js'></script>
<script src='/scripts/rx.dom.min.js'></script>

but it looks like rx.dom does not correctly export itself to pollute the window.Rx object.

When using RequireJS to use RxJS-DOM this leads to "observerCreate is not defined". I guess since RxJS-DOMs only requirement is RxJS itself, it should use Rx.Observer.create() instead or locally define its own observerCreate function. I'm using RxJS version 2.3.14 and RxJS-DOM version 4.0.1.

So RxJS doesn't allow anything to be passed with it's completion event.

This is problematic for fromWebSocket because it means that close events are squelched and cannot be examined. In particular when looking to see if the socket was closed cleanly.

This means that either:

1. We need to add yet another optional observer to the method to emit a stream of close events.
2. RxJS onCompleted should really allow a parameter to be passed. (I'm sure there's some super-nerdy computer-sciencey reason involving terms like "monads" why this isn't a good idea that I probably won't agree with)
3. or the socket implementation needs to be changed to be a stream of socket events in total, rather than just messages: .... { type: 'open', event: e }... { type: 'message', event: e }....... { type: 'close', event: e }.... That could then be a new class of SocketSubject that has methods on it to filter and map out those events for you.

Fix the following items:

• Add body to settings object on Ajax readme
• Change throttle to debounce on the main readme

Hi!

I'm using rx-lite 2.4.7 and the last build of RxJs-Dom.

If I use the first example from documentation, the message 'test' is never sent to the server.

In contrast, If I wait that the socket be opened, the message is sent.

Best regards.

var socketSubject = Rx.DOM.fromWebSocket('ws://echo.websocket.org');

var disposable = socketSubject.subscribe(x => console.log(x));

console.log(disposable); // undefined

This seems to have been broken for a while, and related to a change I have yet to identify in RxJS proper. I didn't notice this until I updated RxJS in my project.

Per the docs, an Ajax operator's settings should allow for its 'body' property to be an object.

body (Object): Optional body

However, this appears to be incorrect as only strings are supported. My code is as follows:

Rx.DOM.ajax({
    body: {
        password: password,
        username: username
    },
    crossDomain: true,
    headers: {
        'content-type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    responseType: 'json',
    url: url
})

Expected outcome:

Form data:
  username: 'username string',
  password: 'password string

Actual outcome:

Form data:
  [object Object]

If I modify the code to body's value to be like below, it will work.

body: 'username=username&password=password'

The problem here it's not always desirable to stringify anything that is of type "object". Blobs for example test positive for typeof someBlob === 'object', but you can xhr.send(someBlob) directly.

In other words, the current implementation doesn't allow the developer to send:

• ArrayBufferView
• Blob
• Document
• FormData

which are all legitimate arguments for xhr.send(x);

At least in Chrome, new WebSocket(endpoint, undefined) doesn't behave the same as new WebSocket(endpoint).

A jsbin example to demonstrate

and a screenshot of the error produced:

... this enables the observable to be retried and the socket to be reconnected.

When subscribing more than one Observer to a jsonpRequest Observable, only one of the subscribers will be called back. In the example below only A will be ever logged, for example.

var test = Rx.Observable
  .interval(1000)
  .flatMap(function() {
    return Rx.DOM.jsonpRequest({
      url: https://gist.githubusercontent.com/sergi/8218eadccc167961ba1a/raw/9b23eaf092ca5c7aec65b5b93e1facc5ac1628cf/test_rx_jsonp.json,
      jsonpCallback: 'test_rx_jsonp'
    });
  });

var A = test.subscribe(function(res) { console.log('A', res) });
var B = test.subscribe(function(res) { console.log('B', res) });

A workaround is to use publish on the Observable, but it shouldn't be necessary.

This doesn't invoke the subscribe call:

    Rx.Observable
        .getJSONPRequest("https://api.github.com/users/cburgdorf/received_events")
        .subscribe(function(data){
            console.log(data);
        });

This does:

   $.ajaxAsObservable({
        url: "https://api.github.com/users/cburgdorf/received_events",
        dataType: "jsonp"
    })
    .subscribe(function(payload){
        console.log(payload.data.data);
    });

First of all, the README appears to be wrong or out of date in that it gives the syntax as Rx.DOM.Ajax.jsonpRequest(url) (there is no Ajax property in DOM, I assume that should be Request). But even when I do this:

var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=reactive';

Rx.DOM.Request.jsonpRequest(url).subscribe( 
  function(data) {
    console.log('result', data);
  },
  function(error) {
    console.log('error', error);
  }
);

literally nothing happens. Neither function passed to subscribe gets invoked, and no errors show up in the console. I can see from the network traffic that the request succeeds with Wikipedia and it returns valid JSON.

I'm using the rx-dom 2.0.8.

Can't find package in bower with bower install rxjs-dom

When providing a settings object the jsonp field does not do what the documentation claims it does. The current documentation, both in the source and the documentation .md, say this

• jsonp (String): The named callback parameter for the JSONP call

And provide the following example (source file only):

source = Rx.DOM.jsonpRequest( url: 'http://bing.com/?q=foo', jsonp: 'JSONPRequest' });

This implies that it gives the name of the parameter whose value should be changed to the actual callback function generated for the request. E.g. 'jsonp.request.json?whatCallbackToCallForRequest=callbackFunction' would be changed to 'jsonp.request.json?whatCallbackToCallForRequest=rxjscallback{number}'
At least if settings.jsonp === 'whatCallbackToCallForRequest'

However the actual behaviour is 'jsonp.request.json?whatCallbackToCallForRequest=callbackFunction' is changed to 'jsonp.request.json?whatCallbackToCallForRequest=rxjscallback{number}' only if settings.jsonp === 'callbackFunction'

Thus jsonp refers to the named callback parameter value for the JSONP call.

I'm willing to provide a fix for this but need to know if the code or the documentation is correct.

Trying to bundle with webpack, the AMD loader chokes on requiring './rx', because there's no file rx.js relative to rx.dom.js. This can be worked around with require('imports?define=>false!rx-dom') to disable the AMD loader, but it's clunky.

I note that rx-jquery works because it requires 'rx', not './rx'. Maybe rx-dom should do the same?

When testing a very basic error condition, the subscription's success handler is called. Expecting error handler to be called in this case.

Currently it's just setting each action to be processed on it's own animation frame:

This isn't the most performant way to use requestAnimationFrame. It should buffer all actions that occur until the next animation frame and then flush them all.

When doing a jsonpRequest using a settings object as a parameter you can't reuse that settings object or you get a TypeError. Because the url has been changed. And the proper new callback won't be set.

Thus it tries to call a function on the success of the result that is no longer there if one of the previous requests has already been made.

This is undesired behaviour because you might be polling dynamic data that can change over time. Like when requesting real time data and keeping it updated.

This is related to #45 because if the code is incorrect then the fix is solving that issue.