@number10/jsx-phaser

Phaser 4 renderer adapter for the PhaserJSX framework — provides Phaser-specific runtime, mounting, and native components.

Usage

/** @jsxImportSource @number10/jsx-phaser */
import * as Phaser from 'phaser'
import { Button, Text, View, mountJSX } from '@number10/jsx-phaser'

class GameScene extends Phaser.Scene {
  create() {
    mountJSX(this, App, { width: this.scale.width, height: this.scale.height })
  }
}

Renderer support

@number10/jsx-phaser supports both Phaser WebGL and Phaser Canvas renderers.

• View overflow="hidden" uses Phaser-native clipping in both modes
• WebGL uses the stencil-based path
• Canvas uses a native ctx.clip() path tied to the container transform

That means scroll views and clipped subtrees now behave consistently even when a project runs with type: Phaser.CANVAS.

Auto-mount plugin

Use createPhaserJSXPlugin() when you want to mount JSX from the Phaser game config instead of calling mountJSX() manually inside a scene.

If a page hosts multiple Phaser.Game instances, give each plugin entry its own key:

createPhaserJSXPlugin({
  key: 'PhaserJSXInventory',
  component: InventoryHud,
})

Without a unique key, Phaser treats the plugin registration as global and later game roots can collide with the first one.

What's included

• All @number10/jsx-components re-exported — portable UI components
• Phaser-specific components (Graphics, Particles, TileSprite)
• Mount system (mountJSX, scene lifecycle)
• Gesture system (touch, drag, double-tap, long-press)
• Theme system with Phaser-specific defaults and presets
• Renderer parity helpers for WebGL/Canvas clipping behavior

Phaser-native components (Klasse C)

These are intentionally NOT portable — they use Phaser GameObjects directly:

| Component | API | Notes | | ----------------- | ------------------------------------- | ------------------------------------- | | Graphics | onDraw(Phaser.GameObjects.Graphics) | Phaser-native drawing | | Particles | Phaser particle emitter | Phaser-specific | | TileSprite | Phaser tile sprite | Phaser-specific | | RefOriginView | Phaser origin API | Legacy, Phaser-only | | Sprite (Phaser) | Phaser.GameObjects.Sprite | Has animation callbacks + Phaser refs |

⚠️ Name conflict: Sprite exists in both @number10/jsx-components (portable) and @number10/jsx-phaser (Phaser-native with animation callbacks). ⚠️ Name conflict: NineSlice exists in both @number10/jsx-components (portable, TextureResolver-based) and @number10/jsx-phaser (Phaser-native Phaser.GameObjects.NineSlice).

License

GPL-3.0-only