Merge pull request #1273 from erwinmombay/fix-auto-importer

fix auto fetching of "latestVersion" configuration from amphtml repo

Author: erwinmombay

package-lock.json

@@ -55,6 +55,7 @@
     "jest": "27.0.6",
     "jimp": "0.16.1",
     "js-beautify": "1.14.0",
+    "json5": "2.2.0",
     "karma": "6.3.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-jasmine": "4.0.1",

package.json

@@ -20,6 +20,7 @@ const fetch = require('node-fetch');
 const fs = require('fs').promises;
 const path = require('path');
 const fetchRuntimeParameters = require('../lib/fetchRuntimeParameters');
+const JSON5 = require('json5');
 
 (async () => {
   const runtimeParameters = await fetchRuntimeParameters({
@@ -42,11 +43,28 @@ const fetchRuntimeParameters = require('../lib/fetchRuntimeParameters');
 
   const extensionConfigUrl =
     'https://raw.githubusercontent.com/ampproject/amphtml/main/build-system/compile/bundles.config.extensions.json';
-  const response = await fetch(extensionConfigUrl);
-  if (!response.ok) {
-    throw new Error(`Failed downloading ${extensionConfigUrl} with status ${response.status}`);
+  const latestVersionsUrl = `https://raw.githubusercontent.com/ampproject/amphtml/main/build-system/compile/bundles.legacy-latest-versions.jsonc`;
+
+  const responses = await Promise.all([fetch(extensionConfigUrl), fetch(latestVersionsUrl)]);
+  const [configResponse, latestVersionsConfigResponse] = responses;
+  if (!configResponse.ok) {
+    throw new Error(
+      `Failed downloading ${extensionConfigUrl} with status ${configResponse.status}`
+    );
+  }
+  if (!latestVersionsConfigResponse.ok) {
+    throw new Error(
+      `Failed fetching latest component versions from ${latestVersionsUrl} with status: ${latestVersionsConfigResponse.status}`
+    );
   }
-  const extensionConfig = await response.json();
+
+  const extensionConfig = await configResponse.json();
+  const latestVersionsConfig = JSON5.parse(await latestVersionsConfigResponse.text());
+  // We add back the "latestVersion" field so that the auto importer
+  // code knows what "stable" version of the extension to use.
+  extensionConfig.forEach((entry) => {
+    entry['latestVersion'] = latestVersionsConfig[entry.name];
+  });
   fs.writeFile(
     path.join(__dirname, '../lib/extensionConfig.json'),
     JSON.stringify(extensionConfig),

packages/optimizer/build/downloadRuntimeParameters.js

@@ -141,23 +141,7 @@ class AutoExtensionImporter {
     if (!this.componentVersions) {
       this.componentVersions = {};
       for (const component of params.componentVersions) {
-        if (Array.isArray(component.version)) {
-          // If version is an array then we need to find the highest value.
-          // Note we need to preserve the "stringy"ness of these versions
-          // so make sure we don't do any coercion or casting of the value
-          // we assign.
-          this.componentVersions[component.name] = component.version.reduce((prev, cur) => {
-            return Number(prev) > Number(cur) ? prev : cur;
-          });
-        } else {
-          this.componentVersions[component.name] =
-            Number(component.version) >
-            // Make sure to guard if the entry doesn't exist yet. We default
-            // comparing to 0.
-            Number(this.componentVersions[component.name] || 0)
-              ? component.version
-              : this.componentVersions[component.name];
-        }
+        this.componentVersions[component.name] = component.latestVersion;
       }
     }
     if (!this.extensionSpec_) {

packages/optimizer/lib/extensionConfig.json

@@ -6,7 +6,7 @@
   <link rel="canonical" href="self.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
   <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-carousel-0.2.js" custom-element="amp-carousel"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script><script async src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" custom-element="amp-carousel"></script>
 </head>
 <body>
   <!-- this should only import amp-carousel and not amp-lightbox-gallery -->

packages/optimizer/lib/transformers/AutoExtensionImporter.js

@@ -6,7 +6,7 @@
   <link rel="canonical" href="self.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
   <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-access-0.1.js" custom-element="amp-access"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" custom-element="amp-twitter"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" custom-element="amp-fx-collection"></script><script async src="https://cdn.ampproject.org/v0/amp-video-0.1.js" custom-element="amp-video"></script><script async src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js" custom-element="amp-video-docking"></script><script async src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-1.0.js" custom-element="amp-lightbox-gallery"></script><script async src="https://cdn.ampproject.org/v0/amp-inputmask-0.1.js" custom-element="amp-inputmask"></script><script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script><script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script><script async src="https://cdn.ampproject.org/v0/amp-access-0.1.js" custom-element="amp-access"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" custom-element="amp-twitter"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" custom-element="amp-fx-collection"></script><script async src="https://cdn.ampproject.org/v0/amp-video-0.1.js" custom-element="amp-video"></script><script async src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js" custom-element="amp-video-docking"></script><script async src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js" custom-element="amp-lightbox-gallery"></script><script async src="https://cdn.ampproject.org/v0/amp-inputmask-0.1.js" custom-element="amp-inputmask"></script><script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script><script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
   <!-- imports amp-access based on JSON config -->
   <script id="amp-access" type="application/json">
     {

packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-carousel/expected_output.html

@@ -5,7 +5,7 @@
   <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-1.0.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>
+  <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-0.1.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 -->