migrate to pixi.js v8

[UlyssesZh]

This is not as hard as I thought, but I am sure there must be a whole bunch of caveats. ~~Running npm test fails because of an export statement in the earcut library, which I think may be safe to ignore.~~ The only other test that I have tried is to run the example in README, which works after just changing app.view to app.canvas (hooray).

@bigtimebuddy Please review. I really want to get this done because I have been longing for @pixi/node to support PIXI.js 8.x every day for 1.5 years by now (because it is the only thing that stops me from migrating my own project to 8.x).

Close #19. Close #2. Close #4. Close #13. Close #18. Crossref pixijs/pixijs#10672.

[Zyie]

hey @UlyssesZh

to get the tests working again i think you just need to make the same changes found here: https://github.com/pixijs/pixijs/pull/11214/files to the test setup

[UlyssesZh]

I have to add /node_modules/pixi.js/node_modules/(?!earcut|@types/earcut) to transformIgnorePatterns in jest config. Referring to node_modules inside node_modules feels really hacky to me.

[UlyssesZh]

Oh right, the ubuntu-20.04 runner cannot be used anymore. I just updated the GitHub Actions workflow file.

[UlyssesZh]

PixiJS needs this change to support loading SVG to texture (after adding Image to DOMAdapter as per pixijs/pixijs#11545):

diff --git a/src/assets/loader/parsers/textures/loadSVG.ts b/src/assets/loader/parsers/textures/loadSVG.ts
index ff0c4e80b..53b64397a 100644
--- a/src/assets/loader/parsers/textures/loadSVG.ts
+++ b/src/assets/loader/parsers/textures/loadSVG.ts
@@ -93,22 +93,24 @@ async function loadAsTexture(
     crossOrigin: HTMLImageElement['crossOrigin']
 ): Promise<Texture>
 {
-    const response = await DOMAdapter.get().fetch(url);
-
-    const blob = await response.blob();
+    const { fetch, Image, createCanvas } = DOMAdapter.get();
 
-    const blobUrl = URL.createObjectURL(blob);
+    const response = await fetch(url);
 
     const image = new Image();
 
-    image.src = blobUrl;
+    image.src = `data:image/svg+xml;charset=utf-8,${await response.text()}`;
     image.crossOrigin = crossOrigin;
-    await image.decode();
-
-    URL.revokeObjectURL(blobUrl);
+    if (!image.complete)
+    {
+        await new Promise((resolve) =>
+        {
+            image.onload = resolve;
+        });
+    }
 
     // convert to canvas...
-    const canvas = document.createElement('canvas');
+    const canvas = createCanvas();
     const context = canvas.getContext('2d');
 
     const resolution = asset.data?.resolution || getResolutionOfUrl(url);

Using data URI instead of object URL is because Automattic/node-canvas#2525. Replacing image.decode() with image.onload is because node-canvas did not implement the decode() method (but this can probably be fixed by defining our custom Image class like how we did with NodeCanvasElement).

[UlyssesZh]

There seems to be some GL program linking problem with headless-gl (stackgl/headless-gl#321), so some filters do not work (if they have uniform vec4 in the fragment shader).

[UlyssesZh]

PixiJS 8.12 is released. I will work on the Image adaptor soon.

[UlyssesZh]

I noticed that load parser names are now renamed (such as loadTextures -> texture). I will change loadNodeTexture to node-texture etc. accordingly.