Make sure ce-es5 bundle fires WebComponentsReady

Don't rely on HTMLImports

Also, minify bundles with babili

entrypoints/webcomponents-ce-es5-index.js

@@ -16,5 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 import '../bower_components/custom-elements/src/native-shim.js'
 
-import '../src/post-polyfill.js'
 import '../src/unresolved.js'
+
+requestAnimationFrame(() => {
+  window.dispatchEvent(new CustomEvent('WebComponentsReady'));
+});

gulpfile.js

@@ -23,8 +23,9 @@ const del = require('del');
 const bower = require('bower');
 const runseq = require('run-sequence');
 const closure = require('google-closure-compiler').gulp();
+const babel = require('rollup-plugin-babel');
 
-function debugify(sourceName, fileName, needsContext) {
+function debugify(sourceName, fileName, extraRollupOptions) {
   if (!fileName)
     fileName = sourceName;
 
@@ -34,11 +35,7 @@ function debugify(sourceName, fileName, needsContext) {
     moduleName: 'webcomponentsjs'
   };
 
-  // The es6-promise polyfill needs to set the correct context.
-  // See https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
-  if (needsContext) {
-    options.context = 'window';
-  }
+  Object.assign(options, extraRollupOptions);
 
   return rollup(options)
   .pipe(source(`${sourceName}-index.js`), 'entrypoints')
@@ -120,7 +117,10 @@ gulp.task('debugify-hi-sd-ce', () => {
 });
 
 gulp.task('debugify-hi-sd-ce-pf', () => {
-  return debugify('webcomponents-hi-sd-ce-pf', 'webcomponents-lite', true)
+  // The es6-promise polyfill needs to set the correct context.
+  // See https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
+  const extraOptions = {context: 'window'};
+  return debugify('webcomponents-hi-sd-ce-pf', 'webcomponents-lite', extraOptions)
 });
 
 gulp.task('debugify-sd-ce', () => {
@@ -147,12 +147,27 @@ gulp.task('closurify-sd-ce', () => {
   return closurify('webcomponents-sd-ce')
 });
 
+function singleLicenseComment() {
+  let hasLicense = false;
+  return (comment) => {
+    if (hasLicense) {
+      return false;
+    }
+    return hasLicense = /@license/.test(comment);
+  }
+}
+
+const babelOptions = {
+  presets: 'babili',
+  shouldPrintComment: singleLicenseComment()
+};
+
 gulp.task('debugify-ce-es5', () => {
-  return debugify('webcomponents-ce-es5');
+  return debugify('webcomponents-ce-es5', '', {plugins: [babel(babelOptions)]});
 });
 
 gulp.task('debugify-hi-ce-es5', () => {
-  return debugify('webcomponents-hi-ce-es5');
+  return debugify('webcomponents-hi-ce-es5', '', {plugins: [babel(babelOptions)]});
 })
 
 gulp.task('refresh-bower', () => {

package.json

@@ -21,6 +21,7 @@
   },
   "homepage": "http://webcomponents.org",
   "devDependencies": {
+    "babel-preset-babili": "0.0.12",
     "bower": "^1.8.0",
     "del": "^2.2.2",
     "eslint": "^3.16.1",
@@ -28,6 +29,7 @@
     "gulp": "^3.8.8",
     "gulp-rename": "^1.2.2",
     "gulp-sourcemaps": "^2.4.1",
+    "rollup-plugin-babel": "^2.7.1",
     "rollup-stream": "^1.14.0",
     "run-sequence": "^1.2.2",
     "vinyl-buffer": "^1.0.0",

webcomponents-ce-es5.js

@@ -1,254 +1,9 @@
 (function () {
 'use strict';
 
-/**
- * @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
- */
+(()=>{'use strict';if(!window.customElements)return;const a=window.HTMLElement,b=window.customElements.define,c=window.customElements.get,d=new Map,e=new Map;let f=!1,g=!1;window.HTMLElement=function(){if(!f){const h=d.get(this.constructor),i=c.call(window.customElements,h);g=!0;const j=new i;return j}f=!1;},window.HTMLElement.prototype=a.prototype,window.customElements.define=(h,i)=>{const j=i.prototype,k=class extends a{constructor(){super(),Object.setPrototypeOf(this,j),g||(f=!0,i.call(this)),g=!1;}},l=k.prototype;k.observedAttributes=i.observedAttributes,l.connectedCallback=j.connectedCallback,l.disconnectedCallback=j.disconnectedCallback,l.attributeChangedCallback=j.attributeChangedCallback,l.adoptedCallback=j.adoptedCallback,d.set(i,h),e.set(h,i),b.call(window.customElements,h,k);},window.customElements.get=(h)=>e.get(h);})();
 
-/**
- * This shim allows elements written in, or compiled to, ES5 to work on native
- * implementations of Custom Elements.
- *
- * ES5-style classes don't work with native Custom Elements because the
- * HTMLElement constructor uses the value of `new.target` to look up the custom
- * element definition for the currently called constructor. `new.target` is only
- * set when `new` is called and is only propagated via super() calls. super()
- * is not emulatable in ES5. The pattern of `SuperClass.call(this)`` only works
- * when extending other ES5-style classes, and does not propagate `new.target`.
- *
- * This shim allows the native HTMLElement constructor to work by generating and
- * registering a stand-in class instead of the users custom element class. This
- * stand-in class's constructor has an actual call to super().
- * `customElements.define()` and `customElements.get()` are both overridden to
- * hide this stand-in class from users.
- *
- * In order to create instance of the user-defined class, rather than the stand
- * in, the stand-in's constructor swizzles its instances prototype and invokes
- * the user-defined constructor. When the user-defined constructor is called
- * directly it creates an instance of the stand-in class to get a real extension
- * of HTMLElement and returns that.
- *
- * There are two important constructors: A patched HTMLElement constructor, and
- * the StandInElement constructor. They both will be called to create an element
- * but which is called first depends on whether the browser creates the element
- * or the user-defined constructor is called directly. The variables
- * `browserConstruction` and `userConstruction` control the flow between the
- * two constructors.
- *
- * This shim should be better than forcing the polyfill because:
- *   1. It's smaller
- *   2. All reaction timings are the same as native (mostly synchronous)
- *   3. All reaction triggering DOM operations are automatically supported
- *
- * There are some restrictions and requirements on ES5 constructors:
- *   1. All constructors in a inheritance hierarchy must be ES5-style, so that
- *      they can be called with Function.call(). This effectively means that the
- *      whole application must be compiled to ES5.
- *   2. Constructors must return the value of the emulated super() call. Like
- *      `return SuperClass.call(this)`
- *   3. The `this` reference should not be used before the emulated super() call
- *      just like `this` is illegal to use before super() in ES6.
- *   4. Constructors should not create other custom elements before the emulated
- *      super() call. This is the same restriction as with native custom
- *      elements.
- *
- *  Compiling valid class-based custom elements to ES5 will satisfy these
- *  requirements with the latest version of popular transpilers.
- */
-(() => {
-  'use strict';
-
-  // Do nothing if `customElements` does not exist.
-  if (!window.customElements) return;
-
-  const NativeHTMLElement = window.HTMLElement;
-  const nativeDefine = window.customElements.define;
-  const nativeGet = window.customElements.get;
-
-  /**
-   * Map of user-provided constructors to tag names.
-   *
-   * @type {Map<Function, string>}
-   */
-  const tagnameByConstructor = new Map();
-
-  /**
-   * Map of tag names to user-provided constructors.
-   *
-   * @type {Map<string, Function>}
-   */
-  const constructorByTagname = new Map();
-
-
-  /**
-   * Whether the constructors are being called by a browser process, ie parsing
-   * or createElement.
-   */
-  let browserConstruction = false;
-
-  /**
-   * Whether the constructors are being called by a user-space process, ie
-   * calling an element constructor.
-   */
-  let userConstruction = false;
-
-  window.HTMLElement = function() {
-    if (!browserConstruction) {
-      const tagname = tagnameByConstructor.get(this.constructor);
-      const fakeClass = nativeGet.call(window.customElements, tagname);
-
-      // Make sure that the fake constructor doesn't call back to this constructor
-      userConstruction = true;
-      const instance = new (fakeClass)();
-      return instance;
-    }
-    // Else do nothing. This will be reached by ES5-style classes doing
-    // HTMLElement.call() during initialization
-    browserConstruction = false;
-  };
-  // By setting the patched HTMLElement's prototype property to the native
-  // HTMLElement's prototype we make sure that:
-  //     document.createElement('a') instanceof HTMLElement
-  // works because instanceof uses HTMLElement.prototype, which is on the
-  // ptototype chain of built-in elements.
-  window.HTMLElement.prototype = NativeHTMLElement.prototype;
-
-  window.customElements.define = (tagname, elementClass) => {
-    const elementProto = elementClass.prototype;
-    const StandInElement = class extends NativeHTMLElement {
-      constructor() {
-        // Call the native HTMLElement constructor, this gives us the
-        // under-construction instance as `this`:
-        super();
-
-        // The prototype will be wrong up because the browser used our fake
-        // class, so fix it:
-        Object.setPrototypeOf(this, elementProto);
-
-        if (!userConstruction) {
-          // Make sure that user-defined constructor bottom's out to a do-nothing
-          // HTMLElement() call
-          browserConstruction = true;
-          // Call the user-defined constructor on our instance:
-          elementClass.call(this);
-        }
-        userConstruction = false;
-      }
-    };
-    const standInProto = StandInElement.prototype;
-    StandInElement.observedAttributes = elementClass.observedAttributes;
-    standInProto.connectedCallback = elementProto.connectedCallback;
-    standInProto.disconnectedCallback = elementProto.disconnectedCallback;
-    standInProto.attributeChangedCallback = elementProto.attributeChangedCallback;
-    standInProto.adoptedCallback = elementProto.adoptedCallback;
-
-    tagnameByConstructor.set(elementClass, tagname);
-    constructorByTagname.set(tagname, elementClass);
-    nativeDefine.call(window.customElements, tagname, StandInElement);
-  };
-
-  window.customElements.get = (tagname) => constructorByTagname.get(tagname);
-
-})();
-
-/**
- * @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
- */
-
-(function() {
-
-  'use strict';
-
-  var customElements = window['customElements'];
-  var HTMLImports = window['HTMLImports'];
-
-  if (customElements && customElements['polyfillWrapFlushCallback']) {
-    // Here we ensure that the public `HTMLImports.whenReady`
-    // always comes *after* custom elements have upgraded.
-    var flushCallback;
-    var runAndClearCallback = function runAndClearCallback() {
-      if (flushCallback) {
-        var cb = flushCallback;
-        flushCallback = null;
-        cb();
-        return true;
-      }
-    };
-    var origWhenReady = HTMLImports['whenReady'];
-    customElements['polyfillWrapFlushCallback'](function(cb) {
-      flushCallback = cb;
-      origWhenReady(runAndClearCallback);
-    });
-
-    HTMLImports['whenReady'] = function(cb) {
-      origWhenReady(function() {
-        // custom element code may add dynamic imports
-        // to match processing of native custom elements before
-        // domContentLoaded, we wait for these imports to resolve first.
-        if (runAndClearCallback()) {
-          HTMLImports['whenReady'](cb);
-        } else {
-          cb();
-        }
-      });
-    };
-
-  }
-
-  HTMLImports['whenReady'](function() {
-    requestAnimationFrame(function() {
-      window.dispatchEvent(new CustomEvent('WebComponentsReady'));
-    });
-  });
-
-})();
-
-/**
- * @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
- */
-
-(function() {
-  'use strict';
-  // It's desireable to provide a default stylesheet
-  // that's convenient for styling unresolved elements, but
-  // it's cumbersome to have to include this manually in every page.
-  // It would make sense to put inside some HTMLImport but
-  // the HTMLImports polyfill does not allow loading of stylesheets
-  // that block rendering. Therefore this injection is tolerated here.
-  //
-  // NOTE: position: relative fixes IE's failure to inherit opacity
-  // when a child is not statically positioned.
-  var style = document.createElement('style');
-  style.textContent = ''
-      + 'body {'
-      + 'transition: opacity ease-in 0.2s;'
-      + ' } \n'
-      + 'body[unresolved] {'
-      + 'opacity: 0; display: block; overflow: hidden; position: relative;'
-      + ' } \n'
-      ;
-  var head = document.querySelector('head');
-  head.insertBefore(style, head.firstChild);
-
-})();
+(function(){'use strict';var a=document.createElement('style');a.textContent='body {transition: opacity ease-in 0.2s; } \\nbody[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } \\n';var b=document.querySelector('head');b.insertBefore(a,b.firstChild);})();
 
 /**
 @license
@@ -258,10 +13,6 @@ 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: Custom Elements ES5 Shim
- * Used in: Chrome
- */
+*/requestAnimationFrame(()=>{window.dispatchEvent(new CustomEvent('WebComponentsReady'));});
 
 }());