Destroy application on unmount

.github/workflows/handle-release-branch-push.yml

@@ -38,7 +38,7 @@ jobs:
         run: npm run ${{ matrix.script.command }}
 
   publish:
-    name: Publish
+    name: 'Publish: Release'
     needs:
       - verify
     if: contains(fromJson('["refs/heads/alpha", "refs/heads/beta", "refs/heads/main"]'), github.ref)
@@ -49,14 +49,14 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Project
+      - name: Setup project
         uses: ./.github/actions/setup
 
       - name: Build Project
         run: npm run build
         shell: bash
 
-      - name: Semantic Release
+      - name: Semantic release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         id: release
@@ -71,3 +71,34 @@ jobs:
         if: ${{ steps.release.outputs.new_tag_version != '' }}
         run: npm publish ./dist/*.tgz --tag ${{ (github.head_ref || github.ref_name) == 'main' && 'latest' || github.head_ref || github.ref_name }}
         shell: bash
+
+  # dev-publish:
+  #   name: 'Publish: Dev'
+  #   needs:
+  #     - verify
+  #   if: contains(fromJson('["refs/heads/alpha", "refs/heads/beta", "refs/heads/main"]'), github.ref) == 'false'
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
+  #       with:
+  #         fetch-depth: 0
+
+  #     - name: Setup project
+  #       uses: ./.github/actions/setup
+
+  #     - name: Build project
+  #       run: npm run build
+  #       shell: bash
+
+  #     - name: Get current version
+  #       run: echo "PACKAGE_VERSION=$(npm pkg get version | tr -d '"')" >> $GITHUB_ENV
+
+  #     - name: Setup dev version
+  #       run: echo "BRANCH_VERSION=$PACKAGE_VERSION-$BRANCH_NAME.${GITHUB_SHA::7}" >> $GITHUB_ENV
+
+  #     - name: Bump version
+  #       run: npm version $BRANCH_VERSION --no-git-tag-version --force
+
+  #     - name: Publish a dev release
+  #       run: npm publish --tag dev

src/components/Application.ts

@@ -1,4 +1,5 @@
 import {
+    type Application as PixiApplication,
     extensions as PixiExtensions,
     TextStyle,
 } from 'pixi.js';
@@ -8,14 +9,16 @@ import {
     type ForwardRefRenderFunction,
     type MutableRefObject,
     useCallback,
+    useEffect,
     useRef,
 } from 'react';
 import { createRoot } from '../core/createRoot';
+import { roots } from '../core/roots';
+import { queueForUnmount } from '../helpers/queueForUnmount';
+import { unmountApplications } from '../helpers/unmountApplications';
+import { unqueueForUnmount } from '../helpers/unqueueForUnmount';
 import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
 import { type ApplicationProps } from '../typedefs/ApplicationProps';
-import { type Root } from '../typedefs/Root';
-
-import type { Application as PixiApplication } from 'pixi.js';
 
 const originalDefaultTextStyle = { ...TextStyle.defaultTextStyle };
 
@@ -39,7 +42,6 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
     const applicationRef: MutableRefObject<PixiApplication | null> = useRef(null);
     const canvasRef: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
     const extensionsRef: MutableRefObject<Set<any>> = useRef(new Set());
-    const rootRef: MutableRefObject<Root | null> = useRef(null);
 
     const updateResizeTo = useCallback(() =>
     {
@@ -71,6 +73,8 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
 
     const handleInit = useCallback((application: PixiApplication) =>
     {
+        unmountApplications();
+
         if (forwardedRef && ('current' in forwardedRef))
         {
             forwardedRef.current = application;
@@ -136,12 +140,14 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
 
         if (canvasElement)
         {
-            if (!rootRef.current)
+            let root = roots.get(canvasElement);
+
+            if (!root)
             {
-                rootRef.current = createRoot(canvasElement, {}, handleInit);
+                root = createRoot(canvasElement, {}, handleInit);
             }
 
-            rootRef.current.render(children, applicationProps);
+            root.render(children, applicationProps);
         }
     }, [
         applicationProps,
@@ -167,9 +173,25 @@ export const ApplicationFunction: ForwardRefRenderFunction<PixiApplication, Appl
         }
     }, [defaultTextStyle]);
 
+    // eslint-disable-next-line consistent-return
+    useEffect(() =>
+    {
+        const canvasElement = canvasRef.current;
+
+        if (canvasElement)
+        {
+            unqueueForUnmount(canvasElement);
+
+            return () =>
+            {
+                queueForUnmount(canvasElement);
+            };
+        }
+    }, []);
+
     return createElement('canvas', {
-        ref: canvasRef,
         className,
+        ref: canvasRef,
     });
 };
 

src/helpers/queueForUnmount.ts

@@ -0,0 +1,19 @@
+import { roots } from '../core/roots';
+import { unmountApplication } from './unmountApplication';
+
+export function queueForUnmount(canvas: HTMLCanvasElement)
+{
+    const root = roots.get(canvas);
+
+    if (root)
+    {
+        if (root.applicationState.isInitialised)
+        {
+            unmountApplication(root);
+        }
+        else
+        {
+            root.internalState.queuedForUnmount = true;
+        }
+    }
+}

src/helpers/unmountApplication.ts

@@ -0,0 +1,27 @@
+import { reconciler } from '../core/reconciler';
+import { roots } from '../core/roots';
+import { type Root } from '../typedefs/Root';
+
+export function unmountApplication(root: Root)
+{
+    if (root.internalState.queuedForUnmount)
+    {
+        const fiber = root?.fiber;
+
+        if (fiber)
+        {
+            reconciler.updateContainer(null, fiber, null, () =>
+            {
+                try
+                {
+                    root.applicationState.app.destroy();
+                    roots.delete(root.internalState.canvas!);
+                }
+                catch (error)
+                {
+                    /* ... */
+                }
+            });
+        }
+    }
+}

src/helpers/unmountApplications.ts

@@ -0,0 +1,10 @@
+import { roots } from '../core/roots';
+import { unmountApplication } from './unmountApplication';
+
+export function unmountApplications()
+{
+    for (const root of roots.values())
+    {
+        unmountApplication(root);
+    }
+}

src/helpers/unqueueForUnmount.ts

@@ -0,0 +1,11 @@
+import { roots } from '../core/roots';
+
+export function unqueueForUnmount(canvas: HTMLCanvasElement)
+{
+    const root = roots.get(canvas);
+
+    if (root)
+    {
+        root.internalState.queuedForUnmount = false;
+    }
+}

src/typedefs/InternalState.ts

@@ -3,5 +3,6 @@ import type { HostConfig } from './HostConfig';
 export interface InternalState
 {
     canvas?: HTMLCanvasElement;
+    queuedForUnmount?: boolean;
     rootContainer: HostConfig['containerInstance'];
 }

test/e2e/components/Application.test.tsx

@@ -0,0 +1,33 @@
+import {
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import { render } from '@testing-library/react'
+
+import { Application } from '../../../src/components/Application'
+import { wait } from '../../utils/wait';
+
+describe('Application', () =>
+{
+    describe('onInit', () => {
+        it('runs the callback', async () => {
+            const onInitSpy = vi.fn()
+
+            const TestComponent = function() {
+                return (
+                    <Application onInit={onInitSpy} />
+                )
+            }
+
+            render((
+                <TestComponent />
+            ))
+
+            await wait(1000)
+
+            expect(onInitSpy.mock.calls.length).to.equal(1)
+        });
+    })
+});