Skip to content

Make XMLHttpRequest and XMLHttpRequest.upload proper EventTargets - #7017

Closed
philikon wants to merge 1 commit into
react:masterfrom
philikon:xhr_upload
Closed

Make XMLHttpRequest and XMLHttpRequest.upload proper EventTargets#7017
philikon wants to merge 1 commit into
react:masterfrom
philikon:xhr_upload

Conversation

@philikon

Copy link
Copy Markdown
Contributor

So far, XHR only supports a few onfoo event handlers, not the entier EventTarget interface (addEventListener, removeEventListener). It also doesn't support the upload object on Android -- for no good reason. Even if we don't send any events there yet, there's no reason we have to break consuming code that wants to register an event handler there. This PR rectifies all that.

Fortunately, adding proper EventTarget support is very easy thanks to event-target-shim. We already use it in our WebSocket implementation. It transparently handles the addEventListener('foo', ...) as well as onfoo APIs, so when you dispatch an event on the event target, the right handlers will be invoked. The event object is wrapped so that event.target is set properly. Basically, it's a super easy way to make us conform to the spec.

Also added a bit of polish here and there, using ES2015 class property goodness to consolidate a lot of Flow property definitions with the corresponding property initializers.

Test Plan: Ran through the XHR Example in UIExplorer on both platforms. Made sure upload progress events still work on iOS and timeouts work.

@facebook-github-bot

Copy link
Copy Markdown
Contributor

By analyzing the blame information on this pull request, we identified @sreesharp, @nicklockwood and @grgmo to be potential reviewers.

@facebook-github-botfacebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Apr 17, 2016
@mkonicek

Copy link
Copy Markdown
Contributor

Is this one good to go? Should I merge it?

@sreesharp

Copy link
Copy Markdown
Contributor

Code looks good to me. Hope Flow is not complaining about the XHRBase static attributes.

@philikon

Copy link
Copy Markdown
ContributorAuthor

Flow didn't complain. Should be good to go.

@grgmo

Copy link
Copy Markdown
Contributor

looks good to me, good to merge

@mkonicek

Copy link
Copy Markdown
Contributor

@facebook-github-bot shipit

@facebook-github-botfacebook-github-bot added GH Review: accepted Import Started This pull request has been imported. This does not imply the PR has been approved. and removed GH Review: review-needed labels Apr 20, 2016
@facebook-github-bot

Copy link
Copy Markdown
Contributor

Thanks for importing. If you are an FB employee go to Phabricator to review.

@mkonicek

mkonicek commented Apr 20, 2016

Copy link
Copy Markdown
Contributor

@philikon Looks like this breaks fetching QEs in one of our internal apps. Maybe @andreicoman11 knows what's wrong?

@philikon

Copy link
Copy Markdown
ContributorAuthor

Looks like this breaks fetching QEs in one of our internal apps.

Weird. In an end-to-end test or in a unit test? If it's a unit test, I could imagine that the unit test uses some internal knowledge of XMLHttpRequestBase to stub out some stuff.

Anyway, I'd love to help in whatever way I can to fix that. You guys know where to find me :)

@mkonicek

Copy link
Copy Markdown
Contributor

Philipp I've just sent you a message :)

@facebook-github-botfacebook-github-bot added Import Failed and removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Apr 21, 2016
@philikon

Copy link
Copy Markdown
ContributorAuthor

I've just looked over the diff again. There's very little behavioral change to XHR, so I'm surprised there's a new failure.

The biggest change is obviously concerning the EventTarget API. So one possible failure scenario could be something this:

  • existing code does something like xhr.addEventListener && xhr.addEventListener('timeout', timeoutHandler)and sets a timeout (or is on a platform with a default timeout)
  • in the test, the request actually times out
  • the consumer would never have found out before this patch, but now it does, causing the test to fail

The other change is that event handlers now get an event object rather than null. Not that they should care, but who knows...

Wish I could be more helpful. If it's too difficult to track down the problem on your end, @mkonicek, we can also try to take this diff in steps and see which change creates the failure. Would be tedious, but perhaps in the end quicker? Your call.

@TanTan-TT

Copy link
Copy Markdown

@philikon I have a question after reading RN Android code. RN Android networking code did not handle upload progress event, so your change can not make uploading progress works. Am I right?

@philikon

