@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/lazy-loader.js

@@ -0,0 +1,245 @@
+export class LazyLoader {
+  modules = new Map;
+  options;
+  constructor(options = {}) {
+    this.options = {
+      timeout: 1e4,
+      debug: !1,
+      ...options
+    };
+  }
+  register(name, loader, dependencies) {
+    this.modules.set(name, {
+      loader,
+      status: "pending",
+      dependencies,
+      loadCount: 0
+    });
+    if (this.options.debug)
+      console.log(`[LazyLoader] Registered: ${name}`);
+  }
+  registerAll(modules) {
+    for (const [name, loader] of Object.entries(modules))
+      this.register(name, loader);
+  }
+  has(name) {
+    return this.modules.has(name);
+  }
+  getStatus(name) {
+    return this.modules.get(name)?.status ?? null;
+  }
+  isLoaded(name) {
+    return this.getStatus(name) === "loaded";
+  }
+  async load(name) {
+    const info = this.modules.get(name);
+    if (!info)
+      throw Error(`Module "${name}" is not registered`);
+    if (info.status === "loaded" && info.module !== void 0) {
+      info.loadCount++;
+      return info.module;
+    }
+    if (info.status === "loading" && info.promise)
+      return info.promise;
+    if (info.status === "error" && info.error)
+      throw info.error;
+    if (info.dependencies)
+      await this.loadAll(info.dependencies);
+    info.status = "loading";
+    const startTime = performance.now();
+    info.promise = this.loadWithTimeout(name, info.loader).then((module) => {
+      info.module = module;
+      info.status = "loaded";
+      info.loadCount++;
+      info.loadTime = performance.now() - startTime;
+      if (this.options.debug)
+        console.log(`[LazyLoader] Loaded: ${name} (${info.loadTime.toFixed(2)}ms)`);
+      return module;
+    }).catch((error) => {
+      info.status = "error";
+      info.error = error;
+      if (this.options.onError)
+        this.options.onError(name, error);
+      if (this.options.debug)
+        console.error(`[LazyLoader] Error loading ${name}:`, error);
+      throw error;
+    });
+    return info.promise;
+  }
+  async loadAll(names) {
+    return Promise.all(names.map((name) => this.load(name)));
+  }
+  loadSync(name) {
+    const info = this.modules.get(name);
+    if (!info)
+      throw Error(`Module "${name}" is not registered`);
+    if (info.status !== "loaded" || info.module === void 0)
+      throw Error(`Module "${name}" is not loaded. Use async load() first.`);
+    info.loadCount++;
+    return info.module;
+  }
+  preload(names) {
+    return Promise.all(names.map((name) => this.load(name).catch(() => {}))).then(() => {});
+  }
+  unload(name) {
+    const info = this.modules.get(name);
+    if (!info)
+      return !1;
+    info.status = "pending";
+    info.module = void 0;
+    info.promise = void 0;
+    info.error = void 0;
+    if (this.options.debug)
+      console.log(`[LazyLoader] Unloaded: ${name}`);
+    return !0;
+  }
+  unloadAll() {
+    for (const name of this.modules.keys())
+      this.unload(name);
+  }
+  getStats() {
+    let loaded = 0, pending = 0, errors = 0, totalLoadTime = 0;
+    const modules = [];
+    for (const [name, info] of this.modules) {
+      switch (info.status) {
+        case "loaded":
+          loaded++;
+          break;
+        case "pending":
+          pending++;
+          break;
+        case "error":
+          errors++;
+          break;
+      }
+      if (info.loadTime)
+        totalLoadTime += info.loadTime;
+      modules.push({
+        name,
+        status: info.status,
+        loadCount: info.loadCount,
+        loadTime: info.loadTime
+      });
+    }
+    return {
+      registered: this.modules.size,
+      loaded,
+      pending,
+      errors,
+      totalLoadTime,
+      modules
+    };
+  }
+  async loadWithTimeout(name, loader) {
+    const timeout = this.options.timeout || 1e4;
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(Error(`Module "${name}" loading timed out after ${timeout}ms`));
+      }, timeout);
+      Promise.resolve(loader()).then((module) => {
+        clearTimeout(timer);
+        resolve(module);
+      }).catch((error) => {
+        clearTimeout(timer);
+        reject(error);
+      });
+    });
+  }
+}
+
+export class DirectiveLoaderRegistry {
+  loader;
+  directiveMap = new Map;
+  constructor(options = {}) {
+    this.loader = new LazyLoader(options);
+  }
+  registerDirective(directiveName, moduleName, loader) {
+    this.directiveMap.set(directiveName, moduleName);
+    if (!this.loader.has(moduleName))
+      this.loader.register(moduleName, loader);
+  }
+  async getProcessor(directiveName) {
+    const moduleName = this.directiveMap.get(directiveName);
+    if (!moduleName)
+      return null;
+    const module = await this.loader.load(moduleName);
+    if ("default" in module && module.default)
+      return module.default;
+    return module;
+  }
+  hasDirective(directiveName) {
+    return this.directiveMap.has(directiveName);
+  }
+  getDirectiveNames() {
+    return Array.from(this.directiveMap.keys());
+  }
+  async preloadDirectives(directiveNames) {
+    const moduleNames = directiveNames.map((name) => this.directiveMap.get(name)).filter((name) => name !== void 0);
+    await this.loader.preload([...new Set(moduleNames)]);
+  }
+}
+export function createDirectiveRegistry() {
+  const registry = new DirectiveLoaderRegistry;
+  registry.registerDirective("markdown", "markdown", () => import("./markdown.js").then((m) => ({
+    process: (content, params, ctx) => {
+      const paramsArray = params ? params.split(",").map((p) => p.trim()) : [];
+      return m.markdownDirectiveHandler(content, paramsArray, ctx || {}, "lazy-loader");
+    },
+    name: "markdown",
+    hasEndTag: !0
+  })));
+  registry.registerDirective("translate", "i18n", () => import("./i18n.js").then((m) => ({
+    process: (content, params, ctx) => {
+      const key = params || content.trim();
+      return m.getTranslation(key, ctx);
+    },
+    name: "translate",
+    hasEndTag: !1
+  })));
+  registry.registerDirective("a11y", "a11y", () => import("./a11y.js").then((m) => ({
+    process: (content, _params, ctx) => {
+      const filePath = ctx?.__filePath || "unknown";
+      return m.checkA11y(content, filePath).then((issues) => content + (issues.length > 0 ? `<!-- A11y: ${issues.length} issues -->` : ""));
+    },
+    name: "a11y",
+    hasEndTag: !0
+  })));
+  return registry;
+}
+export const globalLoader = new LazyLoader, directiveRegistry = createDirectiveRegistry();
+export function createLazyModule(loader) {
+  let module, loading, loaded = !1;
+  return {
+    async get() {
+      if (loaded && module !== void 0)
+        return module;
+      if (loading)
+        return loading;
+      loading = Promise.resolve(loader()).then((m) => {
+        module = m;
+        loaded = !0;
+        return m;
+      });
+      return loading;
+    },
+    isLoaded() {
+      return loaded;
+    },
+    async preload() {
+      await this.get();
+    }
+  };
+}
+export async function batchLoad(loader, names, onProgress) {
+  const results = new Map, total = names.length;
+  for (let i = 0;i < names.length; i++) {
+    const name = names[i];
+    try {
+      const module = await loader.load(name);
+      results.set(name, module);
+    } catch {}
+    if (onProgress)
+      onProgress(i + 1, total, name);
+  }
+  return results;
+}

