JSONP Plugin

[blakeembrey]

It should be really easy to write. Just a before and after request hook to receive the data coming back from the global function that will be exposed in the before hook.

[tmedwards]

As this issue is approaching two years old and doesn't seem to be moving, do you have any guidance on how this might be done?

A project I work on needs both JSONP and non-JSONP XHR support. We're currently using jQuery to handle our requests, but that's the only thing we use it for and we'd like to switch to something which doesn't include the kitchen sink. Popsicle seems like it would be a nice fit, but not currently having JSONP support—natively or via a plugin—makes it a non-starter.

[blakeembrey]

It's pretty easy to do, I just haven't needed it myself since I prefer to enable CORS over supporting JSONP APIs. All you'd need to do is write a middleware function that writes a script tag and listens for onload of the script - then returns a Response object. I'm happy to write it if it's something you really need 😄

[tmedwards]

That would be great, honestly. We'd be much obliged if you would.

[tmedwards]

I hate to be that guy, but I was wondering if there'd been any progress on this?

[blakeembrey]

No, sorry. It's fine to be that guy, I should have given an update. I haven't started working on it, I've been burnt out from open source and trying to pull back on my commitments overall. I'll try to get to it this week since I've left it long enough. Here's a good start:

const transport = {
  open (req) {
    return new Promise((resolve, reject) => {
      const key = `callback${Math.random().toString(36).substr(2)}`
      const script = document.createElement('script')

      script.type = 'text/javascript'
      script.src = `${req.url}?callback=${key}`
      script.onerror = () => {
        delete window[key]
        script.parentNode.removeChild(script)
        return reject(new Error())
      }
      
      document.body.appendChild(script)

      window[key] = (body) => {
        delete window[key]
        script.parentNode.removeChild(script)
        return resolve(new Response({ body }))
      }
    })
  },
  use: []
}