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

package/dist/composables/use-utilities.js

@@ -0,0 +1,176 @@
+export function useToggle(initial = !1) {
+  let current = initial;
+  const listeners = new Set, notify = () => listeners.forEach((fn) => fn(current));
+  return [{
+    get value() {
+      return current;
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    }
+  }, () => {
+    current = !current;
+    notify();
+  }, (v) => {
+    if (v !== current) {
+      current = v;
+      notify();
+    }
+  }];
+}
+export function useCounter(initial = 0, options = {}) {
+  const { min = -1 / 0, max = 1 / 0 } = options;
+  let current = clamp(initial, min, max);
+  const listeners = new Set, notify = () => listeners.forEach((fn) => fn(current));
+  function clamp(v, lo, hi) {
+    return Math.min(hi, Math.max(lo, v));
+  }
+  return {
+    get count() {
+      return current;
+    },
+    inc(step = 1) {
+      current = clamp(current + step, min, max);
+      notify();
+    },
+    dec(step = 1) {
+      current = clamp(current - step, min, max);
+      notify();
+    },
+    set(value) {
+      current = clamp(value, min, max);
+      notify();
+    },
+    reset() {
+      current = clamp(initial, min, max);
+      notify();
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    }
+  };
+}
+export function useClickOutside(target, handler) {
+  if (typeof window > "u")
+    return { remove: () => {} };
+  const listener = (event) => {
+    const el = typeof target === "string" ? document.querySelector(target) : target;
+    if (!el)
+      return;
+    if (el === event.target || el.contains(event.target))
+      return;
+    handler(event);
+  };
+  document.addEventListener("pointerdown", listener, !0);
+  const remove = () => {
+    document.removeEventListener("pointerdown", listener, !0);
+  };
+  if (typeof globalThis.onDestroy === "function")
+    globalThis.onDestroy(remove);
+  return { remove };
+}
+export function useFocus(target) {
+  if (typeof window > "u")
+    return {
+      get isFocused() {
+        return !1;
+      },
+      focus: () => {},
+      blur: () => {},
+      subscribe: () => () => {}
+    };
+  let focused = !1;
+  const listeners = new Set, resolve = () => typeof target === "string" ? document.querySelector(target) : target, setFocused = (v) => {
+    if (v !== focused) {
+      focused = v;
+      listeners.forEach((fn) => fn(focused));
+    }
+  }, onFocus = () => setFocused(!0), onBlur = () => setFocused(!1), el = resolve();
+  if (el) {
+    el.addEventListener("focus", onFocus);
+    el.addEventListener("blur", onBlur);
+    focused = document.activeElement === el;
+  }
+  const remove = () => {
+    const el = resolve();
+    if (el) {
+      el.removeEventListener("focus", onFocus);
+      el.removeEventListener("blur", onBlur);
+    }
+    listeners.clear();
+  };
+  if (typeof globalThis.onDestroy === "function")
+    globalThis.onDestroy(remove);
+  return {
+    get isFocused() {
+      return focused;
+    },
+    focus() {
+      const el = resolve();
+      if (el && typeof el.focus === "function")
+        el.focus();
+    },
+    blur() {
+      const el = resolve();
+      if (el && typeof el.blur === "function")
+        el.blur();
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    }
+  };
+}
+export function useAsync(fn, options = {}) {
+  let asyncState = "idle", data = null, error = null;
+  const listeners = new Set, notify = () => {
+    const snapshot = { state: asyncState, data, error };
+    listeners.forEach((fn) => fn(snapshot));
+  }, execute = async (...args) => {
+    asyncState = "loading";
+    error = null;
+    notify();
+    try {
+      data = await fn(...args);
+      asyncState = "success";
+      notify();
+      return data;
+    } catch (e) {
+      error = e instanceof Error ? e : Error(String(e));
+      asyncState = "error";
+      notify();
+      return null;
+    }
+  };
+  if (options.immediate)
+    execute();
+  return {
+    get state() {
+      return asyncState;
+    },
+    get isLoading() {
+      return asyncState === "loading";
+    },
+    get error() {
+      return error;
+    },
+    get data() {
+      return data;
+    },
+    execute,
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    }
+  };
+}

