Skip to content

Browser API

Signatures for @idlekitjs/browser. Concepts: Browser overview.

pageLifecycle

ts
import { pageLifecycle } from "@idlekitjs/browser/page-lifecycle";

function pageLifecycle<T extends object>(): Extension<T>;

No options. Tab hidden → engine.pause(). Tab visible → events.emit("resume", elapsedMs) then engine.resume(). No-op without document (SSR/Node-safe); the single visibilitychange listener is removed in teardown. Usage: Page lifecycle.

createRafScheduler

ts
import { createRafScheduler } from "@idlekitjs/browser/raf-scheduler";

function createRafScheduler(): FrameScheduler;

The browser frame driver: requestAnimationFrame-based implementation of the core's FrameScheduler. Pass it to createEngine:

ts
const engine = createEngine<State>({ initialState, renderer, scheduler: createRafScheduler() });

The rAF timestamp is the loop's clock — core never calls performance.now. It is not tied to the DOM renderer: any browser-rendered view (DOM, canvas, React, ...) can drive the engine with it.

Screen helpers

ts
import { devicePixelRatio, cssToDevicePx, deviceToCssPx } from "@idlekitjs/browser/screen";

CSS ↔ physical pixel conversion, safe outside the browser (ratio falls back to 1 without window):

ts
devicePixelRatio(): number;             // physical px per CSS px (>= 1)
cssToDevicePx(cssPx: number): number;
deviceToCssPx(devicePx: number): number;

Useful to decide whether a sub-pixel change is visible on the current screen (e.g. skipping imperceptible progress-bar updates on low-DPI displays).