Don't auto import experimental bento components

Use the bento component info published here https://amp.dev/static/bento-components.json to determine which version of a component to auto import. Fixes #1221
ampproject · May 19, 2021 · 3f6febe · 3f6febe
1 parent 86dd137
commit 3f6febe
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 7 deletions.
diff --git a/packages/optimizer/lib/fetchRuntimeParameters.js b/packages/optimizer/lib/fetchRuntimeParameters.js
@@ -15,6 +15,7 @@
  */
 'mode strict';
 
+const URL_BENTO_COMPONENT_INFO = 'https://amp.dev/static/bento-components.json';
 const validatorRulesProvider = require('@ampproject/toolbox-validator-rules');
 const {MaxAge} = require('@ampproject/toolbox-core');
 let fallbackRuntime;
@@ -85,6 +86,38 @@ async function initValidatorRules(runtimeParameters, customRuntimeParameters, co
     config.log.error('Could not fetch validator rules');
     config.log.verbose(error);
   }
+  try {
+    runtimeParameters.bentoComponentInfo =
+      customRuntimeParameters.bentoComponentInfo ||
+      config.bentoComponentInfo ||
+      (await fetchBentoComponentInfoFromCache_(config));
+  } catch (error) {
+    config.log.error('Could not fetch bento component info');
+    config.log.verbose(error);
+    runtimeParameters.bentoComponentInfo = [];
+  }
+}
+async function fetchBentoComponentInfoFromCache_(config) {
+  if (config.cache === false) {
+    return fetchBentoComponentInfo_(config);
+  }
+  let bentoComponentInfo = await config.cache.get('bento-component-info');
+  if (!bentoComponentInfo) {
+    bentoComponentInfo = await fetchBentoComponentInfo_(config);
+    config.cache.set('bento-component-info', bentoComponentInfo);
+  }
+  return bentoComponentInfo;
+}
+
+async function fetchBentoComponentInfo_(config) {
+  const response = await config.fetch(URL_BENTO_COMPONENT_INFO);
+  if (!response.ok) {
+    config.log.error(
+      `Failed fetching bento component info from ${URL_BENTO_COMPONENT_INFO} with status: ${response.status}`
+    );
+    return [];
+  }
+  return response.json();
 }
 
 /**

diff --git a/packages/optimizer/lib/transformers/AutoExtensionImporter.js b/packages/optimizer/lib/transformers/AutoExtensionImporter.js
@@ -141,6 +141,12 @@ class AutoExtensionImporter {
       this.log_.error('Missing validation rules, cannot auto import extensions');
       return;
     }
+    if (!this.bentoComponentInfo) {
+      this.bentoComponentInfo = {};
+      for (const bentoComponent of params.bentoComponentInfo || []) {
+        this.bentoComponentInfo[bentoComponent.name] = bentoComponent;
+      }
+    }
     if (!this.extensionSpec_) {
       this.extensionSpec_ = this.createExtensionsSpec(params);
     }
@@ -187,13 +193,7 @@ class AutoExtensionImporter {
       const extension = this.extensionSpec_.extensionsMap.get(extensionName.trim());
       this.log_.debug('auto importing', extensionName);
       // Use the latest version by default
-      let version = extension.version[extension.version.length - 1];
-      const customVersion = this.extensionVersions[extensionName];
-      // Let user override default
-      if (customVersion) {
-        this.log_.debug('using custom version for', extensionName, customVersion);
-        version = customVersion;
-      }
+      let version = this.calculateVersion(extension, extensionName);
       const extensionImportAttribs = {
         async: '',
         src: `${host}/v0/${extensionName}-${version}.js`,
@@ -205,6 +205,33 @@ class AutoExtensionImporter {
     }
   }
 
+  calculateVersion(extension, extensionName) {
+    const customVersion = this.extensionVersions[extensionName];
+    // Let user override default
+    if (customVersion) {
+      this.log_.debug('using custom version for', extensionName, customVersion);
+      return customVersion;
+    }
+    // Get latest version as specified by validation rules
+    let version = extension.version[extension.version.length - 1];
+    // Get bento component info as these might still be experimental
+    const bentoComponent = this.bentoComponentInfo[extensionName];
+    if (!bentoComponent) {
+      // No bento component
+      return version;
+    }
+    // Bento component is not experimental, nothing to worry about
+    if (!bentoComponent.experimental) {
+      return version;
+    }
+    // Bento component version is not yet known to the validator
+    if (version != bentoComponent.version) {
+      return version;
+    }
+    // Bento component version is not yet valid, pick the previous one
+    return extension.version[extension.version.length - 2] || '0.1';
+  }
+
   /**
    * @private
    */

