preact-missing-hooks 4.7.0 → 4.8.0

package/dist/react.js

@@ -2161,7 +2161,199 @@ function usePoll(pollFn, options = {}) {
     return { data, done, error, pollCount, start, stop };
 }
 
+const SSR_DEVICE_DATA = {
+    userAgent: "",
+    language: "en",
+    languages: ["en"],
+    platform: "",
+    cookieEnabled: false,
+    online: true,
+    maxTouchPoints: 0,
+    vendor: "",
+    touch: false,
+    screen: {
+        width: 0,
+        height: 0,
+        availWidth: 0,
+        availHeight: 0,
+        colorDepth: 24,
+        pixelRatio: 1,
+    },
+    viewport: { width: 0, height: 0 },
+    reducedMotion: false,
+    colorScheme: "no-preference",
+};
+function getColorScheme() {
+    if (typeof window === "undefined" || !window.matchMedia) {
+        return "no-preference";
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+    }
+    if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+        return "light";
+    }
+    return "no-preference";
+}
+function getReducedMotion() {
+    if (typeof window === "undefined" || !window.matchMedia) {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** Reads synchronous device / browser data from Navigator, Screen, and matchMedia. */
+function getDeviceData() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    if (typeof navigator === "undefined") {
+        return SSR_DEVICE_DATA;
+    }
+    const nav = navigator;
+    const screen = typeof globalThis.screen !== "undefined" ? globalThis.screen : null;
+    const win = typeof globalThis.window !== "undefined" ? globalThis.window : null;
+    const data = {
+        userAgent: (_a = nav.userAgent) !== null && _a !== void 0 ? _a : "",
+        language: (_b = nav.language) !== null && _b !== void 0 ? _b : "",
+        languages: nav.languages ? [...nav.languages] : [],
+        platform: (_c = nav.platform) !== null && _c !== void 0 ? _c : "",
+        cookieEnabled: Boolean(nav.cookieEnabled),
+        online: Boolean(nav.onLine),
+        maxTouchPoints: (_d = nav.maxTouchPoints) !== null && _d !== void 0 ? _d : 0,
+        vendor: (_e = nav.vendor) !== null && _e !== void 0 ? _e : "",
+        touch: ((_f = nav.maxTouchPoints) !== null && _f !== void 0 ? _f : 0) > 0,
+        screen: {
+            width: (_g = screen === null || screen === void 0 ? void 0 : screen.width) !== null && _g !== void 0 ? _g : 0,
+            height: (_h = screen === null || screen === void 0 ? void 0 : screen.height) !== null && _h !== void 0 ? _h : 0,
+            availWidth: (_j = screen === null || screen === void 0 ? void 0 : screen.availWidth) !== null && _j !== void 0 ? _j : 0,
+            availHeight: (_k = screen === null || screen === void 0 ? void 0 : screen.availHeight) !== null && _k !== void 0 ? _k : 0,
+            colorDepth: (_l = screen === null || screen === void 0 ? void 0 : screen.colorDepth) !== null && _l !== void 0 ? _l : 24,
+            pixelRatio: (_m = win === null || win === void 0 ? void 0 : win.devicePixelRatio) !== null && _m !== void 0 ? _m : 1,
+        },
+        viewport: {
+            width: (_o = win === null || win === void 0 ? void 0 : win.innerWidth) !== null && _o !== void 0 ? _o : 0,
+            height: (_p = win === null || win === void 0 ? void 0 : win.innerHeight) !== null && _p !== void 0 ? _p : 0,
+        },
+        reducedMotion: getReducedMotion(),
+        colorScheme: getColorScheme(),
+    };
+    if (typeof nav.hardwareConcurrency === "number") {
+        data.hardwareConcurrency = nav.hardwareConcurrency;
+    }
+    if (typeof nav.deviceMemory === "number") {
+        data.deviceMemory = nav.deviceMemory;
+    }
+    const uaData = nav.userAgentData;
+    if (uaData) {
+        data.userAgentData = {
+            mobile: Boolean(uaData.mobile),
+            platform: (_q = uaData.platform) !== null && _q !== void 0 ? _q : "",
+            brands: uaData.brands ? [...uaData.brands] : [],
+        };
+    }
+    return data;
+}
+function readBattery() {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (typeof navigator === "undefined")
+            return undefined;
+        const getBattery = navigator.getBattery;
+        if (!getBattery)
+            return undefined;
+        try {
+            const battery = yield getBattery.call(navigator);
+            return { charging: battery.charging, level: battery.level };
+        }
+        catch (_a) {
+            return undefined;
+        }
+    });
+}
+/**
+ * Extracts device and browser data from native Navigator, Screen, window, and
+ * matchMedia APIs. Updates on resize, orientation, online/offline, and
+ * prefers-color-scheme / prefers-reduced-motion changes. Optionally polls the
+ * Battery Status API when available.
+ *
+ * @param options - `includeBattery` (default true), `batteryPollIntervalMs` (default 60000)
+ * @returns Current {@link DeviceData} snapshot
+ *
+ * @example
+ * ```tsx
+ * function DevicePanel() {
+ *   const device = useDeviceData();
+ *   return (
+ *     <dl>
+ *       <dt>Language</dt><dd>{device.language}</dd>
+ *       <dt>CPUs</dt><dd>{device.hardwareConcurrency ?? '—'}</dd>
+ *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
+ *       <dt>Theme</dt><dd>{device.colorScheme}</dd>
+ *     </dl>
+ *   );
+ * }
+ * ```
+ */
+function useDeviceData(options = {}) {
+    const { includeBattery = true, batteryPollIntervalMs = 60000 } = options;
+    const [data, setData] = react.useState(() => getDeviceData());
+    const refresh = react.useCallback(() => {
+        setData((prev) => {
+            const next = getDeviceData();
+            return prev.battery ? Object.assign(Object.assign({}, next), { battery: prev.battery }) : next;
+        });
+    }, []);
+    react.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (typeof window === "undefined")
+            return;
+        const onResize = () => refresh();
+        window.addEventListener("resize", onResize);
+        window.addEventListener("orientationchange", onResize);
+        window.addEventListener("online", refresh);
+        window.addEventListener("offline", refresh);
+        const reducedMotionMq = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)");
+        const darkMq = (_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, "(prefers-color-scheme: dark)");
+        const lightMq = (_c = window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(window, "(prefers-color-scheme: light)");
+        const onMediaChange = () => refresh();
+        (_d = reducedMotionMq === null || reducedMotionMq === void 0 ? void 0 : reducedMotionMq.addEventListener) === null || _d === void 0 ? void 0 : _d.call(reducedMotionMq, "change", onMediaChange);
+        (_e = darkMq === null || darkMq === void 0 ? void 0 : darkMq.addEventListener) === null || _e === void 0 ? void 0 : _e.call(darkMq, "change", onMediaChange);
+        (_f = lightMq === null || lightMq === void 0 ? void 0 : lightMq.addEventListener) === null || _f === void 0 ? void 0 : _f.call(lightMq, "change", onMediaChange);
+        return () => {
+            var _a, _b, _c;
+            window.removeEventListener("resize", onResize);
+            window.removeEventListener("orientationchange", onResize);
+            window.removeEventListener("online", refresh);
+            window.removeEventListener("offline", refresh);
+            (_a = reducedMotionMq === null || reducedMotionMq === void 0 ? void 0 : reducedMotionMq.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(reducedMotionMq, "change", onMediaChange);
+            (_b = darkMq === null || darkMq === void 0 ? void 0 : darkMq.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(darkMq, "change", onMediaChange);
+            (_c = lightMq === null || lightMq === void 0 ? void 0 : lightMq.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(lightMq, "change", onMediaChange);
+        };
+    }, [refresh]);
+    react.useEffect(() => {
+        if (!includeBattery || typeof navigator === "undefined")
+            return;
+        let cancelled = false;
+        let intervalId;
+        const updateBattery = () => __awaiter(this, void 0, void 0, function* () {
+            const battery = yield readBattery();
+            if (cancelled || battery === undefined)
+                return;
+            setData((prev) => (Object.assign(Object.assign({}, prev), { battery })));
+        });
+        void updateBattery();
+        if (batteryPollIntervalMs > 0) {
+            intervalId = setInterval(() => void updateBattery(), batteryPollIntervalMs);
+        }
+        return () => {
+            cancelled = true;
+            if (intervalId !== undefined)
+                clearInterval(intervalId);
+        };
+    }, [includeBattery, batteryPollIntervalMs]);
+    return data;
+}
+
+exports.getDeviceData = getDeviceData;
 exports.useClipboard = useClipboard;
+exports.useDeviceData = useDeviceData;
 exports.useEventBus = useEventBus;
 exports.useIndexedDB = useIndexedDB;
 exports.useLLMMetadata = useLLMMetadata;

package/dist/useDeviceData.d.ts

@@ -0,0 +1,82 @@
+/** Parsed Client Hints from `navigator.userAgentData` when available */
+export interface UserAgentDataInfo {
+    mobile: boolean;
+    platform: string;
+    brands: ReadonlyArray<{
+        brand: string;
+        version: string;
+    }>;
+}
+/** Screen and display metrics from `screen` and `window` */
+export interface DeviceScreenInfo {
+    width: number;
+    height: number;
+    availWidth: number;
+    availHeight: number;
+    colorDepth: number;
+    pixelRatio: number;
+}
+/** Viewport size (`window.innerWidth` / `innerHeight`) */
+export interface DeviceViewportInfo {
+    width: number;
+    height: number;
+}
+/** Battery status from the Battery Status API when available */
+export interface DeviceBatteryInfo {
+    charging: boolean;
+    level: number;
+}
+/** Snapshot of device / browser data from native Navigator and related APIs */
+export interface DeviceData {
+    userAgent: string;
+    language: string;
+    languages: readonly string[];
+    platform: string;
+    cookieEnabled: boolean;
+    online: boolean;
+    hardwareConcurrency?: number;
+    /** Approximate device RAM in GB (Chrome / some browsers only) */
+    deviceMemory?: number;
+    maxTouchPoints: number;
+    vendor: string;
+    touch: boolean;
+    screen: DeviceScreenInfo;
+    viewport: DeviceViewportInfo;
+    userAgentData?: UserAgentDataInfo;
+    reducedMotion: boolean;
+    colorScheme: "light" | "dark" | "no-preference";
+    battery?: DeviceBatteryInfo;
+}
+export interface UseDeviceDataOptions {
+    /** Fetch battery info when the Battery Status API exists (default: true) */
+    includeBattery?: boolean;
+    /** Battery refresh interval in ms (default: 60000) */
+    batteryPollIntervalMs?: number;
+}
+/** Reads synchronous device / browser data from Navigator, Screen, and matchMedia. */
+export declare function getDeviceData(): DeviceData;
+/**
+ * Extracts device and browser data from native Navigator, Screen, window, and
+ * matchMedia APIs. Updates on resize, orientation, online/offline, and
+ * prefers-color-scheme / prefers-reduced-motion changes. Optionally polls the
+ * Battery Status API when available.
+ *
+ * @param options - `includeBattery` (default true), `batteryPollIntervalMs` (default 60000)
+ * @returns Current {@link DeviceData} snapshot
+ *
+ * @example
+ * ```tsx
+ * function DevicePanel() {
+ *   const device = useDeviceData();
+ *   return (
+ *     <dl>
+ *       <dt>Language</dt><dd>{device.language}</dd>
+ *       <dt>CPUs</dt><dd>{device.hardwareConcurrency ?? '—'}</dd>
+ *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
+ *       <dt>Theme</dt><dd>{device.colorScheme}</dd>
+ *     </dl>
+ *   );
+ * }
+ * ```
+ */
+export declare function useDeviceData(options?: UseDeviceDataOptions): DeviceData;

package/docs/README.md

@@ -41,6 +41,7 @@ Open `docs/index.html` in a browser that supports ES modules and import maps. Th
 | **useWrappedChildren**     | Children buttons get injected styles.                                                                                                                                                                 |
 | **usePreferredTheme**      | Shows light / dark / no-preference from system.                                                                                                                                                       |
 | **useNetworkState**        | Online/offline and connection type.                                                                                                                                                                   |
+| **useDeviceData**          | Live device/browser snapshot: language, CPUs, memory, viewport, screen, touch, color scheme, reduced motion, Client Hints.                                                                              |
 | **usePrefetch**            | Hover or click to prefetch a URL (document or fetch); see prefetched status.                                                                                                                          |
 | **usePoll**                | Poll until done (3 ticks); see poll count and result. Stop button to cancel.                                                                                                                          |
 | **useClipboard**           | Copy and paste; see “Copied!” and pasted text.                                                                                                                                                        |

package/docs/main.js

@@ -23,6 +23,7 @@ const {
   useRBAC,
   usePrefetch,
   usePoll,
+  useDeviceData,
 } = await import(
   isLocal ? '../dist/index.module.js' : 'https://unpkg.com/preact-missing-hooks/dist/index.module.js'
 );
@@ -86,6 +87,33 @@ function DemoNetworkState() {
   );
 }
 