package/dist/lazy-module.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Deduplicate cold dynamic imports across concurrent template renders.
+ *
+ * Bun normally caches evaluated modules, but separate first-use import()
+ * calls can still enter its TypeScript compilation path concurrently. A dev
+ * server prewarming several routes exposed that race as partial module builds
+ * such as "Unexpected end of file" from forms-validation.ts. Keeping the
+ * pending promise makes first compilation single-flight while preserving lazy
+ * loading and the circular-dependency boundaries that require import().
+ */
+export declare function importOnce<T>(key: string, importer: () => Promise<T>): Promise<T>;

package/dist/lazy-module.js

@@ -0,0 +1,18 @@
+const LAZY_MODULE_PROMISES = Symbol.for("stx.lazy-module-promises");
+function modulePromises() {
+  const shared = globalThis;
+  shared[LAZY_MODULE_PROMISES] ??= new Map;
+  return shared[LAZY_MODULE_PROMISES];
+}
+export function importOnce(key, importer) {
+  const promises = modulePromises(), scopedKey = `${import.meta.url}\x00${key}`, pending = promises.get(scopedKey);
+  if (pending)
+    return pending;
+  const imported = importer();
+  promises.set(scopedKey, imported);
+  imported.catch(() => {
+    if (promises.get(scopedKey) === imported)
+      promises.delete(scopedKey);
+  });
+  return imported;
+}

