preact-missing-hooks 1.0.0

package/Readme.md

@@ -0,0 +1,111 @@
+# Preact Missing Hooks
+
+A lightweight, extendable collection of missing React-like hooks for Preact, starting with `useTransition`.
+
+---
+
+## ✨ Features
+
+* **🔄 `useTransition`**: Mimics React's `useTransition` for deferring state updates.
+* ✅ Fully TypeScript compatible
+* 📦 Bundled with Microbundle
+* 🔌 Easily extensible — more hooks can be added in future
+* ⚡ Zero dependencies (except `preact`)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install preact-missing-hooks
+```
+
+Ensure `preact` is installed in your project:
+
+```bash
+npm install preact
+```
+
+---
+
+## 🔧 Usage
+
+```tsx
+import { useTransition } from 'preact-missing-hooks';
+
+const Example = () => {
+  const [isPending, startTransition] = useTransition();
+
+  const handleClick = () => {
+    startTransition(() => {
+      // Expensive update here
+    });
+  };
+
+  return (
+    <button onClick={handleClick} disabled={isPending}>
+      {isPending ? 'Loading...' : 'Click me'}
+    </button>
+  );
+};
+```
+
+---
+
+## 🔍 API: `useTransition()`
+
+Returns a tuple:
+
+* `startTransition(fn: () => void)` — schedules a low-priority update
+* `isPending: boolean` — `true` while the transition is in progress
+
+---
+
+## 🛠 Built With
+
+* [Preact](https://preactjs.com)
+* [Microbundle](https://github.com/developit/microbundle)
+* [TypeScript](https://www.typescriptlang.org/)
+
+---
+
+## 🧩 Future Hooks (Planned)
+
+* `useDebounce`
+* `useThrottle`
+* `useIdleCallback`
+
+---
+
+## 📤 Publishing
+
+Build before publishing:
+
+```bash
+npm run build
+```
+
+Then:
+
+```bash
+npm publish --access public
+```
+
+---
+
+## 📝 License
+
+ISC © [Prakhar Dubey](https://github.com/your-profile)
+
+---
+
+## 📬 Contributing
+
+Feel free to open issues or submit PRs to suggest or contribute additional hooks!
+
+---
+
+## 📎 Related
+
+* [React useTransition Docs](https://react.dev/reference/react/useTransition)
+* [Preact Documentation](https://preactjs.com/guide/v10/getting-started/)

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './useTransition';

package/dist/index.js

@@ -0,0 +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]};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/index.module.js

@@ -0,0 +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};
+//# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

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

package/dist/index.umd.js

@@ -0,0 +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]}});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

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

package/dist/useTransition.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Mimics React's useTransition hook in Preact.
+ * @returns [startTransition, isPending]
+ */
+export declare function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean];

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "preact-missing-hooks",
+  "version": "1.0.0",
+  "description": "A lightweight, extendable collection of missing React-like hooks for Preact",
+  "author": "Prakhar Dubey",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.module.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./useTransition": {
+      "import": "./dist/useTransition.module.js",
+      "require": "./dist/useTransition.js",
+      "types": "./dist/useTransition.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "microbundle",
+    "dev": "microbundle watch",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "preact",
+    "hooks",
+    "usetransition",
+    "react-hooks",
+    "microbundle",
+    "typescript",
+    "preact-hooks"
+  ],
+  "dependencies": {
+    "preact": "^10.26.7"
+  },
+  "devDependencies": {
+    "microbundle": "^0.15.1",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "preact": ">=10.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './useTransition';

package/src/useTransition.ts

@@ -0,0 +1,19 @@
+import { useState, useCallback } from 'preact/hooks';
+
+/**
+ * Mimics React's useTransition hook in Preact.
+ * @returns [startTransition, isPending]
+ */
+export function useTransition(): [startTransition: (callback: () => void) => void, isPending: boolean] {
+  const [isPending, setIsPending] = useState(false);
+
+  const startTransition = useCallback((callback: () => void) => {
+    setIsPending(true);
+    Promise.resolve().then(() => {
+      callback();
+      setIsPending(false);
+    });
+  }, []);
+
+  return [startTransition, isPending];
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "target": "ES6",
+      "module": "ESNext",
+      "jsx": "react",
+      "jsxFactory": "h",
+      "moduleResolution": "Node",
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "strict": true,
+      "skipLibCheck": true,
+      "declaration": true,
+      "outDir": "dist"
+    },
+    "include": ["src"]
+  }
+