revert: feat(elements): implement @angular/elements angular#19469

This PR was merged without API docs and general rollout plan. We can't release this as is in 5.1 without a plan for documentation, cli integration, etc.
IgorMinar · Nov 3, 2017 · e22d4cd · e22d4cd
1 parent a28d616
commit e22d4cd
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 23 deletions.
diff --git a/.pullapprove.yml b/.pullapprove.yml
@@ -279,6 +279,14 @@ groups:
       - IgorMinar #fallback
       - mhevery #fallback
 
+  elements:
+    conditions:
+      files:
+        - "packages/elements/*"
+    users:
+      - mhevery #primary
+      - IgorMinar #fallback
+
   benchpress:
     conditions:
       files:

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -211,6 +211,7 @@ The following is the list of supported scopes:
 * **compiler**
 * **compiler-cli**
 * **core**
+* **elements**
 * **forms**
 * **http**
 * **language-service**

diff --git a/aio/tools/transforms/angular-api-package/index.js b/aio/tools/transforms/angular-api-package/index.js
@@ -48,6 +48,7 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
       'common/testing/index.ts',
       'core/index.ts',
       'core/testing/index.ts',
+      'elements/index.ts',
       'forms/index.ts',
       'http/index.ts',
       'http/testing/index.ts',

diff --git a/aio/tools/transforms/authors-package/api-package.js b/aio/tools/transforms/authors-package/api-package.js
@@ -11,15 +11,16 @@ const { API_SOURCE_PATH } = require('../config');
 
 const packageMap = {
   animations: ['animations/index.ts', 'animations/browser/index.ts', 'animations/browser/testing/index.ts'],
-  common: ['common/index.ts', 'common/testing/index.ts'],
+  common: ['common/index.ts', 'common/testing/index.ts', 'common/http/index.ts', 'common/http/testing/index.ts'],
   core: ['core/index.ts', 'core/testing/index.ts'],
+  elements: ['elements/index.ts'],
   forms: ['forms/index.ts'],
   http: ['http/index.ts', 'http/testing/index.ts'],
   'platform-browser': ['platform-browser/index.ts', 'platform-browser/animations/index.ts', 'platform-browser/testing/index.ts'],
   'platform-browser-dynamic': ['platform-browser-dynamic/index.ts', 'platform-browser-dynamic/testing/index.ts'],
   'platform-server': ['platform-server/index.ts', 'platform-server/testing/index.ts'],
   'platform-webworker': ['platform-webworker/index.ts'],
-  'platform-webworker-dynamic': 'platform-webworker-dynamic/index.ts',
+  'platform-webworker-dynamic': ['platform-webworker-dynamic/index.ts'],
   router: ['router/index.ts', 'router/testing/index.ts', 'router/upgrade/index.ts'],
   'service-worker': ['service-worker/index.ts'],
   upgrade: ['upgrade/index.ts', 'upgrade/static/index.ts']

diff --git a/build.sh b/build.sh
@@ -24,7 +24,8 @@ PACKAGES=(core
   compiler-cli
   language-service
   benchpress
-  service-worker)
+  service-worker
+  elements)
 
 TSC_PACKAGES=(compiler-cli
   language-service

diff --git a/karma-js.conf.js b/karma-js.conf.js
@@ -38,6 +38,15 @@ module.exports = function(config) {
       'test-events.js',
       'shims_for_IE.js',
       'node_modules/systemjs/dist/system.src.js',
+
+      // Serve polyfills necessary for testing the `elements` package.
+      {
+        pattern: 'node_modules/@webcomponents/custom-elements/**/*.js',
+        included: false,
+        watched: false
+      },
+      {pattern: 'node_modules/mutation-observer/index.js', included: false, watched: false},
+
       {pattern: 'node_modules/rxjs/**', included: false, watched: false, served: true},
       'node_modules/reflect-metadata/Reflect.js',
       'tools/build/file2modulename.js',

diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@types/selenium-webdriver": "3.0.7",
     "@types/source-map": "^0.5.1",
     "@types/systemjs": "0.19.32",
+    "@webcomponents/custom-elements": "^1.0.4",
     "angular": "1.5.0",
     "angular-animate": "1.5.0",
     "angular-mocks": "1.5.0",
@@ -81,6 +82,7 @@
     "karma-sourcemap-loader": "0.3.6",
     "madge": "0.5.0",
     "minimist": "1.2.0",
+    "mutation-observer": "^1.0.3",
     "node-uuid": "1.4.8",
     "protractor": "5.1.2",
     "rewire": "2.5.2",

diff --git a/test-main.js b/test-main.js
@@ -62,25 +62,40 @@ System.config({
     '@angular/platform-server': {main: 'index.js', defaultExtension: 'js'},
     '@angular/platform-webworker': {main: 'index.js', defaultExtension: 'js'},
     '@angular/platform-webworker-dynamic': {main: 'index.js', defaultExtension: 'js'},
+    '@angular/elements': {main: 'index.js', defaultExtension: 'js'},
   }
 });
 
 
-// Set up the test injector, then import all the specs, execute their `main()`
-// method and kick off Karma (Jasmine).
-System.import('@angular/core/testing')
-    .then(function(coreTesting) {
-      return Promise
-          .all([
-            System.import('@angular/platform-browser-dynamic/testing'),
-            System.import('@angular/platform-browser/animations')
-          ])
-          .then(function(mods) {
-            coreTesting.TestBed.initTestEnvironment(
-                [mods[0].BrowserDynamicTestingModule, mods[1].NoopAnimationsModule],
-                mods[0].platformBrowserDynamicTesting());
-          });
+// Load browser-specific CustomElement polyfills, set up the test injector, import all the specs,
+// execute their `main()` method and kick off Karma (Jasmine).
+Promise
+    .resolve()
+
+    // Load browser-specific polyfills for custom elements.
+    .then(function() { return loadCustomElementsPolyfills(); })
+
+    // Load necessary testing packages.
+    .then(function() {
+      return Promise.all([
+        System.import('@angular/core/testing'),
+        System.import('@angular/platform-browser-dynamic/testing'),
+        System.import('@angular/platform-browser/animations')
+      ]);
     })
+
+    // Set up the test injector.
+    .then(function(mods) {
+      var coreTesting = mods[0];
+      var pbdTesting = mods[1];
+      var pbAnimations = mods[2];
+
+      coreTesting.TestBed.initTestEnvironment(
+          [pbdTesting.BrowserDynamicTestingModule, pbAnimations.NoopAnimationsModule],
+          pbdTesting.platformBrowserDynamicTesting());
+    })
+
+    // Import all the specs and execute their `main()` method.
     .then(function() {
       return Promise.all(Object
                              .keys(window.__karma__.files)  // All files served by Karma.
@@ -97,9 +112,106 @@ System.import('@angular/core/testing')
                                });
                              }));
     })