package/dist/loading-indicator.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Create a loading indicator instance (composable-style)
+ */
+export declare function useLoadingIndicator(userOptions?: LoadingIndicatorOptions): LoadingIndicatorInstance;
+/**
+ * Initialize automatic loading indicator for page navigation
+ * Call this once in your app to enable automatic loading on route changes.
+ *
+ * Safe to call multiple times — each call disposes any previous wiring
+ * before installing new listeners. Use `cleanupLoadingIndicator()` to
+ * tear down without re-installing.
+ */
+export declare function initLoadingIndicator(userOptions?: LoadingIndicatorOptions): void;
+/**
+ * Tear down the loading-indicator listeners + restore the original
+ * window.fetch. Safe to call when no init has run (no-op).
+ */
+export declare function cleanupLoadingIndicator(): void;
+/**
+ * Generate the HTML for the loading indicator component
+ * This is used by the STX compiler for <stx-loading-indicator />
+ */
+export declare function generateLoadingIndicatorHtml(options?: LoadingIndicatorOptions): string;
+export declare interface LoadingIndicatorOptions {
+  color?: string
+  initialColor?: string
+  height?: string
+  duration?: number
+  throttle?: number
+  autoFinish?: boolean
+  zIndex?: number
+}
+export declare interface LoadingIndicatorState {
+  isLoading: boolean
+  progress: number
+  error: boolean
+}
+export declare interface LoadingIndicatorInstance {
+  start: () => void
+  set: (value: number) => void
+  finish: () => void
+  clear: () => void
+  state: LoadingIndicatorState
+}
+// Export for use in STX templates
+export default {
+  useLoadingIndicator,
+  initLoadingIndicator,
+  generateLoadingIndicatorHtml,
+};

package/dist/loading-indicator.js

