Polyfill for URL.prototype.searchParams

[saschanaz]

URL instance supports searchParams member which is URLSearchParams. It will be great to support this here.

[jerrybendy]

Maybe you can do like this:

if (window.URL) {
  Object.defineProperty(URL.prototype, 'searchParams', {
    get: function () {
      return new URLSearchParams(this.search)
    }
  })
}

[iFwu]

@jerrybendy but I can't do something like params.set by such way.

[jerrybendy]

@xekri You are right. If you do that, every time you get the searchParams object, it'll return a new object.

So,

var u = new URL('http://github.com')
u.searchParams === u.searchParams  // should be `true`, but `false` returned

It causes a bug. To fix this bug, we should add a private variable to URL.prototype to save the searchParams object temporarily. Thus, we have to do a lot of work here.

It is not necessary for most of users, so I didn't put it in the index.js file. I'll try to fix it, and if it works well, I'll add a new file to this repo as an optional choice.

[jhenry9636]

Thanks for this amazing tool. Was this feature added?

[jerrybendy]

@jhenry9636 Not yet.

But you can use a workaround like above. I didn't write this solution into this library, because I don't want to make it fatter.

[xyy94813]

It is my solution. This can still be improved.

if (URL) {
  Object.defineProperty(URL.prototype, 'searchParams', {
    get (context) {
      const searchParams = new URLSearchParams(this.search)
      searchParams.set = (key, value) => {
        URLSearchParams.prototype.set.call(searchParams, key, value)
        this.search = `?${searchParams.toString()}`
      }
      searchParams.delete = (key, value) => {
        URLSearchParams.prototype.delete.call(searchParams, key, value)
        this.search = `?${searchParams.toString()}`
      }
      return searchParams
    }
  })
}

[jerrybendy]

@xyy94813 Your solution is better. Based on your code, We'd better rewrite all methods which can modify the URLSearchParams object, like append, delete, set and sort.

Although URL.searchParams.set !== URL.searchParams.prototype.set, I think it can be accepted for most of scenes.

👍

[xyy94813]

@jerrybendy

I found that core-js already supports URL and URLSearchParmas compatibility.

see:
https://github.com/zloirock/core-js/blob/master/packages/core-js/modules/web.url.js
https://github.com/zloirock/core-js/blob/master/packages/core-js/modules/web.url-search-params.js

We can use it in the browser. And learn from its implementation