Feature: Support PixiJS v8

.github/workflows/main.yml

@@ -0,0 +1,33 @@
+name: Automation
+on:
+  push:
+    branches: [ '**' ]
+    tags: [ '**' ]
+  release:
+    types: [ 'created' ]
+  pull_request:
+    branches: [ '**' ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js 18.x
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Run Unit Tests
+      uses: coactions/setup-xvfb@v1
+      with:
+        run: npm test
+    - name: Upload to Release
+      if: github.event_name == 'release'
+      uses: softprops/action-gh-release@v1
+      with:
+        files: dist/*
+

README.md

@@ -32,3 +32,11 @@ fetch('image.gif')
     .then(AnimatedGIF.fromBuffer)
     .then(image => app.stage.addChild(image));
 ```
+
+### Version Compatiblity
+
+| PixiJS | PixiJS GIF |
+|--------|------------|
+| v6.x   | v1.x       |
+| v7.x   | v2.x       |
+| v8.x   | v3.x       |

examples/index.html

@@ -12,7 +12,7 @@
             gtag('js', new Date());
             gtag('config', 'UA-103772589-10');
         </script>
-        <script src="https://pixijs.download/dev/pixi-legacy.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
         <script src="../dist/pixi-gif.js"></script>
         <style>
@@ -67,7 +67,7 @@ <h2 class="mb-3">Original GIF</h2>
 
             const $ = document.querySelector.bind(document);
             const $$ = document.querySelectorAll.bind(document);
-            const $view = $('#root');
+            const $canvas = $('#root');
             const $preview = $('#preview');
             const $buttons = Array.from($$('button[data-src]'));
             const $play = $('#play');
@@ -77,13 +77,7 @@ <h2 class="mb-3">Original GIF</h2>
             const $fileInput = $('#file-input');
 
             // Boilerplate create application
-            const app = new PIXI.Application({
-                width: 476,
-                height: 280,
-                view: $view,
-                backgroundAlpha: 0,
-                hello: true,
-            });
+            const app = new PIXI.Application();
 
             let currentAnimation = null;
             const sources = $buttons.map(i => i.dataset.src);
@@ -111,9 +105,9 @@ <h2 class="mb-3">Original GIF</h2>
             function playAnimation(imageName, imagePath) {
                 clearAnimation();
                 animation = animations[imageName];
-                $view.width = animation.width;
-                $view.height = animation.height;
-                app.renderer.resize($view.width, $view.height);
+                $canvas.width = animation.width;
+                $canvas.height = animation.height;
+                app.renderer.resize($canvas.width, $canvas.height);
                 $preview.src = imagePath || imageName;
                 $slider.max = animation.totalFrames - 1;
                 currentAnimation = animation;
@@ -135,6 +129,13 @@ <h2 class="mb-3">Original GIF</h2>
             }
 
             const main = async () => {
+                await app.init({
+                    width: 476,
+                    height: 280,
+                    canvas: $canvas,
+                    backgroundAlpha: 0,
+                    hello: true,
+                });
                 const resources = await PIXI.Assets.load(sources);
                 $buttons.forEach($button =>
                     $button.addEventListener('click', () => playAnimation($button.dataset.src), false));