Chore: Improve autoDetectRenderer (pixijs#8475)

packages/canvas-renderer/src/CanvasRenderer.ts

@@ -10,16 +10,17 @@ import type { DisplayObject } from '@pixi/display';
 import type {
     IRendererOptions,
     IRendererPlugins,
-    IRendererRenderOptions
-    ,
+    IRendererRenderOptions,
     RenderTexture,
     IRenderableObject,
-    GenerateTextureSystem, IRenderer,
+    GenerateTextureSystem,
+    IRenderer,
     BackgroundSystem,
     ViewSystem,
     PluginSystem,
     StartupSystem,
     StartupOptions,
+    ExtensionMetadata,
     IGenerateTextureOptions } from '@pixi/core';
 
 import type { SmoothingEnabledProperties } from './CanvasContextSystem';
@@ -71,6 +72,21 @@ export interface CanvasRenderer extends GlobalMixins.CanvasRenderer {}
  */
 export class CanvasRenderer extends SystemManager<CanvasRenderer> implements IRenderer
 {
+    /** @ignore */
+    static extension: ExtensionMetadata = {
+        type: ExtensionType.Renderer,
+        priority: 0,
+    };
+
+    /**
+     * Used with autoDetectRenderer, this is always supported for any environment, so return true.
+     * @ignore
+     */
+    static test(): boolean
+    {
+        return true;
+    }
+
     /**
      * Fired after rendering finishes.
      * @event PIXI.CanvasRenderer#postrender
@@ -577,6 +593,7 @@ extensions.handle(
 );
 
 extensions.add(
+    CanvasRenderer,
     CanvasMaskSystem,
     CanvasContextSystem,
     CanvasObjectRendererSystem

packages/canvas-renderer/src/index.ts

@@ -3,5 +3,4 @@ export * from './CanvasContextSystem';
 export * from './utils/canUseNewCanvasBlendModes';
 export * from './canvasUtils';
 
-import './Renderer';
 import './BaseTexture';

packages/core/src/Renderer.ts

@@ -19,6 +19,7 @@ import type { Rectangle } from '@pixi/math';
 import { Matrix } from '@pixi/math';
 import { BufferSystem } from './geometry/BufferSystem';
 import type { RenderTexture } from './renderTexture/RenderTexture';
+import type { ExtensionMetadata } from './extensions';
 import { extensions, ExtensionType } from './extensions';
 import type { IRendererPlugins } from './plugin/PluginSystem';
 import { PluginSystem } from './plugin/PluginSystem';
@@ -92,6 +93,12 @@ export interface Renderer extends GlobalMixins.Renderer {}
  */
 export class Renderer extends SystemManager<Renderer> implements IRenderer
 {
+    /** @ignore */
+    static extension: ExtensionMetadata = {
+        type: ExtensionType.Renderer,
+        priority: 1,
+    };
+
     /**
      * The type of the renderer. will be PIXI.RENDERER_TYPE.CANVAS
      * @member {number}
@@ -276,14 +283,14 @@ export class Renderer extends SystemManager<Renderer> implements IRenderer
      * @param options
      * @private
      */
-    static create(options?: IRendererOptions): IRenderer
+    static test(options?: IRendererOptions): boolean
     {
-        if (isWebGLSupported())
+        if (options?.forceCanvas)
         {
-            return new Renderer(options);
+            return false;
         }
 
-        throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.');
+        return isWebGLSupported();
     }
 
     /**
@@ -655,6 +662,7 @@ extensions.handle(
 );
 
 extensions.add(
+    Renderer,
     GenerateTextureSystem,
     BackgroundSystem,
     ViewSystem,

packages/core/src/autoDetectRenderer.ts

@@ -1,10 +1,33 @@
+import type { ExtensionFormat } from './extensions';
+import { extensions, ExtensionType } from './extensions';
 import type { IRenderer, IRendererOptions } from './IRenderer';
-import { Renderer } from './Renderer';
 
 export interface IRendererOptionsAuto extends IRendererOptions
 {
     forceCanvas?: boolean;
 }
+
+/**
+ * Collection of installed Renderers.
+ * @ignore
+ */
+const renderers: ExtensionFormat[] = [];
+
+extensions.handle(ExtensionType.Renderer,
+    (extension) =>
+    {
+        renderers.push(extension);
+        renderers.sort((a, b) => b.priority - a.priority); // highest priority first
+    },
+    (extension) =>
+    {
+        if (renderers.includes(extension))
+        {
+            renderers.splice(renderers.indexOf(extension), 1);
+        }
+    }
+);
+
 /**
  * This helper function will automatically detect which renderer you should be using.
  * WebGL is the preferred renderer as it is a lot faster. If WebGL is not supported by
@@ -38,5 +61,13 @@ export interface IRendererOptionsAuto extends IRendererOptions
  */
 export function autoDetectRenderer(options?: IRendererOptionsAuto): IRenderer
 {
-    return Renderer.create(options);
+    for (const renderer of renderers)
+    {
+        if (renderer.ref.test(options))
+        {
+            return new renderer.ref(options) as IRenderer;
+        }
+    }
+
+    throw new Error('Unable to auto-detect a suitable renderer.');
 }

packages/core/src/extensions.ts

@@ -9,6 +9,7 @@
 enum ExtensionType
 // eslint-disable-next-line @typescript-eslint/indent
 {
+    Renderer = 'renderer',
     Application = 'application',
     RendererSystem = 'renderer-webgl-system',
     RendererPlugin = 'renderer-webgl-plugin',
@@ -24,6 +25,7 @@ interface ExtensionMetadataDetails
 {
     type: ExtensionType | ExtensionType[];
     name?: string;
+    priority?: number;
 }
 
 type ExtensionMetadata = ExtensionType | ExtensionMetadataDetails;
@@ -40,6 +42,8 @@ interface ExtensionFormatLoose
     type: ExtensionType | ExtensionType[];
     /** Optional. Some plugins provide an API name/property, such as Renderer plugins */
     name?: string;
+    /** Optional, used for sorting the plugins in a particular order */
+    priority?: number;
     /** Reference to the plugin object/class */
     ref: any;
 }

packages/events/test/EventSystem.tests.ts

@@ -11,7 +11,7 @@ function createRenderer(view?: HTMLCanvasElement, supportsPointerEvents?: boolea
         events: any
     }
 
-    const renderer = Renderer.create({
+    const renderer = new Renderer({
         width: 100,
         height: 100,
         view,