package/dist/composables/use-wake-lock.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Check if Wake Lock API is supported
+ */
+export declare function isWakeLockSupported(): boolean;
+/**
+ * Create a reactive wake lock controller
+ *
+ * The Screen Wake Lock API prevents the screen from dimming or locking
+ * while your application is active. Useful for video players, presentation
+ * apps, or any application where the user needs to see the screen without
+ * interacting with it.
+ *
+ * @example
+ * ```ts
+ * const wakeLock = useWakeLock()
+ *
+ * // Request wake lock
+ * await wakeLock.request()
+ *
+ * // Subscribe to state changes
+ * wakeLock.subscribe((state) => {
+ *   console.log('Wake lock active:', state.isActive)
+ * })
+ *
+ * // Release when done
+ * await wakeLock.release()
+ *
+ * // Or toggle
+ * await wakeLock.toggle()
+ * ```
+ */
+export declare function useWakeLock(): WakeLockRef;
+/**
+ * Auto-acquire wake lock while component is mounted
+ *
+ * @example
+ * ```ts
+ * // In a video player component
+ * const wakeLock = useAutoWakeLock()
+ *
+ * wakeLock.subscribe((isActive) => {
+ *   console.log('Screen wake lock:', isActive ? 'on' : 'off')
+ * })
+ * ```
+ */
+export declare function useAutoWakeLock(): WakeLockRef;
+/**
+ * Wake lock that only activates while a condition is true
+ *
+ * @example
+ * ```ts
+ * const isPlaying = { value: false }
+ *
+ * const wakeLock = useConditionalWakeLock(() => isPlaying.value)
+ *
+ * // When video starts playing
+ * isPlaying.value = true
+ * wakeLock.check() // Acquires wake lock
+ *
+ * // When video pauses
+ * isPlaying.value = false
+ * wakeLock.check() // Releases wake lock
+ * ```
+ */
+export declare function useConditionalWakeLock(condition: () => boolean): WakeLockRef & { check: () => Promise<void> };
+/**
+ * Wake Lock Composables
+ *
+ * Reactive utilities for the Screen Wake Lock API to prevent devices from sleeping.
+ */
+export declare interface WakeLockState {
+  isSupported: boolean
+  isActive: boolean
+  type: 'screen' | null
+  error: Error | null
+}
+export declare interface WakeLockRef {
+  get: () => WakeLockState
+  subscribe: (fn: (state: WakeLockState) => void) => () => void
+  request: () => Promise<boolean>
+  release: () => Promise<void>
+  toggle: () => Promise<boolean>
+  isSupported: () => boolean
+  isActive: () => boolean
+}

package/dist/composables/use-wake-lock.js

