Making a start.

package.json

@@ -26,7 +26,7 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
-    "pixi.js-legacy": "^7.3.2"
+    "pixi.js": "8.0.0"
   },
   "files": [
     "out"

src/Grid.ts

@@ -1,14 +1,14 @@
-import { Container, DisplayObject, Rectangle } from "pixi.js-legacy";
+import { Container, Rectangle } from "pixi.js";
 import Partitioner from "./Partitioner";
 
-export function Grid(...objects: DisplayObject[]): GridComponent {
+export function Grid(...objects: Container[]): GridComponent {
   return new GridComponent(...objects);
 }
 
 export class GridComponent extends Partitioner {
   _centerLastRow: boolean = false;
 
-  constructor(...children: DisplayObject[]) {
+  constructor(...children: Container[]) {
     super(...children);
   }
 
@@ -26,7 +26,7 @@ export class GridComponent extends Partitioner {
     return 1;
   }
 
-  *partition(objects: DisplayObject[], space: Rectangle): Generator<Rectangle> {
+  *partition(objects: Container[], space: Rectangle): Generator<Rectangle> {
     let containers = objects as Container[];
 
     let factors = [];

src/Leaf.ts

@@ -1,4 +1,4 @@
-import { Rectangle, Container } from "pixi.js-legacy";
+import { Rectangle, Container } from "pixi.js";
 import Positioner from "./Positioner";
 import { getDimension } from "./utils";
 

src/Partitioner.ts

@@ -1,4 +1,4 @@
-import { Container, DisplayObject, Graphics, Rectangle } from "pixi.js-legacy";
+import { Container, Graphics, Rectangle } from "pixi.js";
 import Positioner from "./Positioner";
 import { Leaf, LeafComponent } from "./Leaf";
 
@@ -7,10 +7,10 @@ export default abstract class Partitioner
   implements Positioner
 {
   protected _debug: boolean = false;
-  protected _group: DisplayObject[];
+  protected _group: Container[];
   protected _space: Rectangle | null = null;
 
-  constructor(...children: DisplayObject[]) {
+  constructor(...children: Container[]) {
     super();
     this._group = children;
     this.sortableChildren = true;
@@ -41,11 +41,11 @@ export default abstract class Partitioner
   }
 
   abstract partition(
-    objects: DisplayObject[],
+    objects: Container[],
     space: Rectangle,
   ): IterableIterator<Rectangle>;
 
-  override addChild<U extends DisplayObject[]>(...children: U): U[0] {
+  override addChild<U extends Container[]>(...children: U): U[0] {
     if (children.length === 0) {
       throw new Error("Cannot add zero children");
     }
@@ -58,13 +58,13 @@ export default abstract class Partitioner
     return firstChild;
   }
 
-  override addChildAt<U extends DisplayObject>(child: U, index: number): U {
+  override addChildAt = <U extends Container>(child: U, index: number): U => {
     this._group.splice(index, 0, child);
     this.refresh();
     return child;
-  }
+  };
 
-  override removeChild<U extends DisplayObject[]>(...children: U): U[0] {
+  override removeChild<U extends Container[]>(...children: U): U[0] {
     if (children.length === 0) {
       throw new Error("Cannot remove zero children");
     }
@@ -80,28 +80,29 @@ export default abstract class Partitioner
     return firstChild;
   }
 
-  override removeChildAt(index: number): DisplayObject {
+  override removeChildAt = <U extends Container>(index: number): U => {
     if (index < 0 || index >= this._group.length) {
       throw new Error("Index out of bounds");
     }
 
     let child = this._group[index]!;
     this._group.splice(index, 1);
     this.refresh();
+    // @ts-ignore
     return child;
-  }
+  };
 
-  override removeChildren(
+  override removeChildren = (
     beginIndex?: number | undefined,
     endIndex?: number | undefined,
-  ): DisplayObject[] {
+  ): Container[] => {
     let children = this._group.splice(
       beginIndex ?? 0,
       endIndex ?? this._group.length,
     );
     this.refresh();
     return children;
-  }
+  };
 
   refresh(): void {
     if (this._space) {

src/Positioner.ts

@@ -1,4 +1,4 @@
-import { Rectangle } from "pixi.js-legacy";
+import { Rectangle } from "pixi.js";
 
 export default interface Positioner {
   arrange(screen: Rectangle): void;

src/Stack.ts

@@ -1,4 +1,4 @@
-import { DisplayObject, Rectangle } from "pixi.js-legacy";
+import { Container, Rectangle } from "pixi.js";
 import Partitioner from "./Partitioner";
 
 enum Direction {
@@ -7,15 +7,15 @@ enum Direction {
   Auto,
 }
 
-export function Stack(...objects: DisplayObject[]): StackComponent {
+export function Stack(...objects: Container[]): StackComponent {
   return new StackComponent(...objects);
 }
 
-export function HStack(...objects: DisplayObject[]): StackComponent {
+export function HStack(...objects: Container[]): StackComponent {
   return new StackComponent(...objects).horizontal();
 }
 
-export function VStack(...objects: DisplayObject[]): StackComponent {
+export function VStack(...objects: Container[]): StackComponent {
   return new StackComponent(...objects).vertical();
 }
 
@@ -24,7 +24,7 @@ export class StackComponent extends Partitioner {
   private _proportions: number[];
   private _direction: Direction = Direction.Auto;
 
-  constructor(...children: DisplayObject[]) {
+  constructor(...children: Container[]) {
     super(...children);
     this._proportions = children.map(() => 1 / children.length);
   }
@@ -56,7 +56,7 @@ export class StackComponent extends Partitioner {
   }
 
   *horizontalPartition(
-    objects: DisplayObject[],
+    objects: Container[],
     space: Rectangle,
   ): Generator<Rectangle> {
     let i = 0;
@@ -72,7 +72,7 @@ export class StackComponent extends Partitioner {
   }
 
   *verticalPartition(
-    objects: DisplayObject[],
+    objects: Container[],
     space: Rectangle,
   ): Generator<Rectangle> {
     let i = 0;
@@ -87,7 +87,7 @@ export class StackComponent extends Partitioner {
     }
   }
 
-  *partition(objects: DisplayObject[], space: Rectangle): Generator<Rectangle> {
+  *partition(objects: Container[], space: Rectangle): Generator<Rectangle> {
     let direction = this._direction;
     if (direction === Direction.Auto) {
       direction =

test-utils.ts

@@ -1,5 +1,5 @@
 import { expect } from "@jest/globals";
-import * as PIXI from "pixi.js-legacy";
+import { Application, Renderer, Graphics, Container } from "pixi.js";
 import fs from "fs";
 import Positioner from "./src/Positioner";
 
@@ -11,8 +11,8 @@ export function circle({
   x?: number;
   y?: number;
   radius?: number;
-} = {}): PIXI.Graphics {
-  let circle = new PIXI.Graphics();
+} = {}): Graphics {
+  let circle = new Graphics();
   circle.beginFill(0xff0000);
   circle.drawCircle(x ?? 0, y ?? 0, radius ?? 50);
   circle.endFill();
@@ -31,14 +31,14 @@ export function rect({
   width?: number;
   height?: number;
   center?: boolean;
-} = {}): PIXI.Graphics {
+} = {}): Graphics {
   x = x ?? 0;
   y = y ?? 0;
   width = width ?? 50;
   height = height ?? 50;
   center = center ?? false;
 
-  let rect = new PIXI.Graphics();
+  let rect = new Graphics();
 
   if (center) {
     rect.pivot.x = width / 2;
@@ -50,15 +50,15 @@ export function rect({
   return rect;
 }
 
-function innerTest(name: string, cb: (app: PIXI.Application) => void) {
+async function innerTest(name: string, cb: (app: Application) => void) {
   let canvas = document.createElement("canvas");
   canvas.width = 800;
   canvas.height = 600;
   document.body.appendChild(canvas);
 
-  let app = new PIXI.Application({
+  let app = new Application<Renderer<HTMLCanvasElement>>();
+  await app.init({
     autoStart: false,
-    forceCanvas: true,
     view: canvas,
     resizeTo: canvas,
     backgroundColor: 0xffffff,
@@ -92,17 +92,17 @@ function innerTest(name: string, cb: (app: PIXI.Application) => void) {
   document.body.removeChild(canvas);
 }
 
-export function appTest(name: string, cb: (app: PIXI.Application) => void) {
-  it(name, () => innerTest(name, cb));
+export function appTest(name: string, cb: (app: Application) => void) {
+  it(name, async () => await innerTest(name, cb));
 }
 
-appTest.only = (name: string, cb: (app: PIXI.Application) => void) => {
-  it.only(name, () => innerTest(name, cb));
+appTest.only = (name: string, cb: (app: Application) => void) => {
+  it.only(name, async () => await innerTest(name, cb));
 };
 
 export async function componentTest(
   name: string,
-  cb: (app: PIXI.Application) => Positioner & PIXI.DisplayObject,
+  cb: (app: Application) => Positioner & Container,
 ) {
   appTest(name, (app) => {
     let layout = cb(app);
@@ -113,7 +113,7 @@ export async function componentTest(
 
 componentTest.only = (
   name: string,
-  cb: (app: PIXI.Application) => Positioner & PIXI.DisplayObject,
+  cb: (app: Application) => Positioner & Container,
 ) => {
   appTest.only(name, (app) => {
     let layout = cb(app);

tests.ts

@@ -1,4 +1,4 @@
-import { Container } from "pixi.js-legacy";
+import { Container } from "pixi.js";
 import { Grid, HStack, Stack, VStack } from "./src";
 import { componentTest, circle, appTest, rect } from "./test-utils";