preact-missing-hooks 3.0.0 → 4.0.0

package/eslint.config.mjs

@@ -0,0 +1,10 @@
+import eslint from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import tseslint from "typescript-eslint";
+import prettier from "eslint-config-prettier";
+
+export default defineConfig(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  prettier
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-missing-hooks",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.",
   "author": "Prakhar Dubey",
   "license": "MIT",
@@ -11,8 +11,11 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.module.js",
-      "require": "./dist/index.js"
+      "import": {
+        "react": "./dist/react.module.js",
+        "default": "./dist/index.module.js"
+      },
+      "require": "./dist/entry.cjs"
     },
     "./useTransition": {
       "types": "./dist/useTransition.d.ts",
@@ -73,16 +76,52 @@
       "types": "./dist/useWasmCompute.d.ts",
       "import": "./dist/useWasmCompute.module.js",
       "require": "./dist/useWasmCompute.js"
+    },
+    "./useWorkerNotifications": {
+      "types": "./dist/useWorkerNotifications.d.ts",
+      "import": "./dist/useWorkerNotifications.module.js",
+      "require": "./dist/useWorkerNotifications.js"
+    },
+    "./react": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react.module.js",
+      "require": "./dist/react.js"
     }
   },
   "scripts": {
-    "build": "microbundle",
+    "build": "microbundle && npm run build:react && node scripts/generate-entry.cjs",
+    "build:react": "microbundle -i src/index.ts -o dist/react.js --alias preact=react,preact/hooks=react --no-sourcemap",
     "dev": "microbundle watch",
     "prepublishOnly": "npm run build",
     "test": "vitest run",
+    "test:preact": "vitest run --project preact",
+    "test:react": "vitest run --project react",
     "type-check": "tsc --noEmit",
-    "demo": "npx serve -l 5000"
+    "demo": "npx serve -l 5000",
+    "lint": "eslint src",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
+    "prepare": "husky",
+    "size": "npm run build && size-limit"
   },
+  "size-limit": [
+    {
+      "path": "dist/index.module.js",
+      "limit": "20 KB"
+    },
+    {
+      "path": "dist/index.js",
+      "limit": "20 KB"
+    },
+    {
+      "path": "dist/react.module.js",
+      "limit": "20 KB"
+    },
+    {
+      "path": "dist/react.js",
+      "limit": "20 KB"
+    }
+  ],
   "keywords": [
     "preact",
     "hooks",
@@ -109,16 +148,36 @@
     "preact": ">=10.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@size-limit/file": "^11.2.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/preact": "^3.2.4",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
     "fake-indexeddb": "^6.0.2",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "microbundle": "^0.15.1",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.15.0",
     "vitest": "^3.1.4"
   },
   "peerDependencies": {
-    "preact": ">=10.0.0"
+    "preact": ">=10.0.0",
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
   }
 }

package/scripts/generate-entry.cjs

@@ -0,0 +1,34 @@
+/**
+ * Generates dist/entry.cjs which auto-detects Preact vs React at runtime (CJS only).
+ * Run after build so dist/index.js and dist/react.js exist.
+ */
+const fs = require("fs");
+const path = require("path");
+
+const content = `"use strict";
+/**
+ * Auto-detect Preact vs React and re-export the matching build.
+ * Used for require('preact-missing-hooks') in Node / CJS bundlers.
+ */
+function detect() {
+  try {
+    require.resolve("preact");
+    return require("./index.js");
+  } catch (_) {
+    try {
+      require.resolve("react");
+      return require("./react.js");
+    } catch (_) {
+      throw new Error(
+        "preact-missing-hooks: Install either \\"preact\\" or \\"react\\" in your project."
+      );
+    }
+  }
+}
+module.exports = detect();
+`;
+
+const outPath = path.join(__dirname, "..", "dist", "entry.cjs");
+fs.mkdirSync(path.dirname(outPath), { recursive: true });
+fs.writeFileSync(outPath, content, "utf8");
+console.log("Generated dist/entry.cjs");

package/src/index.ts