+function DemoDeviceData() {
+  const device = useDeviceData({ includeBattery: false });
+  const rows = [
+    ['Language', device.language],
+    ['Platform', device.platform || device.userAgentData?.platform || '—'],
+    ['CPUs', device.hardwareConcurrency != null ? String(device.hardwareConcurrency) : '—'],
+    ['Memory (GB)', device.deviceMemory != null ? String(device.deviceMemory) : '—'],
+    ['Viewport', device.viewport.width + '×' + device.viewport.height],
+    ['Screen', device.screen.width + '×' + device.screen.height],
+    ['Touch', device.touch ? 'yes' : 'no'],
+    ['Color scheme', device.colorScheme],
+    ['Reduced motion', device.reducedMotion ? 'yes' : 'no'],
+    ['Online', device.online ? 'yes' : 'no'],
+  ];
+  if (device.userAgentData?.mobile) {
+    rows.push(['Mobile (UA-CH)', 'yes']);
+  }
+  return h('div', { class: 'status', style: { fontSize: '0.85rem' } },
+    rows.map(([label, value]) =>
+      h('div', { key: label, style: { marginBottom: '0.25rem' } },
+        h('strong', {}, label + ': '),
+        value
+      )
+    )
+  );
+}
+
 function DemoPrefetch() {
   const { prefetch, isPrefetched } = usePrefetch();
   const [lastUrl, setLastUrl] = useState('');
@@ -562,6 +590,13 @@ const HOOKS = [
     code: `const state = useNetworkState();\n// state.online, state.effectiveType, ...`,
     Live: DemoNetworkState,
   },
+  {
+    name: 'useDeviceData',
+    flow: 'Component → useDeviceData() → Navigator + Screen + matchMedia (+ optional Battery API)',
+    summary: 'Extracts device/browser data: language, platform, CPUs, memory, screen, viewport, touch, color scheme, reduced motion, Client Hints, and optional battery.',
+    code: `const device = useDeviceData();\n// device.language, device.hardwareConcurrency, device.viewport, device.colorScheme`,
+    Live: DemoDeviceData,
+  },
   {
     name: 'usePrefetch',
     flow: 'Component → usePrefetch() → prefetch(url, options?) → link rel=prefetch or fetch()',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-missing-hooks",
-  "version": "4.7.0",
+  "version": "4.8.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",
@@ -102,6 +102,11 @@
       "import": "./dist/usePoll.module.js",
       "require": "./dist/usePoll.js"
     },
+    "./useDeviceData": {
+      "types": "./dist/useDeviceData.d.ts",
+      "import": "./dist/useDeviceData.module.js",
+      "require": "./dist/useDeviceData.js"
+    },
     "./react": {
       "types": "./dist/index.d.ts",
       "import": "./dist/react.module.js",
@@ -109,7 +114,7 @@
     }
   },
   "scripts": {
-    "build": "microbundle --alias react=preact/compat && npm run build:react && node scripts/generate-entry.cjs",
+    "build": "node scripts/ensure-microbundle-patch.cjs && microbundle --alias react=preact/compat && npm run build:react && node scripts/generate-entry.cjs",
     "llm:generate": "hayagriva-llm generate --mode ai --include-src --verbose",
     "build:react": "rollup -c scripts/rollup.react.config.cjs",
     "dev": "microbundle watch",
@@ -122,7 +127,7 @@
     "lint": "eslint src",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
-    "prepare": "husky",
+    "prepare": "husky && node scripts/ensure-microbundle-patch.cjs",
     "clean:cache": "node -e \"try{require('fs').rmSync('node_modules/.cache',{recursive:true,force:true});console.log('Cache cleared');}catch(e){}\"",
     "size": "npm run clean:cache && npm run build && size-limit"
   },