@@ -0,0 +1,322 @@
+const isBrowser = typeof window < "u" && typeof document < "u", defaultOptions = {
+  color: "#6366f1",
+  initialColor: "",
+  height: "3px",
+  duration: 2000,
+  throttle: 200,
+  autoFinish: !0,
+  zIndex: 999999
+};
+let indicatorElement = null, currentProgress = 0, isLoading = !1, rafId = null, finishTimeout = null, incrementInterval = null;
+function createIndicatorElement(options) {
+  if (!isBrowser)
+    return null;
+  const existing = document.getElementById("stx-loading-indicator");
+  if (existing)
+    existing.remove();
+  const el = document.createElement("div");
+  el.id = "stx-loading-indicator";
+  const gradient = options.initialColor ? `linear-gradient(to right, ${options.initialColor}, ${options.color})` : options.color;
+  el.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: ${options.height};
+    background: ${gradient};
+    z-index: ${options.zIndex};
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.1s ease-out, opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none;
+  `;
+  const shimmer = document.createElement("div");
+  shimmer.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255,255,255,0.4) 50%,
+      transparent 100%
+    );
+    animation: stx-shimmer 1.5s infinite;
+  `;
+  el.appendChild(shimmer);
+  if (!document.getElementById("stx-loading-styles")) {
+    const style = document.createElement("style");
+    style.id = "stx-loading-styles";
+    style.textContent = `
+      @keyframes stx-shimmer {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(100%); }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+function updateProgress(progress, options) {
+  if (!isBrowser || !indicatorElement)
+    return;
+  currentProgress = Math.min(Math.max(progress, 0), 100);
+  if (rafId)
+    cancelAnimationFrame(rafId);
+  rafId = requestAnimationFrame(() => {
+    if (!indicatorElement)
+      return;
+    indicatorElement.style.opacity = currentProgress > 0 ? "1" : "0";
+    indicatorElement.style.transform = `scaleX(${currentProgress / 100})`;
+  });
+}
+function startLoading(options) {
+  if (!isBrowser)
+    return;
+  isLoading = !0;
+  currentProgress = 0;
+  if (!indicatorElement)
+    indicatorElement = createIndicatorElement(options);
+  if (finishTimeout)
+    clearTimeout(finishTimeout);
+  if (incrementInterval)
+    clearInterval(incrementInterval);
+  updateProgress(10, options);
+  incrementInterval = setInterval(() => {
+    if (!isLoading)
+      return;
+    const remaining = 90 - currentProgress, increment = Math.max(0.5, remaining * 0.1);
+    if (currentProgress < 90)
+      updateProgress(currentProgress + increment, options);
+  }, options.throttle);
+}
+function finishLoading(options) {
+  if (!isBrowser)
+    return;
+  isLoading = !1;
+  if (incrementInterval) {
+    clearInterval(incrementInterval);
+    incrementInterval = null;
+  }
+  updateProgress(100, options);
+  finishTimeout = setTimeout(() => {
+    if (indicatorElement)
+      indicatorElement.style.opacity = "0";
+    setTimeout(() => {
+      currentProgress = 0;
+      if (indicatorElement)
+        indicatorElement.style.transform = "scaleX(0)";
+    }, 300);
+  }, 200);
+}
+function clearLoading() {
+  if (!isBrowser)
+    return;
+  isLoading = !1;
+  currentProgress = 0;
+  if (incrementInterval) {
+    clearInterval(incrementInterval);
+    incrementInterval = null;
+  }
+  if (finishTimeout) {
+    clearTimeout(finishTimeout);
+    finishTimeout = null;
+  }
+  if (indicatorElement) {
+    indicatorElement.style.opacity = "0";
+    indicatorElement.style.transform = "scaleX(0)";
+  }
+}
+export function useLoadingIndicator(userOptions) {
+  const options = { ...defaultOptions, ...userOptions };
+  return {
+    start: () => startLoading(options),
+    set: (value) => updateProgress(value, options),
+    finish: () => finishLoading(options),
+    clear: () => clearLoading(),
+    get state() {
+      return {
+        isLoading,
+        progress: currentProgress,
+        error: !1
+      };
+    }
+  };
+}
+let activeLoadingCleanup = null;
+export function initLoadingIndicator(userOptions) {
+  if (!isBrowser)
+    return;
+  if (activeLoadingCleanup) {
+    activeLoadingCleanup();
+    activeLoadingCleanup = null;
+  }
+  const options = { ...defaultOptions, ...userOptions }, loading = useLoadingIndicator(options);
+  indicatorElement = createIndicatorElement(options);
+  let navigating = !1;
+  const onClick = (e) => {
+    const link = e.target.closest("a");
+    if (!link)
+      return;
+    const href = link.getAttribute("href");
+    if (!href)
+      return;
+    if (href.startsWith("http") || href.startsWith("#") || href.startsWith("mailto:") || href.startsWith("tel:") || link.target === "_blank" || link.hasAttribute("download"))
+      return;
+    navigating = !0;
+    loading.start();
+  }, onPopstate = () => {
+    if (!navigating) {
+      loading.start();
+      navigating = !0;
+    }
+  }, onLoad = () => {
+    if (navigating || options.autoFinish) {
+      loading.finish();
+      navigating = !1;
+    }
+  };
+  document.addEventListener("click", onClick);
+  window.addEventListener("popstate", onPopstate);
+  window.addEventListener("load", onLoad);
+  const originalFetch = window.fetch;
+  let activeRequests = 0;
+  const wrappedFetch = async function(...args) {
+    const url = typeof args[0] === "string" ? args[0] : args[0].url, isApi = url.includes("/api/") || url.startsWith("/api");
+    if (isApi) {
+      activeRequests++;
+      if (activeRequests === 1 && !navigating)
+        loading.start();
+    }
+    try {
+      return await originalFetch.apply(this, args);
+    } finally {
+      if (isApi) {
+        activeRequests--;
+        if (activeRequests === 0 && !navigating)
+          loading.finish();
+      }
+    }
+  };
+  window.fetch = wrappedFetch;
+  activeLoadingCleanup = () => {
+    document.removeEventListener("click", onClick);
+    window.removeEventListener("popstate", onPopstate);
+    window.removeEventListener("load", onLoad);
+    if (window.fetch === wrappedFetch)
+      window.fetch = originalFetch;
+  };
+}
+export function cleanupLoadingIndicator() {
+  if (activeLoadingCleanup) {
+    activeLoadingCleanup();
+    activeLoadingCleanup = null;
+  }
+}
+export function generateLoadingIndicatorHtml(options) {
+  const opts = { ...defaultOptions, ...options }, gradient = opts.initialColor ? `linear-gradient(to right, ${opts.initialColor}, ${opts.color})` : opts.color;
+  return `
+<div id="stx-loading-indicator" style="
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: ${opts.height};
+  background: ${gradient};
+  z-index: ${opts.zIndex};
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.1s ease-out, opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+">
+  <div style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
+    animation: stx-shimmer 1.5s infinite;
+  "></div>
+</div>
+<style>
+  @keyframes stx-shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+</style>
+<script>
+(function() {
+  var opts = ${JSON.stringify(opts)};
+  var el = document.getElementById('stx-loading-indicator');
+  var progress = 0;
+  var loading = false;
+  var interval = null;
+
+  function update(p) {
+    progress = Math.min(Math.max(p, 0), 100);
+    if (el) {
+      el.style.opacity = progress > 0 ? '1' : '0';
+      el.style.transform = 'scaleX(' + (progress / 100) + ')';
+    }
+  }
+
+  window.stxLoading = {
+    start: function() {
+      loading = true;
+      progress = 0;
+      update(10);
+      if (interval) clearInterval(interval);
+      interval = setInterval(function() {
+        if (!loading) return;
+        var remaining = 90 - progress;
+        var inc = Math.max(0.5, remaining * 0.1);
+        if (progress < 90) update(progress + inc);
+      }, opts.throttle);
+    },
+    finish: function() {
+      loading = false;
+      if (interval) { clearInterval(interval); interval = null; }
+      update(100);
+      setTimeout(function() {
+        if (el) el.style.opacity = '0';
+        setTimeout(function() {
+          progress = 0;
+          if (el) el.style.transform = 'scaleX(0)';
+        }, 300);
+      }, 200);
+    },
+    set: function(v) { update(v); },
+    clear: function() {
+      loading = false;
+      progress = 0;
+      if (interval) { clearInterval(interval); interval = null; }
+      if (el) { el.style.opacity = '0'; el.style.transform = 'scaleX(0)'; }
+    }
+  };
+
+  // Auto-hook navigation
+  document.addEventListener('click', function(e) {
+    var link = e.target.closest && e.target.closest('a');
+    if (!link) return;
+    var href = link.getAttribute('href');
+    if (!href || href.startsWith('http') || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:') || link.target === '_blank') return;
+    window.stxLoading.start();
+  });
+
+  window.addEventListener('popstate', function() { window.stxLoading.start(); });
+  window.addEventListener('load', function() { window.stxLoading.finish(); });
+})();
+</script>
+`;
+}
+export default {
+  useLoadingIndicator,
+  initLoadingIndicator,
+  generateLoadingIndicatorHtml
+};