@@ -1,12 +1,13 @@
-export * from './useTransition'
-export * from './useMutationObserver'
-export * from './useEventBus'
-export * from './useWrappedChildren'
-export * from './usePreferredTheme'
-export * from './useNetworkState'
-export * from './useClipboard'
-export * from './useRageClick'
-export * from './useThreadedWorker'
-export * from './useIndexedDB'
-export * from './useWebRTCIP'
-export * from './useWasmCompute'
+export * from "./useTransition";
+export * from "./useMutationObserver";
+export * from "./useEventBus";
+export * from "./useWrappedChildren";
+export * from "./usePreferredTheme";
+export * from "./useNetworkState";
+export * from "./useClipboard";
+export * from "./useRageClick";
+export * from "./useThreadedWorker";
+export * from "./useIndexedDB";
+export * from "./useWebRTCIP";
+export * from "./useWasmCompute";
+export * from "./useWorkerNotifications";

package/src/indexedDB/dbController.ts

@@ -1,92 +1,101 @@
-/**
- * Database controller: table(name), transaction(storeNames, mode, callback, options).
- * @module indexedDB/dbController
- */
-
-import type { IndexedDBConfig, TransactionOptions } from './types';
-import type { ITableController } from './tableController';
-import { createTableController, createTransactionTableController } from './tableController';
-
-/** Transaction context passed to the callback: provides table(name) bound to this transaction. */
-export interface TransactionContext {
-  /** Returns a table controller bound to this transaction. Use for all ops inside the callback. */
-  table: (name: string) => ITableController;
-}
-
-/**
- * Database controller built from an open IDBDatabase.
- * Exposes table(name) and transaction(...).
- */
-export interface IDBController {
-  /** Underlying IDBDatabase (read-only). */
-  readonly db: IDBDatabase;
-  /** Returns true if an object store with the given name exists. */
-  hasTable: (name: string) => boolean;
-  /** Returns a table controller for the given store (each op opens its own transaction). */
-  table: (name: string) => ITableController;
-  /**
-   * Runs a callback inside a single transaction. All operations in the callback use the same transaction.
-   * @param storeNames - Object store names to include in the transaction.
-   * @param mode - 'readonly' | 'readwrite'.
-   * @param callback - Async or sync function receiving { table(name) }. Return value is ignored; await all ops inside.
-   * @param options - Optional onSuccess/onError callbacks.
-   * @returns Promise that resolves when the transaction completes (after all requests and the callback).
-   */
-  transaction: <T = void>(
-    storeNames: string[],
-    mode: IDBTransactionMode,
-    callback: (tx: TransactionContext) => T | Promise<T>,
-    options?: TransactionOptions
-  ) => Promise<void>;
-}
-
-function withTransactionCallbacks(
-  promise: Promise<void>,
-  options?: TransactionOptions
-): Promise<void> {
-  if (!options) return promise;
-  return promise
-    .then(() => options.onSuccess?.())
-    .catch((err: DOMException) => {
-      options.onError?.(err);
-      throw err;
-    });
-}
-
-/**
- * Creates a database controller from an open IDBDatabase instance.
- */
-export function createDBController(db: IDBDatabase, _config: IndexedDBConfig): IDBController {
-  return {
-    get db(): IDBDatabase {
-      return db;
-    },
-
-    hasTable(name: string): boolean {
-      return db.objectStoreNames.contains(name);
-    },
-
-    table(name: string): ITableController {
-      return createTableController(db, name);
-    },
-
-    transaction<T = void>(
-      storeNames: string[],
-      mode: IDBTransactionMode,
-      callback: (tx: TransactionContext) => T | Promise<T>,
-      options?: TransactionOptions
-    ): Promise<void> {
-      const tx = db.transaction(storeNames, mode);
-      const txContext: TransactionContext = {
-        table: (tableName: string) => createTransactionTableController(tx, tableName),
-      };
-      const txPromise = new Promise<void>((resolve, reject) => {
-        tx.oncomplete = () => resolve();
-        tx.onerror = () => reject(tx.error ?? new DOMException('Transaction failed'));
-      });
-      const callbackResult = callback(txContext);
-      const promise = Promise.resolve(callbackResult).then(() => txPromise);
-      return withTransactionCallbacks(promise, options);
-    },
-  };
-}
+/**
+ * Database controller: table(name), transaction(storeNames, mode, callback, options).
+ * @module indexedDB/dbController
+ */
+
+import type { IndexedDBConfig, TransactionOptions } from "./types";
+import type { ITableController } from "./tableController";
+import {
+  createTableController,
+  createTransactionTableController,
+} from "./tableController";
+
+/** Transaction context passed to the callback: provides table(name) bound to this transaction. */
+export interface TransactionContext {
+  /** Returns a table controller bound to this transaction. Use for all ops inside the callback. */
+  table: (name: string) => ITableController;
+}
+
+/**
+ * Database controller built from an open IDBDatabase.
+ * Exposes table(name) and transaction(...).
+ */
+export interface IDBController {
+  /** Underlying IDBDatabase (read-only). */
+  readonly db: IDBDatabase;
+  /** Returns true if an object store with the given name exists. */
+  hasTable: (name: string) => boolean;
+  /** Returns a table controller for the given store (each op opens its own transaction). */
+  table: (name: string) => ITableController;
+  /**
+   * Runs a callback inside a single transaction. All operations in the callback use the same transaction.
+   * @param storeNames - Object store names to include in the transaction.
+   * @param mode - 'readonly' | 'readwrite'.
+   * @param callback - Async or sync function receiving { table(name) }. Return value is ignored; await all ops inside.
+   * @param options - Optional onSuccess/onError callbacks.
+   * @returns Promise that resolves when the transaction completes (after all requests and the callback).
+   */
+  transaction: <T = void>(
+    storeNames: string[],
+    mode: IDBTransactionMode,
+    callback: (tx: TransactionContext) => T | Promise<T>,
+    options?: TransactionOptions
+  ) => Promise<void>;
+}
+
+function withTransactionCallbacks(
+  promise: Promise<void>,
+  options?: TransactionOptions
+): Promise<void> {
+  if (!options) return promise;
+  return promise
+    .then(() => options.onSuccess?.())
+    .catch((err: DOMException) => {
+      options.onError?.(err);
+      throw err;
+    });
+}
+
+/**
+ * Creates a database controller from an open IDBDatabase instance.
+ */
+export function createDBController(
+  db: IDBDatabase,
+  _config: IndexedDBConfig
+): IDBController {
+  void _config; // Reserved for future config options
+  return {
+    get db(): IDBDatabase {
+      return db;
+    },
+
+    hasTable(name: string): boolean {
+      return db.objectStoreNames.contains(name);
+    },
+
+    table(name: string): ITableController {
+      return createTableController(db, name);
+    },
+
+    transaction<T = void>(
+      storeNames: string[],
+      mode: IDBTransactionMode,
+      callback: (tx: TransactionContext) => T | Promise<T>,
+      options?: TransactionOptions
+    ): Promise<void> {
+      const tx = db.transaction(storeNames, mode);
+      const txContext: TransactionContext = {
+        table: (tableName: string) =>
+          createTransactionTableController(tx, tableName),
+      };
+      const txPromise = new Promise<void>((resolve, reject) => {
+        tx.oncomplete = () => resolve();
+        tx.onerror = () =>
+          reject(tx.error ?? new DOMException("Transaction failed"));
+      });
+      const callbackResult = callback(txContext);
+      const promise = Promise.resolve(callbackResult).then(() => txPromise);
+      return withTransactionCallbacks(promise, options);
+    },
+  };
+}

