Merge pull request #661 from webcomponents/gulp-all-the-things

Gulp all the things

.travis.yml

@@ -12,7 +12,8 @@ addons:
 script:
 - npm install -g bower
 - bower install
-- xvfb-run wct
+- xvfb-run wct -l chrome
+- xvfb-run wct -l firefox
 - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'windows 10/microsoftedge@14' -s 'windows 8.1/internet explorer@11' -s 'os x 10.11/safari@10' -s 'os x 10.11/safari@9'; fi
 env:
   global:

README.md

@@ -3,40 +3,36 @@ webcomponents.js
 
 [![Build Status](https://travis-ci.org/webcomponents/webcomponentsjs.svg?branch=master)](https://travis-ci.org/webcomponents/webcomponentsjs)
 
-A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs:
+A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs.
 
-**Custom Elements**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/)).
-
-**HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([spec](https://w3c.github.io/webcomponents/spec/imports/)).
-
-**Shadow DOM**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/)).
+- **Custom Elements**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/)).
+- **HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([spec](https://w3c.github.io/webcomponents/spec/imports/)).
+- **Shadow DOM**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/)).
 
 ## Releases
 
-Pre-built (concatenated & minified) versions of the polyfills are maintained in the [tagged versions](https://github.com/webcomponents/webcomponentsjs/releases) of this repo. There are two variants:
-
-`webcomponents.js` includes all of the polyfills.
-
-`webcomponents-lite.js` includes all polyfills except for shadow DOM.
+Pre-built (concatenated & minified) versions of the polyfills are maintained in the [tagged versions](https://github.com/webcomponents/webcomponentsjs/releases) of this repo. There are several variants:
 
+- `webcomponents-lite.js` includes all of the polyfills.
+- `webcomponents-loader.js` is a custom loader that dynamically load a minified polyfill
+bundle, using feature detection. The bundles that can be loaded are:
+  - `webcomponents-hi` -- HTML Imports (needed by Safari Tech Preview)
+  - `webcomponents-hi-ce` -- HTML Imports and Custom Elements (needed by Safari 10)
+  - `webcomponents-hi-ce-sd` -- HTML Imports, Custom Elements and Shady DOM/CSS (needed by Safari 9, Firefox, Edge)
+  - `webcomponents-lite` -- HTML Imports, Custom Elements, Shady DOM/CSS and generic platform polyfills (such as URL, Template, ES6 Promise, Constructable events, etc.) (needed by Internet Explorer 11)
 
 ## Browser Support
 
 Our polyfills are intended to work in the latest versions of evergreen browsers. See below
 for our complete browser support matrix:
 
-| Polyfill   | IE10 | IE11+ | Chrome* | Firefox* | Safari 7+* | Chrome Android* | Mobile Safari* |
-| ---------- |:----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:|
-| Custom Elements | ~ | ✓ | ✓ | ✓ | ✓ | ✓| ✓ |
-| HTML Imports | ~ | ✓ | ✓ | ✓ | ✓| ✓| ✓ |
-| Shadow DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| Templates | ✓ | ✓ | ✓ | ✓| ✓ | ✓ | ✓ |
+| Polyfill   | IE11+ | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobile Safari* |
+| ---------- |:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:|
+| Custom Elements | ✓ | ✓ | ✓ | ✓ | ✓| ✓ |
+| HTML Imports |  ✓ | ✓ | ✓ | ✓| ✓| ✓ |
+| Shady CSS/DOM |  ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
 
-
-*Indicates the current version of the browser
-
-~Indicates support may be flaky. If using Custom Elements or HTML Imports with Shadow DOM,
-you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.
+\*Indicates the current version of the browser
 
 The polyfills may work in older browsers, however require additional polyfills (such as classList)
 to be used. We cannot guarantee support for browsers outside of our compatibility matrix.
@@ -44,7 +40,7 @@ to be used. We cannot guarantee support for browsers outside of our compatibilit
 
 ### Manually Building
 
-If you wish to build the polyfills yourself, you'll need `node` and `gulp` on your system:
+If you wish to build the polyfills yourself, you'll need `node` and `npm` on your system:
 
  * install [node.js](http://nodejs.org/) using the instructions on their website
  * use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp`
@@ -53,10 +49,11 @@ Now you are ready to build the polyfills with:
 
     # install dependencies
     npm install
+    bower install
     # build
     gulp build
 
-The builds will be placed into the `dist/` directory.
+The builds will be placed into the root directory.
 
 ## Contribute
 
@@ -74,9 +71,9 @@ Copyright (c) 2015 The Polymer Authors. All rights reserved.
 
 Under native HTML Imports, `<script>` tags in the main document block the loading of such imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded.
 
-The webcomponents.js and webcomponents-lite.js polyfills parse element definitions and handle their upgrade asynchronously. If prematurely fetching the element from the DOM before it has an opportunity to upgrade, you'll be working with an `HTMLUnknownElement`.
+The `webcomponents-lite.js` polyfill parse element definitions and handle their upgrade asynchronously. If prematurely fetching the element from the DOM before it has an opportunity to upgrade, you'll be working with an `HTMLUnknownElement`.
 
-For these situations (or when you need an approximate replacement for the Polymer 0.5 `polymer-ready` behavior), you can use the `WebComponentsReady` event as a signal before interacting with the element. The criteria for this event to fire is all Custom Elements with definitions registered by the time HTML Imports available at load time have loaded have upgraded.
+For these situations, you can use the `WebComponentsReady` event as a signal before interacting with the element. The criteria for this event to fire is all Custom Elements with definitions registered by the time HTML Imports available at load time have loaded have upgraded.
 
 ```js
 window.addEventListener('WebComponentsReady', function(e) {

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "webcomponentsjs",
   "main": "webcomponents.js",
-  "version": "0.7.22",
+  "version": "1.0.0",
   "homepage": "http://webcomponents.org",
   "authors": [
     "The Polymer Authors"
@@ -13,19 +13,17 @@
   "keywords": [
     "webcomponents"
   ],
-  "dependencies": {
+  "license": "BSD",
+  "ignore": [],
+  "devDependencies": {
+    "web-component-tester": "^5",
     "custom-elements": "webcomponents/custom-elements#master",
     "es6-promise": "stefanpenner/es6-promise#^4.0.0",
-    "html-imports": "webcomponents/html-imports#v0",
+    "html-imports": "webcomponents/html-imports#master",
     "shadydom": "webcomponents/shadydom#master",
     "shadycss": "webcomponents/shadycss#master",
     "template": "webcomponents/template#master",
     "URL": "webcomponents/URL#master",
     "webcomponents-platform": "webcomponents/webcomponents-platform#master"
-  },
-  "license": "BSD",
-  "ignore": [],
-  "devDependencies": {
-    "web-component-tester": "^4.0.1"
   }
 }

entrypoints/webcomponents-hi-ce-index.js

@@ -0,0 +1,26 @@
+/**
+@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
+*/
+'use strict';
+
+/*
+ * Polyfills loaded: HTML Imports, Custom Elements
+ * Used in: Safari 10, Firefox once SD is shipped
+ */
+
+import '../bower_components/html-imports/src/html-imports.js'
+import '../bower_components/custom-elements/custom-elements.min.js'
+
+// TODO(notwaldorf): Remove after this is addressed:
+// https://github.com/webcomponents/shadycss/issues/46
+import '../bower_components/shadycss/src/ShadyCSS.js'
+import '../bower_components/shadycss/src/custom-style-element.js'
+
+import '../src/post-polyfill.js'
+import '../src/unresolved.js'

entrypoints/webcomponents-hi-index.js

@@ -0,0 +1,25 @@
+/**
+@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
+*/
+'use strict';
+
+/*
+ * Polyfills loaded: HTML Imports
+ * Used in: Safari Tech Preview
+ */
+
+import '../bower_components/html-imports/src/html-imports.js'
+
+// TODO(notwaldorf): Remove after this is addressed:
+// https://github.com/webcomponents/shadycss/issues/46
+import '../bower_components/shadycss/src/ShadyCSS.js'
+import '../bower_components/shadycss/src/custom-style-element.js'
+
+import '../src/post-polyfill.js'
+import '../src/unresolved.js'

entrypoints/webcomponents-hi-sd-ce-index.js

@@ -0,0 +1,23 @@
+/**
+@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
+*/
+'use strict';
+
+/*
+ * Polyfills loaded: HTML Imports, Custom Elements, Shady DOM/Shady CSS
+ * Used in: Safari 9, Firefox, Edge
+ */
+
+import '../bower_components/html-imports/src/html-imports.js'
+import '../bower_components/shadydom/shadydom.min.js'
+import '../bower_components/custom-elements/custom-elements.min.js'
+import '../bower_components/shadycss/src/ShadyCSS.js'
+import '../bower_components/shadycss/src/custom-style-element.js'
+import '../src/post-polyfill.js'
+import '../src/unresolved.js'

entrypoints/webcomponents-hi-sd-ce-pf-index.js

@@ -0,0 +1,28 @@
+/**
+@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
+*/
+'use strict';
+
+/*
+ * Polyfills loaded: HTML Imports, Custom Elements, Shady DOM/Shady CSS, platform polyfills (URL/template)
+ * Used in: IE 11
+ */
+
+import '../bower_components/webcomponents-platform/webcomponents-platform.js'
+import '../bower_components/URL/url.js'
+import '../bower_components/template/template.js'
+import '../bower_components/es6-promise/dist/es6-promise.auto.min.js'
+import '../bower_components/html-imports/src/html-imports.js'
+import '../src/pre-polyfill.js'
+import '../bower_components/shadydom/shadydom.min.js'
+import '../bower_components/custom-elements/custom-elements.min.js'
+import '../bower_components/shadycss/src/ShadyCSS.js'
+import '../bower_components/shadycss/src/custom-style-element.js'
+import '../src/post-polyfill.js'
+import '../src/unresolved.js'

entrypoints/webcomponents-none-index.js

@@ -0,0 +1,22 @@
+/**
+@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
+*/
+'use strict';
+
+/*
+ * Polyfills loaded: None
+ * Used in: Chrome
+ */
+
+// TODO: This needs to not exist at all.
+
+// TODO(notwaldorf): Remove after this is addressed:
+// https://github.com/webcomponents/shadycss/issues/46
+import '../bower_components/shadycss/src/ShadyCSS.js'
+import '../bower_components/shadycss/src/custom-style-element.js'

gulpfile.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+ * 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
@@ -8,130 +8,92 @@
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-// jshint node: true
-
 'use strict';
 
-var audit = require('gulp-audit');
-var concat = require('gulp-concat');
-var exec = require('child_process').exec;
-var fs = require('fs');
-var gulp = require('gulp');
-var header = require('gulp-header');
-var path = require('path');
-var rename = require('gulp-rename');
-var runseq = require('run-sequence');
-var uglify = require('gulp-uglify');
+const gulp = require('gulp');
+const sourcemaps = require('gulp-sourcemaps');
+const babel = require('gulp-babel');
+const buffer = require('vinyl-buffer');
+const rename = require('gulp-rename');
+const rollup = require('rollup-stream');
+const source = require('vinyl-source-stream');
+const del = require('del');
+const bower = require('bower');
+const runseq = require('run-sequence');
 
-// init tests with gulp
-require('web-component-tester').gulp.init(gulp);
-
-var isRelease = process.env.RELEASE !== undefined;
-
-var banner = fs.readFileSync('banner.txt', 'utf8');
-
-var pkg;
-
-function defineBuildTask(name, manifest) {
-  (function() {
-
-    manifest = manifest || './src/' + name + '/build.json';
-    var output = name;
-    var list = readManifest(manifest);
-    gulp.task(name + '-debug', ['version'], function() {
-      return gulp.src(list)
-      .pipe(concat(output + '.js'))
-      .pipe(uglify({
-        mangle: false,
-        compress: false,
-        output: {
-          beautify: true,
-          indent_level: 2
-        }
-      }))
-      .pipe(header(banner, {pkg: pkg}))
-      .pipe(gulp.dest('dist/'))
-      ;
-    });
-
-    gulp.task(name, ['version', name + '-debug'], function() {
-      return gulp.src(list)
-      .pipe(concat(output + '.min.js'))
-      .pipe(uglify())
-      .pipe(header(banner, {pkg: pkg}))
-      .pipe(gulp.dest('dist/'))
-      ;
-    });
-
-  })();
-}
-
-function readJSON(filename) {
-  var blob = fs.readFileSync(filename, 'utf8');
-  return JSON.parse(blob);
-}
-
-gulp.task('audit', function() {
-  return gulp.src('dist/*.js')
-  .pipe(audit('build.log', {repos:['.']}))
-  .pipe(gulp.dest('dist/'));
-});
-
-gulp.task('version', function(cb) {
-  pkg = require('./package.json');
-  var cmd = ['git', 'rev-parse', '--short', 'HEAD'].join(' ');
-  if (!isRelease) {
-    exec(cmd, function(err, stdout, stderr) {
-      if (err) {
-        return cb(err);
-      }
-      if (stdout) {
-        stdout = stdout.trim();
-      }
-      pkg.version = pkg.version + '-' + stdout;
-      cb();
-    });
-  } else {
-    cb();
-  }
-});
-
-function readManifest(filename, modules) {
-  modules = modules || [];
-  var lines = readJSON(filename);
-  var dir = path.dirname(filename);
-  lines.forEach(function(line) {
-    var fullpath = path.join(dir, line);
-    if (line.slice(-5) == '.json') {
-      // recurse
-      modules = modules.concat(readManifest(fullpath, modules));
-    } else {
-      modules.push(fullpath);
+function singleLicenseComment() {
+  let hasLicense = false;
+  return (comment) => {
+    if (hasLicense) {
+      return false;
     }
-  });
-  var tmp = Object.create(null);
-  for (var i = 0; i < modules.length; i++) {
-    tmp[modules[i]] = 1;
+    return hasLicense = /@license/.test(comment);
   }
-  modules = Object.keys(tmp);
-  return modules;
 }
 
-gulp.task('copy-bower', function() {
-  return gulp.src(['bower.json', 'package.json', 'README.md']).pipe(gulp.dest('dist/'));
+const babiliConfig = {
+  presets: ['babili'],
+  shouldPrintComment: singleLicenseComment()
+};
+
+function minify(sourceName, fileName, needsContext) {
+  if (!fileName)
+    fileName = sourceName;
+
+  var options = {
+    entry: './entrypoints/' + sourceName + '-index.js',
+    format: 'iife',
+    moduleName: 'webcomponentsjs',
+    sourceMap: true
+  }
+
+  // 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';
+  };
+
+  return rollup(options)
+  .pipe(source(sourceName +'-index.js'))
+  .pipe(buffer())
+  .pipe(sourcemaps.init({loadMaps: true}))
+  .pipe(babel(babiliConfig))
+  .pipe(rename(fileName + '.js'))
+  .pipe(sourcemaps.write('.'))
+  .pipe(gulp.dest('./'))
+}
+
+gulp.task('minify-none', () => {
+  return minify('webcomponents-none')
 });
 
-defineBuildTask('webcomponents', './src/build.json');
-defineBuildTask('webcomponents-lite', './src/build-lite.json');
-defineBuildTask('HTMLImports');
-
-gulp.task('build', ['webcomponents', 'webcomponents-lite', 'HTMLImports', 'copy-bower']);
-
-gulp.task('release', function(cb) {
-  isRelease = true;
-  runseq('build', 'audit', cb);
+gulp.task('minify-hi', () => {
+  return minify('webcomponents-hi')
 });
 
-gulp.task('default', function(cb) {
-  runseq('build', 'audit', cb);
+gulp.task('minify-hi-ce', () => {
+  return minify('webcomponents-hi-ce')
 });
+
+gulp.task('minify-hi-sd-ce', () => {
+  return minify('webcomponents-hi-sd-ce')
+});
+
+gulp.task('minify-hi-sd-ce-pf', () => {
+  return minify('webcomponents-hi-sd-ce-pf', 'webcomponents-lite', true)
+});
+
+gulp.task('refresh-bower', () => {
+  return del('bower_components').then(() => {
+    let resolve, reject;
+    let p = new Promise((res, rej) => {resolve = res; reject = rej});
+    bower.commands.install().on('end', () => resolve()).on('error', (e) => reject(e));
+    return p;
+  });
+});
+
+gulp.task('default', (cb) => {
+  runseq('refresh-bower', 'build', cb);
+});
+
+gulp.task('build', ['minify-none', 'minify-hi', 'minify-hi-ce', 'minify-hi-sd-ce', 'minify-hi-sd-ce-pf']);

package.json

@@ -21,13 +21,17 @@
   },
   "homepage": "http://webcomponents.org",
   "devDependencies": {
+    "babel-preset-babili": "0.0.9",
+    "bower": "^1.8.0",
+    "del": "^2.2.2",
     "gulp": "^3.8.8",
-    "gulp-audit": "^1.0.0",
-    "gulp-concat": "^2.4.1",
-    "gulp-header": "^1.1.1",
+    "gulp-babel": "^6.1.2",
     "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.0.1",
-    "run-sequence": "^1.0.1",
+    "gulp-sourcemaps": "1.9.0",
+    "rollup-stream": "^1.14.0",
+    "run-sequence": "^1.2.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
     "web-component-tester": "^6.0.0-prerelease.4"
   }
 }

src/build-lite.json

@@ -1,12 +0,0 @@
-[
-  "boot-lite.js",
-  "../html-imports/html-imports.min.js",
-  "../../es6-promise/dist/es6-promise.auto.min.js",
-  "../../custom-elements/custom-elements.min.js",
-  "../../shadydom/shadydom.min.js",
-  "../../shadycss/shadycss.min.js",
-  "../../webcomponents-platform/webcomponents-platform.js",
-  "../../URL/url.js",
-  "../../template/template.js",
-  "unresolved.js"
-]

src/post-polyfill.js

@@ -12,6 +12,32 @@
 
   'use strict';
 
+  if (customElements && customElements.polyfillWrapFlushCallback) {
+    // Here we ensure that the public `HTMLImports.whenReady`
+    // always comes *after* custom elements have upgraded.
+    let flushCallback;
+    function runAndClearCallback() {
+      if (flushCallback) {
+        let cb = flushCallback;
+        flushCallback = null;
+        cb();
+      }
+    }
+    let origWhenReady = HTMLImports.whenReady;
+    customElements.polyfillWrapFlushCallback(function(cb) {
+      flushCallback = cb;
+      origWhenReady(runAndClearCallback);
+    });
+
+    HTMLImports.whenReady = function(cb) {
+      origWhenReady(function() {
+        runAndClearCallback();
+        cb();
+      });
+    }
+
+  }
+
   HTMLImports.whenReady(function() {
     requestAnimationFrame(function() {
       window.dispatchEvent(new CustomEvent('WebComponentsReady'));

src/pre-polyfill.js

@@ -8,10 +8,51 @@
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-(function(scope) {
+(function() {
 
   'use strict';
 
+  // Establish scope.
+  window.WebComponents = window.WebComponents || {flags:{}};
+
+  // loading script
+  var file = 'webcomponents-lite.js';
+  var script = document.querySelector('script[src*="' + file + '"]');
+
+  // Flags. Convert url arguments to flags
+  var flags = {};
+  if (!flags.noOpts) {
+    // from url
+    location.search.slice(1).split('&').forEach(function(option) {
+      var parts = option.split('=');
+      var match;
+      if (parts[0] && (match = parts[0].match(/wc-(.+)/))) {
+        flags[match[1]] = parts[1] || true;
+      }
+    });
+    // from script
+    if (script) {
+      for (var 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) {
+      var parts = flags.log.split(',');
+      flags.log = {};
+      parts.forEach(function(f) {
+        flags.log[f] = true;
+      });
+    } else {
+      flags.log = {};
+    }
+  }
+
+  // exports
+  WebComponents.flags = flags;
+  var scope = window.WebComponents;
   var forceShady = scope.flags.shadydom;
   if (forceShady) {
     window.ShadyDOM = window.ShadyDOM || {};
@@ -23,4 +64,4 @@
     customElements.forcePolyfill = forceCE;
   }
 
-})(window.WebComponents);
+})();

tests/ce-import-upgrade-async.html

@@ -13,7 +13,7 @@
     <title></title>
     <meta charset="UTF-8">
     <script src="../../web-component-tester/browser.js"></script>
-    <script src="../webcomponents-lite.js"></script>
+    <script src="../webcomponents-loader.js"></script>
   </head>
   <body>
     <script>

tests/ce-import-upgrade.html

@@ -13,7 +13,7 @@
     <title></title>
     <meta charset="UTF-8">
     <script src="../../web-component-tester/browser.js"></script>
-    <script src="../webcomponents-lite.js"></script>
+    <script src="../webcomponents-loader.js"></script>
     <link rel="import" href="imports/a1-import.html">
   </head>
   <body>

tests/ce-import.html

@@ -13,7 +13,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <title></title>
     <meta charset="UTF-8">
     <script src="../../web-component-tester/browser.js"></script>
-    <script src="../webcomponents-lite.js"></script>
+    <script src="../webcomponents-loader.js"></script>
   </head>
   <body>
     <x-foo></x-foo>

tests/ce-upgrade-order.html

@@ -12,22 +12,24 @@
 <head>
   <meta charset="UTF-8">
   <title>Custom Element Upgrade Order</title>
+  <script src="../webcomponents-loader.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../webcomponents-lite.js"></script>
   <link rel="import" href="imports/import-upgrade-order.html">
 </head>
 <body>
   <x-foo id="main"></x-foo>
   <script>
-    test('upgrade order', function() {
-      var order = [];
-      class XFoo extends HTMLElement {
-        connectedCallback() {
-          order.push(this.id);
+    suite('Custom Element upgrade', function() {
+      test('upgrade order', function() {
+        var order = [];
+        class XFoo extends HTMLElement {
+          connectedCallback() {
+            order.push(this.id);
+          }
         }
-      }
-      window.customElements.define('x-foo', XFoo);
-      assert.deepEqual(order, ['import', 'main'], 'elements are upgraded in imports before main document');
+        window.customElements.define('x-foo', XFoo);
+        assert.deepEqual(order, ['import', 'main'], 'elements are upgraded in imports before main document');
+      });
     });
   </script>
 </body>

tests/ce-upgradedocumenttree.html

@@ -20,7 +20,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       }
     </script>
     <script src="../../web-component-tester/browser.js"></script>
-    <script src="../webcomponents-lite.js"></script>
+    <script src="../webcomponents-loader.js"></script>
     <link rel="import" href="imports/element-import-a.html">
   </head>
   <body>

tests/dev-loader-swizzled.html

@@ -12,18 +12,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="../../web-component-tester/browser.js"></script>
     <script src="../webcomponents-lite.js?0.13513513" log="foo,boo" squid="never" spoo></script>
+    <script src="../../web-component-tester/browser.js"></script>
   </head>
   <body>
     <script>
-      test('loader swizzeled', function() {
-        assert(window.WebComponents, 'Platform scope missing');
-        assert.equal(WebComponents.flags.squid, 'never', '"squid" flag missing');
-        assert(WebComponents.flags.spoo, '"spoo" flag missing');
-        assert(WebComponents.flags.log, 'flags.log missing');
-        assert(WebComponents.flags.log.foo, 'flags.log.foo missing');
-        assert(WebComponents.flags.log.boo, 'flags.log.foo missing');
+      suite('Development Loader Swizzeled', function() {
+        test('loader swizzeled', function() {
+          assert(window.WebComponents, 'Platform scope missing');
+          assert.equal(WebComponents.flags.squid, 'never', '"squid" flag missing');
+          assert(WebComponents.flags.spoo, '"spoo" flag missing');
+          assert(WebComponents.flags.log, 'flags.log missing');
+          assert(WebComponents.flags.log.foo, 'flags.log.foo missing');
+          assert(WebComponents.flags.log.boo, 'flags.log.foo missing');
+        });
       });
     </script>
   </body>

tests/dev-loader.html

@@ -12,18 +12,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="../../web-component-tester/browser.js"></script>
     <script src="../webcomponents-lite.js" log="foo,boo" squid="never" spoo></script>
+    <script src="../../web-component-tester/browser.js"></script>
   </head>
   <body>
     <script>
-      test('loader', function() {
-        assert(window.WebComponents, 'WebComponents scope missing');
-        assert.equal(WebComponents.flags.squid, 'never', '"squid" flag missing');
-        assert(WebComponents.flags.spoo, '"spoo" flag missing');
-        assert(WebComponents.flags.log, 'flags.log missing');
-        assert(WebComponents.flags.log.foo, 'flags.log.foo missing');
-        assert(WebComponents.flags.log.boo, 'flags.log.foo missing');
+      suite('Development Loader', function() {
+        test('loader', function() {
+          assert(window.WebComponents, 'WebComponents scope missing');
+          assert.equal(WebComponents.flags.squid, 'never', '"squid" flag missing');
+          assert(WebComponents.flags.spoo, '"spoo" flag missing');
+          assert(WebComponents.flags.log, 'flags.log missing');
+          assert(WebComponents.flags.log.foo, 'flags.log.foo missing');
+          assert(WebComponents.flags.log.boo, 'flags.log.foo missing');
+        });
       });
     </script>
   </body>

tests/integration.html

@@ -10,8 +10,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <html>
   <head>
-    <title>Template with HTMLImports Test</title>
-    <script src="../webcomponents-lite.js"></script>
+    <title>Integration Test</title>
+    <script src="../webcomponents-loader.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
     <link rel="import" href="imports/simple-element.html">
   </head>

tests/load.html

@@ -12,18 +12,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="../../web-component-tester/browser.js"></script>
-    <script src="../webcomponents-lite.js"></script>
-    <link rel="import" href="imports/import-file.html">
-  </head>
-  <body>
     <script>
       window.addEventListener('HTMLImportsLoaded', function() {
         window.importsOk = true;
       });
-      test('expected boot', function() {
-        assert.ok(window.importsOk, 'WebComponentsReady without HTMLImportsLoaded');
-        assert.ok(window.importTest, 'import failed to set global value');
+      window.addEventListener('WebComponentsReady', function() {
+        window.webComponentsReady = true;
+      });
+    </script>
+    <script src="../webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <link rel="import" href="imports/import-file.html">
+  </head>
+  <body>
+    <script>
+      suite('Loader', function() {
+        test('expected boot', function() {
+          assert.ok(window.webComponentsReady, 'failed to fire WebComponentsReady');
+          if (!window.HTMLImports.useNative) {
+            assert.ok(window.importsOk, 'WebComponentsReady without HTMLImportsLoaded');
+          }
+          assert.ok(window.importTest, 'import failed to set global value');
+        });
       });
     </script>
   </body>

tests/smoke.html

@@ -13,7 +13,7 @@
     <title></title>
     <meta charset="UTF-8">
     <script src="../../web-component-tester/browser.js"></script>
-    <script src="../webcomponents-lite.js"></script>
+    <script src="../webcomponents-loader.js"></script>
   </head>
   <body>
     <x-foo>plain</x-foo>

tests/template-and-CE.html

@@ -58,12 +58,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         window.customElements.define('x-after', XAfter);
       });
 
-      test('elements within templates not upgraded', function() {
-        assert(!childCreated);
-      });
+      suite('template and custom elements', function() {
+        test('elements within templates not upgraded', function() {
+          assert(!childCreated);
+        });
 
-      test('templates before elements are bootstrapped before createdCallback', function() {
-        assert(foundTemplate);
+        test('templates before elements are bootstrapped before createdCallback', function() {
+          assert(foundTemplate);
+        });
       });
     </script>
   </body>

webcomponents-debug.js

@@ -14,7 +14,7 @@
   window.WebComponents = window.WebComponents || {flags:{}};
 
   // loading script
-  var file = 'webcomponents-lite.js';
+  var file = 'webcomponents-debug.js';
   var script = document.querySelector('script[src*="' + file + '"]');
 
   // Flags. Convert url arguments to flags
@@ -48,6 +48,28 @@
     }
   }
 
+  // construct full dependency list
+  var modules = [
+    '../../webcomponents-platform/webcomponents-platform.js',
+    '../../URL/url.js',
+    '../../template/template.js',
+    '../../es6-promise/dist/es6-promise.auto.min.js',
+    '../../html-imports/src/html-imports.js',
+    'pre-polyfill.js',
+    '../../shadydom/shadydom.min.js',
+    '../../custom-elements/custom-elements.min.js',
+    '../../shadycss/shadycss.min.js',
+    'post-polyfill.js',
+    'unresolved.js'
+  ];
+
+  var src = script.getAttribute('src');
+  var path = src.slice(0, src.lastIndexOf(file));
+
+  modules.forEach(function(f) {
+    document.write('<script src="' + path + 'src/' + f + '"></script>');
+  });
+
   // exports
   WebComponents.flags = flags;
 

webcomponents-loader.js

@@ -0,0 +1,81 @@
+/**
+ * @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
+ */
+
+(function() {
+  // Feature detect which polyfill needs to be imported.
+  let polyfills = [];
+  let useNativeImports = ('import' in document.createElement('link'));
+  if (!useNativeImports) {
+    polyfills.push('hi');
+  }
+
+  // Stub out HTMLImports if we're using native imports
+  window.HTMLImports = {
+    useNative: useNativeImports,
+    whenReady: function(callback) {
+      if (useNativeImports) {
+        // When native imports boot, the are "ready" the first rAF after
+        // the document becomes interactive, so wait for the correct state change.
+        if (document.readyState !== 'interactive') {
+          function once() {
+            document.removeEventListener('readystatechange', once);
+            window.HTMLImports.whenReady(callback);
+          }
+          document.addEventListener('readystatechange', once);
+        } else {
+          // TODO(sorvell): Ideally `whenReady` should return synchronously
+          // when imports are not pending but this would require a more
+          // robust implementation that should probably be a small complementary
+          // library available via the html-imports polyfill.
+          requestAnimationFrame(function() {
+            callback();
+          });
+        }
+      } else {
+        window.addEventListener('HTMLImportsLoaded', callback);
+      }
+    }
+  };
+
+  if (!('attachShadow' in Element.prototype) || (window.ShadyDOM && window.ShadyDOM.force)) {
+    polyfills.push('sd');
+  }
+  if (!window.customElements || window.customElements.forcePolyfill) {
+    polyfills.push('ce');
+  }
+  if (!('content' in document.createElement('template')) || !window.Promise || !window.URL) {
+    polyfills.push('pf');
+  }
+
+  // TODO(notwaldorf): This is a temporary hack because Chrome still needs to
+  // load some things for now. Addressing this is blocked on
+  // https://github.com/webcomponents/shadycss/issues/46.
+  if (!polyfills.length) {
+    polyfills.push('none');
+  } else if (polyfills.length === 4) {  // hi-ce-sd-pf is actually called lite.
+    polyfills = ['lite'];
+  }
+
+  if (polyfills.length) {
+    var script = document.querySelector('script[src*="webcomponents-loader.js"]');
+    let newScript = document.createElement('script');
+    // Load it from the right place.
+    var url = script.src.replace(
+        'webcomponents-loader.js', `webcomponents-${polyfills.join('-')}.js`);
+    newScript.src = url;
+    document.head.appendChild(newScript);
+  }
+
+  HTMLImports.whenReady(function() {
+    requestAnimationFrame(function() {
+      window.dispatchEvent(new CustomEvent('WebComponentsReady'));
+    })
+  });
+})();