@@ -0,0 +1,122 @@
+export function isWakeLockSupported() {
+  return typeof navigator < "u" && "wakeLock" in navigator;
+}
+export function useWakeLock() {
+  const supported = isWakeLockSupported(), subscribers = new Set;
+  let state = {
+    isSupported: supported,
+    isActive: !1,
+    type: null,
+    error: null
+  }, wakeLock = null, cleanup = null;
+  function notify() {
+    subscribers.forEach((fn) => fn(state));
+  }
+  function handleRelease() {
+    state = { ...state, isActive: !1, type: null };
+    wakeLock = null;
+    notify();
+  }
+  function handleVisibilityChange() {
+    if (document.visibilityState === "visible" && state.isActive === !1 && wakeLock === null)
+      ;
+  }
+  async function request() {
+    if (!supported) {
+      state = { ...state, error: Error("Wake Lock API not supported") };
+      notify();
+      return !1;
+    }
+    try {
+      wakeLock = await navigator.wakeLock.request("screen");
+      wakeLock.addEventListener("release", handleRelease);
+      if (!cleanup) {
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        cleanup = () => {
+          document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+      }
+      state = { ...state, isActive: !0, type: "screen", error: null };
+      notify();
+      return !0;
+    } catch (error) {
+      state = { ...state, isActive: !1, error };
+      notify();
+      return !1;
+    }
+  }
+  async function release() {
+    if (wakeLock) {
+      await wakeLock.release();
+      wakeLock = null;
+    }
+    state = { ...state, isActive: !1, type: null };
+    notify();
+  }
+  async function toggle() {
+    if (state.isActive) {
+      await release();
+      return !1;
+    } else
+      return request();
+  }
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      subscribers.add(fn);
+      fn(state);
+      return () => {
+        subscribers.delete(fn);
+        if (subscribers.size === 0) {
+          release();
+          cleanup?.();
+          cleanup = null;
+        }
+      };
+    },
+    request,
+    release,
+    toggle,
+    isSupported: () => supported,
+    isActive: () => state.isActive
+  };
+}
+export function useAutoWakeLock() {
+  const wakeLock = useWakeLock();
+  if (wakeLock.isSupported())
+    wakeLock.request();
+  if (typeof document < "u") {
+    const handleVisibility = async () => {
+      if (document.visibilityState === "visible" && !wakeLock.isActive())
+        await wakeLock.request();
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    const originalSubscribe = wakeLock.subscribe;
+    return {
+      ...wakeLock,
+      subscribe: (fn) => {
+        const unsub = originalSubscribe(fn);
+        return () => {
+          unsub();
+          document.removeEventListener("visibilitychange", handleVisibility);
+          wakeLock.release();
+        };
+      }
+    };
+  }
+  return wakeLock;
+}
+export function useConditionalWakeLock(condition) {
+  const wakeLock = useWakeLock();
+  async function check() {
+    const shouldBeActive = condition();
+    if (shouldBeActive && !wakeLock.isActive())
+      await wakeLock.request();
+    else if (!shouldBeActive && wakeLock.isActive())
+      await wakeLock.release();
+  }
+  return {
+    ...wakeLock,
+    check
+  };
+}

package/dist/composables/use-websocket.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Check if WebSocket is supported
+ */
+export declare function isWebSocketSupported(): boolean;
+/**
+ * Create a reactive WebSocket connection
+ *
+ * @example
+ * ```ts
+ * const ws = useWebSocket('wss://echo.websocket.org', {
+ *   autoReconnect: true,
+ *   onMessage: (event) => console.log('Received:', event.data),
+ * })
+ *
+ * // Subscribe to state changes
+ * ws.subscribe((state) => {
+ *   console.log('Status:', state.status)
+ *   console.log('Last data:', state.data)
+ * })
+ *
+ * // Send a message
+ * ws.send('Hello!')
+ *
+ * // Close connection
+ * ws.close()
+ * ```
+ */
+export declare function useWebSocket<T = unknown>(url: string | URL, options?: WebSocketOptions): WebSocketRef<T> & { on: (event: WebSocketEventType, callback: WebSocketEventCallback) => () => void };
+export declare interface WebSocketState<T = unknown> {
+  status: WebSocketStatus
+  data: T | null
+  error: Event | null
+  ws: WebSocket | null
+}
+export declare interface WebSocketOptions {
+  protocols?: string | string[]
+  autoReconnect?: boolean | {
+    retries?: number
+    delay?: number
+    maxDelay?: number
+    onFailed?: () => void
+  }
+  heartbeat?: boolean | {
+    message?: string | ArrayBuffer | Blob
+    interval?: number
+    pongTimeout?: number
+  }
+  immediate?: boolean
+  onOpen?: (event: Event) => void
+  onMessage?: (event: MessageEvent) => void
+  onClose?: (event: CloseEvent) => void
+  onError?: (event: Event) => void
+}
+export declare interface WebSocketRef<T = unknown> {
+  get: () => WebSocketState<T>
+  subscribe: (fn: (state: WebSocketState<T>) => void) => () => void
+  send: (data: string | ArrayBuffer | Blob) => boolean
+  open: () => void
+  close: (code?: number, reason?: string) => void
+  ws: () => WebSocket | null
+}
+/**
+ * WebSocket Composables
+ *
+ * Reactive utilities for WebSocket communication with auto-reconnect support.
+ */
+export type WebSocketStatus = 'connecting' | 'open' | 'closing' | 'closed';
+declare type WebSocketEventType = 'open' | 'message' | 'close' | 'error';
+// eslint-disable-next-line pickier/no-unused-vars
+declare type WebSocketEventCallback = (event: Event | MessageEvent | CloseEvent) => void;

package/dist/composables/use-websocket.js

@@ -0,0 +1,165 @@
+export function isWebSocketSupported() {
+  return typeof window < "u" && "WebSocket" in window;
+}
+export function useWebSocket(url, options = {}) {
+  const {
+    protocols,
+    autoReconnect = !1,
+    heartbeat = !1,
+    immediate = !0,
+    onOpen,
+    onMessage,
+    onClose,
+    onError
+  } = options, subscribers = new Set, eventListeners = new Map;
+  let state = {
+    status: "closed",
+    data: null,
+    error: null,
+    ws: null
+  }, retryCount = 0, heartbeatInterval = null, pongTimeout = null, explicitlyClosed = !1;
+  function notify() {
+    subscribers.forEach((fn) => fn(state));
+  }
+  function emitEvent(type, event) {
+    const listeners = eventListeners.get(type);
+    if (listeners)
+      listeners.forEach((fn) => fn(event));
+  }
+  function resetHeartbeat() {
+    if (heartbeatInterval) {
+      clearInterval(heartbeatInterval);
+      heartbeatInterval = null;
+    }
+    if (pongTimeout) {
+      clearTimeout(pongTimeout);
+      pongTimeout = null;
+    }
+  }
+  function startHeartbeat(ws) {
+    if (!heartbeat)
+      return;
+    const config = typeof heartbeat === "object" ? heartbeat : { message: "ping", interval: 30000, pongTimeout: 1e4 };
+    resetHeartbeat();
+    heartbeatInterval = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(config.message || "ping");
+        pongTimeout = setTimeout(() => {
+          ws.close();
+        }, config.pongTimeout || 1e4);
+      }
+    }, config.interval || 30000);
+  }
+  function getReconnectConfig() {
+    if (typeof autoReconnect === "object")
+      return {
+        retries: autoReconnect.retries ?? 3,
+        delay: autoReconnect.delay ?? 1000,
+        maxDelay: autoReconnect.maxDelay ?? 1e4,
+        onFailed: autoReconnect.onFailed
+      };
+    return { retries: 3, delay: 1000, maxDelay: 1e4, onFailed: void 0 };
+  }
+  function connect() {
+    if (!isWebSocketSupported())
+      return;
+    explicitlyClosed = !1;
+    state = { ...state, status: "connecting" };
+    notify();
+    try {
+      const ws = new WebSocket(url, protocols);
+      state = { ...state, ws };
+      ws.onopen = (event) => {
+        state = { ...state, status: "open" };
+        retryCount = 0;
+        notify();
+        startHeartbeat(ws);
+        emitEvent("open", event);
+        onOpen?.(event);
+      };
+      ws.onmessage = (event) => {
+        if (heartbeat && pongTimeout) {
+          clearTimeout(pongTimeout);
+          pongTimeout = null;
+        }
+        let parsedData;
+        try {
+          parsedData = JSON.parse(event.data);
+        } catch {
+          parsedData = event.data;
+        }
+        state = { ...state, data: parsedData };
+        notify();
+        emitEvent("message", event);
+        onMessage?.(event);
+      };
+      ws.onclose = (event) => {
+        resetHeartbeat();
+        state = { ...state, status: "closed", ws: null };
+        notify();
+        emitEvent("close", event);
+        onClose?.(event);
+        if (autoReconnect && !explicitlyClosed) {
+          const config = getReconnectConfig();
+          if (retryCount < config.retries) {
+            const delay = Math.min(config.delay * 2 ** retryCount, config.maxDelay);
+            retryCount++;
+            setTimeout(connect, delay);
+          } else
+            config.onFailed?.();
+        }
+      };
+      ws.onerror = (event) => {
+        state = { ...state, error: event };
+        notify();
+        emitEvent("error", event);
+        onError?.(event);
+      };
+    } catch (error) {
+      state = { ...state, status: "closed", error };
+      notify();
+    }
+  }
+  function send(data) {
+    if (state.ws && state.status === "open") {
+      const message = typeof data === "object" && !(data instanceof ArrayBuffer) && !(data instanceof Blob) ? JSON.stringify(data) : data;
+      state.ws.send(message);
+      return !0;
+    }
+    return !1;
+  }
+  function close(code, reason) {
+    explicitlyClosed = !0;
+    resetHeartbeat();
+    if (state.ws) {
+      state = { ...state, status: "closing" };
+      notify();
+      state.ws.close(code, reason);
+    }
+  }
+  function on(event, callback) {
+    if (!eventListeners.has(event))
+      eventListeners.set(event, new Set);
+    eventListeners.get(event).add(callback);
+    return () => {
+      eventListeners.get(event)?.delete(callback);
+    };
+  }
+  if (immediate)
+    connect();
+  return {
+    get: () => state,
+    subscribe: (fn) => {
+      subscribers.add(fn);
+      fn(state);
+      return () => {
+        subscribers.delete(fn);
+      };
+    },
+    send,
+    open: connect,
+    close,
+    ws: () => state.ws,
+    on
+  };
+}

