Fix JS browser compatibility on dev

Because the code in `dev-server/static/scripts/util.js` is not
transpiled by Babel, it needs to be compatible with all the browsers
versions in `browserslist` (`package.json`).

Optional chaining `(?.)` is for example not support in Chrome versions <
80.

This is only an issue when testing `localhost:3000` on these supported,
but older browser versions.

dev-server/serve-dev.js

@@ -29,11 +29,12 @@ function renderScript(context) {
   const scriptTemplate = `
     {{{hypothesisConfig}}}
 
-    <script type="module">
-      import { loadClient } from '/scripts/util.js';
-
-      const clientUrl = '{{{clientUrl}}}'.replace('{current_host}', document.location.hostname);
-      loadClient(clientUrl);
+    <script src="/scripts/util.js"></script>
+    <script>
+      (function(){
+        let clientUrl = '{{{clientUrl}}}'.replace('{current_host}', document.location.hostname);
+        loadClient(clientUrl);
+      })();
     </script>
   `;
   return Mustache.render(scriptTemplate, context);

dev-server/static/scripts/index.js

+ /**
+  * Because the code in this file is not transpiled by Babel, it must be compatible
+  * with all the supported browsers version (see `browserlist` in `package.json`)
+  * without transpilation. Do not include latest EcmaScript features as these
+  * will cause exceptions while working on dev (`localhost:3000`) on slightly
+  * older, yet supported browser versions.
+  */
+ 
 // Code for controls on the dev server homepage.
 
-import { activeClientUrl, loadClient, unloadClient } from './util.js';
-
-const toggleClientButton = document.querySelector('.js-toggle-client');
-toggleClientButton.textContent = 'Unload client';
-const clientUrl = activeClientUrl;
-
-toggleClientButton.onclick = () => {
-  if (activeClientUrl) {
-    unloadClient();
-    toggleClientButton.textContent = 'Load client';
-  } else {
-    loadClient(clientUrl);
-    toggleClientButton.textContent = 'Unload client';
-  }
-};
+(function () {
+  let toggleClientButton = document.querySelector('.js-toggle-client');
+  toggleClientButton.textContent = 'Unload client';
+  let clientUrl = activeClientUrl;
 
+  toggleClientButton.onclick = () => {
+    if (activeClientUrl) {
+      unloadClient();
+      toggleClientButton.textContent = 'Load client';
+    } else {
+      loadClient(clientUrl);
+      toggleClientButton.textContent = 'Unload client';
+    }
+  };
+})();

dev-server/static/scripts/util.js

+ /**
+  * Because the code in this file is not transpiled by Babel, it must be compatible
+  * with all the supported browsers version (see `browserlist` in `package.json`)
+  * without transpilation. Do not include latest EcmaScript features as these
+  * will cause exceptions while working on dev (`localhost:3000`) on slightly
+  * older, yet supported browser versions.
+  */
+
 /** @type {string|null} */
-export let activeClientUrl;
+let activeClientUrl;
 
 /**
  * Load the Hypothesis client into the page.
  *
  * @param {string} clientUrl
  */
-export function loadClient(clientUrl) {
-  const embedScript = document.createElement('script');
+function loadClient(clientUrl) {
+  let embedScript = document.createElement('script');
   embedScript.src = clientUrl;
   document.body.appendChild(embedScript);
   activeClientUrl = clientUrl;
@@ -18,8 +26,11 @@ export function loadClient(clientUrl) {
  *
  * This uses the same method as the browser extension does to deactivate the client.
  */
-export function unloadClient() {
-  const annotatorLink = document.querySelector('link[type="application/annotator+html"]');
-  annotatorLink?.dispatchEvent(new Event('destroy'));
+function unloadClient() {
+  let annotatorLink = document.querySelector('link[type="application/annotator+html"]');
+
+  if (annotatorLink) {
+    annotatorLink.dispatchEvent(new Event('destroy'));
+  }
   activeClientUrl = null;
 }

dev-server/templates/index.mustache

@@ -49,6 +49,6 @@
     <li><a href="https://h.readthedocs.io/en/latest/api/">Hypothesis API documentation</a></li>
   </ul>
   {{{hypothesisScript}}}
-  <script type="module" src="/scripts/index.js"></script>
+  <script src="/scripts/index.js"></script>
 </body>
 </html>