Copy link
Copy Markdown
ContributorAuthor

@philikon I have a question after reading RN Android code. RN Android networking code did not handle upload progress event, so your change can not make uploading progress works. Am I right?

Correct, this doesn't change the supported functionality on either platform.

@mkonicek

Copy link
Copy Markdown
Contributor

@philikon I'll try installing fb4a in my emulator and running the running the test locally to repro the timeout.

@ghost

Copy link
Copy Markdown

@philikon updated the pull request.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no-undef: 'EventListener' is not defined.

@ghost

Copy link
Copy Markdown

@philikon updated the pull request.

@ghost

Copy link
Copy Markdown

@philikon updated the pull request.

@philikon

Copy link
Copy Markdown
ContributorAuthor

(circleci failure unrelated)

@mkonicek

Copy link
Copy Markdown
Contributor

@facebook-github-bot shipit

@ghostghost added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Apr 27, 2016
@ghost

Copy link
Copy Markdown

Thanks for importing. If you are an FB employee go to Phabricator to review.

@ghostghost added Import Failed and removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Apr 28, 2016
@ghost

Copy link
Copy Markdown

@philikon updated the pull request.

@philikon

philikon commented Apr 28, 2016

Copy link
Copy Markdown
ContributorAuthor

Rebased on top of D3229435 / d363b1f. Can somebody plz re-import kthxbai :)

@ghostghost closed this in b5f14eaApr 28, 2016
@mkonicek

Copy link
Copy Markdown
Contributor

#finallylanded 👍

@mkonicek

Copy link
Copy Markdown
Contributor

Thanks for the help Kevin!

ptmt pushed a commit to ptmt/react-native that referenced this pull request May 9, 2016
Summary:
So far, XHR only supports a few `onfoo` event handlers, not the entier `EventTarget` interface (`addEventListener`, `removeEventListener`). It also doesn't support the `upload` object on Android -- for no good reason. Even if we don't send any events there yet, there's no reason we have to break consuming code that wants to register an event handler there. This PR rectifies all that.
Fortunately, adding proper `EventTarget` support is very easy thanks to `event-target-shim`. We already use it in our WebSocket implementation. It transparently handles the `addEventListener('foo', ...)` as well as `onfoo` APIs, so when you dispatch an event on the event target, the right handlers will be invoked. The event object is wrapped so that `event.target` is set properly. Basically, it's a super easy way to make us conform to the spec.
Also added a bit of polish here and there, using ES2015 class property goodness to consolidate a lot of Flow property definitions with the corresponding property initializers.
**T
Closesreact#7017
Reviewed By: fkgozali
Differential Revision: D3202021
Pulled By: martinbigio
fb-gh-sync-id: 2b007682074356c75c774fab337672918b6c4355
fbshipit-source-id: 2b007682074356c75c774fab337672918b6c4355
@philikon
philikon deleted the xhr_upload branch June 8, 2016 00:29
zebulgar pushed a commit to nightingale/react-native that referenced this pull request Jun 18, 2016
Summary:
So far, XHR only supports a few `onfoo` event handlers, not the entier `EventTarget` interface (`addEventListener`, `removeEventListener`). It also doesn't support the `upload` object on Android -- for no good reason. Even if we don't send any events there yet, there's no reason we have to break consuming code that wants to register an event handler there. This PR rectifies all that.
Fortunately, adding proper `EventTarget` support is very easy thanks to `event-target-shim`. We already use it in our WebSocket implementation. It transparently handles the `addEventListener('foo', ...)` as well as `onfoo` APIs, so when you dispatch an event on the event target, the right handlers will be invoked. The event object is wrapped so that `event.target` is set properly. Basically, it's a super easy way to make us conform to the spec.
Also added a bit of polish here and there, using ES2015 class property goodness to consolidate a lot of Flow property definitions with the corresponding property initializers.
**T
Closesreact#7017
Reviewed By: fkgozali
Differential Revision: D3202021
Pulled By: martinbigio
fb-gh-sync-id: 2b007682074356c75c774fab337672918b6c4355
fbshipit-source-id: 2b007682074356c75c774fab337672918b6c4355
@philikonphilikon mentioned this pull request Nov 24, 2016
7 tasks
This pull request was closed.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants

@philikon@facebook-github-bot@mkonicek@sreesharp@grgmo@TanTan-TT@eslint-bot