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

package/dist/browser-composables.js

@@ -0,0 +1,606 @@
+import { onDestroy, onMount } from "./composables.js";
+function unref(value) {
+  return typeof value === "object" && value !== null && "value" in value ? value.value : value;
+}
+export function useLocalStorage(key, defaultValue) {
+  const storage = typeof window < "u" ? window.localStorage : null;
+  function read() {
+    if (!storage)
+      return defaultValue;
+    try {
+      const item = storage.getItem(key);
+      return item ? JSON.parse(item) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  }
+  function write(value) {
+    if (!storage)
+      return;
+    try {
+      storage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.warn(`[useLocalStorage] Failed to save "${key}":`, e);
+    }
+  }
+  let currentValue = read();
+  return {
+    get value() {
+      return currentValue;
+    },
+    set value(newValue) {
+      currentValue = newValue;
+      write(newValue);
+    },
+    remove() {
+      storage?.removeItem(key);
+      currentValue = defaultValue;
+    }
+  };
+}
+export function useSessionStorage(key, defaultValue) {
+  const storage = typeof window < "u" ? window.sessionStorage : null;
+  function read() {
+    if (!storage)
+      return defaultValue;
+    try {
+      const item = storage.getItem(key);
+      return item ? JSON.parse(item) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  }
+  function write(value) {
+    if (!storage)
+      return;
+    try {
+      storage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.warn(`[useSessionStorage] Failed to save "${key}":`, e);
+    }
+  }
+  let currentValue = read();
+  return {
+    get value() {
+      return currentValue;
+    },
+    set value(newValue) {
+      currentValue = newValue;
+      write(newValue);
+    },
+    remove() {
+      storage?.removeItem(key);
+      currentValue = defaultValue;
+    }
+  };
+}
+export function useEventListener(...args) {
+  let target, event, handler, options;
+  if (typeof args[0] === "string") {
+    target = typeof window < "u" ? window : null;
+    event = args[0];
+    handler = args[1];
+    options = args[2];
+  } else {
+    target = unref(args[0]);
+    event = args[1];
+    handler = args[2];
+    options = args[3];
+  }
+  const cleanup = () => {
+    target?.removeEventListener(event, handler, options);
+  };
+  if (target) {
+    target.addEventListener(event, handler, options);
+    onDestroy(cleanup);
+  }
+  return cleanup;
+}
+export function useClickOutside(target, handler) {
+  return useEventListener(document, "click", (event) => {
+    const el = unref(target);
+    if (!el || el.contains(event.target))
+      return;
+    handler(event);
+  });
+}
+export function useWindowSize() {
+  let w = typeof window < "u" ? window.innerWidth : 0, h = typeof window < "u" ? window.innerHeight : 0;
+  if (typeof window < "u")
+    useEventListener("resize", () => {
+      w = window.innerWidth;
+      h = window.innerHeight;
+    });
+  return {
+    width: { get value() {
+      return w;
+    } },
+    height: { get value() {
+      return h;
+    } }
+  };
+}
+export function useMediaQuery(query) {
+  if (typeof window > "u")
+    return { value: !1 };
+  const mediaQuery = window.matchMedia(query);
+  let matches = mediaQuery.matches;
+  const handler = (e) => {
+    matches = e.matches;
+  };
+  mediaQuery.addEventListener("change", handler);
+  onDestroy(() => mediaQuery.removeEventListener("change", handler));
+  return {
+    get value() {
+      return matches;
+    }
+  };
+}
+export function useBreakpoints() {
+  return {
+    isMobile: useMediaQuery("(max-width: 639px)"),
+    isTablet: useMediaQuery("(min-width: 640px) and (max-width: 1023px)"),
+    isDesktop: useMediaQuery("(min-width: 1024px)"),
+    isLargeDesktop: useMediaQuery("(min-width: 1280px)")
+  };
+}
+export function usePrefersDark() {
+  return useMediaQuery("(prefers-color-scheme: dark)");
+}
+export function useOnline() {
+  let online = typeof navigator < "u" ? navigator.onLine : !0;
+  if (typeof window < "u") {
+    useEventListener("online", () => {
+      online = !0;
+    });
+    useEventListener("offline", () => {
+      online = !1;
+    });
+  }
+  return {
+    get value() {
+      return online;
+    }
+  };
+}
+export function useMouse() {
+  let x = 0, y = 0;
+  if (typeof window < "u")
+    useEventListener("mousemove", (e) => {
+      x = e.clientX;
+      y = e.clientY;
+    });
+  return {
+    x: { get value() {
+      return x;
+    } },
+    y: { get value() {
+      return y;
+    } }
+  };
+}
+export function useScroll(target) {
+  let x = 0, y = 0, isScrolling = !1, scrollTimeout = null;
+  const el = target ? unref(target) : typeof window < "u" ? window : null;
+  if (el) {
+    const handler = () => {
+      if (el === window) {
+        x = window.scrollX;
+        y = window.scrollY;
+      } else if (el instanceof HTMLElement) {
+        x = el.scrollLeft;
+        y = el.scrollTop;
+      }
+      isScrolling = !0;
+      if (scrollTimeout)
+        clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        isScrolling = !1;
+      }, 150);
+    };
+    if (el === window)
+      useEventListener("scroll", handler);
+    else {
+      el.addEventListener("scroll", handler);
+      onDestroy(() => el.removeEventListener("scroll", handler));
+    }
+  }
+  return {
+    x: { get value() {
+      return x;
+    } },
+    y: { get value() {
+      return y;
+    } },
+    isScrolling: { get value() {
+      return isScrolling;
+    } }
+  };
+}
+export function useDebounce(fn, delay) {
+  let timeoutId = null;
+  const debouncedFn = (...args) => {
+    if (timeoutId)
+      clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+  onDestroy(() => {
+    if (timeoutId)
+      clearTimeout(timeoutId);
+  });
+  return debouncedFn;
+}
+export function useDebouncedValue(getter, delay) {
+  let currentValue = getter(), timeoutId = null;
+  const intervalId = setInterval(() => {
+    if (timeoutId)
+      clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      currentValue = getter();
+    }, delay);
+  }, 16);
+  onDestroy(() => {
+    clearInterval(intervalId);
+    if (timeoutId)
+      clearTimeout(timeoutId);
+  });
+  return {
+    get value() {
+      return currentValue;
+    }
+  };
+}
+export function useThrottle(fn, limit) {
+  let lastCall = 0, timeoutId = null;
+  const throttledFn = (...args) => {
+    const now = Date.now();
+    if (now - lastCall >= limit) {
+      lastCall = now;
+      fn(...args);
+    } else {
+      if (timeoutId)
+        clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        lastCall = Date.now();
+        fn(...args);
+      }, limit - (now - lastCall));
+    }
+  };
+  onDestroy(() => {
+    if (timeoutId)
+      clearTimeout(timeoutId);
+  });
+  return throttledFn;
+}
+export function useInterval(interval, options, thirdOptions) {
+  let callback = null, delay, opts;
+  if (typeof interval === "function") {
+    callback = interval;
+    if (typeof options === "number") {
+      delay = options;
+      opts = thirdOptions || {};
+    } else {
+      delay = 1000;
+      opts = options && typeof options === "object" ? options : {};
+    }
+  } else {
+    delay = interval || 1000;
+    opts = typeof options === "object" && options ? options : {};
+  }
+  let count = 0, id = null, running = !1, listeners = [];
+  const shouldTick = () => {
+    if (opts.whileVisible && typeof document < "u" && document.hidden)
+      return !1;
+    const enabled = opts.enabled;
+    if (typeof enabled === "function")
+      return !!enabled();
+    return enabled !== !1;
+  }, tick = () => {
+    if (!shouldTick())
+      return;
+    count++;
+    listeners.forEach((fn) => fn(count));
+  }, resume = () => {
+    if (running)
+      return;
+    running = !0;
+    id = setInterval(tick, delay);
+    if (opts.immediate)
+      tick();
+  }, pause = () => {
+    if (!running)
+      return;
+    running = !1;
+    if (id !== null) {
+      clearInterval(id);
+      id = null;
+    }
+  }, reset = () => {
+    pause();
+    count = 0;
+    listeners.forEach((fn) => fn(count));
+    resume();
+  };
+  if (callback)
+    listeners.push(callback);
+  if (typeof window < "u") {
+    resume();
+    onDestroy(() => {
+      pause();
+      listeners = [];
+    });
+  }
+  return {
+    get counter() {
+      return count;
+    },
+    pause,
+    resume,
+    reset,
+    subscribe(fn) {
+      listeners.push(fn);
+      return () => {
+        listeners = listeners.filter((f) => f !== fn);
+      };
+    }
+  };
+}
+export function useTimeout(callback, delay) {
+  let isPending = !1, timeoutId = null;
+  const start = () => {
+    stop();
+    isPending = !0;
+    timeoutId = setTimeout(() => {
+      isPending = !1;
+      callback();
+    }, delay);
+  }, stop = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    isPending = !1;
+  };
+  onDestroy(stop);
+  return {
+    isPending: { get value() {
+      return isPending;
+    } },
+    start,
+    stop
+  };
+}
+export function useToggle(initial = !1) {
+  let state = initial;
+  return [
+    {
+      get value() {
+        return state;
+      },
+      set value(v) {
+        state = v;
+      }
+    },
+    () => {
+      state = !state;
+    },
+    (value) => {
+      state = value;
+    }
+  ];
+}
+export function useCounter(initial = 0, options = {}) {
+  let count = initial;
+  const clamp = (value) => {
+    if (options.min !== void 0 && value < options.min)
+      return options.min;
+    if (options.max !== void 0 && value > options.max)
+      return options.max;
+    return value;
+  };
+  return {
+    count: {
+      get value() {
+        return count;
+      },
+      set value(v) {
+        count = clamp(v);
+      }
+    },
+    inc: (delta = 1) => {
+      count = clamp(count + delta);
+    },
+    dec: (delta = 1) => {
+      count = clamp(count - delta);
+    },
+    set: (value) => {
+      count = clamp(value);
+    },
+    reset: () => {
+      count = initial;
+    }
+  };
+}
+export function useClipboard() {
+  let text = "", copied = !1, copiedTimeout = null;
+  const copy = async (value) => {
+    if (typeof navigator > "u" || !navigator.clipboard) {
+      console.warn("[useClipboard] Clipboard API not available");
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      text = value;
+      copied = !0;
+      if (copiedTimeout)
+        clearTimeout(copiedTimeout);
+      copiedTimeout = setTimeout(() => {
+        copied = !1;
+      }, 1500);
+    } catch (e) {
+      console.error("[useClipboard] Failed to copy:", e);
+    }
+  }, read = async () => {
+    if (typeof navigator > "u" || !navigator.clipboard)
+      return "";
+    try {
+      text = await navigator.clipboard.readText();
+      return text;
+    } catch {
+      return "";
+    }
+  };
+  onDestroy(() => {
+    if (copiedTimeout)
+      clearTimeout(copiedTimeout);
+  });
+  return {
+    text: { get value() {
+      return text;
+    } },
+    copied: { get value() {
+      return copied;
+    } },
+    copy,
+    read
+  };
+}
+export function useTitle(initial) {
+  let title = typeof document < "u" ? document.title : initial || "";
+  if (initial && typeof document < "u")
+    document.title = initial;
+  return {
+    get value() {
+      return title;
+    },
+    set value(newTitle) {
+      title = newTitle;
+      if (typeof document < "u")
+        document.title = newTitle;
+    }
+  };
+}
+export function useIntersectionObserver(target, options = {}) {
+  let isVisible = !1, observer = null;
+  const stop = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+  onMount(() => {
+    const el = unref(target);
+    if (!el || typeof IntersectionObserver > "u")
+      return;
+    observer = new IntersectionObserver(([entry]) => {
+      isVisible = entry.isIntersecting;
+    }, options);
+    observer.observe(el);
+  });
+  onDestroy(stop);
+  return {
+    isVisible: { get value() {
+      return isVisible;
+    } },
+    stop
+  };
+}
+export function useFocus(target) {
+  let isFocused = !1;
+  onMount(() => {
+    const el = unref(target);
+    if (!el)
+      return;
+    const onFocus = () => {
+      isFocused = !0;
+    }, onBlur = () => {
+      isFocused = !1;
+    };
+    el.addEventListener("focus", onFocus);
+    el.addEventListener("blur", onBlur);
+    onDestroy(() => {
+      el.removeEventListener("focus", onFocus);
+      el.removeEventListener("blur", onBlur);
+    });
+  });
+  return {
+    isFocused: { get value() {
+      return isFocused;
+    } },
+    focus: () => unref(target)?.focus(),
+    blur: () => unref(target)?.blur()
+  };
+}
+export function useFetch(url, options = {}) {
+  const { immediate = !0, initialData = null, refetch: _refetch, ...fetchOptions } = options;
+  let data = initialData, error = null, isLoading = !1, abortController = null;
+  const execute = async () => {
+    const resolvedUrl = typeof url === "function" ? url() : url;
+    abortController?.abort();
+    abortController = new AbortController;
+    isLoading = !0;
+    error = null;
+    try {
+      const response = await fetch(resolvedUrl, {
+        ...fetchOptions,
+        signal: abortController.signal
+      });
+      if (!response.ok)
+        throw Error(`HTTP ${response.status}: ${response.statusText}`);
+      data = await response.json();
+    } catch (e) {
+      if (e.name !== "AbortError")
+        error = e;
+    } finally {
+      isLoading = !1;
+    }
+  }, abort = () => {
+    abortController?.abort();
+  };
+  if (immediate && typeof window < "u")
+    execute();
+  onDestroy(abort);
+  return {
+    data: { get value() {
+      return data;
+    } },
+    error: { get value() {
+      return error;
+    } },
+    isLoading: { get value() {
+      return isLoading;
+    } },
+    execute,
+    abort
+  };
+}
+export function useAsync(fn, options = {}) {
+  let state = null, isLoading = !1, error = null;
+  const execute = async () => {
+    isLoading = !0;
+    error = null;
+    try {
+      state = await fn();
+      return state;
+    } catch (e) {
+      error = e;
+      return null;
+    } finally {
+      isLoading = !1;
+    }
+  };
+  if (options.immediate !== !1 && typeof window < "u")
+    execute();
+  return {
+    state: { get value() {
+      return state;
+    } },
+    isLoading: { get value() {
+      return isLoading;
+    } },
+    error: { get value() {
+      return error;
+    } },
+    execute
+  };
+}

