Experiment turning on splitted vendor integration JS (#32763)

ampproject · Mar 22, 2021 · f6a2f18 · f6a2f18
1 parent 0e11de9
commit f6a2f18
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 48 deletions.
diff --git a/extensions/amp-3d-gltf/0.1/amp-3d-gltf.js b/extensions/amp-3d-gltf/0.1/amp-3d-gltf.js
@@ -33,6 +33,7 @@ import {
 import {removeElement} from '../../../src/dom';
 
 const TAG = 'amp-3d-gltf';
+const TYPE = '3d-gltf';
 
 const isWebGLSupported = () => {
   const canvas = document.createElement('canvas');
@@ -70,7 +71,7 @@ export class Amp3dGltf extends AMP.BaseElement {
    */
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
     preconnect.url(
       this.getAmpDoc(),
       'https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js',
@@ -166,7 +167,7 @@ export class Amp3dGltf extends AMP.BaseElement {
       return Promise.resolve();
     }
 
-    const iframe = getIframe(this.win, this.element, '3d-gltf', this.context_);
+    const iframe = getIframe(this.win, this.element, TYPE, this.context_);
     iframe.title = this.element.title || 'GLTF 3D model';
     this.applyFillContent(iframe, true);
     this.iframe_ = iframe;

diff --git a/extensions/amp-ad/0.1/amp-ad-3p-impl.js b/extensions/amp-ad/0.1/amp-ad-3p-impl.js
@@ -249,7 +249,7 @@ export class AmpAd3PImpl extends AMP.BaseElement {
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
     // We always need the bootstrap.
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, this.type_, this.getAmpDoc(), preconnect);
     if (typeof this.config.prefetch == 'string') {
       preconnect.preload(this.getAmpDoc(), this.config.prefetch, 'script');
     } else if (this.config.prefetch) {

diff --git a/extensions/amp-beopinion/0.1/amp-beopinion.js b/extensions/amp-beopinion/0.1/amp-beopinion.js
@@ -23,6 +23,8 @@ import {removeElement} from '../../../src/dom';
 /** @const */
 const TAG = 'amp-beopinion';
 
+const TYPE = 'beopinion';
+
 class AmpBeOpinion extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
@@ -38,7 +40,7 @@ class AmpBeOpinion extends AMP.BaseElement {
    */
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
     // Hosts the script that renders widgets.
     preconnect.preload(
       this.getAmpDoc(),
@@ -68,7 +70,7 @@ class AmpBeOpinion extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'beopinion');
+    const iframe = getIframe(this.win, this.element, TYPE);
     iframe.title = this.element.title || 'BeOpinion content';
     this.applyFillContent(iframe);
     listenFor(

diff --git a/extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js b/extensions/amp-bodymovin-animation/0.1/amp-bodymovin-animation.js
@@ -30,6 +30,7 @@ import {removeElement} from '../../../src/dom';
 import {pureUserAssert as userAssert} from '../../../src/core/assert';
 
 const TAG = 'amp-bodymovin-animation';
+const TYPE = 'bodymovinanimation';
 
 export class AmpBodymovinAnimation extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -72,7 +73,7 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
    */
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
     // Different scripts are loaded based on `renderer` but their origin is the
     // same. See 3p/bodymovinanimation.js#libSourceUrl.
     preconnect.url(
@@ -140,12 +141,7 @@ export class AmpBodymovinAnimation extends AMP.BaseElement {
         renderer: this.renderer_,
         animationData: data,
       };
-      const iframe = getIframe(
-        this.win,
-        this.element,
-        'bodymovinanimation',
-        opt_context
-      );
+      const iframe = getIframe(this.win, this.element, TYPE, opt_context);
       iframe.title = this.element.title || 'Airbnb BodyMovin animation';
       return Services.vsyncFor(this.win)
         .mutatePromise(() => {

diff --git a/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js b/extensions/amp-facebook-comments/0.1/amp-facebook-comments.js
@@ -25,6 +25,8 @@ import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
+const TYPE = 'facebook';
+
 class AmpFacebookComments extends AMP.BaseElement {
   /** @override @nocollapse */
   static createLoaderLogoCallback(element) {
@@ -68,7 +70,7 @@ class AmpFacebookComments extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -78,7 +80,7 @@ class AmpFacebookComments extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    const iframe = getIframe(this.win, this.element, TYPE);
     iframe.title = this.element.title || 'Facebook comments';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.

diff --git a/extensions/amp-facebook-like/0.1/amp-facebook-like.js b/extensions/amp-facebook-like/0.1/amp-facebook-like.js
@@ -24,6 +24,8 @@ import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
+const TYPE = 'facebook';
+
 class AmpFacebookLike extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
@@ -62,7 +64,7 @@ class AmpFacebookLike extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -72,7 +74,7 @@ class AmpFacebookLike extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    const iframe = getIframe(this.win, this.element, TYPE);
     iframe.title = this.element.title || 'Facebook like button';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.

diff --git a/extensions/amp-facebook-page/0.1/amp-facebook-page.js b/extensions/amp-facebook-page/0.1/amp-facebook-page.js
@@ -25,6 +25,8 @@ import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
+const TYPE = 'facebook';
+
 class AmpFacebookPage extends AMP.BaseElement {
   /** @override @nocollapse */
   static createLoaderLogoCallback(element) {
@@ -68,7 +70,7 @@ class AmpFacebookPage extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -78,7 +80,7 @@ class AmpFacebookPage extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    const iframe = getIframe(this.win, this.element, TYPE);
     iframe.title = this.element.title || 'Facebook page';
     this.applyFillContent(iframe);
     // Triggered by context.updateDimensions() inside the iframe.

diff --git a/extensions/amp-facebook/0.1/amp-facebook.js b/extensions/amp-facebook/0.1/amp-facebook.js
@@ -26,6 +26,8 @@ import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
 
+const TYPE = 'facebook';
+
 class AmpFacebook extends AMP.BaseElement {
   /** @override @nocollapse */
   static createLoaderLogoCallback(element) {
@@ -72,7 +74,7 @@ class AmpFacebook extends AMP.BaseElement {
       'https://connect.facebook.net/' + this.dataLocale_ + '/sdk.js',
       'script'
     );
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -82,7 +84,7 @@ class AmpFacebook extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'facebook');
+    const iframe = getIframe(this.win, this.element, TYPE);
     iframe.title = this.element.title || 'Facebook';
     this.applyFillContent(iframe);
     if (this.element.hasAttribute('data-allowfullscreen')) {

diff --git a/extensions/amp-ima-video/0.1/amp-ima-video.js b/extensions/amp-ima-video/0.1/amp-ima-video.js
@@ -41,6 +41,8 @@ import {
 /** @const */
 const TAG = 'amp-ima-video';
 
+const TYPE = 'ima-video';
+
 /**
  * @implements {../../../src/video-interface.VideoInterface}
  */
@@ -158,7 +160,7 @@ class AmpImaVideo extends AMP.BaseElement {
       preconnect.url(this.getAmpDoc(), this.preconnectTrack_);
     }
     preconnect.url(this.getAmpDoc(), element.getAttribute('data-tag'));
-    preloadBootstrap(this.win, this.getAmpDoc(), preconnect);
+    preloadBootstrap(this.win, TYPE, this.getAmpDoc(), preconnect);
   }
 
   /** @override */
@@ -182,7 +184,7 @@ class AmpImaVideo extends AMP.BaseElement {
       const iframe = getIframe(
         win,
         element,
-        'ima-video',
+        TYPE,
         {initialConsentState},
         {allowFullscreen: true}
       );

diff --git a/extensions/amp-reddit/0.1/amp-reddit.js b/extensions/amp-reddit/0.1/amp-reddit.js
@@ -20,6 +20,8 @@ import {isLayoutSizeDefined} from '../../../src/layout';
 import {listenFor} from '../../../src/iframe-helper';
 import {pureUserAssert as userAssert} from '../../../src/core/assert';
 
+const TYPE = 'reddit';
+
 class AmpReddit extends AMP.BaseElement {
   /**
    * @param {boolean=} onLayout
@@ -51,7 +53,7 @@ class AmpReddit extends AMP.BaseElement {
       );
     }
 
-    preloadBootstrap(this.win, ampdoc, preconnect);
+    preloadBootstrap(this.win, TYPE, ampdoc, preconnect);
   }
 
   /** @override */
@@ -72,7 +74,7 @@ class AmpReddit extends AMP.BaseElement {
       this.element
     );
 
-    const iframe = getIframe(this.win, this.element, 'reddit', null, {
+    const iframe = getIframe(this.win, this.element, TYPE, null, {
       allowFullscreen: true,
     });
     iframe.title = this.element.title || 'Reddit';

diff --git a/extensions/amp-twitter/0.1/amp-twitter.js b/extensions/amp-twitter/0.1/amp-twitter.js
@@ -22,6 +22,8 @@ import {isLayoutSizeDefined} from '../../../src/layout';
 import {listenFor} from '../../../src/iframe-helper';
 import {removeElement} from '../../../src/dom';
 
+const TYPE = 'twitter';
+
 class AmpTwitter extends AMP.BaseElement {
   /** @override @nocollapse */
   static createLoaderLogoCallback(element) {
@@ -69,7 +71,7 @@ class AmpTwitter extends AMP.BaseElement {
   preconnectCallback(opt_onLayout) {
     const preconnect = Services.preconnectFor(this.win);
     const ampdoc = this.getAmpDoc();
-    preloadBootstrap(this.win, ampdoc, preconnect);
+    preloadBootstrap(this.win, TYPE, ampdoc, preconnect);
     // Hosts the script that renders tweets.
     preconnect.preload(
       ampdoc,
@@ -95,7 +97,7 @@ class AmpTwitter extends AMP.BaseElement {
 
   /** @override */
   layoutCallback() {
-    const iframe = getIframe(this.win, this.element, 'twitter', null, {
+    const iframe = getIframe(this.win, this.element, TYPE, null, {
       allowFullscreen: true,
     });
     iframe.title = this.element.title || 'Twitter';

diff --git a/src/3p-frame.js b/src/3p-frame.js
@@ -20,6 +20,7 @@ import {dict} from './utils/object';
 import {getContextMetadata} from '../src/iframe-attributes';
 import {getMode} from './mode';
 import {internalRuntimeVersion} from './internal-version';
+import {isExperimentOn} from './experiments';
 import {setStyle} from './style';
 import {tryParseJson} from './json';
 import {urls} from './config';
@@ -115,7 +116,7 @@ export function getIframe(
   const name = JSON.stringify(
     dict({
       'host': host,
-      'bootstrap': getBootstrapUrl(),
+      'bootstrap': getBootstrapUrl(attributes['type'], parentWindow),
       'type': attributes['type'],
       // https://github.com/ampproject/amphtml/pull/2955
       'count': count[attributes['type']],
@@ -196,28 +197,39 @@ export function addDataAndJsonAttributes_(element, attributes) {
 
 /**
  * Get the bootstrap script URL for iframe.
+ * @param {string} type
+ * @param {!Window} win
  * @return {string}
  */
-export function getBootstrapUrl() {
+export function getBootstrapUrl(type, win) {
   if (getMode().localDev || getMode().test) {
-    return getMode().minified ? './f.js' : './integration.js';
+    const filename = getMode().minified
+      ? `./vendor/${type}.`
+      : `./vendor/${type}.max.`;
+    return IS_ESM ? filename + 'mjs' : filename + 'js';
+  }
+  if (isExperimentOn(win, '3p-vendor-split')) {
+    return IS_ESM
+      ? `${urls.thirdParty}/${internalRuntimeVersion()}/vendor/${type}.mjs`
+      : `${urls.thirdParty}/${internalRuntimeVersion()}/vendor/${type}.js`;
   }
   return `${urls.thirdParty}/${internalRuntimeVersion()}/f.js`;
 }
 
 /**
  * Preloads URLs related to the bootstrap iframe.
  * @param {!Window} win
+ * @param {string} type
  * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
  * @param {!./preconnect.PreconnectService} preconnect
  */
-export function preloadBootstrap(win, ampdoc, preconnect) {
+export function preloadBootstrap(win, type, ampdoc, preconnect) {
   const url = getBootstrapBaseUrl(win, ampdoc);
   preconnect.preload(ampdoc, url, 'document');
 
   // While the URL may point to a custom domain, this URL will always be
   // fetched by it.
-  preconnect.preload(ampdoc, getBootstrapUrl(), 'script');
+  preconnect.preload(ampdoc, getBootstrapUrl(type, win), 'script');
 }
 
 /**

diff --git a/test/integration/test-amp-ad-3p.js b/test/integration/test-amp-ad-3p.js
@@ -52,25 +52,16 @@ describe('amp-ad 3P', () => {
     let lastIO = null;
     const platform = Services.platformFor(fixture.win);
     return poll(
-      'frame to be in DOM',
+      'frame to be in DOM and context is available',
       () => {
-        return fixture.doc.querySelector('amp-ad > iframe');
+        iframe = fixture.doc.querySelector('amp-ad > iframe');
+        if (iframe) {
+          return iframe.contentWindow.context;
+        }
       },
       undefined,
       5000
     )
-      .then((iframeElement) => {
-        iframe = iframeElement;
-        return new Promise((resolve) => {
-          if (iframe.contentWindow.context) {
-            resolve(iframe.contentWindow.context);
-          }
-          iframe.onload = () => {
-            expect(iframe.contentWindow.document.getElementById('c')).to.exist;
-            resolve(iframe.contentWindow.context);
-          };
-        });
-      })
       .then((context) => {
         expect(context.canary).to.be.a('boolean');
         expect(context.canonicalUrl).to.equal(
@@ -126,7 +117,7 @@ describe('amp-ad 3P', () => {
         );
         expect(context.isMaster).to.exist;
         expect(context.computeInMasterFrame).to.exist;
-        expect(context.location).to.deep.equal({
+        expect(context.location).to.deep.include({
           hash: '',
           host: 'localhost:9876',
           hostname: 'localhost',