PocketJS Framework — Full API Reference Overview

@pocketjs/framework is the public surface of PocketJS — a high-performance JSX UI framework that runs Solid and Vue Vapor components on Sony PSP hardware, PPSSPP, browser WASM, and headless Bun through a no_std Rust core. Every public symbol is grouped below by import path. For conceptual walkthroughs see the Components, Animation, and Input & focus guides.

Import paths

Import path	What it exports
`@pocketjs/framework`	`mount`, `render`, `RenderOptions`, `MountOptions`, `HostOps`, `Host`, `detectHost`, `installHost`, `getOps`, `retain`, `release`, `runSweep`, `registerTexture`, `registerStyles`, `resolveStyle`, `pakEntries`, `pakGet`, `loadPack`, `resetPack`, `missCounters`
`@pocketjs/framework/components`	`View`, `Text`, `Image`, `Sprite`, `Screen`, `Focusable`, `FocusScope`, `FocusGrid`, `ActionHandler`, `Portal`, `Modal`, `ActionBar`, `Grid`, `Lazy`, `Gallery`, plus their `Props` types
`@pocketjs/framework/animation`	`animate`, `spring`, `cancelAnim`, `AnimateOptions`, `EasingName`
`@pocketjs/framework/lifecycle`	`onFrame`, `onButtonPress`, `createSpriteAnimation`, `pushButtonHandlerBlock`, `ButtonPressOptions`
`@pocketjs/framework/input`	`BTN`, `focusNode`, `getFocused`, `pushFocusScope`, `pushFocusGrid`, `FocusScopeOptions`, `FocusGridOptions`
`@pocketjs/framework/config`	`definePocketConfig`
`@pocketjs/framework/solid`	Solid-specific alias for `@pocketjs/framework`
`@pocketjs/framework/solid/components`	Solid-specific alias for `@pocketjs/framework/components`
`@pocketjs/framework/solid/lifecycle`	Solid-specific alias for `@pocketjs/framework/lifecycle`
`@pocketjs/framework/solid/renderer`	Solid renderer internals
`@pocketjs/framework/vue-vapor`	Vue Vapor runtime entry
`@pocketjs/framework/vue-vapor/components`	Vue Vapor component set
`@pocketjs/framework/vue-vapor/lifecycle`	Vue Vapor lifecycle hooks
`@pocketjs/framework/vue-vapor/animation`	Vue Vapor animation API
`@pocketjs/framework/vue-vapor/input`	Vue Vapor input API
`@pocketjs/framework/vue-vapor/renderer`	Vue Vapor renderer internals

`mount`

mount is the app-level entry point for demo and application bundles. It resolves ops from opts.ops or globalThis.ui, uploads pack images on injected hosts, feeds the default generated style table, and mounts the root component. Returns a disposer that unmounts and destroys the app subtree. Throws if neither opts.ops nor globalThis.ui is present.

function mount(code: () => unknown, opts?: MountOptions): () => void

code

() => unknown

required

Component factory — the root of the application tree. Called once inside a reactive owner.

opts

MountOptions

Optional configuration. When omitted, ops are resolved from globalThis.ui and the compiled style table is used.

`render`

render is the lower-level mount. It detects and installs the host, wires the style resolver, registers styles, feeds styles and atlases from the pack on injected hosts, builds the app and overlay layers, installs the per-frame handler, and mounts the component. mount calls render internally; call render directly when you supply your own ops or styles.

function render(code: () => unknown, opts?: RenderOptions): () => void

code

() => unknown

required

Component factory for the root tree.

opts

RenderOptions

Host ops, style table, and pack. All fields are optional.

`RenderOptions` / `MountOptions`

MountOptions is a direct alias of RenderOptions. Both share the same three fields.

Field	Type	Description
`ops`	`HostOps?`	Host op surface. Web, WASM, and test hosts inject their implementation here; omit on PSP where `globalThis.ui` is installed by the native binary.
`styles`	`Record<string, number>?`	Class-literal → styleId table, typically the compiler-generated `STYLE_IDS`.
`pak`	`ArrayBuffer?`	App data pack. Defaults to `globalThis.__pak` when present.

`frameworkName`

Returns "Solid" — the name of the active framework runtime. Useful for conditional logic in shared utilities or tests. The Vue Vapor entry point (@pocketjs/framework/vue-vapor) has its own frameworkName that returns "VueVapor"; this export always returns "Solid".

function frameworkName(): "Solid"

Host helpers

These three functions manage the active host binding. render calls them internally; reach for them directly only in custom host integrations or tests.

function detectHost(injected?: HostOps): Host
function installHost(host: Host): void
function getOps(): HostOps

detectHost resolves the active host — injected ops win; otherwise globalThis.ui (PSP/QuickJS). Throws when neither exists. installHost sets the active host. getOps returns the installed op surface.

`Host`

interface Host {
  ops: HostOps;
  kind: "psp" | "injected";
  strict: boolean;
}

strict hosts (web, WASM, test) throw on an unknown class or texture; the PSP host is non-strict and counts silently via missCounters.

`HostOps`

The synchronous ui.* op surface. Handles are generation-tagged positive i32 ids; 0 means “none.” Each op maps to a native function in the Rust core. See the Native contract page for the full surface.

