webcomponents / url Goto Github PK

17.5Kb is a huge payload to load when considering the amount of other polyfills required. It is overburden for IE so can we have minified version of this lib?

Please ?

When using new URL(a, b) with a not being a string, the code will crash, as it uses internally a.replace()

This breaks the code for transpiled es6 to es5 on IE11 (or example with the <iron-image> element).
It's also not in sync with the behaviour of modern browsers where
new URL(undefined, 'https://example.com') == 'https://example.com/undefined'
new URL(null, 'https://example.com') == 'https://example.com/null'

Quick fix would be to use in the polyfill:
(''+a).replace()

webcomponents/webcomponentsjs#1039

I'm curious if there's plans to make this a standalone npm/Bower package with a package.json (and bower.json) and license file like: https://github.com/arv/DOM-URL-Polyfill

I ask because @arv's repo says to use this version and the old repo has this project metadata.

I have a project where I'm using this package: https://www.npmjs.com/package/fauxton
When checking it out fresh after not touching a working copy for a few weeks the npm install exits with this error message.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @webcomponents/[email protected] build: gulp npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @webcomponents/[email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?

I tried running in a new folder after clearing my npm cache (which would be the way to reproduce this, I guess):

npm install fauxton

No success. Same error message. It seems there is something wrong with the gulp dependency in this package. Could you please check if you can reproduce this and get back to me as soon as you can.

This repository should have a main html import file that includes the script. This way it can be included in different web components only once.

Let's say I have few web components that uses this repo as a dependency. If I add a <script> tag to each of the components the library will be loaded as many times. However using one import file it will be downloaded only once. Also build scripts will add the library only once to the bundle.

I know the import is still discussed and not implemented in few browsers but it still would help.

Example import file: url.html

<!--
@license
...
-->
<script src="../url/url.js"></script>

var url = new jURL('http://google.com');
assert(url.origin, 'google.com'); // false

With this polyfill, url.origin always returns undefined.

var url = new URL('http://google.com');
assert(url.origin, 'google.com'); // true

Browsers that natively support the URL constructor return the origin property as expected.

All other url-polyfills are using window.document. I needed one without it. This module does it. I currently install it like this:

npm i git+https://github.com/webcomponents/URL.git

However I'm not sure if this is the right repo to install from. Would you recommend somewhere else? Like an upload npm package?

For example

(new URL("/some/path", "http://user:[email protected]:21/smth").href;

returns http://example.org:21/some/path, instead of http://user:[email protected]:21/some/path (given by native URL API in Chrome, and Firefox)

So it looks like @annevk declared his repository dead in f56b8a5.

With sign-off from @annevk, @notwaldorf and the powers vested in me as a @github employee, I can turn webcomponents/URL into the "network root" so it says @annevk's repo is now a fork of @webcomponents.

What do you think?

The WHATWG spec offers a URLSearchParams constructor, which allows a more programatic approach to setting/getting URL search params (i.e the stuff after ?).

In addition, every instance of URL also has an instance of URLSearchParams under <url>.searchParams. <url>.search becomes a getter that calls '?' + this.searchParams.toString(). When search is set, the behaviour seems to be that it clears the searchParams value and parses the setter value as a new URLSearchParams value.

URLSearchParams is relatively easy to produce, essentially it's just a Map. Here's my naive implementation of this:

if (!window.URLSearchParams) {
    window.URLSearchParams = function URLSearchParams() {
        this.params = {};
    };
    window.URLSearchParams.prototype = {
        set: function (key, value) {
            this.params[key] = value;
        },
        get: function (key) {
            return this.params[key];
        },
        has: function (key) {
            return this.params.hasOwnProperty(key);
        },
        delete: function (key) {
            delete this.params[key];
        },
        toString: function () {
            return Object.keys(this.params).map(function (param) {
                return param + '=' + encodeURIComponent(this.params[param]);
            }, this).join('&');
        },
    };
}

URL is a bit trickier, here's what I have:

if (!(new URL(location)).searchParams) {
    (function () {
        function parseSearch(url, value) {
            value.match(/([^?=&]+)(=([^&]*))?/g).forEach(function (value) {
                value = value.split('=');
                this.searchParams.set(value[0], value[1]);
            }, url);
        }

        Object.defineProperty(URL.prototype, 'searchParams', {
            get: function () {
                if (!this._searchParams) {
                    Object.defineProperty(this, '_searchParams', {
                        enumerable: false,
                        configurable: true,
                        value: new window.URLSearchParams()
                    });
                    if (this.search.length > 1) {
                        parseSearch(this, this.search);
                    }
                }
                delete this.search;
                return this._searchParams;
            },
            set: function (value) {
                delete this.search;
                this._searchParams = value;
            },
            enumerable: true,
            configurable: false,
        });

        URL.prototype.toString = function () {
            var url = this.protocol + '//' + (this.username || '');
            if (this.password) {
                url += ':' + this.password;
            }
            if (this.username || this.password) {
                url += '@';
            }
            url += this.host;
            url += this.pathname;
            if (this.search.length > 1) {
                url += this.search;
            }
            url += this.hash || '';
            return url;
        };

        Object.defineProperty(URL.prototype, 'search', {
            get: function () {
                return '?' + this.searchParams;
            },
            set: function (value) {
                console.log('setting search', value);
                if (value[0] === '?') {
                    value = value.substr(1);
                }
                this.searchParams = new window.URLSearchParams();
                parseSearch(this, value);
            },
            enumerable: true,
            configurable: false,
        });

    }());
}

The builtin URL sometimes has some statics on it:

http://dev.w3.org/2006/webapi/FileAPI/#URL-object

We need to add those in case there is a webkitURL and msURL etc.