Add extension scripts in logical order (#1143)

* Adapt referenceNode after adding an extension * Update snapshots
ampproject · Feb 22, 2021 · 89d7233 · 89d7233
1 parent fec25a8
commit 89d7233
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 17 deletions.
diff --git 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/...er/spec/transformers/valid/AutoExtensionImporter/amp-access-laterpay/expected_output.html b/...er/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/...izer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html b/...izer/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/...sformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html b/...sformers/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/...transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html b/...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>