From 89d7233543240857943b90aef0aeea8e4f60537b Mon Sep 17 00:00:00 2001
From: Alain Schlesser <alain.schlesser@gmail.com>
Date: Mon, 22 Feb 2021 10:05:45 +0000
Subject: [PATCH] Add extension scripts in logical order (#1143)

* Adapt referenceNode after adding an extension

* Update snapshots
---
 .../lib/transformers/AutoExtensionImporter.js |  3 ++-
 .../amp-access-laterpay/expected_output.html  |  4 ++--
 .../amp-subscriptions/expected_output.html    |  6 +++---
 .../expected_output.html                      | 20 +++++++++----------
 .../expected_output.html                      |  2 +-
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/optimizer/lib/transformers/AutoExtensionImporter.js b/packages/optimizer/lib/transformers/AutoExtensionImporter.js
index 55524314c..02bad8b13 100644
--- a/packages/optimizer/lib/transformers/AutoExtensionImporter.js
+++ b/packages/optimizer/lib/transformers/AutoExtensionImporter.js
@@ -176,7 +176,7 @@ class AutoExtensionImporter {
     }
 
     // We use this for adding new import elements to the header
-    const referenceNode = findMetaViewport(head);
+    let referenceNode = findMetaViewport(head);
 
     // Use cdn.ampproject.org as default, RewriteUrlTransformer will change this in case of self-hosting
     const host = AMP_CACHE_HOST;
@@ -201,6 +201,7 @@ class AutoExtensionImporter {
       extensionImportAttribs[extension.type] = extensionName;
       const extensionImport = createElement('script', extensionImportAttribs);
       insertAfter(head, extensionImport, referenceNode);
+      referenceNode = extensionImport;
     }
   }
 
diff --git a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-access-laterpay/expected_output.html b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-access-laterpay/expected_output.html
index 99045ab49..d0ec2cb2a 100644
--- a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-access-laterpay/expected_output.html
+++ b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-access-laterpay/expected_output.html
@@ -5,9 +5,9 @@
   <title>amp-access-laterpay</title>
   <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-access-laterpay/index.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <script async src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js" custom-element="amp-access-laterpay"></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-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-access-laterpay-0.2.js" custom-element="amp-access-laterpay"></script>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script id="amp-access" type="application/json">
     {
diff --git a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html
index bcae96f01..58bd44c9a 100644
--- a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html
+++ b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html
@@ -5,10 +5,10 @@
   <title>subscriptions example</title>
   <link rel="canonical" href="amps.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <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/amp-subscriptions-google-0.1.js" custom-element="amp-subscriptions-google"></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-subscriptions-0.1.js" custom-element="amp-subscriptions"></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-subscriptions-google-0.1.js" custom-element="amp-subscriptions-google"></script>
+  <script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
   <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 type="application/ld+json">
diff --git a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html
index 7d67af61d..fa01da423 100644
--- a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html
+++ b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html
@@ -5,17 +5,17 @@
   <title>My AMP Page</title>
   <link rel="canonical" href="self.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <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/amp-list-0.1.js" custom-element="amp-list"></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-lightbox-gallery-0.1.js" custom-element="amp-lightbox-gallery"></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-video-0.1.js" custom-element="amp-video"></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-bind-0.1.js" custom-element="amp-bind"></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-analytics-0.1.js" custom-element="amp-analytics"></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>
   <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>
   <!-- imports amp-access based on JSON config -->
diff --git a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html
index fdbd86ca3..2bb01c5a7 100644
--- a/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html
+++ b/packages/optimizer/spec/transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html
@@ -5,8 +5,8 @@
   <title>My AMP Page</title>
   <link rel="canonical" href="self.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <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-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>
   <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 custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
   <script async src="https://cdn.ampproject.org/v0.js"></script>