@panyam/tsappkit 0.3.0 → 0.6.0

package/dist/index.mjs

@@ -255,9 +255,9 @@ var BaseComponent = class {
   /**
    * Log messages with component identification
    */
-  log(message, data = null) {
+  log(message2, data = null) {
     if (this.debugMode) {
-      console.log(`[${this.componentId}] ${message}`, data);
+      console.log(`[${this.componentId}] ${message2}`, data);
     }
   }
   /**
@@ -435,16 +435,16 @@ var LifecycleController = class {
   /**
    * Log message if debug logging is enabled
    */
-  log(message, ...args) {
+  log(message2, ...args) {
     if (this.config.enableDebugLogging) {
-      console.log(`[LifecycleController] ${message}`, ...args);
+      console.log(`[LifecycleController] ${message2}`, ...args);
     }
   }
   /**
    * Log error message
    */
-  logError(message, error) {
-    console.error(`[LifecycleController] ${message}`, error);
+  logError(message2, error) {
+    console.error(`[LifecycleController] ${message2}`, error);
   }
   /**
    * Get current status of all components
@@ -843,7 +843,7 @@ var _ToastManager = class _ToastManager {
    * @param type Toast type for styling
    * @param duration Duration in ms (default: 4000)
    */
-  showToast(title, message, type = "info", duration = 4e3) {
+  showToast(title, message2, type = "info", duration = 4e3) {
     if (!this.container || !this.template) return "";
     const id = `toast-${Date.now()}-${this.counter++}`;
     const toast = this.template.cloneNode(true);
@@ -852,7 +852,7 @@ var _ToastManager = class _ToastManager {
     const titleElement = toast.querySelector(".toast-title");
     const messageElement = toast.querySelector(".toast-message");
     if (titleElement) titleElement.textContent = title;
-    if (messageElement) messageElement.textContent = message;
+    if (messageElement) messageElement.textContent = message2;
     const iconContainer = toast.querySelector(".flex-shrink-0");
     if (iconContainer) {
       iconContainer.innerHTML = "";
@@ -957,7 +957,7 @@ var SplashScreen = class {
   /**
    * Update the splash screen message (if it hasn't been dismissed yet)
    */
-  static updateMessage(title, message) {
+  static updateMessage(title, message2) {
     if (this.dismissed) {
       return;
     }
@@ -971,10 +971,10 @@ var SplashScreen = class {
         titleEl.textContent = title;
       }
     }
-    if (message) {
+    if (message2) {
       const messageEl = splash.querySelector("[data-splash-message]");
       if (messageEl) {
-        messageEl.textContent = message;
+        messageEl.textContent = message2;
       }
     }
   }
@@ -1089,8 +1089,8 @@ var BasePage = class extends BaseComponent {
   /**
    * Show a toast notification
    */
-  showToast(title, message, type = "info", duration) {
-    this.toastManager?.showToast(title, message, type, duration);
+  showToast(title, message2, type = "info", duration) {
+    this.toastManager?.showToast(title, message2, type, duration);
   }
   /**
    * Show a modal dialog
@@ -1371,13 +1371,68 @@ var MobileBottomDrawer = class extends BaseComponent {
   }
 };
 
+// src/page/load.ts
+function parseLoad(load) {
+  switch (load ?? "") {
+    case "":
+    case "eager":
+      return { kind: "eager" };
+    case "idle":
+      return { kind: "idle" };
+    case "visible":
+      return { kind: "visible" };
+  }
+  const query = load.startsWith("media:") ? load.slice("media:".length) : "";
+  return query.trim() ? { kind: "media", query } : null;
+}
+function scheduleMount(strategy, el, mount, env = window) {
+  switch (strategy.kind) {
+    case "eager":
+      mount();
+      return;
+    case "idle":
+      if (env.requestIdleCallback) env.requestIdleCallback(mount);
+      else env.setTimeout(mount, 1);
+      return;
+    case "visible": {
+      let done = false;
+      const observer = new env.IntersectionObserver((entries) => {
+        if (done || !entries.some((e) => e.isIntersecting)) return;
+        done = true;
+        observer.disconnect();
+        mount();
+      });
+      observer.observe(el);
+      return;
+    }
+    case "media": {
+      const mq = env.matchMedia(strategy.query);
+      if (mq.matches) {
+        mount();
+        return;
+      }
+      const onChange = (e) => {
+        if (!e.matches) return;
+        mq.removeEventListener("change", onChange);
+        mount();
+      };
+      mq.addEventListener("change", onChange);
+      return;
+    }
+  }
+}
+
 // src/page/mount.ts
-function mountIslands(spec, registry, findSlot, context, bus, log) {
+var LAZY = /* @__PURE__ */ Symbol("lazy island");
+function lazy(load) {
+  return { [LAZY]: load };
+}
+function mountIslands(spec, registry, findSlot, context, bus, log, options = {}) {
   const out = [];
   let ctx;
   for (const island of spec.islands) {
-    const factory = Object.prototype.hasOwnProperty.call(registry, island.name) ? registry[island.name] : void 0;
-    if (!factory) {
+    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`);
       continue;
     }
@@ -1386,15 +1441,53 @@ function mountIslands(spec, registry, findSlot, context, bus, log) {
       log(`page spec: island "${island.name}" wants slot "${island.slot}", which isn't on the page`);
       continue;
     }
-    try {
-      ctx ?? (ctx = context());
-      out.push(factory(el, island, ctx, bus));
-    } catch (err) {
-      log(`page spec: island "${island.name}" failed to mount: ${err instanceof Error ? err.message : String(err)}`);
+    const build = (factory) => {
+      try {
+        ctx ?? (ctx = context());
+        return factory(el, island, ctx, bus);
+      } catch (err) {
+        log(`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 (typeof entry === "function") {
+        late(entry);
+        return;
+      }
+      new Promise((resolve) => resolve(entry[LAZY]())).then(
+        (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)`);
+        },
+        (err) => log(`page spec: island "${island.name}" failed to load: ${message(err)}`)
+      );
+    };
+    const strategy = parseLoad(island.load);
+    if (strategy === null) {
+      log(`page spec: island "${island.name}" has load "${island.load}", which isn't eager, idle, visible or media:<query>; mounting it now`);
+    }
+    if (options.defer && strategy !== null && strategy.kind !== "eager") {
+      options.defer(island, el, mountLate);
+      continue;
     }
+    if (typeof entry !== "function") {
+      mountLate();
+      continue;
+    }
+    const c = build(entry);
+    if (c !== void 0) out.push(c);
   }
   return out;
 }
+function message(err) {
+  return err instanceof Error ? err.message : String(err);
+}
 
 // src/page/spec.ts
 var SPEC_ELEMENT_ID = "page-spec";
@@ -1415,7 +1508,8 @@ function readSpec(text, extend) {
       name: is.name,
       slot: is.slot,
       ...typeof is.presentation === "string" && { presentation: is.presentation },
-      config: isObject(is.config) ? is.config : {}
+      config: isObject(is.config) ? is.config : {},
+      ...typeof is.load === "string" && { load: is.load }
     });
   }
   const spec = { layout: raw.layout, islands };
@@ -1453,9 +1547,22 @@ var IslandPage = class extends BasePage {
       (slot) => document.querySelector(`[data-slot="${slot}"]`),
       () => this.makeContext(spec),
       this.eventBus,
-      (message) => console.warn(message)
+      (message2) => console.warn(message2),
+      {
+        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)}`));
+        }
+      }
     );
   }
+  /**
+   * Waits for `strategy` and then calls `mount`. Defaults to scheduleMount
+   * against the window; a subclass or test can replace how the waiting is done.
+   */
+  scheduleLoad(strategy, el, mount) {
+    scheduleMount(strategy, el, mount);
+  }
 };
 
 // src/DOMUtils.ts
@@ -1800,6 +1907,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, mountIslands, readSpec, shouldIgnoreShortcut };
+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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map