Initialize version selector from static Pursuit.js (#494)

The version dropdown on package pages was wired up by a per-page inline
script that Yesod bundles into a dynamic /static/widget/<hash>.js file.
That file's contents live only in the running backend's in-memory
EmbeddedStatic store, so any backend restart orphaned it: nginx keeps
serving already-cached HTML referencing the old hash, the script 404s,
and the selector stays stuck on 'Loading ...'.

Drive the version selector, search form, and load-more link from the
statically embedded Pursuit.js instead. It is served from disk and is
stable across restarts. Per-page config for the selector now rides on
the <select> element as data attributes, and Pursuit.js self-initializes
on DOMContentLoaded.

Author: thomashoneyman

CHANGELOG.md

@@ -3,6 +3,20 @@
 Please see https://github.com/purescript/pursuit/blob/master/CHANGELOG.md for
 the most up-to-date version of this file.
 
+## v0.9.14
+
+- Fix the version selector getting stuck on "Loading …" after a restart
+  (@thomashoneyman)
+
+  The version dropdown on package pages was initialized by a per-page inline
+  script that Yesod bundles into a dynamic `/static/widget/<hash>.js` file,
+  whose contents live only in the running backend's in-memory store. Any
+  backend restart (such as a deploy) orphaned those widgets: nginx kept
+  serving already-cached HTML that referenced them, the script 404'd, and the
+  selector never populated. The version selector, search box, and search
+  "load more" link are now initialized from the statically embedded
+  `Pursuit.js`, which is served from disk and survives restarts.
+
 ## v0.9.13
 
 - Avoid decoding the latest package version just to render deprecation badges

src/Handler/Packages.hs

@@ -1,7 +1,6 @@
 module Handler.Packages where
 
 import Import
-import Text.Julius (rawJS)
 import Text.Blaze (ToMarkup, toMarkup)
 import qualified Data.Char as Char
 import Data.Version
@@ -301,7 +300,6 @@ defaultLayout404 widget =
 
 versionSelector :: PackageName -> Version -> WidgetFor App ()
 versionSelector pkgName version = do
-  versionSelectorIdent <- newIdent
   let route = PackageAvailableVersionsR (PathPackageName pkgName)
   availableVersionsUrl <- getUrlRender <*> pure route
   $(widgetFile "versionSelector")

static/js/Pursuit.js

@@ -1,13 +1,21 @@
 (function() {
-/* Expects arguments as an Object with the following properties:
- * - currentVersion (String):
+/* Expects the version selector <select> element, which carries its per-page
+ * configuration in data attributes:
+ * - data-current-version (String):
  *    the version of docs that is being shown on this page.
- * - elementId (String):
- *    the HTML id of the version selector element.
- * - availableVersionsUrl (String):
+ * - data-available-versions-url (String):
  *     The URL to fetch the available versions for this package from.
+ *
+ * This initializer is invoked from this (statically served) script rather than
+ * from an inline per-page script, so that it keeps working across backend
+ * restarts. Inline widget scripts are served from the backend's in-memory
+ * EmbeddedStatic store and are orphaned when it restarts, which would leave
+ * already-cached pages stuck showing "Loading …".
  */
-function initializeVersionSelector(args) {
+function initializeVersionSelector(selector) {
+  var currentVersion = selector.getAttribute('data-current-version')
+  var availableVersionsUrl = selector.getAttribute('data-available-versions-url')
+
   function getJSON(url, callback) {
     var req = new XMLHttpRequest()
     req.open('GET', url, true)
@@ -30,7 +38,7 @@ function initializeVersionSelector(args) {
     el.setAttribute("value", url)
 
     // Set the 'selected' attribute on the current version
-    if (version === args.currentVersion) {
+    if (version === currentVersion) {
       el.setAttribute('selected', null)
     }
 
@@ -52,13 +60,12 @@ function initializeVersionSelector(args) {
 
   // Set an onchange handler so that selecting a version in the <select>
   // will navigate to the new page
-  var selector = document.getElementById(args.elementId)
   selector.onchange = function() {
     window.location.href = this.value
   }
 
   // Load the <option> elements via AJAX
-  getJSON(args.availableVersionsUrl, function(data) {
+  getJSON(availableVersionsUrl, function(data) {
     // Delete the placeholder <option>
     selector.removeChild(selector.firstChild)
 
@@ -173,4 +180,31 @@ window.Pursuit = {
   initializeSearchForm: initializeSearchForm,
   initializeLoadMoreLink: initializeLoadMoreLink
 }
+
+// Wire everything up on page load. This script is served statically (embedded
+// at compile time), so it is always available; doing initialization here rather
+// than from inline per-page scripts means the page's dynamic behaviour survives
+// backend restarts. This script is loaded in <head>, so wait for the DOM.
+function onReady(fn) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn)
+  } else {
+    fn()
+  }
+}
+
+onReady(function() {
+  if (document.getElementById('search-input')) {
+    initializeSearchForm()
+  }
+
+  var selectors = document.querySelectorAll('.version-selector')
+  for (var i = 0; i < selectors.length; i++) {
+    initializeVersionSelector(selectors[i])
+  }
+
+  if (document.getElementById('load-more-link')) {
+    initializeLoadMoreLink()
+  }
+})
 })()

templates/default-layout.julius

@@ -1,3 +1,3 @@
-<select id=#{versionSelectorIdent} .version-selector>
+<select .version-selector data-current-version=#{showVersion version} data-available-versions-url=#{availableVersionsUrl}>
   <option id="placeholder" disabled="disabled">
     Loading …