preact-missing-hooks 3.1.0 → 4.0.0

package/src/useClipboard.ts

@@ -1,97 +1,99 @@
-import { useCallback, useState } from 'preact/hooks';
-
-export interface UseClipboardOptions {
-  /** Duration in ms to keep `copied` true before resetting. Default: 2000 */
-  resetDelay?: number;
-}
-
-export interface UseClipboardReturn {
-  /** Copy text to the clipboard. Returns true on success. */
-  copy: (text: string) => Promise<boolean>;
-  /** Read text from the clipboard. Returns empty string if denied or unavailable. */
-  paste: () => Promise<string>;
-  /** Whether the last copy operation succeeded (resets after resetDelay) */
-  copied: boolean;
-  /** Error from the last failed operation, or null */
-  error: Error | null;
-  /** Manually reset copied and error state */
-  reset: () => void;
-}
-
-/**
- * A Preact hook for reading and writing the clipboard. Uses the async
- * Clipboard API when available (requires secure context and user gesture).
- *
- * @param options - Optional configuration (e.g., resetDelay for copied state)
- * @returns Object with copy, paste, copied, error, and reset
- *
- * @example
- * ```tsx
- * function CopyButton() {
- *   const { copy, copied, error } = useClipboard();
- *   return (
- *     <button onClick={() => copy('Hello!')}>
- *       {copied ? 'Copied!' : 'Copy'}
- *     </button>
- *   );
- * }
- * ```
- */
-export function useClipboard(options: UseClipboardOptions = {}): UseClipboardReturn {
-  const { resetDelay = 2000 } = options;
-
-  const [copied, setCopied] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const reset = useCallback(() => {
-    setCopied(false);
-    setError(null);
-  }, []);
-
-  const copy = useCallback(
-    async (text: string): Promise<boolean> => {
-      setError(null);
-
-      if (typeof navigator === 'undefined' || !navigator.clipboard) {
-        const err = new Error('Clipboard API is not available');
-        setError(err);
-        return false;
-      }
-
-      try {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        if (resetDelay > 0) {
-          setTimeout(() => setCopied(false), resetDelay);
-        }
-        return true;
-      } catch (e) {
-        const err = e instanceof Error ? e : new Error(String(e));
-        setError(err);
-        return false;
-      }
-    },
-    [resetDelay]
-  );
-
-  const paste = useCallback(async (): Promise<string> => {
-    setError(null);
-
-    if (typeof navigator === 'undefined' || !navigator.clipboard) {
-      const err = new Error('Clipboard API is not available');
-      setError(err);
-      return '';
-    }
-
-    try {
-      const text = await navigator.clipboard.readText();
-      return text;
-    } catch (e) {
-      const err = e instanceof Error ? e : new Error(String(e));
-      setError(err);
-      return '';
-    }
-  }, []);
-
-  return { copy, paste, copied, error, reset };
-}
+import { useCallback, useState } from "preact/hooks";
+
+export interface UseClipboardOptions {
+  /** Duration in ms to keep `copied` true before resetting. Default: 2000 */
+  resetDelay?: number;
+}
+
+export interface UseClipboardReturn {
+  /** Copy text to the clipboard. Returns true on success. */
+  copy: (text: string) => Promise<boolean>;
+  /** Read text from the clipboard. Returns empty string if denied or unavailable. */
+  paste: () => Promise<string>;
+  /** Whether the last copy operation succeeded (resets after resetDelay) */
+  copied: boolean;
+  /** Error from the last failed operation, or null */
+  error: Error | null;
+  /** Manually reset copied and error state */
+  reset: () => void;
+}
+
+/**
+ * A Preact hook for reading and writing the clipboard. Uses the async
+ * Clipboard API when available (requires secure context and user gesture).
+ *
+ * @param options - Optional configuration (e.g., resetDelay for copied state)
+ * @returns Object with copy, paste, copied, error, and reset
+ *
+ * @example
+ * ```tsx
+ * function CopyButton() {
+ *   const { copy, copied, error } = useClipboard();
+ *   return (
+ *     <button onClick={() => copy('Hello!')}>
+ *       {copied ? 'Copied!' : 'Copy'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useClipboard(
+  options: UseClipboardOptions = {}
+): UseClipboardReturn {
+  const { resetDelay = 2000 } = options;
+
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const reset = useCallback(() => {
+    setCopied(false);
+    setError(null);
+  }, []);
+
+  const copy = useCallback(
+    async (text: string): Promise<boolean> => {
+      setError(null);
+
+      if (typeof navigator === "undefined" || !navigator.clipboard) {
+        const err = new Error("Clipboard API is not available");
+        setError(err);
+        return false;
+      }
+
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (resetDelay > 0) {
+          setTimeout(() => setCopied(false), resetDelay);
+        }
+        return true;
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err);
+        return false;
+      }
+    },
+    [resetDelay]
+  );
+
+  const paste = useCallback(async (): Promise<string> => {
+    setError(null);
+
+    if (typeof navigator === "undefined" || !navigator.clipboard) {
+      const err = new Error("Clipboard API is not available");
+      setError(err);
+      return "";
+    }
+
+    try {
+      const text = await navigator.clipboard.readText();
+      return text;
+    } catch (e) {
+      const err = e instanceof Error ? e : new Error(String(e));
+      setError(err);
+      return "";
+    }
+  }, []);
+
+  return { copy, paste, copied, error, reset };
+}

package/src/useEventBus.ts

@@ -1,36 +1,39 @@
-import { useCallback, useEffect } from 'preact/hooks';
-
-type EventMap = Record<string, (...args: any[]) => void>;
-
-const listeners = new Map<string, Set<(...args: any[]) => void>>();
-
-/**
- * A Preact hook to publish and subscribe to custom events across components.
- * @returns An object with `emit` and `on` methods.
- */
-export function useEventBus<T extends EventMap>() {
-  const emit = useCallback(<K extends keyof T>(event: K, ...args: Parameters<T[K]>) => {
-    const handlers = listeners.get(event as string);
-    if (handlers) {
-      handlers.forEach((handler) => handler(...args));
-    }
-  }, []);
-
-  const on = useCallback(<K extends keyof T>(event: K, handler: T[K]) => {
-    let handlers = listeners.get(event as string);
-    if (!handlers) {
-      handlers = new Set();
-      listeners.set(event as string, handlers);
-    }
-    handlers.add(handler);
-
-    return () => {
-      handlers!.delete(handler);
-      if (handlers!.size === 0) {
-        listeners.delete(event as string);
-      }
-    };
-  }, []);
-
-  return { emit, on };
-}
+import { useCallback } from "preact/hooks";
+
+type EventMap = Record<string, (...args: unknown[]) => void>;
+
+const listeners = new Map<string, Set<(...args: unknown[]) => void>>();
+
+/**
+ * A Preact hook to publish and subscribe to custom events across components.
+ * @returns An object with `emit` and `on` methods.
+ */
+export function useEventBus<T extends EventMap>() {
+  const emit = useCallback(
+    <K extends keyof T>(event: K, ...args: Parameters<T[K]>) => {
+      const handlers = listeners.get(event as string);
+      if (handlers) {
+        handlers.forEach((handler) => handler(...args));
+      }
+    },
+    []
+  );
+
+  const on = useCallback(<K extends keyof T>(event: K, handler: T[K]) => {
+    let handlers = listeners.get(event as string);
+    if (!handlers) {
+      handlers = new Set();
+      listeners.set(event as string, handlers);
+    }
+    handlers.add(handler);
+
+    return () => {
+      handlers!.delete(handler);
+      if (handlers!.size === 0) {
+        listeners.delete(event as string);
+      }
+    };
+  }, []);
+
+  return { emit, on };
+}

