Embedded JS: Conditionally inject jQuery (#9861)

For injecting the flyout menu we are relying on a script from our theme,
that script depends on jQuery, so it needs to be present for the
flyout menu to work.

https://github.com/readthedocs/readthedocs.org/blob/67c44a1f1b27dcc66bd14520d019459fcf86354d/readthedocs/core/static-src/core/js/doc-embed/sphinx.js#L43-L59

We have migrated most of our code to vanilla JS,
but this piece isn't simple to migrate.

bower.json

@@ -14,7 +14,7 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "2.0.3",
+    "jquery": "3.6.3",
     "underscore": "~1.7.0",
     "readthedocs-client": "https://github.com/agjohnson/readthedocs-client-js.git",
     "sphinx-rtd-theme": "https://github.com/readthedocs/sphinx_rtd_theme.git#0.3.1",
@@ -25,6 +25,6 @@
     "xss": "~0.3.1"
   },
   "resolutions": {
-    "jquery": "2.0.3"
+    "jquery": "3.6.3"
   }
 }

readthedocs/core/static-src/core/js/doc-embed/rtd-data.js

@@ -58,6 +58,7 @@ function get() {
     var defaults = {
         api_host: 'https://readthedocs.org',
         ad_free: false,
+        proxied_static_path: '/_/static/',
     };
 
     Object.assign(config, defaults, window.READTHEDOCS_DATA);

readthedocs/core/static-src/core/js/readthedocs-doc-embed.js

@@ -5,12 +5,44 @@ const footer = require('./doc-embed/footer.js');
 const sphinx = require('./doc-embed/sphinx');
 const search = require('./doc-embed/search');
 const { domReady } = require('./doc-embed/utils');
+const rtddata = require('./doc-embed/rtd-data');
+
+/*
+ * Inject JQuery if isn't present already.
+ *
+ * Parts of this script rely on JQuery (mainly the flyout menu injection),
+ * since Sphinx no longer includes it, and other tools may not include it,
+ * we must inject it if isn't found before executing our script.
+*/
+function injectJQuery(init) {
+    if (window.jQuery) {
+        init();
+        return;
+    }
+    console.debug("JQuery not found. Injecting.");
+    let rtd = rtddata.get();
+    let script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = rtd.proxied_static_path + "vendor/jquery.js";
+    script.onload = function () {
+        // Set jQuery to its expected globals.
+        /* eslint-disable global-require */
+        window.$ = require("jquery");
+        window.jQuery = window.$;
+        init();
+    };
+    document.head.appendChild(script);
+}
+
 
 (function () {
     domReady(function () {
-        footer.init();
-        sphinx.init();
-        search.init();
-        sponsorship.init();
+        // Block on jQuery loading before we run any of our code.
+        injectJQuery(function () {
+            footer.init();
+            sphinx.init();
+            search.init();
+            sponsorship.init();
+        });
     });
 }());

readthedocs/doc_builder/backends/mkdocs.py

@@ -278,7 +278,9 @@ def generate_rtd_data(self, docs_dir, mkdocs_config):
             'global_analytics_code': (
                 None if self.project.analytics_disabled else settings.GLOBAL_ANALYTICS_CODE
             ),
-            'user_analytics_code': analytics_code,
+            "user_analytics_code": analytics_code,
+            "proxied_static_path": self.project.proxied_static_path,
+            "proxied_api_host": self.project.proxied_api_host,
         }
 
         data_ctx = {