diff --git a/packages/optimizer/spec/helpers/TransformerRunner.js b/packages/optimizer/spec/helpers/TransformerRunner.js
@@ -19,6 +19,7 @@ const {writeFileContents, getFileContents, getDirectories} = require('../helpers
 
 const jsBeautify = require('js-beautify/js/lib/beautify-html.js');
 const validatorRules = require('@ampproject/toolbox-validator-rules').fetch();
+const bentoComponentInfo = require('./bentoComponentInfo.json');
 
 const BEAUTIFY_OPTIONS = {
   'indent_size': 2,
@@ -29,6 +30,7 @@ const BEAUTIFY_OPTIONS = {
 };
 
 const treeParser = require('../../lib/TreeParser.js');
+const {parseDOM} = require('htmlparser2');
 
 const TRANSFORMER_PARAMS = {
   //verbose: true,
@@ -84,6 +86,7 @@ module.exports = function (testConfig) {
         }
         params = testConfig.validAmp ? {} : params;
         params.validatorRules = await validatorRules;
+        params.bentoComponentInfo = bentoComponentInfo;
         await testConfig.transformer.transform(tree, params);
         const actualOutput = serialize(tree, params.__format);
         if (WRITE_SNAPSHOT) {

diff --git a/packages/optimizer/spec/helpers/bentoComponentInfo.json b/packages/optimizer/spec/helpers/bentoComponentInfo.json
@@ -0,0 +1,86 @@
+[
+  {
+    "name": "amp-accordion",
+    "experimental": true,
+    "path": "/documentation/components/amp-accordion-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-base-carousel",
+    "experimental": true,
+    "path": "/documentation/components/amp-base-carousel-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-date-countdown",
+    "experimental": true,
+    "path": "/documentation/components/amp-date-countdown-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-date-display",
+    "experimental": false,
+    "path": "/documentation/components/amp-date-display-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-fit-text",
+    "experimental": true,
+    "path": "/documentation/components/amp-fit-text-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-inline-gallery",
+    "experimental": true,
+    "path": "/documentation/components/amp-inline-gallery-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-instagram",
+    "experimental": true,
+    "path": "/documentation/components/amp-instagram-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-lightbox",
+    "experimental": true,
+    "path": "/documentation/components/amp-lightbox-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-selector",
+    "experimental": true,
+    "path": "/documentation/components/amp-selector-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-social-share",
+    "experimental": true,
+    "path": "/documentation/components/amp-social-share-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-stream-gallery",
+    "experimental": true,
+    "path": "/documentation/components/amp-stream-gallery-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-timeago",
+    "experimental": true,
+    "path": "/documentation/components/amp-timeago-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-video",
+    "experimental": true,
+    "path": "/documentation/components/amp-video-v1.0/",
+    "version": "1.0"
+  },
+  {
+    "name": "amp-youtube",
+    "experimental": true,
+    "path": "/documentation/components/amp-youtube-v1.0/",
+    "version": "1.0"
+  }
+]
diff --git a/...nsformers/valid/AutoExtensionImporter/uses-non-experimental-versions/expected_output.html b/...nsformers/valid/AutoExtensionImporter/uses-non-experimental-versions/expected_output.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>My AMP Page</title>
+  <link rel="canonical" href="self.html">
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js" custom-element="amp-timeago"></script><script async src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" custom-element="amp-youtube"></script><script async src="https://cdn.ampproject.org/v0/amp-date-display-1.0.js" custom-element="amp-date-display"></script><script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
+</head>
+<body>
+  <!-- import non-bento component v0.1 instead of experimental bento v1.0 -->
+  <amp-timeago layout="fixed" width="160" height="20" datetime="2017-04-11T00:37:33.809Z" locale="en">
+    Saturday 11 April 2017 00.37
+  </amp-timeago>
+  <amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>
+  <!-- import non-experimental bento component v1.0 -->
+  <amp-date-display datetime="2017-08-02T15:05:05.000" layout="fixed" width="360" height="20">
+    <template type="amp-mustache">
+      <div>
+        {{dayName}} {{day}} {{monthName}} {{year}}{{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
+      </div>
+    </template>
+  </amp-date-display>
+</body>
+</html>
diff --git a/...r/spec/transformers/valid/AutoExtensionImporter/uses-non-experimental-versions/input.html b/...r/spec/transformers/valid/AutoExtensionImporter/uses-non-experimental-versions/input.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>My AMP Page</title>
+  <link rel="canonical" href="self.html">
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <!-- import non-bento component v0.1 instead of experimental bento v1.0 -->
+  <amp-timeago
+    layout="fixed"
+    width="160"
+    height="20"
+    datetime="2017-04-11T00:37:33.809Z"
+    locale="en"
+  >
+    Saturday 11 April 2017 00.37
+  </amp-timeago>
+  <amp-youtube
+  data-videoid="mGENRKrdoGY"
+  layout="responsive"
+  width="480"
+  height="270"
+></amp-youtube>
+  <!-- import non-experimental bento component v1.0 -->
+  <amp-date-display
+  datetime="2017-08-02T15:05:05.000"
+  layout="fixed"
+  width="360"
+  height="20"
+>
+  <template type="amp-mustache">
+    <div>
+{{dayName}} {{day}} {{monthName}} {{year}}{{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}    </div>
+  </template>
+</amp-date-display>
+</body>
+</html>