🏗 custom-elements-polyfill.js is now bento.js, and async (#36431)

* 🏗 `custom-elements-polyfill.js` is now `bento.js`, and async * should be async * latestName * names together * needs bento.js now * empty line * test name
ampproject · Oct 20, 2021 · fa287b8 · fa287b8
1 parent 7a3fd73
commit fa287b8
Show file tree

Hide file tree

Showing 28 changed files with 65 additions and 74 deletions.
diff --git a/build-system/compile/bundles.config.js b/build-system/compile/bundles.config.js
@@ -16,15 +16,17 @@ exports.jsBundles = {
     destDir: './build/',
     minifiedDestDir: './build/',
   },
-  'custom-elements-polyfill.js': {
-    srcDir: 'src/polyfills/',
-    srcFilename: 'custom-elements-entrypoint.js',
+  'bento.js': {
+    srcDir: './src/',
+    srcFilename: 'bento.js',
     destDir: './dist',
     minifiedDestDir: './dist',
     options: {
-      toName: 'custom-elements-polyfill.max.js',
       includePolyfills: false,
-      minifiedName: 'custom-elements-polyfill.js',
+      toName: 'bento.max.js',
+      minifiedName: 'bento.js',
+      // For backwards-compat:
+      latestName: 'custom-elements-polyfill.js',
     },
   },
   'alp.max.js': {

diff --git a/build-system/compile/compile-wrappers.js b/build-system/compile/compile-wrappers.js
@@ -81,4 +81,6 @@ function extensionPayload(name, version, latest, isModule, loadPriority) {
   );
 }
 
+exports.bento = '(self.BENTO=self.BENTO||[]).push(function(){<%= contents %>})';
+
 exports.none = '<%= contents %>';
diff --git a/build-system/tasks/extension-helpers.js b/build-system/tasks/extension-helpers.js
@@ -717,7 +717,7 @@ async function buildBentoExtensionJs(dir, name, options) {
   const bentoName = getBentoName(name);
   return buildExtensionJs(dir, bentoName, {
     ...options,
-    wrapper: 'none',
+    wrapper: 'bento',
     filename: await getBentoFilename(dir, bentoName, options),
     // Include extension directory since our entrypoint may be elsewhere.
     extraGlobs: [...(options.extraGlobs || []), `${dir}/**/*.js`],

diff --git a/build-system/tasks/helpers.js b/build-system/tasks/helpers.js
@@ -148,7 +148,7 @@ async function compileAllJs(options) {
   const startTime = Date.now();
   await Promise.all([
     minify ? Promise.resolve() : doBuildJs(jsBundles, 'polyfills.js', options),
-    doBuildJs(jsBundles, 'custom-elements-polyfill.js', options),
+    doBuildJs(jsBundles, 'bento.js', options),
     doBuildJs(jsBundles, 'alp.max.js', options),
     doBuildJs(jsBundles, 'integration.js', options),
     doBuildJs(jsBundles, 'ampcontext-lib.js', options),

diff --git a/examples/bento/api.html b/examples/bento/api.html
@@ -7,8 +7,11 @@
       name="viewport"
       content="width=device-width,minimum-scale=1,initial-scale=1"
     />
-    <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
-    <script async src="https://cdn.ampproject.org/v0/bento-video-1.0.js"></script>
+    <script async src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      async
+      src="https://cdn.ampproject.org/v0/bento-video-1.0.js"
+    ></script>
   </head>
   <body>
     <bento-video

diff --git a/examples/bento/no-v0.html b/examples/bento/no-v0.html
@@ -28,7 +28,7 @@
         border: 1px solid black;
       }
     </style>
-    <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+    <script async src="https://cdn.ampproject.org/bento.js"></script>
     <script
       async
       src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"

diff --git a/extensions/amp-accordion/1.0/README.md b/extensions/amp-accordion/1.0/README.md
@@ -52,7 +52,7 @@ The example below contains an `bento-accordion` with three sections. The
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-accordion-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">
 </head>

diff --git a/extensions/amp-base-carousel/1.0/README.md b/extensions/amp-base-carousel/1.0/README.md
@@ -41,7 +41,7 @@ import '@ampproject/bento-base-carousel';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-base-carousel {

diff --git a/extensions/amp-date-countdown/1.0/README.md b/extensions/amp-date-countdown/1.0/README.md
@@ -35,7 +35,7 @@ The example below contains an `bento-date-countdown` with three sections. The
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-date-countdown-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-date-countdown-1.0.css">
 </head>

diff --git a/extensions/amp-date-display/1.0/README.md b/extensions/amp-date-display/1.0/README.md
@@ -40,7 +40,7 @@ The example below contains an `bento-date-display` with three sections. The
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-date-display-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-date-display-1.0.css">
 </head>

diff --git a/extensions/amp-embedly-card/1.0/README.md b/extensions/amp-embedly-card/1.0/README.md
@@ -37,7 +37,7 @@ import '@ampproject/bento-embedly-card';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-embedly-card {

diff --git a/extensions/amp-facebook/1.0/README.md b/extensions/amp-facebook/1.0/README.md
@@ -30,7 +30,7 @@ import '@ampproject/bento-facebook';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-facebook {

diff --git a/extensions/amp-fit-text/1.0/README.md b/extensions/amp-fit-text/1.0/README.md
@@ -34,7 +34,7 @@ import '@ampproject/bento-fit-text';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <script async custom-element="bento-fit-text" src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"></script>
   <style data-bento-boilerplate>

diff --git a/extensions/amp-inline-gallery/1.0/README.md b/extensions/amp-inline-gallery/1.0/README.md
@@ -34,7 +34,7 @@ The example below contains a `bento-inline-gallery` consisting of three slides w
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-inline-gallery-1.0.css">
 </head>

diff --git a/extensions/amp-jwplayer/1.0/README.md b/extensions/amp-jwplayer/1.0/README.md
@@ -35,7 +35,7 @@ The example below contains an `bento-jwplayer` with three sections. The
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css">
 </head>

diff --git a/extensions/amp-lightbox-gallery/1.0/README.md b/extensions/amp-lightbox-gallery/1.0/README.md
@@ -34,7 +34,7 @@ import '@ampproject/bento-lightbox-gallery';
 
 ```html
 <head>
-    <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+    <script async src="https://cdn.ampproject.org/bento.js"></script>
     <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
     <style data-bento-boilerplate>
       bento-lightbox-gallery[hidden] {

diff --git a/extensions/amp-mathml/1.0/README.md b/extensions/amp-mathml/1.0/README.md
@@ -35,7 +35,7 @@ The example below contains an `bento-mathml` with three sections. The
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-mathml-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-mathml-1.0.css">
 </head>

diff --git a/extensions/amp-selector/1.0/README.md b/extensions/amp-selector/1.0/README.md
@@ -30,7 +30,7 @@ import '@ampproject/bento-selector';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-selector {

diff --git a/extensions/amp-soundcloud/1.0/README.md b/extensions/amp-soundcloud/1.0/README.md
@@ -32,7 +32,7 @@ import '@ampproject/bento-soundcloud';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-soundcloud {

diff --git a/extensions/amp-stream-gallery/1.0/README.md b/extensions/amp-stream-gallery/1.0/README.md
@@ -38,7 +38,7 @@ The example below contains an `bento-stream-gallery` with three sections. The
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <script async src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-streamGallery-1.0.css">
 

diff --git a/extensions/amp-twitter/1.0/README.md b/extensions/amp-twitter/1.0/README.md
@@ -32,7 +32,7 @@ import '@ampproject/bento-twitter';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-twitter {

diff --git a/extensions/amp-wordpress-embed/1.0/README.md b/extensions/amp-wordpress-embed/1.0/README.md
@@ -32,7 +32,7 @@ import '@ampproject/bento-wordpress-embed';
 
 ```html
 <head>
-  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+  <script async src="https://cdn.ampproject.org/bento.js"></script>
   <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
   <style data-bento-boilerplate>
     bento-wordpress-embed {

diff --git a/src/bento.js b/src/bento.js
@@ -0,0 +1,21 @@
+/**
+ * @fileoverview
+ * Entry point for `bento.js`
+ */
+
+import {install as installCustomElements} from './polyfills/custom-elements';
+
+installCustomElements(self);
+
+const BENTO = self.BENTO || [];
+
+BENTO.push = (fn) => {
+  fn();
+};
+
+// eslint-disable-next-line local/window-property-name
+self.BENTO = BENTO;
+
+for (let i = 0; i < BENTO.length; i++) {
+  BENTO.push(BENTO[i]);
+}
diff --git a/src/polyfills/custom-elements-entrypoint.js b/src/polyfills/custom-elements-entrypoint.js
diff --git a/test/e2e/test-bento.js b/test/e2e/test-bento.js
@@ -1,15 +1,11 @@
-const attachesShadowRoot = {
-  'without v0.js': 'bento/minimal.html',
-  'without v0.js nor custom-elements-polyfill.js': 'bento/no-ce-polyfill.html',
-};
-
-for (const [name, fixture] of Object.entries(attachesShadowRoot)) {
-  const config = {
+describes.endtoend(
+  'Bento',
+  {
     environments: ['single'],
-    fixture,
-  };
-  describes.endtoend('Bento', config, async function (env) {
-    it(`attaches shadow root ${name}`, async () => {
+    fixture: 'bento/minimal.html',
+  },
+  async function (env) {
+    it('attaches shadow root', async () => {
       // Set timeout lower than default in order to fail early, since the root
       // is attached as soon as possible.
       // (Feel free to increase if flaky.)
@@ -31,5 +27,5 @@ for (const [name, fixture] of Object.entries(attachesShadowRoot)) {
       );
       await expect(shadowRoot).ok;
     });
-  });
-}
+  }
+);
diff --git a/test/fixtures/e2e/bento/bento-timeago.html b/test/fixtures/e2e/bento/bento-timeago.html
@@ -7,6 +7,7 @@
       name="viewport"
       content="width=device-width,minimum-scale=1,initial-scale=1"
     />
+    <script async src="https://cdn.ampproject.org/bento.js"></script>
     <script
       async
       src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"

diff --git a/test/fixtures/e2e/bento/minimal.html b/test/fixtures/e2e/bento/minimal.html
@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width,minimum-scale=1,initial-scale=1"
     />
-    <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
+    <script async src="https://cdn.ampproject.org/bento.js"></script>
     <script
       async
       src="https://cdn.ampproject.org/v0/bento-timeago-1.0.js"

diff --git a/test/fixtures/e2e/bento/no-ce-polyfill.html b/test/fixtures/e2e/bento/no-ce-polyfill.html