@@ -156,6 +161,7 @@
     "useClipboard",
     "usePrefetch",
     "usePoll",
+    "useDeviceData",
     "useRageClick",
     "rage click",
     "sentry",

package/scripts/ensure-microbundle-patch.cjs

@@ -0,0 +1,46 @@
+/**
+ * Patches microbundle to pass clean: true to rollup-plugin-typescript2.
+ * In rpt2, "clean" disables the RollingCache (noCache), avoiding EPERM rename
+ * failures on Windows during UMD/CJS/ESM builds.
+ */
+const fs = require("fs");
+const path = require("path");
+
+const cliPath = path.join(
+  __dirname,
+  "..",
+  "node_modules",
+  "microbundle",
+  "dist",
+  "cli.js",
+);
+
+if (!fs.existsSync(cliPath)) {
+  console.warn(
+    "ensure-microbundle-patch: microbundle not installed, skipping patch",
+  );
+  process.exit(0);
+}
+
+const src = fs.readFileSync(cliPath, "utf8");
+const marker = "clean: true,";
+
+if (src.includes(marker)) {
+  process.exit(0);
+}
+
+const needle =
+  "(useTypescript || emitDeclaration) && typescript__default['default']({";
+const replacement = `${needle} clean: true,`;
+
+if (!src.includes(needle)) {
+  console.error(
+    "ensure-microbundle-patch: microbundle cli.js format changed; update the patch script",
+  );
+  process.exit(1);
+}
+
+fs.writeFileSync(cliPath, src.replace(needle, replacement), "utf8");
+console.log(
+  "Patched microbundle (rollup-plugin-typescript2 clean:true for Windows EPERM)",
+);

package/src/index.ts

@@ -16,3 +16,4 @@ export * from "./useRefPrint";
 export * from "./useRBAC";
 export * from "./usePrefetch";
 export * from "./usePoll";
+export * from "./useDeviceData";