@panyam/tsappkit 0.6.0 → 0.6.2

package/dist/index.mjs

@@ -1429,16 +1429,20 @@ function lazy(load) {
 }
 function mountIslands(spec, registry, findSlot, context, bus, log, options = {}) {
   const out = [];
+  const skip = (island, reason, message2) => {
+    log(message2);
+    options.onSkip?.(island, reason);
+  };
   let ctx;
   for (const island of spec.islands) {
     const entry = Object.prototype.hasOwnProperty.call(registry, island.name) ? registry[island.name] : void 0;
     if (!entry) {
-      log(`page spec: no island called "${island.name}" in this page's registry`);
+      skip(island, "not in the registry", `page spec: no island called "${island.name}" in this page's registry`);
       continue;
     }
     const el = findSlot(island.slot);
     if (el === null) {
-      log(`page spec: island "${island.name}" wants slot "${island.slot}", which isn't on the page`);
+      skip(island, "no slot", `page spec: island "${island.name}" wants slot "${island.slot}", which isn't on the page`);
       continue;
     }
     const build = (factory) => {
@@ -1446,14 +1450,16 @@ function mountIslands(spec, registry, findSlot, context, bus, log, options = {})
         ctx ?? (ctx = context());
         return factory(el, island, ctx, bus);
       } catch (err) {
-        log(`page spec: island "${island.name}" failed to mount: ${message(err)}`);
+        skip(island, "factory threw", `page spec: island "${island.name}" failed to mount: ${message(err)}`);
         return void 0;
       }
     };
     const mountLate = () => {
       const late = (factory) => {
         const c2 = build(factory);
-        if (c2 !== void 0) options.onLateMount?.(c2, island);
+        if (c2 === void 0) return;
+        options.onMount?.(c2, island, el);
+        options.onLateMount?.(c2, island);
       };
       if (typeof entry === "function") {
         late(entry);
@@ -1463,9 +1469,9 @@ function mountIslands(spec, registry, findSlot, context, bus, log, options = {})
         (m) => {
           const factory = typeof m === "function" ? m : m?.default;
           if (typeof factory === "function") late(factory);
-          else log(`page spec: island "${island.name}" loaded, but its module has no factory (a default export or the function itself)`);
+          else skip(island, "no factory", `page spec: island "${island.name}" loaded, but its module has no factory (a default export or the function itself)`);
         },
-        (err) => log(`page spec: island "${island.name}" failed to load: ${message(err)}`)
+        (err) => skip(island, "failed to load", `page spec: island "${island.name}" failed to load: ${message(err)}`)
       );
     };
     const strategy = parseLoad(island.load);
@@ -1481,7 +1487,10 @@ function mountIslands(spec, registry, findSlot, context, bus, log, options = {})
       continue;
     }
     const c = build(entry);
-    if (c !== void 0) out.push(c);
+    if (c !== void 0) {
+      out.push(c);
+      options.onMount?.(c, island, el);
+    }
   }
   return out;
 }
@@ -1489,6 +1498,48 @@ function message(err) {
   return err instanceof Error ? err.message : String(err);
 }
 
+// src/page/overlay.ts
+var STYLE_ID = "island-overlay-style";
+var CSS = `
+[data-island-debug] { position: relative; outline: 2px dashed #1565c0; outline-offset: -2px; }
+[data-island-debug]::after {
+  content: attr(data-island-debug); position: absolute; top: 0; right: 0; z-index: 2147483647;
+  font: 11px/1.4 ui-monospace, monospace; padding: 1px 6px; background: #1565c0; color: #fff; pointer-events: none;
+}
+[data-island-state="mounted"] { outline-color: #2e7d32; }
+[data-island-state="mounted"]::after { background: #2e7d32; }
+[data-island-state="failed"] { outline-color: #c62828; }
+[data-island-state="failed"]::after { background: #c62828; }
+`;
+var IslandOverlay = class {
+  constructor(doc = document, now = () => performance.now()) {
+    this.doc = doc;
+    this.now = now;
+    if (!doc.getElementById(STYLE_ID)) {
+      const style = doc.createElement("style");
+      style.id = STYLE_ID;
+      style.textContent = CSS;
+      doc.head.appendChild(style);
+    }
+  }
+  /** The island has a slot and hasn't mounted yet. */
+  waiting(island, el) {
+    this.label(island, el, "waiting", "waiting");
+  }
+  /** The island has just mounted. */
+  mounted(island, el) {
+    this.label(island, el, "mounted", `mounted ${Math.round(this.now())} ms`);
+  }
+  /** The island won't mount, for `reason`. */
+  failed(island, el, reason) {
+    this.label(island, el, "failed", reason);
+  }
+  label(island, el, state, text) {
+    el.dataset.islandState = state;
+    el.dataset.islandDebug = [island.name, island.slot, island.load || "eager", text].join(" \xB7 ");
+  }
+};
+
 // src/page/spec.ts
 var SPEC_ELEMENT_ID = "page-spec";
 var SLOT = /^[a-z][a-z0-9-]*$/;