package/src/useIndexedDB.ts

@@ -1,111 +1,111 @@
-/**
- * Preact hook for IndexedDB: open database, create stores/indexes, return a database controller.
- * Uses a singleton connection per (name, version).
- * @module useIndexedDB
- */
-
-import { useState, useEffect, useRef } from 'preact/hooks';
-import type { IndexedDBConfig } from './indexedDB/types';
-import { openDB } from './indexedDB/openDB';
-import { createDBController } from './indexedDB/dbController';
-import type { IDBController } from './indexedDB/dbController';
-
-export type { IndexedDBConfig, IDBController } from './indexedDB';
-
-export interface UseIndexedDBReturn {
-  /** Database controller (table, transaction). Null until the database is open. */
-  db: IDBController | null;
-  /** True once the database is open and ready. */
-  isReady: boolean;
-  /** Error from opening the database, if any. */
-  error: DOMException | null;
-}
-
-/**
- * Opens an IndexedDB database and returns a controller for tables and transactions.
- * Handles onupgradeneeded: creates object stores and indexes from config.
- * Connection is a singleton per (config.name, config.version).
- *
- * @param config - Database name, version, and table schemas (keyPath, autoIncrement, indexes).
- * @returns { db, isReady, error }. Use db.table(name) and db.transaction(...) when isReady is true.
- *
- * @example
- * const { db, isReady, error } = useIndexedDB({
- *   name: 'my-db',
- *   version: 1,
- *   tables: {
- *     users: { keyPath: 'id', autoIncrement: true, indexes: ['email'] },
- *   },
- * })
- * if (isReady && db) {
- *   const users = db.table('users')
- *   await users.insert({ email: 'a@b.com' })
- *   await db.transaction(['users'], 'readwrite', (tx) => tx.table('users').insert({ email: 'b@b.com' }))
- * }
- */
-export function useIndexedDB(config: IndexedDBConfig): UseIndexedDBReturn {
-  const [db, setDb] = useState<IDBController | null>(null);
-  const [error, setError] = useState<DOMException | null>(null);
-  const [isReady, setIsReady] = useState(false);
-  const configRef = useRef(config);
-  configRef.current = config;
-
-  useEffect(() => {
-    let cancelled = false;
-    setError(null);
-    setIsReady(false);
-    setDb(null);
-
-    const { name, version, tables } = configRef.current;
-    openDB({ name, version, tables })
-      .then((database) => {
-        if (cancelled) {
-          database.close();
-          return;
-        }
-        const controller = createDBController(database, configRef.current);
-        setDb(controller);
-        setIsReady(true);
-      })
-      .catch((err: DOMException) => {
-        if (!cancelled) setError(err);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [config.name, config.version]);
-
-  return { db, isReady, error };
-}
-
-/*
- * Usage example:
- *
- * const { db, isReady, error } = useIndexedDB({
- *   name: 'my-app-db',
- *   version: 1,
- *   tables: {
- *     users: { keyPath: 'id', autoIncrement: true, indexes: ['email'] },
- *     settings: { keyPath: 'key' },
- *   },
- * })
- *
- * if (error) return <div>Failed to open database</div>
- * if (!isReady || !db) return <div>Loading...</div>
- *
- * const users = db.table('users')
- * await users.insert({ email: 'a@b.com', name: 'Alice' })
- * await users.update(1, { name: 'Alice Smith' })
- * const found = await users.query((u) => u.email.startsWith('a@'))
- * const n = await users.count()
- * await users.delete(1)
- * await users.upsert({ id: 2, email: 'b@b.com' })
- * await users.bulkInsert([{ email: 'c@b.com' }, { email: 'd@b.com' }])
- * await users.clear({ onSuccess: () => console.log('cleared') })
- *
- * await db.transaction(['users', 'settings'], 'readwrite', async (tx) => {
- *   await tx.table('users').insert({ email: 'e@b.com' })
- *   await tx.table('settings').upsert({ key: 'theme', value: 'dark' })
- * }, { onSuccess: () => console.log('transaction done') })
- */
+/**
+ * Preact hook for IndexedDB: open database, create stores/indexes, return a database controller.
+ * Uses a singleton connection per (name, version).
+ * @module useIndexedDB
+ */
+
+import { useState, useEffect, useRef } from "preact/hooks";
+import type { IndexedDBConfig } from "./indexedDB/types";
+import { openDB } from "./indexedDB/openDB";
+import { createDBController } from "./indexedDB/dbController";
+import type { IDBController } from "./indexedDB/dbController";
+
+export type { IndexedDBConfig, IDBController } from "./indexedDB";
+
+export interface UseIndexedDBReturn {
+  /** Database controller (table, transaction). Null until the database is open. */
+  db: IDBController | null;
+  /** True once the database is open and ready. */
+  isReady: boolean;
+  /** Error from opening the database, if any. */
+  error: DOMException | null;
+}
+
+/**
+ * Opens an IndexedDB database and returns a controller for tables and transactions.
+ * Handles onupgradeneeded: creates object stores and indexes from config.
+ * Connection is a singleton per (config.name, config.version).
+ *
+ * @param config - Database name, version, and table schemas (keyPath, autoIncrement, indexes).
+ * @returns { db, isReady, error }. Use db.table(name) and db.transaction(...) when isReady is true.
+ *
+ * @example
+ * const { db, isReady, error } = useIndexedDB({
+ *   name: 'my-db',
+ *   version: 1,
+ *   tables: {
+ *     users: { keyPath: 'id', autoIncrement: true, indexes: ['email'] },
+ *   },
+ * })
+ * if (isReady && db) {
+ *   const users = db.table('users')
+ *   await users.insert({ email: 'a@b.com' })
+ *   await db.transaction(['users'], 'readwrite', (tx) => tx.table('users').insert({ email: 'b@b.com' }))
+ * }
+ */
+export function useIndexedDB(config: IndexedDBConfig): UseIndexedDBReturn {
+  const [db, setDb] = useState<IDBController | null>(null);
+  const [error, setError] = useState<DOMException | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const configRef = useRef(config);
+  configRef.current = config;
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    setIsReady(false);
+    setDb(null);
+
+    const { name, version, tables } = configRef.current;
+    openDB({ name, version, tables })
+      .then((database) => {
+        if (cancelled) {
+          database.close();
+          return;
+        }
+        const controller = createDBController(database, configRef.current);
+        setDb(controller);
+        setIsReady(true);
+      })
+      .catch((err: DOMException) => {
+        if (!cancelled) setError(err);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [config.name, config.version]);
+
+  return { db, isReady, error };
+}
+
+/*
+ * Usage example:
+ *
+ * const { db, isReady, error } = useIndexedDB({
+ *   name: 'my-app-db',
+ *   version: 1,
+ *   tables: {
+ *     users: { keyPath: 'id', autoIncrement: true, indexes: ['email'] },
+ *     settings: { keyPath: 'key' },
+ *   },
+ * })
+ *
+ * if (error) return <div>Failed to open database</div>
+ * if (!isReady || !db) return <div>Loading...</div>
+ *
+ * const users = db.table('users')
+ * await users.insert({ email: 'a@b.com', name: 'Alice' })
+ * await users.update(1, { name: 'Alice Smith' })
+ * const found = await users.query((u) => u.email.startsWith('a@'))
+ * const n = await users.count()
+ * await users.delete(1)
+ * await users.upsert({ id: 2, email: 'b@b.com' })
+ * await users.bulkInsert([{ email: 'c@b.com' }, { email: 'd@b.com' }])
+ * await users.clear({ onSuccess: () => console.log('cleared') })
+ *
+ * await db.transaction(['users', 'settings'], 'readwrite', async (tx) => {
+ *   await tx.table('users').insert({ email: 'e@b.com' })
+ *   await tx.table('settings').upsert({ key: 'theme', value: 'dark' })
+ * }, { onSuccess: () => console.log('transaction done') })
+ */

package/src/useMutationObserver.ts

@@ -1,26 +1,26 @@
-import { RefObject } from 'preact'
-import { useEffect } from 'preact/hooks'
-
-export type UseMutationObserverOptions = MutationObserverInit
-
-/**
- * A Preact hook to observe DOM mutations using MutationObserver.
- * @param target - The element to observe.
- * @param callback - Function to call on mutation.
- * @param options - MutationObserver options.
- */
-export function useMutationObserver(
-  targetRef: RefObject<HTMLElement | null>,
-  callback: MutationCallback,
-  options: MutationObserverInit
-) {
-  useEffect(() => {
-    const node = targetRef.current
-    if (!node) return
-
-    const observer = new MutationObserver(callback)
-    observer.observe(node, options)
-
-    return () => observer.disconnect()
-  }, [targetRef, callback, options])
-}
+import { RefObject } from "preact";
+import { useEffect } from "preact/hooks";
+
+export type UseMutationObserverOptions = MutationObserverInit;
+
+/**
+ * A Preact hook to observe DOM mutations using MutationObserver.
+ * @param target - The element to observe.
+ * @param callback - Function to call on mutation.
+ * @param options - MutationObserver options.
+ */
+export function useMutationObserver(
+  targetRef: RefObject<HTMLElement | null>,
+  callback: MutationCallback,
+  options: MutationObserverInit
+) {
+  useEffect(() => {
+    const node = targetRef.current;
+    if (!node) return;
+
+    const observer = new MutationObserver(callback);
+    observer.observe(node, options);
+
+    return () => observer.disconnect();
+  }, [targetRef, callback, options]);
+}