From: Ben Harris <bjh21@bjh21.me.uk>
Date: Mon, 6 Oct 2025 23:16:01 +0000 (+0100)
Subject: webstead: use a non-module <script> and import()
X-Git-Tag: bedstead-3.261~47
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~bjharris/git?a=commitdiff_plain;h=e6b411252b93c6d0787c1326e4d1a44089b4952b;p=bedstead.git

webstead: use a non-module <script> and import()

According to <https://github.com/fuweichin/xhtml5-esm-support>, an
internal script (a <script> element with content) can't be a module in
an XHTML page in Safari.  So following the suggestion on that page, I
make the <script> on the page into a classic script, and use import()
to load the module containing the bedstead executable.  Maybe this
will work on a reasonable selection of modern browsers.
---

diff --git a/webstead.xhtml b/webstead.xhtml
index 03b1152..d01a297 100644
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -40,9 +40,10 @@
     </style>
     <!-- Script is async rather than deferred because Chromium can't
          handle deferred scripts in XHTML.
-         https://issues.chromium.org/issues/40518469 -->
-    <script type="module" async="async"><![CDATA[
-    import Bedstead from './bedstead.js';
+         https://issues.chromium.org/issues/40518469
+         And it's not a module because Safari can't handle that. -->
+    <script async="async"><![CDATA[
+    var Bedstead;
     function update_glyph() {
         var args = [];
         var cstr = "";
@@ -80,13 +81,16 @@
         }
         update_glyph();
     }
-    // This script is loaded asynchronously, so make sure the DOM is
-    // loaded before touching it.
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", init);
-    } else {
-        init();
-    }
+    import("./bedstead.js").then((module) => {
+        Bedstead = module.default;
+        // This script is loaded asynchronously, so make sure the DOM is
+        // loaded before touching it.
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", init);
+        } else {
+            init();
+        }
+    });
 ]]>
     </script>
   </head>