preact-missing-hooks 1.0.1 → 1.0.2

package/.github/workflows/test-hooks.yml

@@ -0,0 +1,30 @@
+name: Test Hooks
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm i
+
+      - name: Type Check
+        run: npm run type-check
+
+      - name: Run Tests
+        run: npm run test

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Prakhar Dubey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell      
+copies of the Software, and to permit persons to whom the Software is          
+furnished to do so, subject to the following conditions:                       
+
+The above copyright notice and this permission notice shall be included in all 
+copies or substantial portions of the Software.                                
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR     
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,       
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE    
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER         
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
+SOFTWARE.

package/Readme.md

@@ -1,15 +1,29 @@
 # Preact Missing Hooks
 
-A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps..
+<p align="left">
+  <a href="https://www.npmjs.com/package/preact-missing-hooks">
+    <img src="https://img.shields.io/npm/v/preact-missing-hooks?color=crimson&label=npm%20version" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/preact-missing-hooks">
+    <img src="https://img.shields.io/npm/dm/preact-missing-hooks?label=monthly%20downloads" alt="npm downloads" />
+  </a>
+
+  <a href="https://github.com/prakhardubey2002/preact-missing-hooks/actions/workflows/test-hooks.yml">
+    <img src="https://img.shields.io/github/actions/workflow/status/prakhardubey2002/preact-missing-hooks/test-hooks.yml?branch=main&label=build%20status" alt="Build Status" />
+  </a>
+</p>
+
+A lightweight, extendable collection of React-like hooks for Preact, including utilities for transitions, DOM mutation observation, and global event buses.
 
 ---
 
 ## ✨ Features
 
-* **🔄 `useTransition`**: Mimics React's `useTransition` for deferring state updates.
+* **🔄 `useTransition`** — Defers state updates to yield a smoother UI experience.
+* **🔍 `useMutationObserver`** — Reactively observes DOM changes with a familiar hook API.
+* **📡 `useEventBus`** — A simple publish/subscribe system, eliminating props drilling or overuse of context.
 * ✅ Fully TypeScript compatible
 * 📦 Bundled with Microbundle
-* 🔌 Easily extensible — more hooks can be added in future
 * ⚡ Zero dependencies (except `preact`)
 
 ---
@@ -28,66 +42,104 @@ npm install preact
 
 ---
 
-## 🔧 Usage
+## 🔧 Usage Examples
+
+### `useTransition`
 
 ```tsx
 import { useTransition } from 'preact-missing-hooks';
 
-const Example = () => {
-  const [isPending, startTransition] = useTransition();
+function ExampleTransition() {
+  const [startTransition, isPending] = useTransition();
 
   const handleClick = () => {
     startTransition(() => {
-      // Expensive update here
+      // perform an expensive update here
     });
   };
 
   return (
     <button onClick={handleClick} disabled={isPending}>
-      {isPending ? 'Loading...' : 'Click me'}
+      {isPending ? 'Loading...' : 'Click Me'}
     </button>
   );
-};
+}
 ```
 
 ---
 
-## 🔍 API: `useTransition()`
+### `useMutationObserver`
 
-Returns a tuple:
+```tsx
+import { useRef } from 'preact/hooks';
+import { useMutationObserver } from 'preact-missing-hooks';
+
+function ExampleMutation() {
+  const ref = useRef<HTMLDivElement>(null);
 
-* `startTransition(fn: () => void)` — schedules a low-priority update
-* `isPending: boolean` — `true` while the transition is in progress
+  useMutationObserver(ref, (mutations) => {
+    console.log('Detected mutations:', mutations);
+  }, { childList: true, subtree: true });
+
+  return <div ref={ref}>Observe this content</div>;
+}
+```
 
 ---
 
-## 🛠 Built With
+### `useEventBus`
 