package/dist/composables/use-window.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Track window size reactively
+ *
+ * @example
+ * ```ts
+ * const size = useWindowSize()
+ * console.log(size.width, size.height)
+ *
+ * size.subscribe(({ width, height }) => {
+ *   console.log('Window resized:', width, height)
+ * })
+ * ```
+ */
+export declare function useWindowSize(): WindowSizeRef;
+/**
+ * Track scroll position reactively
+ *
+ * @example
+ * ```ts
+ * const scroll = useScroll()
+ * console.log(scroll.x, scroll.y)
+ *
+ * scroll.subscribe(({ y }) => {
+ *   if (y > 100) showBackToTop()
+ * })
+ *
+ * scroll.scrollToTop()
+ * ```
+ */
+export declare function useScroll(): ScrollRef;
+/**
+ * Track document visibility
+ *
+ * @example
+ * ```ts
+ * const visibility = useVisibility()
+ *
+ * visibility.subscribe((visible) => {
+ *   if (!visible) pauseVideo()
+ *   else resumeVideo()
+ * })
+ * ```
+ */
+export declare function useVisibility(): VisibilityRef;
+/**
+ * Reactive document title
+ *
+ * @example
+ * ```ts
+ * const title = useTitle('My App')
+ * title.value = 'New Page - My App'
+ * ```
+ */
+export declare function useTitle(initialTitle?: string): { value: string; set: (title: string) => void };
+/**
+ * Reactive favicon
+ */
+export declare function useFavicon(href?: string): { value: string; set: (href: string) => void };
+/**
+ * useWindow - Reactive window properties composables
+ *
+ * Provides reactive tracking of window size, scroll position, visibility, etc.
+ */
+export declare interface WindowSize {
+  width: number
+  height: number
+}
+export declare interface ScrollPosition {
+  x: number
+  y: number
+}
+export declare interface WindowSizeRef extends WindowSize {
+  subscribe: (callback: (size: WindowSize) => void) => () => void
+}
+export declare interface ScrollRef extends ScrollPosition {
+  subscribe: (callback: (position: ScrollPosition) => void) => () => void
+  scrollTo: (options: ScrollToOptions | number, y?: number) => void
+  scrollToTop: () => void
+  scrollToBottom: () => void
+}
+export declare interface VisibilityRef {
+  isVisible: boolean
+  subscribe: (callback: (visible: boolean) => void) => () => void
+}