@@ -1541,10 +1592,18 @@ var IslandPage = class extends BasePage {
       console.warn(`page spec: no readable #${SPEC_ELEMENT_ID} on this page, so nothing is mounted`);
       return [];
     }
+    const findSlot = (slot) => document.querySelector(`[data-slot="${slot}"]`);
+    const overlay = this.showIslandOverlay() ? new IslandOverlay() : void 0;
+    if (overlay) {
+      for (const island of spec.islands) {
+        const el = findSlot(island.slot);
+        if (el) overlay.waiting(island, el);
+      }
+    }
     return mountIslands(
       spec,
       this.registry(),
-      (slot) => document.querySelector(`[data-slot="${slot}"]`),
+      findSlot,
       () => this.makeContext(spec),
       this.eventBus,
       (message2) => console.warn(message2),
@@ -1552,10 +1611,23 @@ var IslandPage = class extends BasePage {
         defer: (island, el, mount) => this.scheduleLoad(parseLoad(island.load) ?? { kind: "eager" }, el, mount),
         onLateMount: (component, island) => {
           new LifecycleController(this.eventBus, LifecycleController.DefaultConfig).initializeFromRoot(component).catch((err) => console.warn(`page spec: island "${island.name}" failed to start: ${err instanceof Error ? err.message : String(err)}`));
-        }
+        },
+        onMount: overlay && ((_c, island, el) => overlay.mounted(island, el)),
+        onSkip: overlay && ((island, reason) => {
+          const el = findSlot(island.slot);
+          if (el) overlay.failed(island, el, reason);
+        })
       }
     );
   }
+  /**
+   * Whether to draw the island overlay. The default is true when the URL has
+   * an `islands` query parameter (`/game?islands`); a subclass can tie it to
+   * its own debug setting instead.
+   */
+  showIslandOverlay() {
+    return new URLSearchParams(window.location.search).has("islands");
+  }
   /**
    * Waits for `strategy` and then calls `mount`. Defaults to scheduleMount
    * against the window; a subclass or test can replace how the waiting is done.
@@ -1907,6 +1979,6 @@ var KeyboardShortcutManager = class {
   }
 };
 
-export { BaseComponent, BasePage, ComponentEventTypes, EventBus, IslandPage, KeyboardShortcutManager, KeyboardState, LifecycleController, LifecycleEventTypes, MobileBottomDrawer, Modal, SPEC_ELEMENT_ID, SplashScreen, TemplateLoader, ThemeManager, ToastManager, hasModifierKeys, isInInputContext, lazy, mountIslands, parseLoad, readSpec, scheduleMount, shouldIgnoreShortcut };
+export { BaseComponent, BasePage, ComponentEventTypes, EventBus, IslandOverlay, IslandPage, KeyboardShortcutManager, KeyboardState, LifecycleController, LifecycleEventTypes, MobileBottomDrawer, Modal, SPEC_ELEMENT_ID, SplashScreen, TemplateLoader, ThemeManager, ToastManager, hasModifierKeys, isInInputContext, lazy, mountIslands, parseLoad, readSpec, scheduleMount, shouldIgnoreShortcut };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map