+
+    // Kick off karma (Jasmine).
     .then(function() { __karma__.start(); }, function(error) { console.error(error); });
 
 
+function loadCustomElementsPolyfills() {
+  var loadedPromise = Promise.resolve();
+
+  // The custom elements polyfill relies on `MutationObserver`.
+  if (!window.MutationObserver) {
+    loadedPromise =
+        loadedPromise
+            .then(function() { return System.import('node_modules/mutation-observer/index.js'); })
+            .then(function(MutationObserver) { window.MutationObserver = MutationObserver; });
+  }
+
+  // The custom elements polyfill relies on `Object.setPrototypeOf()`.
+  if (!Object.setPrototypeOf) {
+    var getDescriptor = function getDescriptor(obj, prop) {
+      var descriptor;
+      while (obj && !descriptor) {
+        descriptor = Object.getOwnPropertyDescriptor(obj, prop);
+        obj = Object.getPrototypeOf(obj);
+      }
+      return descriptor || {};
+    };
+    var setPrototypeOf = function setPrototypeOf(obj, proto) {
+      for (var prop in proto) {
+        if (!obj.hasOwnProperty(prop)) {
+          Object.defineProperty(obj, prop, getDescriptor(proto, prop));
+        }
+      }
+      return obj;
+    };
+
+    Object.defineProperty(setPrototypeOf, '$$shimmed', {value: true});
+    Object.setPrototypeOf = setPrototypeOf;
+  }
+
+  // The custom elements polyfill will patch `(HTML)Element` properties, including `innerHTML`:
+  // https://github.com/webcomponents/custom-elements/blob/32f043c3a5e5fc3e035342c0ef10c6786fa416d7/src/Patch/Element.js#L28-L78
+  // The patched `innerHTML` setter will try to traverse the DOM (via `nextSibling`), which leads to
+  // infinite loops when testing `HtmlSanitizer` with cloberred elements on browsers that do not
+  // support the `<template>` element:
+  // https://github.com/angular/angular/blob/213baa37b0b71e72d00ad7b606ebfc2ade06b934/packages/platform-browser/src/security/html_sanitizer.ts#L29-L38
+  // To avoid that, we "unpatch" `(HTML)Element#innerHTML` and apply the patch only for the relevant
+  // `@angular/elements` tests.
+  var patchTarget;
+  var originalDescriptor;
+  if (!window.customElements) {
+    var candidatePatchTarget = window.Element.prototype;
+    var candidateOriginalDescriptor =
+        Object.getOwnPropertyDescriptor(candidatePatchTarget, 'innerHTML');
+
+    if (!originalDescriptor) {
+      candidatePatchTarget = window.HTMLElement.prototype;
+      candidateOriginalDescriptor =
+          Object.getOwnPropertyDescriptor(candidatePatchTarget, 'innerHTML');
+    }
+
+    if (candidateOriginalDescriptor) {
+      patchTarget = candidatePatchTarget;
+      originalDescriptor = candidateOriginalDescriptor;
+    }
+  }
+
+  var polyfillPath = !window.customElements ?
+      // Load custom elements polyfill.
+      'node_modules/@webcomponents/custom-elements/custom-elements.min.js' :
+      // Allow ES5 functions as custom element constructors.
+      'node_modules/@webcomponents/custom-elements/src/native-shim.js';
+
+  loadedPromise =
+      loadedPromise.then(function() { return System.import(polyfillPath); }).then(function() {
+        // `packages/compiler/test/schema/schema_extractor.ts` relies on `HTMLElement.name`,
+        // but custom element polyfills will replace `HTMLElement` with an anonymous function.
+        Object.defineProperty(HTMLElement, 'name', {value: 'HTMLElement'});
+
+        // Create helper functions on `window` for patching/restoring `(HTML)Element#innerHTML`.
+        if (!patchTarget) {
+          window.$$patchInnerHtmlProp = window.$$restoreInnerHtmlProp = function() {};
+        } else {
+          var patchedDescriptor = Object.getOwnPropertyDescriptor(patchTarget, 'innerHTML');
+
+          window.$$patchInnerHtmlProp = function() {
+            Object.defineProperty(patchTarget, 'innerHTML', patchedDescriptor);
+          };
+          window.$$restoreInnerHtmlProp = function() {
+            Object.defineProperty(patchTarget, 'innerHTML', originalDescriptor);
+          };
+
+          // Restore `innerHTML`. The patch will be manually applied only during the
+          // `@angular/elements` tests that need it.
+          window.$$restoreInnerHtmlProp();
+        }
+      });
+
+  return loadedPromise;
+}
+
 function onlySpecFiles(path) {
   return /_spec\.js$/.test(path);
 }
