@number10/jsx-core

Renderer-neutral UI framework core — JSX runtime, Virtual DOM, hooks, theme engine, effects, and layout system for the PhaserJSX framework.

Usage

/** @jsxImportSource @number10/jsx-core */
import { View, Text } from '@number10/jsx-components'
import { useState, useTheme } from '@number10/jsx-core'

This package provides the foundation for all PhaserJSX renderers. It has no engine dependencies — pair it with a renderer adapter to target a specific engine.

What's included

• JSX Runtime — jsx-runtime and jsx-dev-runtime for TypeScript JSX support
• Virtual DOM — Renderer-neutral VDOM with per-context isolation and smart diffing
• Hooks — useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback, useReducer, useViewportSize, usePortalSurface, useTexture, useAtlas
• Theme Engine — Global theme registry, nested theme propagation, design tokens, runtime switching
• Effect Engine — Penner easing, Animatable<T>, useSpring, useTween, useTweens, AnimatedSignal, custom effects
• Layout Engine — Flexbox-inspired with px, %, vw/vh, calc(), fill, auto, deferred layout queue
• Portal System — Portal component, usePortalSurface hook, per-context VDOM isolation
• Vector Draw — VectorDrawContext for renderer-agnostic canvas drawing
• Texture System — TextureResolver, portable useTexture/useAtlas
• Border System — BorderPropsV2 with renderer capability detection

Renderer integration

| Renderer | Package | Status | | -------- | ---------------------- | ------- | | Phaser 4 | @number10/jsx-phaser | ✅ Full | | PixiJS 8 | @number10/jsx-pixi | ✅ Full | | Konva | @number10/jsx-konva | ✅ Full |

Need the same VDOM and hooks on a Three.js panel? Render into Konva and bridge the result onto a mesh with @number10/jsx-three.

License

GPL-3.0-only