POC for fix, only on the /project/ interface

Author: thehabes

interfaces/project/index.html

@@ -92,13 +92,14 @@ <h2 slot="header">Project Details <a id="projectManagementBtn" title="Manage Pro
 <script type="module">
     import TPEN from '../../api/TPEN.js'
     import CheckPermissions from '../../components/check-permissions/checkPermissions.js'
+    import { whenProjectReady } from '../../utilities/projectReady.js'
 
     // [tpen-race C] /project inline-script about to register listener.  Issue #541 diagnostic.
     const _alreadyLoaded = !!TPEN.activeProject?._createdAt
     console.log(`%c[tpen-race C]%c /project inline-script registering tpen-project-loaded listener; activeProject._createdAt=${_alreadyLoaded ? TPEN.activeProject._createdAt : 'UNSET'} @${performance.now().toFixed(1)}ms`, _alreadyLoaded ? 'color:#cc0000;font-weight:bold' : 'color:#008800;font-weight:bold', 'color:inherit')
     let _listenerFired = false
 
-    TPEN.eventDispatcher.on('tpen-project-loaded', (ev) => {
+    whenProjectReady((ev) => {
         _listenerFired = true
         console.log(`%c[tpen-race D]%c /project listener fired @${performance.now().toFixed(1)}ms`, 'color:#008800;font-weight:bold', 'color:inherit')
         const goParse = document.getElementById("goParse")

utilities/projectReady.js

@@ -11,3 +11,28 @@ export const onProjectReady = (ctx, handler, eventName = 'tpen-project-loaded')
   TPEN.eventDispatcher.on(eventName, bound)
   return () => TPEN.eventDispatcher.off(eventName, bound)
 }
+
+/**
+ * Context-free variant of {@link onProjectReady} for inline `<script type="module">`
+ * blocks that have no element to bind to.  If the project is already loaded when
+ * called, the handler is invoked synchronously with a synthetic
+ * `{ detail: TPEN.activeProject }` event so existing `ev.detail.*` handler bodies
+ * keep working.  Also subscribes for any future `tpen-project-loaded` dispatch.
+ *
+ * Closes the race described in issue #541, where the dispatch can complete before
+ * an inline-script's `eventDispatcher.on(...)` registration runs.
+ *
+ * @param {(ev: { detail: any }) => void} handler
+ * @param {string} [eventName='tpen-project-loaded']
+ * @returns {() => void} unsubscribe
+ */
+export const whenProjectReady = (handler, eventName = 'tpen-project-loaded') => {
+  if (typeof handler !== 'function') return () => {}
+  try {
+    if (TPEN.activeProject?._createdAt) {
+      handler({ detail: TPEN.activeProject })
+    }
+  } catch (_) {}
+  TPEN.eventDispatcher.on(eventName, handler)
+  return () => TPEN.eventDispatcher.off(eventName, handler)
+}