IdleKit

Appearance

@idlekitjs/browser ​

Browser integration helpers that are not rendering: page lifecycle, requestAnimationFrame scheduling and screen helpers.

What it provides ​

  • pageLifecycle from @idlekitjs/browser/page-lifecycle.
  • createRafScheduler from @idlekitjs/browser/raf-scheduler.
  • devicePixelRatio, cssToDevicePx and deviceToCssPx from @idlekitjs/browser/screen.

When to use it ​

Use @idlekitjs/browser when a browser API needs to feed an IdleKit engine contract. Typical browser games use it for the frame driver and page visibility pause/resume. Headless tests usually use manualScheduler from @idlekitjs/core instead.

Basic usage ​

ts
import { createEngine } from "@idlekitjs/core";
import { createRafScheduler } from "@idlekitjs/browser/raf-scheduler";
import { pageLifecycle } from "@idlekitjs/browser/page-lifecycle";

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

engine.use(pageLifecycle());
engine.start();

Boundaries ​

@idlekitjs/browser reads or bridges browser APIs. It does not render DOM, define gameplay rules or own save policies.

The rule of thumb is:

txt
writes to the DOM -> @idlekitjs/dom
reads or bridges a browser API -> @idlekitjs/browser
consumes engine events as a policy -> @idlekitjs/plugins

All browser helpers are safe to import in shared code; without document or window they no-op or use documented fallbacks.