✨ Enable native Custom Elements v1 (ampproject#25173)

* Try enabling native Custom Elements v1 This will attempt to use native CEv1 when supported. Based on whether the anonymous class remains a real, native ES6 class, we can use 0 polyfill (fully native support). If it's transpiled into a `function () {}`, then we can use a minimal polyfill that wraps the `HTMLElement` constructor only. * Fix img tests * Bump travis * Define NATIVE_CUSTOM_ELEMENTS_V1 RTV Experiemnt
micajuine-ho · Dec 27, 2019 · 6667d56 · 6667d56
1 parent 4e930bb
commit 6667d56
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 109 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -20,9 +20,13 @@
     "sourceType": "module"
   },
   "globals": {
-    "AMP": false,
-    "context": false,
-    "global": false
+    "ANALYTICS_VENDOR_SPLIT": "readonly",
+    "NATIVE_CUSTOM_ELEMENTS_V1": "readonly",
+    "_RTVEXP_INABOX_LITE": "readonly",
+
+    "AMP": "readonly",
+    "context": "readonly",
+    "global": "readonly"
   },
   "settings": {
     "jsdoc": {

diff --git a/build-system/global-configs/experiments-config.json b/build-system/global-configs/experiments-config.json
@@ -15,5 +15,12 @@
     "expirationDateUTC": "2019-11-10",
     "defineExperimentConstant": "_RTVEXP_INABOX_LITE"
   },
-  "experimentC": {}
+  "experimentC": {
+    "name": "Native Custom Elements V1",
+    "environment": "AMP",
+    "command": "gulp dist --defineExperimentConstant=NATIVE_CUSTOM_ELEMENTS_V1",
+    "issue": "https://github.com/ampproject/amphtml/issues/17243",
+    "expirationDateUTC": "2020-01-01",
+    "defineExperimentConstant": "NATIVE_CUSTOM_ELEMENTS_V1"
+  }
 }
