Major UIKit Rendering Performance Improvements, Logo Customization, & LitElement Migration

packages/uikit-polyfills/index.js

@@ -0,0 +1,56 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+/*
+ * Polyfills loaded: HTML Imports, Custom Elements, platform polyfills, template
+ * Used in: IE 11
+ */
+
+import 'regenerator-runtime/runtime';
+import '@webcomponents/template/template.js';
+import 'core-js/modules/es.array.find';
+
+import 'element-closest';
+import 'core-js/modules/es.string.includes';
+import 'core-js/modules/es.array.includes';
+// import 'core-js/modules/es.array.from';
+// import 'core-js/modules/es.object.assign';
+
+import './platform/remove-polyfill.js';
+import './platform/es6-misc';
+import './platform/custom-event';
+import './platform/promise';
+import './platform/symbol';
+import './platform/flag-parser';
+// import '@webcomponents/custom-elements/src/custom-elements.js';
+
+import '@webcomponents/custom-elements/src/custom-elements.js';
+
+// import 'document-register-element';
+// by default, the second argument is 'auto'
+// but it could be also 'force'
+// which ignores feature detection and force
+// the polyfill version of CustomElements
+// installCE(global, 'auto');
+
+import '@webcomponents/url/url.js';
+import './platform/baseuri';
+import './platform/unresolved';
+
+import 'core-js/modules/es.array.for-each';
+
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}
+
+// import 'core-js/modules/es.string.trim-end';
+// import 'core-js/modules/es.string.trim-start';
+// import 'core-js/modules/es.string.code-point-at';
+// import 'core-js/modules/es.number.is-nan';

packages/uikit-polyfills/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@pattern-lab/uikit-polyfills",
+  "version": "0.0.0",
+  "description": "Web Component Polyfills used in Pattern Lab's UIKit",
+  "main": "index.js",
+  "author": "Salem Ghoweri <me@salemghoweri.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@ungap/weakset": "^0.1.5",
+    "@webcomponents/custom-elements": "^1.3.0",
+    "@webcomponents/shadycss": "^1.9.2",
+    "@webcomponents/shadydom": "^1.6.1",
+    "@webcomponents/template": "^1.4.1",
+    "@webcomponents/url": "^0.7.4",
+    "@webcomponents/webcomponentsjs": "^2.3.0",
+    "core-js": "^3.3.6",
+    "custom-event-polyfill": "^1.0.7",
+    "document-register-element": "^1.14.3",
+    "es6-promise": "^4.2.8",
+    "get-own-property-symbols": "^0.9.3",
+    "promise-polyfill": "^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/uikit-polyfills/platform/baseuri.js

@@ -0,0 +1,39 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+export {};
+
+// Implement Node.baseURI for IE 11
+// adapted from
+// https://github.com/webcomponents/html-imports/blob/v1.2.0/src/html-imports.js
+
+/** @type {Object|undefined} */
+const nativeBaseURI = Object.getOwnPropertyDescriptor(
+  Node.prototype,
+  'baseURI'
+);
+if (!nativeBaseURI) {
+  Object.defineProperty(Node.prototype, 'baseURI', {
+    /**
+     * @this {Node}
+     * @return {string}
+     */
+    get() {
+      // this.ownerDocument is `null` for documents
+      const doc = this.ownerDocument || this;
+      const base = /** @type {HTMLBaseElement} */ (doc.querySelector(
+        'base[href]'
+      ));
+      return (base && base.href) || window.location.href;
+    },
+    configurable: true,
+    enumerable: true,
+  });
+}

