clone

a deno framework for local-first web apps that open instantly, work offline and sync when users choose

main
lofi / package / preact / use-device-capabilities.ts
use-device-capabilities.ts 1.6K
1import { useCallback, useEffect, useState } from "preact/hooks";2// Package-owned Preact capability hook.3import {4 type DeviceCapabilityReport,5 readDeviceCapabilityReport,6 requestPersistentStorage,7} from "../runtime/device-capabilities.ts";8export type { DeviceCapabilityReport } from "../runtime/device-capabilities.ts";910/** State returned by {@link useDeviceCapabilities}. */11export type DeviceCapabilitiesState = {12 /** The capability report, or `null` while the initial read is in flight. */13 report: DeviceCapabilityReport | null;14 /** Requests eviction protection from the browser, then refreshes the report. */15 requestPersistence(): Promise<void>;16};1718/**19 * Reads the browser's device capabilities once on mount and exposes an20 * explicit persistence request that refreshes the report with the browser's21 * verdict.22 *23 * @example24 * ```tsx25 * import { useDeviceCapabilities } from "@nzip/lofi/preact";26 *27 * const { report, requestPersistence } = useDeviceCapabilities();28 * if (!report) return <p>Checking device capabilities…</p>;29 * ```30 *31 * @returns The capability report and the persistence request action.32 */33export function useDeviceCapabilities(): DeviceCapabilitiesState {34 const [report, setReport] = useState<DeviceCapabilityReport | null>(null);35 useEffect(() => {36 let active = true;37 void readDeviceCapabilityReport().then((next) => {38 if (active) setReport(next);39 });40 return () => {41 active = false;42 };43 }, []);44 const requestPersistence = useCallback(async () => {45 const next = await requestPersistentStorage();46 setReport(next);47 }, []);48 return { report, requestPersistence };49}