Reference

Browser environment

A gpuijs app runs under Bun, not in a browser, so there's no window or document. Many libraries touch them anyway, often as soon as they load, and Vue and Solid build their UI through document. Every entry point (@gpuijs/core/react, @gpuijs/core/vue, @gpuijs/core/solid) provides just enough of both, backed by the native tree:

import { render } from "@gpuijs/core/react" // first, before anything that might touch window or document

Import the entry point first in src/main.*. ES modules evaluate in import order, so the globals then exist before any library module runs. @gpuijs/core/env sets up the same globals on its own, without render.

#window

window is globalThis, and it's an event target (addEventListener, removeEventListener, dispatchEvent).

#matchMedia

Lists support addEventListener("change", ...), removeEventListener and the deprecated addListener/removeListener (MUI still calls them). Only prefers-color-scheme lists ever fire.

Width-based media queries in CSS respond to the window size. matchMedia("(min-width: 768px)") from JavaScript always reports false. Read window.innerWidth and listen for resize instead.

#getComputedStyle

The cascade runs in the host, so getComputedStyle(el) can't report every computed value. It answers with what layout libraries read:

• width, height: the measured size, laid out on the spot if needed (MUI X Charts sizes itself from these).
• paddingTop/Right/Bottom/Left and border*Width: from the measured box.
• position: the element's inline position, else "static".
• transform: a matrix(1, 0, 0, 1, x, y) for an inline px translation (vaul reads drag offsets this way), else "none".
• Everything else gets CSS initial values: display: "block", overflow: "visible", direction: "ltr", filter: "none" and so on. getPropertyValue() returns "".

#document

document is an event target too.

#Capture listeners

document.addEventListener(type, fn, { capture: true }) (or true) registers a capture listener. Capture listeners run before the framework's handlers, as in a browser's capture phase. Radix Select relies on this to cancel the release of the press that opened it. See Events: propagation order.

#localStorage

localStorage has the full Storage API (getItem, setItem, removeItem, clear, key, length), and values are stored as strings.

• In development it's in memory and starts empty each run.
• In a packaged app it persists in ~/Library/Application Support/<bundle id>/localStorage.json. Each write is saved to a temporary file and renamed, so a crash never leaves a half-written store. An unreadable file is ignored with a warning.

sessionStorage and IndexedDB aren't provided.

#History and location

There's no address bar, so history is a list of entries in memory. location is a URL object on http://localhost/.

• pushState(state, title, url) and replaceState(...) update the list and location. As in the DOM, url is optional and resolves against the current URL.
• back(), forward() and go(n) move through the list and dispatch popstate on window.
• history.length, history.state and scrollRestoration are available.

Client-side routers built on the History API, like react-router, work on top of this. To open the app at a route during development, set ROUTE:

ROUTE=/settings/profile gpuijs dev .

#Classes for instanceof checks

Libraries test values with instanceof, so the environment defines these classes:

#What isn't there

• Bun already provides fetch, URL, TextEncoder, crypto, timers, EventTarget, Event, AbortController, structuredClone, WebSocket, Worker and BroadcastChannel, so the environment leaves them alone.
• There's no XMLHttpRequest (axios falls back to fetch through its adapter), IntersectionObserver, sessionStorage, IndexedDB, navigator.clipboard, or Notification.
• Bun's alert(), confirm() and prompt() read from the terminal, not the window. Use dialog.showMessageBox instead.