package/src/indexedDB/index.ts

@@ -1,11 +1,16 @@
-/**
- * IndexedDB hook system – public API.
- * @module indexedDB
- */
-
-export type { IndexedDBConfig, TableSchema, OperationCallbacks, TransactionOptions } from './types';
-export { requestToPromise } from './requestToPromise';
-export type { ITableController } from './tableController';
-export type { IDBController, TransactionContext } from './dbController';
-export { createDBController } from './dbController';
-export { openDB } from './openDB';
+/**
+ * IndexedDB hook system – public API.
+ * @module indexedDB
+ */
+
+export type {
+  IndexedDBConfig,
+  TableSchema,
+  OperationCallbacks,
+  TransactionOptions,
+} from "./types";
+export { requestToPromise } from "./requestToPromise";
+export type { ITableController } from "./tableController";
+export type { IDBController, TransactionContext } from "./dbController";
+export { createDBController } from "./dbController";
+export { openDB } from "./openDB";

package/src/indexedDB/openDB.ts

@@ -1,49 +1,49 @@
-/**
- * Opens IndexedDB and runs onupgradeneeded to create stores and indexes.
- * Singleton per (name, version).
- * @module indexedDB/openDB
- */
-
-import type { IndexedDBConfig, TableSchema } from './types';
-import { requestToPromise } from './requestToPromise';
-
-const connectionCache = new Map<string, Promise<IDBDatabase>>();
-
-/**
- * Opens the database and creates/upgrades object stores and indexes from config.
- * Uses a singleton cache per (name, version); repeated calls with the same config reuse the same connection.
- */
-export function openDB(config: IndexedDBConfig): Promise<IDBDatabase> {
-  const key = `${config.name}_v${config.version}`;
-  let promise = connectionCache.get(key);
-  if (promise) return promise;
-  promise = _openDB(config);
-  connectionCache.set(key, promise);
-  return promise;
-}
-
-function _openDB(config: IndexedDBConfig): Promise<IDBDatabase> {
-  return new Promise<IDBDatabase>((resolve, reject) => {
-    const request = indexedDB.open(config.name, config.version);
-    request.onerror = () => reject(request.error ?? new DOMException('Failed to open database'));
-    request.onsuccess = () => resolve(request.result);
-    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
-      const db = (event.target as IDBOpenDBRequest).result;
-      const tables = config.tables;
-      for (const tableName of Object.keys(tables)) {
-        const schema = tables[tableName] as TableSchema;
-        if (!db.objectStoreNames.contains(tableName)) {
-          const store = db.createObjectStore(tableName, {
-            keyPath: schema.keyPath,
-            autoIncrement: schema.autoIncrement ?? false,
-          });
-          if (schema.indexes) {
-            for (const indexName of schema.indexes) {
-              store.createIndex(indexName, indexName, { unique: false });
-            }
-          }
-        }
-      }
-    };
-  });
-}
+/**
+ * Opens IndexedDB and runs onupgradeneeded to create stores and indexes.
+ * Singleton per (name, version).
+ * @module indexedDB/openDB
+ */
+
+import type { IndexedDBConfig, TableSchema } from "./types";
+
+const connectionCache = new Map<string, Promise<IDBDatabase>>();
+
+/**
+ * Opens the database and creates/upgrades object stores and indexes from config.
+ * Uses a singleton cache per (name, version); repeated calls with the same config reuse the same connection.
+ */
+export function openDB(config: IndexedDBConfig): Promise<IDBDatabase> {
+  const key = `${config.name}_v${config.version}`;
+  let promise = connectionCache.get(key);
+  if (promise) return promise;
+  promise = _openDB(config);
+  connectionCache.set(key, promise);
+  return promise;
+}
+
+function _openDB(config: IndexedDBConfig): Promise<IDBDatabase> {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    const request = indexedDB.open(config.name, config.version);
+    request.onerror = () =>
+      reject(request.error ?? new DOMException("Failed to open database"));
+    request.onsuccess = () => resolve(request.result);
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      const tables = config.tables;
+      for (const tableName of Object.keys(tables)) {
+        const schema = tables[tableName] as TableSchema;
+        if (!db.objectStoreNames.contains(tableName)) {
+          const store = db.createObjectStore(tableName, {
+            keyPath: schema.keyPath,
+            autoIncrement: schema.autoIncrement ?? false,
+          });
+          if (schema.indexes) {
+            for (const indexName of schema.indexes) {
+              store.createIndex(indexName, indexName, { unique: false });
+            }
+          }
+        }
+      }
+    };
+  });
+}

package/src/indexedDB/requestToPromise.ts

@@ -1,16 +1,17 @@
-/**
- * Wraps an IDBRequest in a Promise.
- * @module indexedDB/requestToPromise
- */
-
-/**
- * Converts an IDBRequest to a Promise. Rejects with the request's error on failure.
- * @param request - Native IndexedDB request.
- * @returns Promise that resolves with the request result or rejects with DOMException.
- */
-export function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
-  return new Promise<T>((resolve, reject) => {
-    request.onsuccess = () => resolve(request.result);
-    request.onerror = () => reject(request.error ?? new DOMException('Unknown IndexedDB error'));
-  });
-}
+/**
+ * Wraps an IDBRequest in a Promise.
+ * @module indexedDB/requestToPromise
+ */
+
+/**
+ * Converts an IDBRequest to a Promise. Rejects with the request's error on failure.
+ * @param request - Native IndexedDB request.
+ * @returns Promise that resolves with the request result or rejects with DOMException.
+ */
+export function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () =>
+      reject(request.error ?? new DOMException("Unknown IndexedDB error"));
+  });
+}