Convert Prepare, Extract to Systems (pixijs#8427)

packages/canvas-extract/global.d.ts

@@ -0,0 +1,7 @@
+declare namespace GlobalMixins
+{
+    interface CanvasRenderer
+    {
+        readonly extract: import('@pixi/canvas-extract').CanvasExtract;
+    }
+}

packages/canvas-extract/src/CanvasExtract.ts

@@ -1,9 +1,9 @@
-import { ExtensionMetadata, ExtensionType, RenderTexture } from '@pixi/core';
+import { ExtensionType, RenderTexture } from '@pixi/core';
 import { CanvasRenderTarget } from '@pixi/utils';
 import { Rectangle } from '@pixi/math';
 import { CanvasRenderer } from '@pixi/canvas-renderer';
 import type { DisplayObject } from '@pixi/display';
-import type { BaseRenderTexture } from '@pixi/core';
+import type { BaseRenderTexture, ISystem, ExtensionMetadata } from '@pixi/core';
 
 const TEMP_RECT = new Rectangle();
 
@@ -14,12 +14,12 @@ const TEMP_RECT = new Rectangle();
  * @class
  * @memberof PIXI
  */
-export class CanvasExtract
+export class CanvasExtract implements ISystem
 {
     /** @ignore */
     static extension: ExtensionMetadata = {
         name: 'extract',
-        type: ExtensionType.CanvasRendererPlugin,
+        type: ExtensionType.CanvasRendererSystem,
     };
 
     /** A reference to the current renderer */

packages/canvas-extract/test/CanvasExtract.tests.ts

@@ -18,7 +18,7 @@ describe('CanvasExtract', () =>
     {
         const renderer = new CanvasRenderer();
 
-        expect(renderer.plugins.extract).toBeInstanceOf(CanvasExtract);
+        expect(renderer.extract).toBeInstanceOf(CanvasExtract);
 
         renderer.destroy();
     });
@@ -27,7 +27,7 @@ describe('CanvasExtract', () =>
     {
         const renderer = new CanvasRenderer();
         const sprite = new Sprite(Texture.WHITE);
-        const extract = renderer.plugins.extract as CanvasExtract;
+        const extract = renderer.extract as CanvasExtract;
 
         expect(extract.canvas(sprite)).toBeInstanceOf(HTMLCanvasElement);
         expect(extract.base64(sprite)).toBeString();
@@ -41,7 +41,7 @@ describe('CanvasExtract', () =>
     it('should extract with no arguments', () =>
     {
         const renderer = new CanvasRenderer();
-        const extract = renderer.plugins.extract as CanvasExtract;
+        const extract = renderer.extract as CanvasExtract;
 
         expect(extract.canvas()).toBeInstanceOf(HTMLCanvasElement);
         expect(extract.base64()).toBeString();
@@ -54,7 +54,7 @@ describe('CanvasExtract', () =>
     it('should extract a render texture', () =>
     {
         const renderer = new CanvasRenderer();
-        const extract = renderer.plugins.extract as CanvasExtract;
+        const extract = renderer.extract as CanvasExtract;
         const renderTexture = RenderTexture.create({ width: 10, height: 10 });
         const sprite = new Sprite(Texture.WHITE);
 

packages/canvas-prepare/global.d.ts

@@ -0,0 +1,7 @@
+declare namespace GlobalMixins
+{
+    interface CanvasRenderer
+    {
+        readonly prepare: import('@pixi/canvas-prepare').CanvasPrepare;
+    }
+}

packages/canvas-prepare/src/CanvasPrepare.ts

@@ -1,6 +1,7 @@
-import { BaseTexture, IRenderer, ExtensionMetadata, ExtensionType } from '@pixi/core';
+import { BaseTexture, ExtensionType } from '@pixi/core';
 import { BasePrepare } from '@pixi/prepare';
 
+import type { ISystem, ExtensionMetadata, IRenderer } from '@pixi/core';
 import type { CanvasRenderer } from '@pixi/canvas-renderer';
 import type { IDisplayObjectExtended } from '@pixi/prepare';
 
@@ -52,12 +53,12 @@ function uploadBaseTextures(prepare: IRenderer | BasePrepare, item: IDisplayObje
  * @extends PIXI.BasePrepare
  * @memberof PIXI
  */
-export class CanvasPrepare extends BasePrepare
+export class CanvasPrepare extends BasePrepare implements ISystem
 {
     /** @ignore */
     static extension: ExtensionMetadata = {
         name: 'prepare',
-        type: ExtensionType.CanvasRendererPlugin,
+        type: ExtensionType.CanvasRendererSystem,
     };
 
     /**

packages/canvas-renderer/global.d.ts

@@ -30,6 +30,12 @@ declare namespace GlobalMixins
     {
         forceCanvas?: boolean;
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface CanvasRenderer
+    {
+
+    }
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/canvas-renderer/src/CanvasRenderer.ts

@@ -18,7 +18,6 @@ import { Matrix, Rectangle } from '@pixi/math';
 import type { DisplayObject } from '@pixi/display';
 import type {
     IRendererOptions,
-    IRendererPlugin,
     IRendererPlugins,
     IRendererRenderOptions
 } from '@pixi/core';
@@ -28,10 +27,8 @@ import { CanvasObjectRendererSystem } from './CanvasObjectRendererSystem';
 import { settings } from '@pixi/settings';
 import { deprecation } from '@pixi/utils';
 
-export interface ICanvasRendererPluginConstructor
-{
-    new (renderer: CanvasRenderer, options?: any): IRendererPlugin;
-}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CanvasRenderer extends GlobalMixins.CanvasRenderer {}
 
 /**
  * The CanvasRenderer draws the scene and all its content onto a 2d canvas.
@@ -56,11 +53,13 @@ export interface ICanvasRendererPluginConstructor
  * | {@link PIXI.EventSystem}             | This manages UI events.                                                       |
  * | {@link PIXI.GenerateTextureSystem}   | This adds the ability to generate textures from any PIXI.DisplayObject        |
  *
- * | Pixi high level Systems              | Set of Pixi specific systems designed to work with Pixi objects               |
+ * | PixiJS High-Level Systems            | Set of specific systems designed to work with PixiJS objects                  |
  * | ------------------------------------ | ----------------------------------------------------------------------------- |
  * | {@link PIXI.CanvasContextSystem}     | This manages the canvas `2d` contexts and their state                         |
  * | {@link PIXI.CanvasMaskSystem}        | This manages masking operations.                                              |
  * | {@link PIXI.CanvasRenderSystem}      | This adds the ability to render a PIXI.DisplayObject                          |
+ * | {@link PIXI.CanvasExtract}           | This extracts image data from a PIXI.DisplayObject                            |
+ * | {@link PIXI.CanvasPrepare}           | This prepares a PIXI.DisplayObject async for rendering                        |
  *
  * The breadth of the API surface provided by the renderer is contained within these systems.
  * @class
@@ -559,9 +558,7 @@ export class CanvasRenderer extends SystemManager<CanvasRenderer> implements IRe
      * @member {object} plugins
      * @readonly
      * @property {PIXI.AccessibilityManager} accessibility Support tabbing interactive elements.
-     * @property {PIXI.CanvasExtract} extract Extract image data from renderer.
      * @property {PIXI.InteractionManager} interaction Handles mouse, touch and pointer events.
-     * @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
      */
 }
 

packages/core/global.d.ts

@@ -23,4 +23,16 @@ declare namespace GlobalMixins
     {
 
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface Renderer
+    {
+
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IRendererPlugins
+    {
+
+    }
 }

packages/core/src/Renderer.ts

@@ -30,6 +30,9 @@ import { SystemManager } from './system/SystemManager';
 import { IRenderableObject, IRenderer, IRendererOptions, IRendererRenderOptions, IRenderingContext } from './IRenderer';
 import { StartupOptions, StartupSystem } from './startup/StartupSystem';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface Renderer extends GlobalMixins.Renderer {}
+
 /**
  * The Renderer draws the scene and all its content onto a WebGL enabled canvas.
  *
@@ -63,9 +66,9 @@ import { StartupOptions, StartupSystem } from './startup/StartupSystem';
  * | {@link PIXI.TextureGCSystem}         | This will automatically remove textures from the GPU if they are not used.    |
  * | {@link PIXI.MultisampleSystem}       | This manages the multisample const on the WEbGL Renderer                      |
  *
- * | Pixi high level Systems              | Set of Pixi specific systems designed to work with Pixi objects               |
+ * | PixiJS High-Level Systems            | Set of specific systems designed to work with PixiJS objects                  |
  * | ------------------------------------ | ----------------------------------------------------------------------------- |
- * | {@link PIXI.RenderSystem}          | This adds the ability to render a PIXI.DisplayObject                          |
+ * | {@link PIXI.RenderSystem}            | This adds the ability to render a PIXI.DisplayObject                          |
  * | {@link PIXI.GenerateTextureSystem}   | This adds the ability to generate textures from any PIXI.DisplayObject        |
  * | {@link PIXI.ProjectionSystem}        | This manages the `projectionMatrix`, used by shaders to get NDC coordinates.  |
  * | {@link PIXI.RenderTextureSystem}     | This manages render-textures, which are an abstraction over framebuffers.     |
@@ -74,6 +77,8 @@ import { StartupOptions, StartupSystem } from './startup/StartupSystem';
  * | {@link PIXI.StencilSystem}           | This handles stencil masking, and is used internally by {@link MaskSystem}    |
  * | {@link PIXI.FilterSystem}            | This manages the filtering pipeline for post-processing effects.              |
  * | {@link PIXI.BatchSystem}             | This manages object renderers that defer rendering until a flush.             |
+ * | {@link PIXI.Prepare}                 | This manages uploading assets to the GPU.                                     |
+ * | {@link PIXI.Extract}                 | This extracts image data from display objects.                                |
  *
  * The breadth of the API surface provided by the renderer is contained within these systems.
  * @memberof PIXI

packages/core/src/plugin/PluginSystem.ts

@@ -1,23 +1,13 @@
+import { deprecation } from '@pixi/utils';
 import { ExtensionMetadata, ExtensionType } from '../extensions';
 import { IRenderer } from '../IRenderer';
-import { Renderer } from '../Renderer';
 import { ISystem } from '../system/ISystem';
 
-export interface IRendererPlugin
-{
-    destroy(): void;
-}
-
-export interface IRendererPlugins
+export interface IRendererPlugins extends GlobalMixins.IRendererPlugins
 {
     [key: string]: any;
 }
 
-export interface IRendererPluginConstructor<R extends IRenderer = Renderer>
-{
-    new (renderer: R, options?: any): IRendererPlugin;
-}
-
 /**
  * Manages the functionality that allows users to extend pixi functionality via additional plugins.
  * @memberof PIXI
@@ -51,6 +41,29 @@ export class PluginSystem implements ISystem
          * @member {object}
          */
         this.plugins = {};
+
+        // #if _DEBUG
+        Object.defineProperties(this.plugins, {
+            extract: {
+                enumerable: false,
+                get()
+                {
+                    deprecation('7.0.0', 'renderer.plugins.extract has moved to renderer.extract');
+
+                    return (renderer as any).extract;
+                },
+            },
+            prepare: {
+                enumerable: false,
+                get()
+                {
+                    deprecation('7.0.0', 'renderer.plugins.prepare has moved to renderer.prepare');
+
+                    return (renderer as any).prepare;
+                },
+            },
+        });
+        // #endif
     }
 
     /**

packages/extract/global.d.ts

@@ -0,0 +1,7 @@
+declare namespace GlobalMixins
+{
+    interface Renderer
+    {
+        readonly extract: import('@pixi/extract').Extract;
+    }
+}

packages/extract/src/Extract.ts

@@ -1,8 +1,8 @@
 import { CanvasRenderTarget } from '@pixi/utils';
 import { Rectangle } from '@pixi/math';
-import { ExtensionMetadata, ExtensionType, RenderTexture } from '@pixi/core';
+import { ExtensionType, RenderTexture } from '@pixi/core';
 
-import type { Renderer, IRendererPlugin } from '@pixi/core';
+import type { Renderer, ISystem, ExtensionMetadata } from '@pixi/core';
 import { DisplayObject } from '@pixi/display';
 
 const TEMP_RECT = new Rectangle();
@@ -29,12 +29,12 @@ const BYTES_PER_PIXEL = 4;
  * @memberof PIXI
  */
 
-export class Extract implements IRendererPlugin
+export class Extract implements ISystem
 {
     /** @ignore */
     static extension: ExtensionMetadata = {
         name: 'extract',
-        type: ExtensionType.RendererPlugin,
+        type: ExtensionType.RendererSystem,
     };
 
     private renderer: Renderer;

packages/extract/test/Extract.tests.ts

@@ -17,6 +17,7 @@ describe('Extract', () =>
         const renderer = new Renderer();
 
         expect(renderer.plugins.extract).toBeInstanceOf(Extract);
+        expect(renderer.extract).toBeInstanceOf(Extract);
 
         renderer.destroy();
     });
@@ -25,7 +26,7 @@ describe('Extract', () =>
     {
         const renderer = new Renderer();
         const sprite = new Sprite(Texture.WHITE);
-        const extract = renderer.plugins.extract as Extract;
+        const extract = renderer.extract;
 
         expect(extract.canvas(sprite)).toBeInstanceOf(HTMLCanvasElement);
         expect(extract.base64(sprite)).toBeString();
@@ -39,7 +40,7 @@ describe('Extract', () =>
     it('should extract with no arguments', () =>
     {
         const renderer = new Renderer();
-        const extract = renderer.plugins.extract as Extract;
+        const extract = renderer.extract;
 
         expect(extract.canvas(undefined)).toBeInstanceOf(HTMLCanvasElement);
         expect(extract.base64(undefined)).toBeString();
@@ -52,7 +53,7 @@ describe('Extract', () =>
     it('should extract a render texture', () =>
     {
         const renderer = new Renderer();
-        const extract = renderer.plugins.extract as Extract;
+        const extract = renderer.extract;
         const renderTexture = RenderTexture.create({ width: 10, height: 10 });
         const sprite = new Sprite(Texture.WHITE);
         const frame = new Rectangle(1, 2, 5, 6);

packages/prepare/global.d.ts

@@ -0,0 +1,7 @@
+declare namespace GlobalMixins
+{
+    interface Renderer
+    {
+        readonly prepare: import('@pixi/prepare').Prepare;
+    }
+}

packages/prepare/src/Prepare.ts

@@ -1,8 +1,8 @@
-import { BaseTexture, ExtensionMetadata, ExtensionType } from '@pixi/core';
+import { BaseTexture, ExtensionType } from '@pixi/core';
 import { Graphics } from '@pixi/graphics';
 import { BasePrepare, IDisplayObjectExtended } from './BasePrepare';
 
-import type { Renderer, IRenderer } from '@pixi/core';
+import type { Renderer, IRenderer, ISystem, ExtensionMetadata } from '@pixi/core';
 
 /**
  * Built-in hook to upload PIXI.Texture objects to the GPU.
@@ -118,12 +118,12 @@ function findGraphics(item: IDisplayObjectExtended, queue: Array<any>): boolean
  * });
  * @memberof PIXI
  */
-export class Prepare extends BasePrepare
+export class Prepare extends BasePrepare implements ISystem
 {
     /** @ignore */
     static extension: ExtensionMetadata = {
         name: 'prepare',
-        type: ExtensionType.RendererPlugin,
+        type: ExtensionType.RendererSystem,
     };
 
     /**