Application and Initialization

/**
 * Main application class that manages canvas, renderer, stage, and ticker
 */
class Application<R extends Renderer = Renderer> extends EventEmitter {
  constructor(options?: Partial<ApplicationOptions>);
  
  /**
   * Initialize the application with given options
   * @param options - Application configuration options
   * @returns Promise that resolves when initialization is complete
   */
  init(options?: Partial<ApplicationOptions>): Promise<void>;
  
  /** The HTML canvas element */
  readonly canvas: HTMLCanvasElement;
  
  /** The renderer instance (WebGL, WebGPU, or Canvas) */
  readonly renderer: R;
  
  /** The root display object container */
  readonly stage: Container;
  
  /** The application ticker for animations */
  readonly ticker: Ticker;
  
  /** The screen dimensions */
  readonly screen: Rectangle;
  
  /** The view element (alias for canvas) */
  readonly view: HTMLCanvasElement;
  
  /**
   * Destroy the application and clean up resources
   * @param removeView - Remove the canvas from DOM
   * @param stageOptions - Stage destruction options
   */
  destroy(removeView?: boolean, stageOptions?: boolean | DestroyOptions): void;
  
  /**
   * Resize the application
   * @param width - New width
   * @param height - New height
   */
  resize(width?: number, height?: number): void;
  
  /**
   * Render the stage
   */
  render(): void;
}

interface ApplicationOptions {
  /** Width of the canvas */
  width: number;
  
  /** Height of the canvas */
  height: number;
  
  /** Background color */
  background: ColorSource;
  
  /** Background alpha transparency */
  backgroundAlpha: number;
  
  /** Device pixel ratio */
  resolution: number;
  
  /** Enable antialiasing */
  antialias: boolean;
  
  /** Auto adjust resolution based on device */
  autoDensity: boolean;
  
  /** Element to resize to */
  resizeTo: Window | HTMLElement;
  
  /** Renderer preference */
  preference: 'webgl' | 'webgpu';
  
  /** WebGL context options */
  context: WebGLContextAttributes;
  
  /** Canvas element to use */
  canvas: HTMLCanvasElement;
  
  /** PowerPreference for WebGL context */
  powerPreference: WebGLPowerPreference;
  
  /** Premultiplied alpha */
  premultipliedAlpha: boolean;
  
  /** Preserve drawing buffer */
  preserveDrawingBuffer: boolean;
  
  /** Enable hello message */
  hello: boolean;
}

import { Application } from 'pixi.js';

// Basic application setup
const app = new Application();
await app.init({
  width: 800,
  height: 600,
  background: '#1099bb'
});
document.body.appendChild(app.canvas);

// Responsive application
const app = new Application();
await app.init({
  resizeTo: window,
  background: 0x1099bb,
  antialias: true
});

// WebGPU preference
const app = new Application();
await app.init({
  preference: 'webgpu',
  width: 1024,
  height: 768
});

// Custom canvas
const canvas = document.getElementById('game-canvas') as HTMLCanvasElement;
const app = new Application();
await app.init({
  canvas,
  width: canvas.width,
  height: canvas.height
});

interface ApplicationPlugin {
  /** Plugin initialization */
  init(options: ApplicationOptions): void;
  
  /** Plugin destruction */
  destroy(): void;
}

class ResizePlugin implements ApplicationPlugin {
  /** Resize the application to match element */
  resize(): void;
  
  /** Cancel resize operations */
  cancel(): void;
}

class TickerPlugin implements ApplicationPlugin {
  /** Start the ticker */
  start(): void;
  
  /** Stop the ticker */
  stop(): void;
}

/**
 * Auto-detect the best renderer for the current environment
 * @param options - Renderer options
 * @returns Promise resolving to the created renderer
 */
function autoDetectRenderer<T extends Renderer>(options?: RendererOptions): Promise<T>;

/**
 * Check if WebGL is supported
 * @returns True if WebGL is supported
 */
function isWebGLSupported(): boolean;

/**
 * Check if WebGPU is supported
 * @returns True if WebGPU is supported
 */
function isWebGPUSupported(): boolean;

interface DestroyOptions {
  /** Remove children */
  children: boolean;
  
  /** Destroy textures */
  texture: boolean;
  
  /** Destroy base texture */
  baseTexture: boolean;
}

// Application events
type ApplicationEvents = {
  /** Fired when application is resized */
  resize: [width: number, height: number];
  
  /** Fired before render */
  prerender: [];
  
  /** Fired after render */
  postrender: [];
};

import { Application, Container, Graphics } from 'pixi.js';

// Application with custom configuration
const app = new Application();
await app.init({
  width: 1200,
  height: 800,
  background: 0x2c3e50,
  resolution: window.devicePixelRatio,
  autoDensity: true,
  antialias: true,
  powerPreference: 'high-performance'
});

// Add event listeners
app.renderer.on('resize', (width, height) => {
  console.log(`Resized to ${width}x${height}`);
});

// Add to DOM
document.body.appendChild(app.canvas);

// Create scene
const container = new Container();
const graphics = new Graphics();
graphics.rect(0, 0, 100, 100).fill(0xff0000);
container.addChild(graphics);
app.stage.addChild(container);

// Start render loop
app.ticker.add(() => {
  graphics.rotation += 0.01;
});

// Clean up when done
window.addEventListener('beforeunload', () => {
  app.destroy(true, true);
});