package/dist/browser-core-imports.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The names stx auto-imports into a client script from `@stacksjs/browser`.
+ *
+ * Its own module, importing nothing, because two things read it: the injector
+ * in `client-script.ts` and the declaration emitter in `stx-virtual-ts.ts`.
+ * Keeping it in `client-script.ts` made the second import reach across a
+ * module that pulls in most of the package - and in the chunked build the
+ * declarations silently stopped being emitted, so the checker went back to
+ * reporting `debounce` and `useTimeoutFn` as typos. A leaf has no order to get
+ * wrong.
+ */
+export declare const BROWSER_CORE_IMPORTS: readonly string[];

package/dist/browser-core-imports.js

@@ -0,0 +1,28 @@
+export const BROWSER_CORE_IMPORTS = [
+  "browserQuery",
+  "BrowserQueryBuilder",
+  "BrowserQueryError",
+  "browserAuth",
+  "configureBrowser",
+  "getBrowserConfig",
+  "createBrowserDb",
+  "createBrowserModel",
+  "isBrowser",
+  "debounce",
+  "throttle",
+  "retry",
+  "sleep",
+  "wait",
+  "delay",
+  "waitUntil",
+  "waitWhile",
+  "lazy",
+  "clamp",
+  "rand",
+  "readableSize",
+  "useActiveElement",
+  "useDocumentVisibility",
+  "useIntervalFn",
+  "useObjectUrl",
+  "useTimeoutFn"
+];

