Append extension scripts after runtime script (ampproject#1241)

alfodei22 · Jun 16, 2021 · 5263ab2 · 5263ab2
1 parent 84be484
commit 5263ab2
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 29 deletions.
diff --git a/packages/optimizer/lib/HtmlDomHelper.js b/packages/optimizer/lib/HtmlDomHelper.js
@@ -17,10 +17,10 @@
 'use strict';
 
 /**
- * Finds and returns the first 'meta charset' element in the head.
+ * Finds and returns the first 'meta viewport' element in the head.
  *
- * @param {Node} head the section to search for the meta charset node.
- * @returns {Node} the '<meta charset>' node or null.
+ * @param {Node} head the section to search for the meta viewport node.
+ * @returns {Node} the '<meta viewport>' node or null.
  */
 function findMetaViewport(head) {
   for (let node = head.firstChild; node !== null; node = node.nextSibling) {
@@ -31,6 +31,21 @@ function findMetaViewport(head) {
   return null;
 }
 
+/**
+ * Finds and returns the first runtime script element in the head.
+ *
+ * @param {Node} head the section to search for the runtime script node.
+ * @returns {Node} the runtime script node or null.
+ */
+function findRuntimeScript(head) {
+  for (let node = head.firstChild; node !== null; node = node.nextSibling) {
+    if (node.tagName === 'script' && node.attribs.src.match(/^https:\/\/.+\/v0(\.js|\.mjs)$/)) {
+      return node;
+    }
+  }
+  return null;
+}
+
 /**
  * Skips the subtree that is descending from the current node.
  * @param {Node} the node that has its subtree being skipped
@@ -49,5 +64,6 @@ function skipNodeAndChildren(node) {
 /** @module HtmlDomHelper */
 module.exports = {
   findMetaViewport: findMetaViewport,
+  findRuntimeScript: findRuntimeScript,
   skipNodeAndChildren: skipNodeAndChildren,
 };
diff --git a/packages/optimizer/lib/transformers/AutoExtensionImporter.js b/packages/optimizer/lib/transformers/AutoExtensionImporter.js
@@ -22,7 +22,7 @@ const {
   firstChildByTag,
   hasAttribute,
 } = require('../NodeUtils');
-const {findMetaViewport} = require('../HtmlDomHelper');
+const {findMetaViewport, findRuntimeScript} = require('../HtmlDomHelper');
 const {AMP_FORMATS, AMP_CACHE_HOST} = require('../AmpConstants');
 
 const BIND_SHORT_FORM_PREFIX = 'bind';
@@ -182,7 +182,10 @@ class AutoExtensionImporter {
     }
 
     // We use this for adding new import elements to the header
-    let referenceNode = findMetaViewport(head);
+    let referenceNode = findRuntimeScript(head);
+    if (!referenceNode) {
+      referenceNode = findMetaViewport(head);
+    }
 
     // Use cdn.ampproject.org as default, RewriteUrlTransformer will change this in case of self-hosting
     const host = AMP_CACHE_HOST;

diff --git a/...spec/transformers/valid/AutoExtensionImporter/allow-specific-version/expected_output.html b/...spec/transformers/valid/AutoExtensionImporter/allow-specific-version/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-sticky-ad-0.1.js" custom-element="amp-sticky-ad"></script>
+  <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.js"></script><script async src="https://cdn.ampproject.org/v0/amp-sticky-ad-0.1.js" custom-element="amp-sticky-ad"></script>
 </head>
 <body>
   <!-- this should import a specific version, not latest -->

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
@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <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-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>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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-access-laterpay-0.2.js" custom-element="amp-access-laterpay"></script>
   <script id="amp-access" type="application/json">
   {
     "vendor": "laterpay",

diff --git a/...timizer/spec/transformers/valid/AutoExtensionImporter/amp-bind-bindX/expected_output.html b/...timizer/spec/transformers/valid/AutoExtensionImporter/amp-bind-bindX/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-bind-0.1.js" custom-element="amp-bind"></script>
+  <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.js"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script>
 </head>
 <body>
   <div data-amp-bind-text="greeting"></div>

diff --git a/...spec/transformers/valid/AutoExtensionImporter/amp-bind-data-amp-bind/expected_output.html b/...spec/transformers/valid/AutoExtensionImporter/amp-bind-data-amp-bind/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-bind-0.1.js" custom-element="amp-bind"></script>
+  <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.js"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script>
 </head>
 <body>
   <div data-amp-bind-text="greeting"></div>

diff --git a/...ec/transformers/valid/AutoExtensionImporter/amp-bind-square-brackets/expected_output.html b/...ec/transformers/valid/AutoExtensionImporter/amp-bind-square-brackets/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-bind-0.1.js" custom-element="amp-bind"></script>
+  <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.js"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script>
 </head>
 <body>
   <div [text]="greeting"></div>

diff --git a/...optimizer/spec/transformers/valid/AutoExtensionImporter/amp-carousel/expected_output.html b/...optimizer/spec/transformers/valid/AutoExtensionImporter/amp-carousel/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-carousel-0.1.js" custom-element="amp-carousel"></script>
+  <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.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 -->

diff --git a/...ges/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-form/expected_output.html b/...ges/optimizer/spec/transformers/valid/AutoExtensionImporter/amp-form/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-form-0.1.js" custom-element="amp-form"></script>
+  <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.js"></script><script async src="https://cdn.ampproject.org/v0/amp-form-0.1.js" custom-element="amp-form"></script>
 </head>
 <body>
   <form class="sample-form" method="GET" action="/documentation/examples/api/submit-form" target="_top">

diff --git a/...izer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html b/...izer/spec/transformers/valid/AutoExtensionImporter/amp-subscriptions/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-8">
   <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-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>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-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.js"></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>
   <script type="application/ld+json">
     {
       "@context": "http://schema.org",

diff --git a/...sformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html b/...sformers/valid/AutoExtensionImporter/auto-imports-missing-extensions/expected_output.html
@@ -4,9 +4,9 @@
   <meta charset="utf-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-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>
+  <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.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">
     {

diff --git a/...transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html b/...transformers/valid/AutoExtensionImporter/ignores-existing-extensions/expected_output.html
@@ -4,10 +4,10 @@
   <meta charset="utf-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-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>
+  <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 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>
+  <script async src="https://cdn.ampproject.org/v0.js"></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>
 </head>
 <body>
   <h1>Hello AMPHTML World!</h1>