Op	Signature	Purpose
`createNode`	`(type: number) => number`	New node (spec `NODE_TYPE`) → id
`destroyNode`	`(id: number) => void`	Destroy subtree; free anim tracks; clear focus
`insertBefore`	`(parent, child, anchorOr0) => void`	Move/insert; anchor `0` = append
`removeChild`	`(parent, child) => void`	Detach but keep the node alive
`setStyle`	`(id, styleId) => void`	Apply a compiled style; `-1` clears
`setProp`	`(id, propId, value) => void`	Set one spec `PROP`
`setText` / `replaceText`	`(id, str) => void`	Text-node content
`uploadTexture`	`(buf, w, h, psm) => number`	Upload a pow2 image (≤512) → handle
`setImage`	`(id, texHandle) => void`	Bind an image; `<0` clears
`setSprite`	`(id, atlas, frames, cols, step) => void`	Bind an animated sprite atlas; the Rust core auto-plays it
`animate`	`(id, propId, to, durMs, easing, delayMs) => number`	Start a tween → animId
`cancelAnim`	`(animId) => void`	Stop a tween
`setFocus`	`(idOr0) => void`	Focus a node; `0` clears
`loadStyles`	`(buf) => void`	Web/test only — feed the style table
`loadFontAtlas`	`(buf) => void`	Web/test only — feed one baked atlas
`measureText`	`(str, fontSlot) => number`	Measured width in px

`NodeMirror`

NodeMirror is the JS-side mirror of a native node. A ref callback receives one; animate, spring, focusNode, pushFocusScope, and pushFocusGrid all accept one.

interface NodeMirror {
  id: number;                          // native generation-tagged node id
  type: number;                        // spec NODE_TYPE ordinal
  parent: NodeMirror | null;
  children: NodeMirror[];
  text?: string;                       // text nodes only
  focusable?: boolean;                 // focus traversal membership
  onPress?: (() => void) | undefined;  // CIRCLE handler while focused
}

End-of-frame sweep

The runtime automatically calls runSweep once per frame after user code and input, so a remove-then-reinsert within the same frame (Solid moves) never destroys live nodes. Reach for these only when hand-managing detached subtrees.

function retain(node: NodeMirror): void
function release(node: NodeMirror): void
function runSweep(): void

retain keeps a detached subtree alive across the sweep. release undoes it so the node re-enters the next sweep. runSweep destroys every subtree removed during the frame that is still detached.

`registerTexture`

Binds an image key (the src string passed to <Image>) to an uploadTexture handle so the renderer can resolve it.

function registerTexture(key: string, handle: number): void

`missCounters`

On the non-strict PSP host, an unknown class or texture increments a counter rather than throwing. Read it to diagnose missing styles or images without crashing hardware.

const missCounters: { unknownClass: number; unknownTexture: number }

Styles

registerStyles loads a class-literal → styleId table (the compiler’s STYLE_IDS) and registers a token-sorted alias so "a b" resolves the same id as "b a". resolveStyle returns the styleId for a class string, or undefined if the compiler never saw it.

function registerStyles(table: Record<string, number>): void
function resolveStyle(cls: string): number | undefined

Data pack (pak)

PocketJS uses a binary pack format to ship images, fonts, sprites, and style tables as a single ArrayBuffer. These helpers expose the pack contents to JS-side code.

function pakEntries(prefix?: string): string[]
function pakGet(key: string): Uint8Array
function loadPack(ab: ArrayBuffer): void
function resetPack(): void

pakEntries lists entry keys starting with prefix (default: all keys), sorted. pakGet returns a fresh copy of a blob’s bytes and throws on a missing key. loadPack explicitly loads a pack, replacing any prior. resetPack drops the cached parsed pack.

Sub-pages

Page	What it covers
Components	`View`, `Text`, `Image`, `Sprite`, `Screen`, `Focusable`, `FocusScope`, `FocusGrid`, `ActionHandler`, `Portal`, `Modal`, `ActionBar`, `Grid`, `Lazy`, `Gallery` — all prop types
Animation	`animate()`, `spring()`, `cancelAnim()`, `AnimateOptions`, `EasingName`
Lifecycle	`onFrame()`, `onButtonPress()`, `createSpriteAnimation()`, `pushButtonHandlerBlock()`
Input	`BTN` constants, `focusNode()`, `getFocused()`, `pushFocusScope()`, `pushFocusGrid()`

Framework API

Native Contract

PocketJS Framework — Full API Reference Overview

Import paths

`mount`

`render`

`RenderOptions` / `MountOptions`

`frameworkName`

Host helpers

`Host`

`HostOps`

`NodeMirror`

End-of-frame sweep

`registerTexture`

`missCounters`

Styles

Data pack (pak)

Sub-pages

Build docs developers (and LLMs) love

Framework API

Native Contract

Documentation Index

​Import paths

​mount

​render

​RenderOptions / MountOptions

​frameworkName

​Host helpers

​Host

​HostOps

​NodeMirror

​End-of-frame sweep

​registerTexture

​missCounters

​Styles

​Data pack (pak)

​Sub-pages

Build docs developers (and LLMs) love

Import paths

`mount`

`render`

`RenderOptions` / `MountOptions`

`frameworkName`

Host helpers

`Host`

`HostOps`

`NodeMirror`

End-of-frame sweep

`registerTexture`

`missCounters`

Styles

Data pack (pak)

Sub-pages