Giter VIP home page Giter VIP logo

xhr-shim's Introduction

xhr-shim

XMLHttpRequest, reimplemented using fetch.

Why?

  • This allows code using XHR to be tested using Node, with our friend node-fetch.
  • You can also use it inside service workers!

Differences

Due to the nature of fetch(),

  • This does not support synchronous XHR.
  • This does not support progress event.
  • This does not implement XMLHttpRequest.upload.
  • XMLHttpRequest instance is not reusable.
  • HEADERS_RECEIVED and LOADING ready states are skipped.

Because this is still XMLHttpRequest,

  • This does not support omitting cookies for same-origin requests.
  • There is no Promise support.
  • There is no built-in Node.js support. Polyfill using node-fetch.

This does not support obsolete APIs such as:

  • XMLHttpRequest.onreadystatechange
  • Basic authentication in XMLHttpRequest.open (use Authorization header!)

Due to the nature of the main usage,

  • XMLHttpRequest.responseXML always throws.
  • Document cannot be used in XMLHttpRequest.send().
  • The default MIME type is text/plain.
  • Instead of ProgressEvent, CustomEvent is used.

Requirements

This shim assumes you have these ES features:

  • async support
  • class syntax
  • globalThis
  • Object.assign
  • Object.create
  • Object.entries
  • Promise including Promise.prototype.finally
  • Symbol
  • Template literals

And these WHATWG features:

  • AbortController
  • Blob
  • Constructible DOMException
  • EventTarget.prototype.addEventListener with once option
  • fetch API with signal support
  • setTimeout

xhr-shim's People

Contributors

apple502j avatar aierie avatar

Stargazers

Humanismusic avatar  avatar Cyan avatar  avatar Juan Carlos Corona Romero avatar Bruce Wang avatar Tyler Brostrom avatar Simon Willison avatar Trevor Stenson avatar Hao Wu avatar

Watchers

James Cloos avatar  avatar

Forkers

guregu aierie

xhr-shim's Issues

Headers

FIRST OF ALL, I just LOVE this repo, my whole day was just me trying to find a proper polyfill that actually works, lots of them just die.

there's one bug which is because of Object.assign(this[sRespHeaders], resp.headers);
resp.headers is actually not a Record<string, string> more like an iterrable/entries
to fix it just Object.assign(this[sRespHeaders], Object.fromEntries(resp.headers));

another suggestion, you could use the private identifiers feature

No license!

Hi! Thanks for making this. You should add a license if you intend for others to make use of your npm package. An easy resource is Choose A License.

Thanks again!

replace this pattern.

I have seen this pattern from times to times

  [sDispatch](evt) {
    const attr = `on${evt.type}`;
    if (typeof this[attr] === "function") {
      this.addEventListener(evt.type, this[attr].bind(this), {
        once: true
      });
    }
    this.dispatchEvent(evt);
  }

but the one i have encounter is more like this

  dispatchEvent(evt) {
    this[`on${evt.type}`]?.(evt)
    super.dispatchEvent(evt)
  }

but on properties should really be a getter and a setter
cuz if you set a properties to anything other than a function, then it should be set to null

so i think this way is better:

class XHR {
  #onload = null
  
  set onload(fn) {
    // always remove the prev/cached listener for when it gets deleted or overwritten
    this.removeEventListener('load', this.#onload) // works ok even if value is null

    if (typeof fn === 'function') {
      this.addEventListener('load', this.#onload = fn)
    } else {
      this.#onload = null
    }
  }

  get onload() {
    return this.#onload // should always return null if not a function
  }
}

Then you don't need to override the dispatchEvent which really should be the same as if you where to compare them
XMLHttpRequest.prototype.dispatchEvent === EventTarget.prototype.dispatchEvent

yea, it can be more verbose, but it dose more follow the way of how on properties should work if you where to do something like xhr.onload = 0; xhr.onload === null

there can be way to optimze this pattern for multiple on properties on the same class

why?

Why not just recommend to switch to using the fetch api instead?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.