From 3156c65a6470d1eb5cc51f6fde384fb00a73bd0a Mon Sep 17 00:00:00 2001 From: Trezy Date: Mon, 26 Aug 2024 15:22:19 +0200 Subject: [PATCH 1/5] feat: add `extension` prop to `` --- src/components/Application.ts | 45 +++++++++++++++++++++++++++----- src/typedefs/ApplicationProps.ts | 3 +++ 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/components/Application.ts b/src/components/Application.ts index 571278f3..59755c56 100644 --- a/src/components/Application.ts +++ b/src/components/Application.ts @@ -1,20 +1,21 @@ -import { TextStyle } from 'pixi.js'; +import { + extensions as PixiExtensions, + TextStyle, +} from 'pixi.js'; import { createElement, forwardRef, + type ForwardRefRenderFunction, + type MutableRefObject, useCallback, useRef, } from 'react'; import { createRoot } from '../core/createRoot'; 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'; -import type { - ForwardRefRenderFunction, - MutableRefObject, -} from 'react'; -import type { ApplicationProps } from '../typedefs/ApplicationProps'; -import type { Root } from '../typedefs/Root'; const originalDefaultTextStyle = { ...TextStyle.defaultTextStyle }; @@ -29,6 +30,7 @@ export const ApplicationFunction: ForwardRefRenderFunction = useRef(null); const canvasRef: MutableRefObject = useRef(null); + const extensionsRef: MutableRefObject> = useRef(new Set()); const rootRef: MutableRefObject = useRef(null); const updateResizeTo = useCallback(() => @@ -95,6 +98,34 @@ export const ApplicationFunction: ForwardRefRenderFunction + { + if (extensions) + { + const extensionsToHandle = [...extensions]; + const extensionsState = extensionsRef.current; + + for (const extension of extensionsState.values()) + { + const extensionIndex = extensionsToHandle.indexOf(extension); + + if (extensionIndex === -1) + { + PixiExtensions.remove(extension); + extensionsState.delete(extension); + } + + extensionsToHandle.splice(extensionIndex, 1); + } + + for (const extension in extensionsToHandle) + { + PixiExtensions.add(extension); + extensionsState.add(extension); + } + } + }, [extensions]); + useIsomorphicLayoutEffect(() => { const canvasElement = canvasRef.current; diff --git a/src/typedefs/ApplicationProps.ts b/src/typedefs/ApplicationProps.ts index c551ad7d..f567ac3c 100644 --- a/src/typedefs/ApplicationProps.ts +++ b/src/typedefs/ApplicationProps.ts @@ -24,6 +24,9 @@ export interface BaseApplicationProps /** @description The default style to be applied to text nodes. */ defaultTextStyle?: TextStyle | TextStyleOptions, + /** @description An array of Pixi extensions to be loaded before initialisation. */ + extensions?: any[], + /** @description A unique key which allows React to manage this component across changes in parent state. */ key?: Key, From 5dcd4684b908d7df6849256975c02e39d9c599c5 Mon Sep 17 00:00:00 2001 From: Trezy Date: Mon, 26 Aug 2024 15:30:09 +0200 Subject: [PATCH 2/5] docs: add docs for Application `extensions` property --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b3ca335..56fe6128 100644 --- a/README.md +++ b/README.md @@ -126,11 +126,15 @@ Setting `attachToDevtools` to `true` will automatically attach the application t ###### `defaultTextStyle` -`defaultTextStyle` is a convenience property. Whatever is passed will automatically be assigned to Pixi.js's[`TextStyle.defaultTextStyle`](https://pixijs.download/release/docs/text.TextStyle.html#defaultTextStyle). +`defaultTextStyle` is a convenience property. Whatever is passed will automatically be assigned to Pixi.js's [`TextStyle.defaultTextStyle`](https://pixijs.download/release/docs/text.TextStyle.html#defaultTextStyle). > [!NOTE] > This property **is not retroactive**. It will only apply to text components created after `defaultTextStyle` is set. Any text components created before setting `defaultTextStyle` will retain the base styles they had before `defaultTextStyle` was changed. +###### `extensions` + +`extensions` is an array of extensions to be loaded. Adding and removing items from this array will automatically load/unload the extensions. The first time this is handled happens before the application is initialised. See Pixi.js's [`extensions`](https://pixijs.download/release/docs/extensions.html) documentation for more info on extensions. + ###### `resizeTo` The `` component supports the `resizeTo` property, with some additional functionality: it can accept any HTML element **or** it can take a React `ref` directly. From 09d0ca9349ad3967a8d71c165193f8b3d0681ab8 Mon Sep 17 00:00:00 2001 From: Trezy Date: Mon, 26 Aug 2024 15:40:22 +0200 Subject: [PATCH 3/5] chore: add more comments around how the extension adding/removing works --- src/components/Application.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Application.ts b/src/components/Application.ts index 59755c56..e859df67 100644 --- a/src/components/Application.ts +++ b/src/components/Application.ts @@ -105,19 +105,23 @@ export const ApplicationFunction: ForwardRefRenderFunction Date: Mon, 26 Aug 2024 15:58:41 +0200 Subject: [PATCH 4/5] fix: enforce valid extensions are passed to `extensions` prop --- src/typedefs/ApplicationProps.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/typedefs/ApplicationProps.ts b/src/typedefs/ApplicationProps.ts index f567ac3c..a2f212a6 100644 --- a/src/typedefs/ApplicationProps.ts +++ b/src/typedefs/ApplicationProps.ts @@ -1,6 +1,7 @@ import type { Application, ApplicationOptions, + ExtensionFormatLoose, TextStyle, TextStyleOptions, } from 'pixi.js'; @@ -25,7 +26,7 @@ export interface BaseApplicationProps defaultTextStyle?: TextStyle | TextStyleOptions, /** @description An array of Pixi extensions to be loaded before initialisation. */ - extensions?: any[], + extensions?: ExtensionFormatLoose[], /** @description A unique key which allows React to manage this component across changes in parent state. */ key?: Key, From 2e79fc088412b8deec3ed45299e5b028e0f8dc9b Mon Sep 17 00:00:00 2001 From: Trezy Date: Mon, 26 Aug 2024 16:07:44 +0200 Subject: [PATCH 5/5] fix: match Pixi expectations for extensions --- src/typedefs/ApplicationProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/typedefs/ApplicationProps.ts b/src/typedefs/ApplicationProps.ts index a2f212a6..399e3cd4 100644 --- a/src/typedefs/ApplicationProps.ts +++ b/src/typedefs/ApplicationProps.ts @@ -26,7 +26,7 @@ export interface BaseApplicationProps defaultTextStyle?: TextStyle | TextStyleOptions, /** @description An array of Pixi extensions to be loaded before initialisation. */ - extensions?: ExtensionFormatLoose[], + extensions?: (ExtensionFormatLoose | any)[], /** @description A unique key which allows React to manage this component across changes in parent state. */ key?: Key,