diff --git a/extensions/amp-analytics/0.1/config.js b/extensions/amp-analytics/0.1/config.js
@@ -98,7 +98,6 @@ export class AnalyticsConfig {
    * @return {!Promise<undefined>}
    */
   fetchVendorConfig_() {
-    // eslint-disable-next-line no-undef
     if (!ANALYTICS_VENDOR_SPLIT) {
       return Promise.resolve();
     }
@@ -137,21 +136,21 @@ export class AnalyticsConfig {
     const type = this.element_.getAttribute('type');
     const rtv = getMode().rtvVersion;
     const isRc = rtv ? rtv.substring(0, 2) === '03' : false;
-    // eslint-disable-next-line no-undef
-    const isExperiment = ANALYTICS_VENDOR_SPLIT;
 
     if (
       type === 'googleanalytics' &&
-      (isRc || isExperiment) &&
+      (isRc || ANALYTICS_VENDOR_SPLIT) &&
       this.config_['requests']
     ) {
       if (this.config_['requests']['pageview']) {
         this.config_['requests']['pageview'][
           'baseUrl'
-        ] += `&aae=${isExperiment}`;
+        ] += `&aae=${ANALYTICS_VENDOR_SPLIT}`;
       }
       if (this.config_['requests']['timing']) {
-        this.config_['requests']['timing']['baseUrl'] += `&aae=${isExperiment}`;
+        this.config_['requests']['timing'][
+          'baseUrl'
+        ] += `&aae=${ANALYTICS_VENDOR_SPLIT}`;
       }
     }
   }

diff --git a/extensions/amp-analytics/0.1/vendors.js b/extensions/amp-analytics/0.1/vendors.js
@@ -178,95 +178,92 @@ const DEFAULT_CONFIG = jsonLiteral({
 /**
  * @const {!JsonObject}
  */
-export const ANALYTICS_CONFIG =
-  // eslint-disable-next-line no-undef
-  ANALYTICS_VENDOR_SPLIT
-    ? jsonConfiguration({'default': includeJsonLiteral(DEFAULT_CONFIG)})
-    : jsonConfiguration({
-        // Default parent configuration applied to all amp-analytics tags.
-        'default': includeJsonLiteral(DEFAULT_CONFIG),
-        'acquialift': includeJsonLiteral(ACQUIALIFT_CONFIG),
-        'adobeanalytics': includeJsonLiteral(ADOBEANALYTICS_CONFIG),
-        'adobeanalytics_nativeConfig': includeJsonLiteral(
-          ADOBEANALYTICS_NATIVECONFIG_CONFIG
-        ),
-        'afsanalytics': includeJsonLiteral(AFSANALYTICS_CONFIG),
-        'alexametrics': includeJsonLiteral(ALEXAMETRICS_CONFIG),
-        'amplitude': includeJsonLiteral(AMPLITUDE_CONFIG),
-        'atinternet': includeJsonLiteral(ATINTERNET_CONFIG),
-        'baiduanalytics': includeJsonLiteral(BAIDUANALYTICS_CONFIG),
-        'bg': includeJsonLiteral(BG_CONFIG),
-        'burt': includeJsonLiteral(BURT_CONFIG),
-        'byside': includeJsonLiteral(BYSIDE_CONFIG),
-        'chartbeat': includeJsonLiteral(CHARTBEAT_CONFIG),
-        'clicky': includeJsonLiteral(CLICKY_CONFIG),
-        'colanalytics': includeJsonLiteral(COLANALYTICS_CONFIG),
-        'comscore': includeJsonLiteral(COMSCORE_CONFIG),
-        'cxense': includeJsonLiteral(CXENSE_CONFIG),
-        'dynatrace': includeJsonLiteral(DYNATRACE_CONFIG),
-        'epica': includeJsonLiteral(EPICA_CONFIG),
-        'euleriananalytics': includeJsonLiteral(EULERIANANALYTICS_CONFIG),
-        'facebookpixel': includeJsonLiteral(FACEBOOKPIXEL_CONFIG),
-        'gemius': includeJsonLiteral(GEMIUS_CONFIG),
-        'googleadwords': includeJsonLiteral(GOOGLEADWORDS_CONFIG),
-        'googleanalytics': includeJsonLiteral(GOOGLEANALYTICS_CONFIG),
-        'gtag': includeJsonLiteral(GTAG_CONFIG),
-        'ibeatanalytics': includeJsonLiteral(IBEATANALYTICS_CONFIG),
-        'infonline': includeJsonLiteral(INFONLINE_CONFIG),
-        'iplabel': includeJsonLiteral(IPLABEL_CONFIG),
-        'keen': includeJsonLiteral(KEEN_CONFIG),
-        'kenshoo': includeJsonLiteral(KENSHOO_CONFIG),
-        'krux': includeJsonLiteral(KRUX_CONFIG),
-        'linkpulse': includeJsonLiteral(LINKPULSE_CONFIG),
-        'lotame': includeJsonLiteral(LOTAME_CONFIG),
-        'marinsoftware': includeJsonLiteral(MARINSOFTWARE_CONFIG),
-        'mediametrie': includeJsonLiteral(MEDIAMETRIE_CONFIG),
-        'mediarithmics': includeJsonLiteral(MEDIARITHMICS_CONFIG),
-        'mediator': includeJsonLiteral(MEDIATOR_CONFIG),
-        'metrika': includeJsonLiteral(METRIKA_CONFIG),
-        'moat': includeJsonLiteral(MOAT_CONFIG),
-        'mobify': includeJsonLiteral(MOBIFY_CONFIG),
-        'mparticle': includeJsonLiteral(MPARTICLE_CONFIG),
-        'mpulse': includeJsonLiteral(MPULSE_CONFIG),
-        'navegg': includeJsonLiteral(NAVEGG_CONFIG),
-        'newrelic': includeJsonLiteral(NEWRELIC_CONFIG),
-        'nielsen': includeJsonLiteral(NIELSEN_CONFIG),
-        'nielsen-marketing-cloud': includeJsonLiteral(
-          NIELSEN_MARKETING_CLOUD_CONFIG
-        ),
-        'oewa': includeJsonLiteral(OEWA_CONFIG),
-        'oewadirect': includeJsonLiteral(OEWADIRECT_CONFIG),
-        'oracleInfinityAnalytics': includeJsonLiteral(
-          ORACLEINFINITYANALYTICS_CONFIG
-        ),
-        'parsely': includeJsonLiteral(PARSELY_CONFIG),
-        'piStats': includeJsonLiteral(PISTATS_CONFIG),
-        'permutive': includeJsonLiteral(PERMUTIVE_CONFIG),
-        'piano': includeJsonLiteral(PIANO_CONFIG),
-        'pinpoll': includeJsonLiteral(PINPOLL_CONFIG),
-        'pressboard': includeJsonLiteral(PRESSBOARD_CONFIG),
-        'quantcast': includeJsonLiteral(QUANTCAST_CONFIG),
-        'retargetly': includeJsonLiteral(RETARGETLY_CONFIG),
-        'rakam': includeJsonLiteral(RAKAM_CONFIG),
-        'reppublika': includeJsonLiteral(REPPUBLIKA_CONFIG),
-        'segment': includeJsonLiteral(SEGMENT_CONFIG),
-        'shinystat': includeJsonLiteral(SHINYSTAT_CONFIG),
-        'simplereach': includeJsonLiteral(SIMPLEREACH_CONFIG),
-        'snowplow': includeJsonLiteral(SNOWPLOW_CONFIG),
-        'teaanalytics': includeJsonLiteral(TEAANALYTICS_CONFIG),
-        'tealiumcollect': includeJsonLiteral(TEALIUMCOLLECT_CONFIG),
-        'top100': includeJsonLiteral(TOP100_CONFIG),
-        'topmailru': includeJsonLiteral(TOPMAILRU_CONFIG),
-        'treasuredata': includeJsonLiteral(TREASUREDATA_CONFIG),
-        'umenganalytics': includeJsonLiteral(UMENGANALYTICS_CONFIG),
-        'upscore': includeJsonLiteral(UPSCORE_CONFIG),
-        'vponanalytics': includeJsonLiteral(VPONANALYTICS_CONFIG),
-        'webengage': includeJsonLiteral(WEBENGAGE_CONFIG),
-        'webtrekk': includeJsonLiteral(WEBTREKK_CONFIG),
-        'webtrekk_v2': includeJsonLiteral(WEBTREKK_V2_CONFIG),
-      });
+export const ANALYTICS_CONFIG = ANALYTICS_VENDOR_SPLIT
+  ? jsonConfiguration({'default': includeJsonLiteral(DEFAULT_CONFIG)})
+  : jsonConfiguration({
+      // Default parent configuration applied to all amp-analytics tags.
+      'default': includeJsonLiteral(DEFAULT_CONFIG),
+      'acquialift': includeJsonLiteral(ACQUIALIFT_CONFIG),
+      'adobeanalytics': includeJsonLiteral(ADOBEANALYTICS_CONFIG),
+      'adobeanalytics_nativeConfig': includeJsonLiteral(
+        ADOBEANALYTICS_NATIVECONFIG_CONFIG
+      ),
+      'afsanalytics': includeJsonLiteral(AFSANALYTICS_CONFIG),
+      'alexametrics': includeJsonLiteral(ALEXAMETRICS_CONFIG),
+      'amplitude': includeJsonLiteral(AMPLITUDE_CONFIG),
+      'atinternet': includeJsonLiteral(ATINTERNET_CONFIG),
+      'baiduanalytics': includeJsonLiteral(BAIDUANALYTICS_CONFIG),
+      'bg': includeJsonLiteral(BG_CONFIG),
+      'burt': includeJsonLiteral(BURT_CONFIG),
+      'byside': includeJsonLiteral(BYSIDE_CONFIG),
+      'chartbeat': includeJsonLiteral(CHARTBEAT_CONFIG),
+      'clicky': includeJsonLiteral(CLICKY_CONFIG),
+      'colanalytics': includeJsonLiteral(COLANALYTICS_CONFIG),
+      'comscore': includeJsonLiteral(COMSCORE_CONFIG),
+      'cxense': includeJsonLiteral(CXENSE_CONFIG),
+      'dynatrace': includeJsonLiteral(DYNATRACE_CONFIG),
+      'epica': includeJsonLiteral(EPICA_CONFIG),
+      'euleriananalytics': includeJsonLiteral(EULERIANANALYTICS_CONFIG),
+      'facebookpixel': includeJsonLiteral(FACEBOOKPIXEL_CONFIG),
+      'gemius': includeJsonLiteral(GEMIUS_CONFIG),
+      'googleadwords': includeJsonLiteral(GOOGLEADWORDS_CONFIG),
+      'googleanalytics': includeJsonLiteral(GOOGLEANALYTICS_CONFIG),
+      'gtag': includeJsonLiteral(GTAG_CONFIG),
+      'ibeatanalytics': includeJsonLiteral(IBEATANALYTICS_CONFIG),
+      'infonline': includeJsonLiteral(INFONLINE_CONFIG),
+      'iplabel': includeJsonLiteral(IPLABEL_CONFIG),
+      'keen': includeJsonLiteral(KEEN_CONFIG),
+      'kenshoo': includeJsonLiteral(KENSHOO_CONFIG),
+      'krux': includeJsonLiteral(KRUX_CONFIG),
+      'linkpulse': includeJsonLiteral(LINKPULSE_CONFIG),
+      'lotame': includeJsonLiteral(LOTAME_CONFIG),
+      'marinsoftware': includeJsonLiteral(MARINSOFTWARE_CONFIG),
+      'mediametrie': includeJsonLiteral(MEDIAMETRIE_CONFIG),
+      'mediarithmics': includeJsonLiteral(MEDIARITHMICS_CONFIG),
+      'mediator': includeJsonLiteral(MEDIATOR_CONFIG),
+      'metrika': includeJsonLiteral(METRIKA_CONFIG),
+      'moat': includeJsonLiteral(MOAT_CONFIG),
+      'mobify': includeJsonLiteral(MOBIFY_CONFIG),
+      'mparticle': includeJsonLiteral(MPARTICLE_CONFIG),
+      'mpulse': includeJsonLiteral(MPULSE_CONFIG),
+      'navegg': includeJsonLiteral(NAVEGG_CONFIG),
+      'newrelic': includeJsonLiteral(NEWRELIC_CONFIG),
+      'nielsen': includeJsonLiteral(NIELSEN_CONFIG),
+      'nielsen-marketing-cloud': includeJsonLiteral(
+        NIELSEN_MARKETING_CLOUD_CONFIG
+      ),
+      'oewa': includeJsonLiteral(OEWA_CONFIG),
+      'oewadirect': includeJsonLiteral(OEWADIRECT_CONFIG),
+      'oracleInfinityAnalytics': includeJsonLiteral(
+        ORACLEINFINITYANALYTICS_CONFIG
+      ),
+      'parsely': includeJsonLiteral(PARSELY_CONFIG),
+      'piStats': includeJsonLiteral(PISTATS_CONFIG),
+      'permutive': includeJsonLiteral(PERMUTIVE_CONFIG),
+      'piano': includeJsonLiteral(PIANO_CONFIG),
+      'pinpoll': includeJsonLiteral(PINPOLL_CONFIG),
+      'pressboard': includeJsonLiteral(PRESSBOARD_CONFIG),
+      'quantcast': includeJsonLiteral(QUANTCAST_CONFIG),
+      'retargetly': includeJsonLiteral(RETARGETLY_CONFIG),
+      'rakam': includeJsonLiteral(RAKAM_CONFIG),
+      'reppublika': includeJsonLiteral(REPPUBLIKA_CONFIG),
+      'segment': includeJsonLiteral(SEGMENT_CONFIG),
+      'shinystat': includeJsonLiteral(SHINYSTAT_CONFIG),
+      'simplereach': includeJsonLiteral(SIMPLEREACH_CONFIG),
+      'snowplow': includeJsonLiteral(SNOWPLOW_CONFIG),
+      'teaanalytics': includeJsonLiteral(TEAANALYTICS_CONFIG),
+      'tealiumcollect': includeJsonLiteral(TEALIUMCOLLECT_CONFIG),
+      'top100': includeJsonLiteral(TOP100_CONFIG),
+      'topmailru': includeJsonLiteral(TOPMAILRU_CONFIG),
+      'treasuredata': includeJsonLiteral(TREASUREDATA_CONFIG),
+      'umenganalytics': includeJsonLiteral(UMENGANALYTICS_CONFIG),
+      'upscore': includeJsonLiteral(UPSCORE_CONFIG),
+      'vponanalytics': includeJsonLiteral(VPONANALYTICS_CONFIG),
+      'webengage': includeJsonLiteral(WEBENGAGE_CONFIG),
+      'webtrekk': includeJsonLiteral(WEBTREKK_CONFIG),
+      'webtrekk_v2': includeJsonLiteral(WEBTREKK_V2_CONFIG),
+    });
 
-// eslint-disable-next-line no-undef
 if (!ANALYTICS_VENDOR_SPLIT) {
   if (getMode().test || getMode().localDev) {
     ANALYTICS_CONFIG['_fake_'] = _FAKE_;

diff --git a/src/friendly-iframe-embed.js b/src/friendly-iframe-embed.js
@@ -855,7 +855,12 @@ export class FriendlyIframeEmbed {
 function installPolyfillsInChildWindow(parentWin, childWin) {
   installDocContains(childWin);
   installDOMTokenList(childWin);
-  installCustomElements(childWin);
+  // The anonymous class parameter allows us to detect native classes vs
+  // transpiled classes.
+  installCustomElements(
+    childWin,
+    NATIVE_CUSTOM_ELEMENTS_V1 ? class {} : undefined
+  );
 }
 
 /**

diff --git a/src/inabox/inabox-services.js b/src/inabox/inabox-services.js
@@ -44,11 +44,7 @@ export function installAmpdocServicesForInabox(ampdoc) {
   installUrlForDoc(ampdoc);
   installDocumentInfoServiceForDoc(ampdoc);
   installInaboxCidService(ampdoc);
-  if (
-    // eslint-disable-next-line no-undef
-    _RTVEXP_INABOX_LITE ||
-    isExperimentOn(ampdoc.win, 'inabox-viewer-lite')
-  ) {
+  if (_RTVEXP_INABOX_LITE || isExperimentOn(ampdoc.win, 'inabox-viewer-lite')) {
     installInaboxViewerServiceForDoc(ampdoc);
   } else {
     installViewerServiceForDoc(ampdoc);
@@ -57,7 +53,6 @@ export function installAmpdocServicesForInabox(ampdoc) {
   installHiddenObserverForDoc(ampdoc);
   installHistoryServiceForDoc(ampdoc);
   if (
-    // eslint-disable-next-line no-undef
     _RTVEXP_INABOX_LITE ||
     isExperimentOn(ampdoc.win, 'inabox-resources-lite')
   ) {

diff --git a/src/inabox/inabox-viewport.js b/src/inabox/inabox-viewport.js
@@ -837,7 +837,6 @@ export function installInaboxViewportService(ampdoc) {
     ampdoc,
     'viewport',
     function() {
-      // eslint-disable-next-line no-undef
       return _RTVEXP_INABOX_LITE ||
         isExperimentOn(ampdoc.win, 'inabox-viewport-lite')
         ? new InaboxViewportImpl(ampdoc, binding)

diff --git a/src/polyfills.js b/src/polyfills.js
@@ -39,7 +39,9 @@ if (self.document) {
   installDOMTokenList(self);
   installDocContains(self);
   installGetBoundingClientRect(self);
-  installCustomElements(self);
+  // The anonymous class parameter allows us to detect native classes vs
+  // transpiled classes.
+  installCustomElements(self, NATIVE_CUSTOM_ELEMENTS_V1 ? class {} : undefined);
 }
 
 // TODO(#18268, erwinm): For whatever reason imports to modules that have no

diff --git a/test/unit/test-amp-img.js b/test/unit/test-amp-img.js
@@ -377,6 +377,8 @@ describe('amp-img', () => {
   it('should propagate the object-fit attribute', () => {
     return getImg({
       src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
       'object-fit': 'cover',
     }).then(ampImg => {
       const img = ampImg.querySelector('img');
@@ -387,6 +389,8 @@ describe('amp-img', () => {
   it('should not propagate the object-fit attribute if invalid', () => {
     return getImg({
       src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
       'object-fit': 'foo 80%',
     }).then(ampImg => {
       const img = ampImg.querySelector('img');
@@ -397,6 +401,8 @@ describe('amp-img', () => {
   it('should propagate the object-position attribute', () => {
     return getImg({
       src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
       'object-position': '20% 80%',
     }).then(ampImg => {
       const img = ampImg.querySelector('img');
@@ -407,6 +413,8 @@ describe('amp-img', () => {
   it('should not propagate the object-position attribute if invalid', () => {
     return getImg({
       src: '/examples/img/sample.jpg',
+      width: 300,
+      height: 200,
       'object-position': 'url("example.com")',
     }).then(ampImg => {
       const img = ampImg.querySelector('img');

diff --git a/testing/describes.js b/testing/describes.js
@@ -645,7 +645,12 @@ class RealWinFixture {
             get: () => customElements,
           });
         } else {
-          installCustomElements(win);
+          // The anonymous class parameter allows us to detect native classes
+          // vs transpiled classes.
+          installCustomElements(
+            win,
+            NATIVE_CUSTOM_ELEMENTS_V1 ? class {} : undefined
+          );
         }
 
         // Intercept event listeners

diff --git a/testing/iframe.js b/testing/iframe.js
@@ -243,7 +243,12 @@ export function createIframePromise(opt_runtimeOff, opt_beforeLayoutCallback) {
       ).getSingleDoc();
       installExtensionsService(iframe.contentWindow);
       installRuntimeServices(iframe.contentWindow);
-      installCustomElements(iframe.contentWindow);
+      // The anonymous class parameter allows us to detect native classes vs
+      // transpiled classes.
+      installCustomElements(
+        iframe.contentWindow,
+        NATIVE_CUSTOM_ELEMENTS_V1 ? class {} : undefined
+      );
       installAmpdocServices(ampdoc);
       Services.resourcesForDoc(ampdoc).ampInitComplete();
       // Act like no other elements were loaded by default.