packages/uikit-polyfills/platform/custom-event.js

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+(function() {
+  // defaultPrevented is broken in IE.
+  // https://connect.microsoft.com/IE/feedback/details/790389/event-defaultprevented-returns-false-after-preventdefault-was-called
+  const workingDefaultPrevented = (function() {
+    const e = document.createEvent('Event');
+    e.initEvent('foo', true, true);
+    e.preventDefault();
+    return e.defaultPrevented;
+  })();
+
+  if (!workingDefaultPrevented) {
+    const origPreventDefault = Event.prototype.preventDefault;
+    Event.prototype.preventDefault = function() {
+      if (!this.cancelable) {
+        return;
+      }
+
+      origPreventDefault.call(this);
+
+      Object.defineProperty(this, 'defaultPrevented', {
+        get() {
+          return true;
+        },
+        configurable: true,
+      });
+    };
+  }
+
+  const isIE = /Trident/.test(navigator.userAgent);
+
+  // Event constructor shim
+  if (!window.Event || (isIE && typeof window.Event !== 'function')) {
+    const origEvent = window.Event;
+    /**
+     * @param {!string} inType
+     * @param {?(EventInit)=} params
+     */
+    window.Event = function(inType, params) {
+      params = params || {};
+      const e = document.createEvent('Event');
+      e.initEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable));
+      return e;
+    };
+    if (origEvent) {
+      for (const i in origEvent) {
+        window.Event[i] = origEvent[i];
+      }
+      window.Event.prototype = origEvent.prototype;
+    }
+  }
+
+  // CustomEvent constructor shim
+  if (
+    !window.CustomEvent ||
+    (isIE && typeof window.CustomEvent !== 'function')
+  ) {
+    /**
+     * @template T
+     * @param {!string} inType
+     * @param {?(CustomEventInit<T>)=} params
+     */
+    window.CustomEvent = function(inType, params) {
+      params = params || {};
+      const e = document.createEvent('CustomEvent');
+      e.initCustomEvent(
+        inType,
+        Boolean(params.bubbles),
+        Boolean(params.cancelable),
+        params.detail
+      );
+      return e;
+    };
+    window.CustomEvent.prototype = window.Event.prototype;
+  }
+
+  if (!window.MouseEvent || (isIE && typeof window.MouseEvent !== 'function')) {
+    const origMouseEvent = window.MouseEvent;
+    /**
+     *
+     * @param {!string} inType
+     * @param {?(MouseEventInit)=} params
+     */
+    window.MouseEvent = function(inType, params) {
+      params = params || {};
+      const e = document.createEvent('MouseEvent');
+      e.initMouseEvent(
+        inType,
+        Boolean(params.bubbles),
+        Boolean(params.cancelable),
+        params.view || window,
+        params.detail,
+        params.screenX,
+        params.screenY,
+        params.clientX,
+        params.clientY,
+        params.ctrlKey,
+        params.altKey,
+        params.shiftKey,
+        params.metaKey,
+        params.button,
+        params.relatedTarget
+      );
+      return e;
+    };
+    if (origMouseEvent) {
+      for (const j in origMouseEvent) {
+        window.MouseEvent[j] = origMouseEvent[j];
+      }
+    }
+    window.MouseEvent.prototype = origMouseEvent.prototype;
+  }
+})();

packages/uikit-polyfills/platform/es6-misc.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+(function() {
+  if (!Array.from) {
+    Array.from = function(object) {
+      return [].slice.call(/** @type {IArrayLike} */ (object));
+    };
+  }
+
+  if (!Object.assign) {
+    const assign = function(target, source) {
+      const n$ = Object.getOwnPropertyNames(source);
+      for (var i = 0, p; i < n$.length; i++) {
+        p = n$[i];
+        target[p] = source[p];
+      }
+    };
+
+    Object.assign = function(target) {
+      const args = [].slice.call(arguments, 1);
+      for (var i = 0, s; i < args.length; i++) {
+        s = args[i];
+        if (s) {
+          assign(target, s);
+        }
+      }
+      return target;
+    };
+  }
+})();

packages/uikit-polyfills/platform/flag-parser.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-restricted-globals */
+/**
+ * @license
+ * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+export {};
+
+// Establish scope.
+window.WebComponents = window.WebComponents || { flags: {} };
+
+// loading script
+const file = 'webcomponents-bundle';
+const script = document.querySelector(`script[src*="${file}"]`);
+const flagMatcher = /wc-(.+)/;
+
+// Flags. Convert url arguments to flags
+const flags = {};
+if (!flags.noOpts) {
+  // from url
+  location.search
+    .slice(1)
+    .split('&')
+    .forEach(option => {
+      const parts = option.split('=');
+      let match;
+      if (parts[0] && (match = parts[0].match(flagMatcher))) {
+        flags[match[1]] = parts[1] || true;
+      }
+    });
+  // from script
+  if (script) {
+    for (let i = 0, a; (a = script.attributes[i]); i++) {
+      if (a.name !== 'src') {
+        flags[a.name] = a.value || true;
+      }
+    }
+  }
+  // log flags
+  if (flags.log && flags.log.split) {
+    const parts = flags.log.split(',');
+    flags.log = {};
+    parts.forEach(f => {
+      flags.log[f] = true;
+    });
+  } else {
+    flags.log = {};
+  }
+}
+
+// exports
+window.WebComponents.flags = flags;
+const forceShady = flags.shadydom;
+if (forceShady) {
+  window.ShadyDOM = window.ShadyDOM || {};
+  window.ShadyDOM.force = forceShady;
+  const { noPatch } = flags;
+  window.ShadyDOM.noPatch = noPatch === 'true' ? true : noPatch;
+}
+
+const forceCE = flags.register || flags.ce;
+if (forceCE && window.customElements) {
+  window.customElements.forcePolyfill = forceCE;
+}