-* [Preact](https://preactjs.com)
-* [Microbundle](https://github.com/developit/microbundle)
-* [TypeScript](https://www.typescriptlang.org/)
+```tsx
+// types.ts
+export type Events = {
+  notify: (message: string) => void;
+};
 
----
+// Sender.tsx
+import { useEventBus } from 'preact-missing-hooks';
+import type { Events } from './types';
+
+function Sender() {
+  const { emit } = useEventBus<Events>();
+  return <button onClick={() => emit('notify', 'Hello World!')}>Send</button>;
+}
+
+// Receiver.tsx
+import { useEventBus } from 'preact-missing-hooks';
+import { useState, useEffect } from 'preact/hooks';
+import type { Events } from './types';
+
+function Receiver() {
+  const [msg, setMsg] = useState<string>('');
+  const { on } = useEventBus<Events>();
 
-## 🧩 Future Hooks (Planned)
+  useEffect(() => {
+    const unsubscribe = on('notify', setMsg);
+    return unsubscribe;
+  }, []);
+
+  return <div>Message: {msg}</div>;
+}
+```
 
-* `useMutationObserver`: For observing changes in DOM mutations.
 ---
 
 
-## 📝 License
+## 🛠 Built With
 
-ISC © [Prakhar Dubey](https://github.com/prakhardubey2002)
+* [Preact](https://preactjs.com)
+* [Microbundle](https://github.com/developit/microbundle)
+* [TypeScript](https://www.typescriptlang.org)
+* [Vitest](https://vitest.dev) for testing
 
 ---
 
-## 📬 Contributing
+## 📝 License
 
-Feel free to open issues or submit PRs to suggest or contribute additional hooks!
+MIT © [Prakhar Dubey](https://github.com/prakhardubey2002)
 
 ---
 
-## 📎 Related
+## 📬 Contributing
 
-* [React useTransition Docs](https://react.dev/reference/react/useTransition)
-* [Preact Documentation](https://preactjs.com/guide/v10/getting-started/)
+Contributions are welcome! Please open issues or submit PRs with new hooks or improvements.

package/dist/index.d.ts

@@ -1 +1,3 @@
 export * from './useTransition';
+export * from './useMutationObserver';
+export * from './useEventBus';

package/dist/index.js

@@ -1,2 +1,2 @@
-var e=require("preact/hooks");exports.useTransition=function(){var r=e.useState(!1),n=r[0],t=r[1];return[e.useCallback(function(e){t(!0),Promise.resolve().then(function(){e(),t(!1)})},[]),n]};
+var e=require("preact/hooks"),n=new Map;exports.useEventBus=function(){return{emit:e.useCallback(function(e){var t=arguments,r=n.get(e);r&&r.forEach(function(e){return e.apply(void 0,[].slice.call(t,1))})},[]),on:e.useCallback(function(e,t){var r=n.get(e);return r||(r=new Set,n.set(e,r)),r.add(t),function(){r.delete(t),0===r.size&&n.delete(e)}},[])}},exports.useMutationObserver=function(n,t,r){e.useEffect(function(){var e=n.current;if(e){var u=new MutationObserver(t);return u.observe(e,r),function(){return u.disconnect()}}},[n,t,r])},exports.useTransition=function(){var n=e.useState(!1),t=n[0],r=n[1];return[e.useCallback(function(e){r(!0),Promise.resolve().then(function(){e(),r(!1)})},[]),t]};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useTransition.ts"],"sourcesContent":["import { useState, useCallback } from 'preact/hooks';\r\n\r\n/**\r\n * Mimics React's useTransition hook in Preact.\r\n * @returns [startTransition, isPending]\r\n */\r\nexport function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {\r\n  const [isPending, setIsPending] = useState(false);\r\n\r\n  const startTransition = useCallback((callback: () => void) => {\r\n    setIsPending(true);\r\n    Promise.resolve().then(() => {\r\n      callback();\r\n      setIsPending(false);\r\n    });\r\n  }, []);\r\n\r\n  return [startTransition, isPending];\r\n}\r\n"],"names":["_useState","useState","isPending","setIsPending","useCallback","callback","Promise","resolve","then"],"mappings":"oDAMgB,WACd,IAAAA,EAAkCC,EAAQA,UAAC,GAApCC,EAASF,KAAEG,EAAYH,EAAA,GAU9B,MAAO,CARiBI,EAAWA,YAAC,SAACC,GACnCF,GAAa,GACbG,QAAQC,UAAUC,KAAK,WACrBH,IACAF,GAAa,EACf,EACF,EAAG,IAEsBD,EAC3B"}
+{"version":3,"file":"index.js","sources":["../src/useEventBus.ts","../src/useMutationObserver.ts","../src/useTransition.ts"],"sourcesContent":["import { useCallback, useEffect } from 'preact/hooks';\r\n\r\ntype EventMap = Record<string, (...args: any[]) => void>;\r\n\r\nconst listeners = new Map<string, Set<(...args: any[]) => void>>();\r\n\r\n/**\r\n * A Preact hook to publish and subscribe to custom events across components.\r\n * @returns An object with `emit` and `on` methods.\r\n */\r\nexport function useEventBus<T extends EventMap>() {\r\n  const emit = useCallback(<K extends keyof T>(event: K, ...args: Parameters<T[K]>) => {\r\n    const handlers = listeners.get(event as string);\r\n    if (handlers) {\r\n      handlers.forEach((handler) => handler(...args));\r\n    }\r\n  }, []);\r\n\r\n  const on = useCallback(<K extends keyof T>(event: K, handler: T[K]) => {\r\n    let handlers = listeners.get(event as string);\r\n    if (!handlers) {\r\n      handlers = new Set();\r\n      listeners.set(event as string, handlers);\r\n    }\r\n    handlers.add(handler);\r\n\r\n    return () => {\r\n      handlers!.delete(handler);\r\n      if (handlers!.size === 0) {\r\n        listeners.delete(event as string);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return { emit, on };\r\n}\r\n","import { RefObject } from 'preact'\r\nimport { useEffect } from 'preact/hooks'\r\n\r\nexport type UseMutationObserverOptions = MutationObserverInit\r\n\r\n/**\r\n * A Preact hook to observe DOM mutations using MutationObserver.\r\n * @param target - The element to observe.\r\n * @param callback - Function to call on mutation.\r\n * @param options - MutationObserver options.\r\n */\r\nexport function useMutationObserver(\r\n  targetRef: RefObject<HTMLElement | null>,\r\n  callback: MutationCallback,\r\n  options: MutationObserverInit\r\n) {\r\n  useEffect(() => {\r\n    const node = targetRef.current\r\n    if (!node) return\r\n\r\n    const observer = new MutationObserver(callback)\r\n    observer.observe(node, options)\r\n\r\n    return () => observer.disconnect()\r\n  }, [targetRef, callback, options])\r\n}\r\n","import { useState, useCallback } from 'preact/hooks';\r\n\r\n/**\r\n * Mimics React's useTransition hook in Preact.\r\n * @returns [startTransition, isPending]\r\n */\r\nexport function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {\r\n  const [isPending, setIsPending] = useState(false);\r\n\r\n  const startTransition = useCallback((callback: () => void) => {\r\n    setIsPending(true);\r\n    Promise.resolve().then(() => {\r\n      callback();\r\n      setIsPending(false);\r\n    });\r\n  }, []);\r\n\r\n  return [startTransition, isPending];\r\n}\r\n"],"names":["listeners","Map","emit","useCallback","event","_arguments","arguments","handlers","get","forEach","handler","apply","slice","call","on","Set","set","add","size","targetRef","callback","options","useEffect","node","current","observer","MutationObserver","observe","disconnect","_useState","useState","isPending","setIsPending","Promise","resolve","then"],"mappings":"8BAIMA,EAAY,IAAIC,wBAMN,WAwBd,MAAO,CAAEC,KAvBIC,EAAAA,YAAY,SAAoBC,GAAuCC,IAAAA,EAAAC,UAC5EC,EAAWP,EAAUQ,IAAIJ,GAC3BG,GACFA,EAASE,QAAQ,SAACC,UAAYA,EAAOC,WAAA,EAAA,GAAAC,MAAAC,KAAAR,EAAQ,GAAC,EAElD,EAAG,IAkBYS,GAhBJX,EAAWA,YAAC,SAAoBC,EAAUM,GACnD,IAAIH,EAAWP,EAAUQ,IAAIJ,GAO7B,OANKG,IACHA,EAAW,IAAIQ,IACff,EAAUgB,IAAIZ,EAAiBG,IAEjCA,EAASU,IAAIP,GAED,WACVH,EAAS,OAAQG,GACM,IAAnBH,EAAUW,MACZlB,EAAS,OAAQI,EAErB,CACF,EAAG,IAGL,8BCxBgB,SACde,EACAC,EACAC,GAEAC,EAAAA,UAAU,WACR,IAAMC,EAAOJ,EAAUK,QACvB,GAAKD,EAAL,CAEA,IAAME,EAAW,IAAIC,iBAAiBN,GAGtC,OAFAK,EAASE,QAAQJ,EAAMF,GAEV,WAAA,OAAAI,EAASG,YAAY,CAHlC,CAIF,EAAG,CAACT,EAAWC,EAAUC,GAC3B,wBCnBgB,WACd,IAAAQ,EAAkCC,EAAQA,UAAC,GAApCC,EAASF,KAAEG,EAAYH,EAAA,GAU9B,MAAO,CARiB1B,EAAWA,YAAC,SAACiB,GACnCY,GAAa,GACbC,QAAQC,UAAUC,KAAK,WACrBf,IACAY,GAAa,EACf,EACF,EAAG,IAEsBD,EAC3B"}

package/dist/index.module.js

@@ -1,2 +1,2 @@
-import{useState as o,useCallback as r}from"preact/hooks";function n(){var n=o(!1),t=n[0],e=n[1];return[r(function(o){e(!0),Promise.resolve().then(function(){o(),e(!1)})},[]),t]}export{n as useTransition};
+import{useState as n,useCallback as e,useEffect as t}from"preact/hooks";function r(){var t=n(!1),r=t[0],o=t[1];return[e(function(n){o(!0),Promise.resolve().then(function(){n(),o(!1)})},[]),r]}function o(n,e,r){t(function(){var t=n.current;if(t){var o=new MutationObserver(e);return o.observe(t,r),function(){return o.disconnect()}}},[n,e,r])}var i=new Map;function u(){var n=e(function(n){var e=arguments,t=i.get(n);t&&t.forEach(function(n){return n.apply(void 0,[].slice.call(e,1))})},[]);return{emit:n,on:e(function(n,e){var t=i.get(n);return t||(t=new Set,i.set(n,t)),t.add(e),function(){t.delete(e),0===t.size&&i.delete(n)}},[])}}export{u as useEventBus,o as useMutationObserver,r as useTransition};
 //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../src/useTransition.ts"],"sourcesContent":["import { useState, useCallback } from 'preact/hooks';\r\n\r\n/**\r\n * Mimics React's useTransition hook in Preact.\r\n * @returns [startTransition, isPending]\r\n */\r\nexport function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {\r\n  const [isPending, setIsPending] = useState(false);\r\n\r\n  const startTransition = useCallback((callback: () => void) => {\r\n    setIsPending(true);\r\n    Promise.resolve().then(() => {\r\n      callback();\r\n      setIsPending(false);\r\n    });\r\n  }, []);\r\n\r\n  return [startTransition, isPending];\r\n}\r\n"],"names":["useTransition","_useState","useState","isPending","setIsPending","useCallback","callback","Promise","resolve","then"],"mappings":"yDAMgB,SAAAA,IACd,IAAAC,EAAkCC,GAAS,GAApCC,EAASF,KAAEG,EAAYH,EAAA,GAU9B,MAAO,CARiBI,EAAY,SAACC,GACnCF,GAAa,GACbG,QAAQC,UAAUC,KAAK,WACrBH,IACAF,GAAa,EACf,EACF,EAAG,IAEsBD,EAC3B"}
+{"version":3,"file":"index.module.js","sources":["../src/useTransition.ts","../src/useMutationObserver.ts","../src/useEventBus.ts"],"sourcesContent":["import { useState, useCallback } from 'preact/hooks';\r\n\r\n/**\r\n * Mimics React's useTransition hook in Preact.\r\n * @returns [startTransition, isPending]\r\n */\r\nexport function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {\r\n  const [isPending, setIsPending] = useState(false);\r\n\r\n  const startTransition = useCallback((callback: () => void) => {\r\n    setIsPending(true);\r\n    Promise.resolve().then(() => {\r\n      callback();\r\n      setIsPending(false);\r\n    });\r\n  }, []);\r\n\r\n  return [startTransition, isPending];\r\n}\r\n","import { RefObject } from 'preact'\r\nimport { useEffect } from 'preact/hooks'\r\n\r\nexport type UseMutationObserverOptions = MutationObserverInit\r\n\r\n/**\r\n * A Preact hook to observe DOM mutations using MutationObserver.\r\n * @param target - The element to observe.\r\n * @param callback - Function to call on mutation.\r\n * @param options - MutationObserver options.\r\n */\r\nexport function useMutationObserver(\r\n  targetRef: RefObject<HTMLElement | null>,\r\n  callback: MutationCallback,\r\n  options: MutationObserverInit\r\n) {\r\n  useEffect(() => {\r\n    const node = targetRef.current\r\n    if (!node) return\r\n\r\n    const observer = new MutationObserver(callback)\r\n    observer.observe(node, options)\r\n\r\n    return () => observer.disconnect()\r\n  }, [targetRef, callback, options])\r\n}\r\n","import { useCallback, useEffect } from 'preact/hooks';\r\n\r\ntype EventMap = Record<string, (...args: any[]) => void>;\r\n\r\nconst listeners = new Map<string, Set<(...args: any[]) => void>>();\r\n\r\n/**\r\n * A Preact hook to publish and subscribe to custom events across components.\r\n * @returns An object with `emit` and `on` methods.\r\n */\r\nexport function useEventBus<T extends EventMap>() {\r\n  const emit = useCallback(<K extends keyof T>(event: K, ...args: Parameters<T[K]>) => {\r\n    const handlers = listeners.get(event as string);\r\n    if (handlers) {\r\n      handlers.forEach((handler) => handler(...args));\r\n    }\r\n  }, []);\r\n\r\n  const on = useCallback(<K extends keyof T>(event: K, handler: T[K]) => {\r\n    let handlers = listeners.get(event as string);\r\n    if (!handlers) {\r\n      handlers = new Set();\r\n      listeners.set(event as string, handlers);\r\n    }\r\n    handlers.add(handler);\r\n\r\n    return () => {\r\n      handlers!.delete(handler);\r\n      if (handlers!.size === 0) {\r\n        listeners.delete(event as string);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return { emit, on };\r\n}\r\n"],"names":["useTransition","_useState","useState","isPending","setIsPending","useCallback","callback","Promise","resolve","then","useMutationObserver","targetRef","options","useEffect","node","current","observer","MutationObserver","observe","disconnect","listeners","Map","useEventBus","emit","event","_arguments","arguments","handlers","get","forEach","handler","apply","slice","call","on","Set","set","add","size"],"mappings":"wEAMgB,SAAAA,IACd,IAAAC,EAAkCC,GAAS,GAApCC,EAASF,KAAEG,EAAYH,EAAA,GAU9B,MAAO,CARiBI,EAAY,SAACC,GACnCF,GAAa,GACbG,QAAQC,UAAUC,KAAK,WACrBH,IACAF,GAAa,EACf,EACF,EAAG,IAEsBD,EAC3B,CCPgB,SAAAO,EACdC,EACAL,EACAM,GAEAC,EAAU,WACR,IAAMC,EAAOH,EAAUI,QACvB,GAAKD,EAAL,CAEA,IAAME,EAAW,IAAIC,iBAAiBX,GAGtC,OAFAU,EAASE,QAAQJ,EAAMF,GAEV,WAAA,OAAAI,EAASG,YAAY,CAHlC,CAIF,EAAG,CAACR,EAAWL,EAAUM,GAC3B,CCrBA,IAAMQ,EAAY,IAAIC,IAMN,SAAAC,IACd,IAAMC,EAAOlB,EAAY,SAAoBmB,GAAuCC,IAAAA,EAAAC,UAC5EC,EAAWP,EAAUQ,IAAIJ,GAC3BG,GACFA,EAASE,QAAQ,SAACC,UAAYA,EAAOC,WAAA,EAAA,GAAAC,MAAAC,KAAAR,EAAQ,GAAC,EAElD,EAAG,IAkBH,MAAO,CAAEF,KAAAA,EAAMW,GAhBJ7B,EAAY,SAAoBmB,EAAUM,GACnD,IAAIH,EAAWP,EAAUQ,IAAIJ,GAO7B,OANKG,IACHA,EAAW,IAAIQ,IACff,EAAUgB,IAAIZ,EAAiBG,IAEjCA,EAASU,IAAIP,GAED,WACVH,EAAS,OAAQG,GACM,IAAnBH,EAAUW,MACZlB,EAAS,OAAQI,EAErB,CACF,EAAG,IAGL"}

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("preact/hooks")):"function"==typeof define&&define.amd?define(["exports","preact/hooks"],o):o((e||self).preactMissingHooks={},e.hooks)}(this,function(e,o){e.useTransition=function(){var e=o.useState(!1),n=e[0],t=e[1];return[o.useCallback(function(e){t(!0),Promise.resolve().then(function(){e(),t(!1)})},[]),n]}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("preact/hooks")):"function"==typeof define&&define.amd?define(["exports","preact/hooks"],n):n((e||self).preactMissingHooks={},e.hooks)}(this,function(e,n){var t=new Map;e.useEventBus=function(){var e=n.useCallback(function(e){var n=arguments,o=t.get(e);o&&o.forEach(function(e){return e.apply(void 0,[].slice.call(n,1))})},[]);return{emit:e,on:n.useCallback(function(e,n){var o=t.get(e);return o||(o=new Set,t.set(e,o)),o.add(n),function(){o.delete(n),0===o.size&&t.delete(e)}},[])}},e.useMutationObserver=function(e,t,o){n.useEffect(function(){var n=e.current;if(n){var r=new MutationObserver(t);return r.observe(n,o),function(){return r.disconnect()}}},[e,t,o])},e.useTransition=function(){var e=n.useState(!1),t=e[0],o=e[1];return[n.useCallback(function(e){o(!0),Promise.resolve().then(function(){e(),o(!1)})},[]),t]}});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/useTransition.ts"],"sourcesContent":["import { useState, useCallback } from 'preact/hooks';\r\n\r\n/**\r\n * Mimics React's useTransition hook in Preact.\r\n * @returns [startTransition, isPending]\r\n */\r\nexport function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {\r\n  const [isPending, setIsPending] = useState(false);\r\n\r\n  const startTransition = useCallback((callback: () => void) => {\r\n    setIsPending(true);\r\n    Promise.resolve().then(() => {\r\n      callback();\r\n      setIsPending(false);\r\n    });\r\n  }, []);\r\n\r\n  return [startTransition, isPending];\r\n}\r\n"],"names":["_useState","useState","isPending","setIsPending","useCallback","callback","Promise","resolve","then"],"mappings":"6SAMgB,WACd,IAAAA,EAAkCC,EAAQA,UAAC,GAApCC,EAASF,KAAEG,EAAYH,EAAA,GAU9B,MAAO,CARiBI,EAAWA,YAAC,SAACC,GACnCF,GAAa,GACbG,QAAQC,UAAUC,KAAK,WACrBH,IACAF,GAAa,EACf,EACF,EAAG,IAEsBD,EAC3B"}
+{"version":3,"file":"index.umd.js","sources":["../src/useEventBus.ts","../src/useMutationObserver.ts","../src/useTransition.ts"],"sourcesContent":["import { useCallback, useEffect } from 'preact/hooks';\r\n\r\ntype EventMap = Record<string, (...args: any[]) => void>;\r\n\r\nconst listeners = new Map<string, Set<(...args: any[]) => void>>();\r\n\r\n/**\r\n * A Preact hook to publish and subscribe to custom events across components.\r\n * @returns An object with `emit` and `on` methods.\r\n */\r\nexport function useEventBus<T extends EventMap>() {\r\n  const emit = useCallback(<K extends keyof T>(event: K, ...args: Parameters<T[K]>) => {\r\n    const handlers = listeners.get(event as string);\r\n    if (handlers) {\r\n      handlers.forEach((handler) => handler(...args));\r\n    }\r\n  }, []);\r\n\r\n  const on = useCallback(<K extends keyof T>(event: K, handler: T[K]) => {\r\n    let handlers = listeners.get(event as string);\r\n    if (!handlers) {\r\n      handlers = new Set();\r\n      listeners.set(event as string, handlers);\r\n    }\r\n    handlers.add(handler);\r\n\r\n    return () => {\r\n      handlers!.delete(handler);\r\n      if (handlers!.size === 0) {\r\n        listeners.delete(event as string);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return { emit, on };\r\n}\r\n","import { RefObject } from 'preact'\r\nimport { useEffect } from 'preact/hooks'\r\n\r\nexport type UseMutationObserverOptions = MutationObserverInit\r\n\r\n/**\r\n * A Preact hook to observe DOM mutations using MutationObserver.\r\n * @param target - The element to observe.\r\n * @param callback - Function to call on mutation.\r\n * @param options - MutationObserver options.\r\n */\r\nexport function useMutationObserver(\r\n  targetRef: RefObject<HTMLElement | null>,\r\n  callback: MutationCallback,\r\n  options: MutationObserverInit\r\n) {\r\n  useEffect(() => {\r\n    const node = targetRef.current\r\n    if (!node) return\r\n\r\n    const observer = new MutationObserver(callback)\r\n    observer.observe(node, options)\r\n\r\n    return () => observer.disconnect()\r\n  }, [targetRef, callback, options])\r\n}\r\n","import { useState, useCallback } from 'preact/hooks';\r\n\r\n/**\r\n * Mimics React's useTransition hook in Preact.\r\n * @returns [startTransition, isPending]\r\n */\r\nexport function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {\r\n  const [isPending, setIsPending] = useState(false);\r\n\r\n  const startTransition = useCallback((callback: () => void) => {\r\n    setIsPending(true);\r\n    Promise.resolve().then(() => {\r\n      callback();\r\n      setIsPending(false);\r\n    });\r\n  }, []);\r\n\r\n  return [startTransition, isPending];\r\n}\r\n"],"names":["listeners","Map","emit","useCallback","event","_arguments","arguments","handlers","get","forEach","handler","apply","slice","call","on","Set","set","add","size","targetRef","callback","options","useEffect","node","current","observer","MutationObserver","observe","disconnect","_useState","useState","isPending","setIsPending","Promise","resolve","then"],"mappings":"6RAIA,IAAMA,EAAY,IAAIC,kBAMN,WACd,IAAMC,EAAOC,EAAAA,YAAY,SAAoBC,GAAuCC,IAAAA,EAAAC,UAC5EC,EAAWP,EAAUQ,IAAIJ,GAC3BG,GACFA,EAASE,QAAQ,SAACC,UAAYA,EAAOC,WAAA,EAAA,GAAAC,MAAAC,KAAAR,EAAQ,GAAC,EAElD,EAAG,IAkBH,MAAO,CAAEH,KAAAA,EAAMY,GAhBJX,EAAWA,YAAC,SAAoBC,EAAUM,GACnD,IAAIH,EAAWP,EAAUQ,IAAIJ,GAO7B,OANKG,IACHA,EAAW,IAAIQ,IACff,EAAUgB,IAAIZ,EAAiBG,IAEjCA,EAASU,IAAIP,GAED,WACVH,EAAS,OAAQG,GACM,IAAnBH,EAAUW,MACZlB,EAAS,OAAQI,EAErB,CACF,EAAG,IAGL,wBCxBgB,SACde,EACAC,EACAC,GAEAC,EAAAA,UAAU,WACR,IAAMC,EAAOJ,EAAUK,QACvB,GAAKD,EAAL,CAEA,IAAME,EAAW,IAAIC,iBAAiBN,GAGtC,OAFAK,EAASE,QAAQJ,EAAMF,GAEV,WAAA,OAAAI,EAASG,YAAY,CAHlC,CAIF,EAAG,CAACT,EAAWC,EAAUC,GAC3B,kBCnBgB,WACd,IAAAQ,EAAkCC,EAAQA,UAAC,GAApCC,EAASF,KAAEG,EAAYH,EAAA,GAU9B,MAAO,CARiB1B,EAAWA,YAAC,SAACiB,GACnCY,GAAa,GACbC,QAAQC,UAAUC,KAAK,WACrBf,IACAY,GAAa,EACf,EACF,EAAG,IAEsBD,EAC3B"}

package/dist/useEventBus.d.ts

@@ -0,0 +1,10 @@
+type EventMap = Record<string, (...args: any[]) => void>;
+/**
+ * A Preact hook to publish and subscribe to custom events across components.
+ * @returns An object with `emit` and `on` methods.
+ */
+export declare function useEventBus<T extends EventMap>(): {
+    emit: <K extends keyof T>(event: K, ...args: Parameters<T[K]>) => void;
+    on: <K extends keyof T>(event: K, handler: T[K]) => () => void;
+};
+export {};

package/dist/useMutationObserver.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'preact';
+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 declare function useMutationObserver(targetRef: RefObject<HTMLElement | null>, callback: MutationCallback, options: MutationObserverInit): void;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "preact-missing-hooks",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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": "ISC",
+  "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.module.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,8 @@
     "build": "microbundle",
     "dev": "microbundle watch",
     "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run",
+    "type-check": "tsc --noEmit"
   },
   "keywords": [
     "preact",
@@ -35,12 +36,21 @@
     "typescript",
     "preact-hooks"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/prakhardubey2002/Preact-Missing-Hooks"
+  },
   "dependencies": {
-    "preact": "^10.26.7"
+    "preact": ">=10.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/preact": "^3.2.4",
+    "@types/jest": "^29.5.14",
+    "jsdom": "^26.1.0",
     "microbundle": "^0.15.1",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
     "preact": ">=10.0.0"

package/src/index.ts

@@ -1 +1,3 @@
-export * from './useTransition';
+export * from './useTransition'
+export * from './useMutationObserver'
+export * from './useEventBus'

package/src/useEventBus.ts

@@ -0,0 +1,36 @@
+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 };
+}

package/src/useMutationObserver.ts

@@ -0,0 +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])
+}

package/tests/useEventBus.test.tsx

@@ -0,0 +1,41 @@
+/** @jsx h */
+import { h } from 'preact'
+import { render, fireEvent, screen } from '@testing-library/preact'
+import { useEventBus } from '../src/useEventBus'
+import { useEffect, useState } from 'preact/hooks'
+
+type Events = {
+  notify: (msg: string) => void
+}
+
+function Sender() {
+  const { emit } = useEventBus<Events>()
+  return <button onClick={() => emit('notify', 'hello')}>Send</button>
+}
+
+function Receiver() {
+  const { on } = useEventBus<Events>()
+  const [message, setMessage] = useState('')
+
+  useEffect(() => {
+    const unsub = on('notify', setMessage)
+    return unsub
+  }, [on])
+
+  return <div>{message}</div>
+}
+
+test('useEventBus sends and receives events', () => {
+  render(
+    <div>
+      <Sender />
+      <Receiver />
+    </div>
+  )
+
+  fireEvent.click(screen.getByText('Send'))
+
+  const node = screen.getByText('hello')
+  expect(node).not.toBeNull()
+  expect(node.textContent).toBe('hello')
+})

package/tests/useMutationObserver.test.tsx

@@ -0,0 +1,35 @@
+/** @jsx h */
+import { h } from 'preact'
+import { render } from '@testing-library/preact'
+import { useEffect, useRef } from 'preact/hooks'
+import { useMutationObserver } from '../src/useMutationObserver'
+import { vi } from 'vitest'
+import { waitFor } from '@testing-library/preact'
+
+describe('useMutationObserver', () => {
+  it('triggers callback on DOM mutation', async () => {
+    const callback = vi.fn()
+
+    function TestComponent() {
+      const ref = useRef<HTMLDivElement>(null)
+
+      useMutationObserver(ref, callback, { childList: true })
+
+      useEffect(() => {
+        if (ref.current) {
+          const span = document.createElement('span')
+          span.textContent = 'New Child'
+          ref.current.appendChild(span)
+        }
+      }, [])
+
+      return <div ref={ref}></div>
+    }
+
+    render(<TestComponent />)
+
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalled()
+    })
+  })
+})

package/tests/useTransition.test.tsx

@@ -0,0 +1,25 @@
+/** @jsx h */
+import { render, fireEvent, screen } from '@testing-library/preact'
+import '@testing-library/jest-dom'
+import { useTransition } from '../src/useTransition'
+import { h } from 'preact'
+
+function TestComponent() {
+  const [startTransition, isPending] = useTransition()
+
+  return (
+    <div>
+      <button onClick={() => startTransition(() => {})}>Trigger</button>
+      <span>{isPending ? 'Pending' : 'Idle'}</span>
+    </div>
+  )
+}
+
+test('useTransition updates isPending', async () => {
+  render(<TestComponent />)
+  fireEvent.click(screen.getByText('Trigger'))
+
+  expect(screen.getByText(/Pending|Idle/)).toBeInTheDocument()
+
+  await Promise.resolve()
+})

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [],
+  },
+});