chore: Update to support PixiJS v8 (#16)

* chore: Update to support v8 * chore: Fix tests * Bump extension-scripts * Move documentation to mixin type * Update index.ts
pixijs-userland · Dec 19, 2024 · d318ffa · d318ffa
1 parent 500c8fc
commit d318ffa
Show file tree

Hide file tree

Showing 10 changed files with 11,057 additions and 19,330 deletions.
diff --git a/.github/workflows/build.yml → .github/workflows/main.yml b/.github/workflows/build.yml → .github/workflows/main.yml
@@ -1,23 +1,21 @@
-name: Build CI
+name: Automation
 on:
   push:
-    branches: [ '**' ]
-    tags: [ '**' ]
+    branches: ['**']
+    tags: ['**']
   release:
-    types: [ 'created' ]
+    types: ['created']
   pull_request:
-    branches: [ '**' ]
+    branches: ['**']
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js 16.x
-      uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - name: Use Node.js 20.x
+      uses: actions/setup-node@v4
       with:
-        node-version: 16
-    - name: Install npm
-      run: npm install -g npm@8
+        node-version: 20
     - name: Install dependencies
       run: npm ci
     - name: Build

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 [Author's name]
+Copyright (c) 2024 [Author's name]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -16,9 +16,8 @@ npm run build
 | Path | Description |
 |---|---|
 | `./src` | Folder containing the source code for your extension |
-| `./test` | Folder containing the Jest-based unit-tests (i.e., `*.test.ts`) |
+| `./src/__tests__` | Folder containing the Jest-based unit-tests (i.e., `*.test.ts`) |
 | `./examples` | Folder containing any examples to demonstrate usage |
-| `./global.d.ts` | TypeScript global mixins for PixiJS |
 
 
 ## Publishing

diff --git a/examples/index.html b/examples/index.html
@@ -13,25 +13,34 @@
     </head>
     <body>
         <h1>Rectangle Helpers</h1>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
-        <script src="../dist/pixi-rectangle-helpers.js"></script>
-        <script>
-            const app = new PIXI.Application({ background: '#999' });
-            document.body.appendChild(app.view);
-
-            const shape = new PIXI.Sprite(PIXI.Texture.WHITE);
-            shape.scale.set(10);
-            shape.x = (app.screen.width - shape.width) / 2;
-            shape.y = (app.screen.height - shape.height) / 2;
-
-            shape.interactive = true;
-            shape.cursor = 'pointer';
-            shape.onclick = () => {
-                const bounds = shape.getBounds();
-                // Expand the bounds by 10 pixels!
-                Object.assign(shape, bounds.expand(10));
-            };
-            app.stage.addChild(shape);
+        <script type="importmap">
+            {
+                "imports": {
+                    "pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.mjs",
+                    "@pixi/rectangle-helpers": "../dist/pixi-rectangle-helpers.mjs"
+                }
+            }
+        </script>
+        <script type="module">
+            import { Application, Rectangle, Sprite, Texture } from 'pixi.js';
+            import '@pixi/rectangle-helpers';
+            const app = new Application();
+            await app.init({ background: '#999' });
+            document.body.appendChild(app.canvas);
+            app.stage.addChild(new Sprite({
+                texture: Texture.WHITE,
+                width: 100,
+                height: 100,
+                x: (app.screen.width - 100) / 2,
+                y: (app.screen.height - 100) / 2,
+                eventMode: 'static',
+                cursor: 'pointer',
+                onclick: (event) => {
+                    const { rectangle } = event.target.getBounds();
+                    // Expand the bounds by 10 pixels!
+                    Object.assign(event.target, rectangle.expand(10));
+                }
+            }));
         </script>
     </body>
 </html>
diff --git a/global.d.ts b/global.d.ts