package/dist/build-assets.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Generate a fingerprint hash from content.
+ * Uses SHA-256 truncated to 8 hex chars.
+ */
+export declare function fingerprint(content: string): string;
+/**
+ * Build the signals runtime as an external asset.
+ * This is identical for every page — no need to inline 20-40KB per page.
+ */
+export declare function buildRuntimeAsset(debug?: boolean): BuiltAsset;
+/**
+ * Build the SPA router script as an external asset.
+ * Identical for every page — ~5-8KB.
+ */
+export declare function buildRouterAsset(): BuiltAsset;
+/**
+ * Generates `<script src>` and `<link href>` tags for externalized assets.
+ * Used in build mode to replace inline scripts with references.
+ */
+export declare function assetTags(assets: { runtime?: BuiltAsset, router?: BuiltAsset, css?: BuiltAsset }): {
+  runtimeTag: string
+  routerTag: string
+  cssTag: string
+};
+/**
+ * A built asset with content and fingerprinted filename.
+ */
+export declare interface BuiltAsset {
+  content: string
+  filename: string
+  hash: string
+}

package/dist/build-assets.js

@@ -0,0 +1,29 @@
+import { createHash } from "node:crypto";
+import { generateSignalsRuntime, generateSignalsRuntimeDev } from "./signals.js";
+import { getRouterScript } from "stx-router";
+export function fingerprint(content) {
+  return createHash("sha256").update(content).digest("hex").slice(0, 8);
+}
+export function buildRuntimeAsset(debug = !1) {
+  const content = debug ? generateSignalsRuntimeDev() : generateSignalsRuntime(), hash = fingerprint(content);
+  return {
+    content,
+    filename: `runtime.${hash}.js`,
+    hash
+  };
+}
+export function buildRouterAsset() {
+  const content = getRouterScript(), hash = fingerprint(content);
+  return {
+    content,
+    filename: `router.${hash}.js`,
+    hash
+  };
+}
+export function assetTags(assets) {
+  return {
+    runtimeTag: assets.runtime ? `<script src="/__stx/${assets.runtime.filename}"></script>` : "",
+    routerTag: assets.router ? `<script src="/__stx/${assets.router.filename}"></script>` : "",
+    cssTag: assets.css ? `<link rel="stylesheet" href="/__stx/${assets.css.filename}">` : ""
+  };
+}