diff --git a/tools/cjs-jasmine/index.ts b/tools/cjs-jasmine/index.ts
@@ -62,6 +62,7 @@ var specFiles: any =
                        '@angular/router/test/integration/bootstrap_spec.*',
                        '@angular/integration_test/symbol_inspector/**',
                        '@angular/upgrade/**',
+                       '@angular/elements/**',
                        '@angular/**/e2e_test/**',
                        'angular1_router/**',
                        'payload_tests/**',

diff --git a/tools/gulp-tasks/public-api.js b/tools/gulp-tasks/public-api.js
@@ -28,7 +28,7 @@ const entrypoints = [
   'dist/packages-dist/service-worker/service-worker.d.ts',
   'dist/packages-dist/service-worker/config.d.ts', 'dist/packages-dist/animations/browser.d.ts',
   'dist/packages-dist/animations/browser/testing.d.ts',
-  'dist/packages-dist/platform-browser/animations.d.ts'
+  'dist/packages-dist/platform-browser/animations.d.ts', 'dist/packages-dist/elements/elements.d.ts'
 ];
 
 const publicApiDir = 'tools/public_api_guard';

diff --git a/tools/validate-commit-message/commit-message.json b/tools/validate-commit-message/commit-message.json
@@ -21,6 +21,7 @@
     "compiler",
     "compiler-cli",
     "core",
+    "elements",
     "forms",
     "http",
     "language-service",

diff --git a/tools/validate-commit-message/validate-commit-message.spec.js b/tools/validate-commit-message/validate-commit-message.spec.js
@@ -51,19 +51,19 @@ describe('validate-commit-message.js', function() {
       expect(validateMessage('refactor(docs): something')).toBe(INVALID);
       ['INVALID COMMIT MSG: "fix(Compiler): something"\n' +
            ' => ERROR: "Compiler" is not an allowed scope.\n' +
-           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
+           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, elements, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
        'INVALID COMMIT MSG: "feat(bah): something"\n' +
            ' => ERROR: "bah" is not an allowed scope.\n' +
-           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
+           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, elements, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
        'INVALID COMMIT MSG: "style(webworker): something"\n' +
            ' => ERROR: "webworker" is not an allowed scope.\n' +
-           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
+           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, elements, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
        'INVALID COMMIT MSG: "refactor(security): something"\n' +
            ' => ERROR: "security" is not an allowed scope.\n' +
-           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
+           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, elements, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog',
        'INVALID COMMIT MSG: "refactor(docs): something"\n' +
            ' => ERROR: "docs" is not an allowed scope.\n' +
-           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog']
+           ' => SCOPES: aio, animations, bazel, benchpress, common, compiler, compiler-cli, core, elements, forms, http, language-service, platform-browser, platform-browser-dynamic, platform-server, platform-webworker, platform-webworker-dynamic, router, service-worker, upgrade, packaging, changelog']
           .forEach((expectedErrorMessage, index) => {
             expect(expectedErrorMessage).toEqual(errors[index]);
           });

diff --git a/yarn.lock b/yarn.lock
@@ -143,6 +143,10 @@
   version "0.19.32"
   resolved "https://registry.yarnpkg.com/@types/systemjs/-/systemjs-0.19.32.tgz#e9204c4cdbc8e275d645c00e6150e68fc5615a24"
 
+"@webcomponents/custom-elements@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.0.4.tgz#f7de0103026f27863ecfabaf1d450b9c21714910"
+
 Base64@~0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
@@ -4888,6 +4892,10 @@ multipipe@^0.1.2:
   dependencies:
     duplexer2 "0.0.2"
 
+mutation-observer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
+
 [email protected]:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"