@caperjs/core 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caperjs/core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "title": "Caper",
   "description": "An opinionated HTML game framework built on PixiJS v8",
   "bin": {

package/src/core/create.ts

@@ -1,5 +1,6 @@
 import { type RegisterSWOptions } from 'vite-plugin-pwa/types';
 import { sayHello } from '../hello';
+import { setDefaultFactoryMethods } from '../mixins/factory/defaults';
 import type { PluginListItem } from '../plugins';
 import type { AppTypeOverrides, SceneImportListItem } from '../utils';
 import { triggerViteError } from '../utils/vite';
@@ -147,6 +148,16 @@ export async function create(
   domElement: string | Window | HTMLElement = DEFAULT_GAME_CONTAINER_ID,
   speak: boolean = true,
 ): Promise<App> {
+  // The package declares `sideEffects: false`, which lets an app's bundler drop
+  // const.ts's top-level registration from production builds. Re-registering here
+  // anchors the table to create(), which every app calls, so it can't be shaken.
+  // The import MUST stay dynamic: a static `core → const.ts` edge closes the
+  // factory/ui module cycle (see mixins/factory/defaults.ts and the
+  // importOrder.*.test.ts guards). By the time create() runs, nothing is
+  // mid-evaluation, so loading const.ts here is safe. Idempotent in dev/test,
+  // where the module side effect already registered the table.
+  const { defaultFactoryMethods } = await import('../mixins/factory/const');
+  setDefaultFactoryMethods(defaultFactoryMethods);
   await documentReady();
   checkWebGL();
   if (speak) {

package/src/plugins/FullScreenPlugin.ts

@@ -143,24 +143,11 @@ export class FullScreenPlugin extends Plugin implements IFullScreenPlugin {
    * ```
    */
   public initialize(): void {
-    document.addEventListener('fullscreenchange', this._onFullScreenChange);
-    document.addEventListener('webkitfullscreenchange', this._onFullScreenChange);
-    document.addEventListener('mozfullscreenchange', this._onFullScreenChange);
-    document.addEventListener('msfullscreenchange', this._onFullScreenChange);
-    document.addEventListener('fullscreenchange', this._onFullScreenChange);
-  }
-
-  /**
-   * Cleans up the plugin by removing all event listeners.
-   * Called automatically when the plugin is destroyed.
-   */
-  public destroy() {
-    document.removeEventListener('fullscreenchange', this._onFullScreenChange);
-    document.removeEventListener('webkitfullscreenchange', this._onFullScreenChange);
-    document.removeEventListener('mozfullscreenchange', this._onFullScreenChange);
-    document.removeEventListener('msfullscreenchange', this._onFullScreenChange);
-    document.removeEventListener('fullscreenchange', this._onFullScreenChange);
-    super.destroy();
+    this.listen(document, 'fullscreenchange', this._onFullScreenChange);
+    this.listen(document, 'webkitfullscreenchange', this._onFullScreenChange);
+    this.listen(document, 'mozfullscreenchange', this._onFullScreenChange);
+    this.listen(document, 'msfullscreenchange', this._onFullScreenChange);
+    this.listen(document, 'fullscreenchange', this._onFullScreenChange);
   }
 
   /**

package/src/plugins/KeyboardPlugin.ts

@@ -61,15 +61,8 @@ export class KeyboardPlugin extends Plugin implements IKeyboardPlugin {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public initialize(_options: any, _app: IApplication): void {
     // track which keys are down
-    document.addEventListener('keydown', this._handleKeyDown);
-    document.addEventListener('keyup', this._handleKeyUp);
-  }
-
-  public destroy() {
-    document.removeEventListener('keydown', this._handleKeyDown);
-    document.removeEventListener('keyup', this._handleKeyUp);
-    document.removeEventListener('keydown', this._handleEvent);
-    document.removeEventListener('keyup', this._handleEvent);
+    this.listen(document, 'keydown', this._handleKeyDown as EventListener);
+    this.listen(document, 'keyup', this._handleKeyUp as EventListener);
   }
 
   public onKeyDown(key?: KeyboardKey): KeySignal {
@@ -145,7 +138,7 @@ export class KeyboardPlugin extends Plugin implements IKeyboardPlugin {
   }
 
   private _listen(eventType: KeyboardEventType): void {
-    document.addEventListener(eventType, this._handleEvent);
+    this.listen(document, eventType, this._handleEvent as EventListener);
   }
 
   private _handleEvent(event: KeyboardEvent): void {

package/src/plugins/Plugin.test.ts

@@ -1,15 +1,21 @@
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 // Plugin.ts transitively imports Application → Pixi display graph. Stub it.
 vi.mock('../core', () => ({
   coreFunctionRegistry: {},
   coreSignalRegistry: {},
 }));
+
+const { mockTicker } = vi.hoisted(() => ({
+  mockTicker: { add: vi.fn(), remove: vi.fn() },
+}));
+
 vi.mock('../core/Application', () => ({
-  Application: { getInstance: () => ({}) },
+  Application: { getInstance: () => ({ ticker: mockTicker }) },
 }));
 
 import { Signal } from '../signals';
+import { Logger } from '../utils';
 import { Plugin } from './Plugin';
 
 class TestPlugin extends Plugin<{ foo: string }> {
@@ -71,3 +77,125 @@ describe('Plugin', () => {
     await expect(p.postInitialize({} as never)).resolves.toBeUndefined();
   });
 });
+
+describe('Plugin lifecycle cleanup', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    mockTicker.add.mockClear();
+    mockTicker.remove.mockClear();
+  });
+
+  it('runs disposers LIFO, and only once', () => {
+    const p = new TestPlugin();
+    const order: string[] = [];
+    p.addDisposer(
+      () => order.push('a'),
+      () => order.push('b'),
+    );
+    p.addDisposer(() => order.push('c'));
+
+    p.destroy();
+    expect(order).toEqual(['c', 'b', 'a']);
+
+    p.destroy();
+    expect(order).toEqual(['c', 'b', 'a']);
+  });
+
+  it('destroy is idempotent for signal connections too', () => {
+    const p = new TestPlugin();
+    const s = new Signal<() => void>();
+    const handler = vi.fn();
+    p.addSignalConnection(s.connect(handler));
+
+    p.destroy();
+    expect(() => p.destroy()).not.toThrow();
+    s.emit();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it('a throwing disposer does not stop the rest, and is reported', () => {
+    const errorSpy = vi.spyOn(Logger, 'error').mockImplementation(() => undefined);
+    const p = new TestPlugin();
+    const first = vi.fn();
+    const last = vi.fn();
+
+    p.addDisposer(first);
+    p.addDisposer(() => {
+      throw new Error('boom');
+    });
+    p.addDisposer(last);
+
+    expect(() => p.destroy()).not.toThrow();
+    expect(first).toHaveBeenCalledTimes(1);
+    expect(last).toHaveBeenCalledTimes(1);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('listen() attaches now and detaches on destroy', () => {
+    const p = new TestPlugin();
+    const target = document.createElement('div');
+    const handler = vi.fn();
+
+    p.listen(target, 'click', handler);
+    target.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    p.destroy();
+    target.dispatchEvent(new Event('click'));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('listen() detaches capture-phase listeners with matching options', () => {
+    const p = new TestPlugin();
+    const parent = document.createElement('div');
+    const child = document.createElement('div');
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+    const handler = vi.fn();
+
+    p.listen(parent, 'click', handler, true);
+    child.dispatchEvent(new Event('click', { bubbles: true }));
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    p.destroy();
+    child.dispatchEvent(new Event('click', { bubbles: true }));
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    parent.remove();
+  });
+
+  it('listen() returns an early-removal fn that is safe to call twice', () => {
+    const p = new TestPlugin();
+    const target = document.createElement('div');
+    const handler = vi.fn();
+
+    const remove = p.listen(target, 'click', handler);
+    remove();
+    remove();
+    target.dispatchEvent(new Event('click'));
+    expect(handler).not.toHaveBeenCalled();
+    expect(() => p.destroy()).not.toThrow();
+  });
+
+  it('addTickerCallback() adds to the app ticker and removes on destroy', () => {
+    const p = new TestPlugin();
+    const fn = vi.fn();
+
+    p.addTickerCallback(fn, p, 5);
+    expect(mockTicker.add).toHaveBeenCalledWith(fn, p, 5);
+
+    p.destroy();
+    expect(mockTicker.remove).toHaveBeenCalledWith(fn, p);
+  });
+
+  it('addTickerCallback() returns an early-removal fn that only removes once', () => {
+    const p = new TestPlugin();
+    const fn = vi.fn();
+
+    const remove = p.addTickerCallback(fn);
+    remove();
+    remove();
+    p.destroy();
+    expect(mockTicker.remove).toHaveBeenCalledTimes(1);
+  });
+});

package/src/plugins/Plugin.ts

@@ -1,8 +1,9 @@
+import type { Ticker } from 'pixi.js';
 import type { IApplication, ICoreFunctions, ICoreSignals } from '../core';
 import { coreFunctionRegistry, coreSignalRegistry } from '../core';
 import { Application } from '../core/Application';
 import { SignalConnection, SignalConnections } from '../signals';
-import { type AppTypeOverrides, bindAllMethods, ImportListItemModule } from '../utils';
+import { type AppTypeOverrides, bindAllMethods, ImportListItemModule, Logger } from '../utils';
 
 /**
  * Public contract for a Caper plugin. A plugin is a long-lived object
@@ -25,7 +26,40 @@ import { type AppTypeOverrides, bindAllMethods, ImportListItemModule } from '../
  *      methods are called from scenes / other plugins / the app.
  *   5. `destroy()` — called when the app shuts down. Tear down
  *      connections, disconnect signals, free resources. The base class
- *      already disconnects everything added via `addSignalConnection`.
+ *      already disconnects everything added via `addSignalConnection`
+ *      and runs everything registered via the cleanup primitives below.
+ *
+ * **Cleanup primitives.** Don't hand-roll matching add/remove pairs —
+ * register the resource through the base class and `destroy()` releases
+ * it for you. Overriding `destroy()` is still fine; just call
+ * `super.destroy()`.
+ *
+ *   - `addSignalConnection(...)` — signal connections.
+ *   - `listen(target, type, handler, options?)` — DOM listeners. Adds
+ *     now, removes on destroy with the same capture/options semantics.
+ *   - `addTickerCallback(fn, context?, priority?)` — ticker callbacks on
+ *     `app.ticker`. Added now, removed on destroy.
+ *   - `addDisposer(...fns)` — anything else (DOM nodes, timers, third
+ *     party handles). Disposers run last-in-first-out on destroy, each
+ *     isolated so one failure can't skip the others.
+ *
+ * `listen` and `addTickerCallback` also return a removal function, for
+ * the rarer case where you need to detach before the plugin dies. It's
+ * safe to call more than once.
+ *
+ * @example
+ * ```ts
+ * public initialize(): void {
+ *   this.listen(window, 'resize', this._onResize);
+ *   this.addTickerCallback(this._update);
+ *   this.addDisposer(() => this._el.remove());
+ * }
+ * // no destroy() override needed — the base class cleans all three up
+ * ```
+ *
+ * Listeners that get attached and detached repeatedly at runtime (an
+ * activate/deactivate cycle, say) should stay manual — the primitives
+ * are for resources whose lifetime matches the plugin's.
  *
  * Discovery: plugin classes under `src/plugins/` are auto-discovered
  * by the Vite plugin if they default-export a class. Annotate with
@@ -79,7 +113,11 @@ export interface IPlugin<O = any> {
    */
   postInitialize(_app: IApplication): Promise<void> | void;
 
-  /** Tear down. Called on app shutdown. */
+  /**
+   * Tear down. Called on app shutdown. Runs every registered disposer
+   * (last-in-first-out) and disconnects every tracked signal connection.
+   * Safe to call more than once — the second call is a no-op.
+   */
   destroy(): void;
 
   /**
@@ -91,6 +129,40 @@ export interface IPlugin<O = any> {
   /** Disconnect every connection added via `addSignalConnection`. */
   clearSignalConnections(): void;
 
+  /**
+   * Register cleanup callbacks to run on `destroy`. Use for resources
+   * the other primitives don't cover — DOM nodes, timers, third-party
+   * handles.
+   *
+   * Disposers run last-in-first-out (so teardown mirrors setup), and each
+   * one is isolated: a throwing disposer is reported and the rest still
+   * run.
+   */
+  addDisposer(...fns: Array<() => void>): void;
+
+  /**
+   * Add a DOM event listener now and remove it on `destroy`, with the
+   * same capture/options semantics it was added with.
+   *
+   * @returns A removal function, for the rarer case where the listener
+   *   must come off before the plugin dies. Safe to call more than once.
+   */
+  listen(
+    target: EventTarget,
+    type: string,
+    handler: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions | boolean,
+  ): () => void;
+
+  /**
+   * Add a callback to `app.ticker` now and remove it on `destroy`. The
+   * ticker is resolved when this is called, not at construction.
+   *
+   * @returns A removal function, for the rarer case where the callback
+   *   must come off before the plugin dies. Safe to call more than once.
+   */
+  addTickerCallback(fn: (ticker: Ticker) => void, context?: unknown, priority?: number): () => void;
+
   /** Register methods this plugin exposes via the core function registry. */
   registerCoreFunctions(): void;
 
@@ -117,6 +189,8 @@ export class Plugin<O = any> implements IPlugin<O> {
   private static readonly __caper_method_binding_root = true;
   // A collection of signal connections.
   protected _signalConnections: SignalConnections = new SignalConnections();
+  // Cleanup callbacks registered via addDisposer / listen / addTickerCallback.
+  protected _disposers: Array<() => void> = [];
 
   protected _options: O;
 
@@ -132,7 +206,25 @@ export class Plugin<O = any> implements IPlugin<O> {
     return Application.getInstance();
   }
 
+  /**
+   * Tear down the plugin. Runs every registered disposer (last-in-first-out,
+   * each isolated so one failure can't skip the others), then disconnects
+   * every tracked signal connection. Idempotent.
+   *
+   * Subclasses may override this, but must call `super.destroy()`.
+   */
   public destroy(): void {
+    // swap the list out first, so a disposer that (indirectly) re-enters
+    // destroy can't run anything twice
+    const disposers = this._disposers;
+    this._disposers = [];
+    for (let i = disposers.length - 1; i >= 0; i--) {
+      try {
+        disposers[i]();
+      } catch (e) {
+        Logger.error(`Plugin "${this.id}" threw while running a disposer:`, e);
+      }
+    }
     this._signalConnections.disconnectAll();
   }
 
@@ -164,6 +256,70 @@ export class Plugin<O = any> implements IPlugin<O> {
     this._signalConnections.disconnectAll();
   }
 
+  /**
+   * Register cleanup callbacks to run on `destroy`, last-in-first-out.
+   * Use for resources the other primitives don't cover — DOM nodes,
+   * timers, third-party handles.
+   * @param fns - The cleanup callbacks to register.
+   */
+  public addDisposer(...fns: Array<() => void>): void {
+    for (const fn of fns) {
+      this._disposers.push(fn);
+    }
+  }
+
+  /**
+   * Add a DOM event listener now and remove it on `destroy`, with the same
+   * capture/options semantics it was added with.
+   * @param target - The event target to listen on.
+   * @param type - The event type.
+   * @param handler - The listener.
+   * @param options - Passed through to both add and remove, so capture-phase
+   *   listeners detach correctly.
+   * @returns A removal function for early detachment. Safe to call more than once.
+   */
+  public listen(
+    target: EventTarget,
+    type: string,
+    handler: EventListenerOrEventListenerObject,
+    options?: AddEventListenerOptions | boolean,
+  ): () => void {
+    target.addEventListener(type, handler, options);
+    let removed = false;
+    const remove = () => {
+      if (removed) {
+        return;
+      }
+      removed = true;
+      target.removeEventListener(type, handler, options);
+    };
+    this.addDisposer(remove);
+    return remove;
+  }
+
+  /**
+   * Add a callback to `app.ticker` now and remove it on `destroy`. The ticker
+   * is resolved when this is called, not at construction.
+   * @param fn - The ticker callback.
+   * @param context - The context to invoke the callback with.
+   * @param priority - Pixi `UPDATE_PRIORITY` for the callback.
+   * @returns A removal function for early detachment. Safe to call more than once.
+   */
+  public addTickerCallback(fn: (ticker: Ticker) => void, context?: unknown, priority?: number): () => void {
+    const ticker = this.app.ticker;
+    ticker.add(fn, context, priority);
+    let removed = false;
+    const remove = () => {
+      if (removed) {
+        return;
+      }
+      removed = true;
+      ticker.remove(fn, context);
+    };
+    this.addDisposer(remove);
+    return remove;
+  }
+
   /**
    * @override
    * @protected

package/src/plugins/SceneManagerPlugin.ts

@@ -139,12 +139,6 @@ export class SceneManagerPlugin extends Plugin implements ISceneManagerPlugin {
     this._defaultLoadMethod = method;
   }
 
-  public destroy(): void {
-    window.removeEventListener('hashchange', this._onHashChange);
-    this._debugMenu?.parentElement?.removeChild(this._debugMenu);
-    super.destroy();
-  }
-
   public async initialize(_options: any, app: IApplication): Promise<void> {
     this._debugVisible =
       this.app.config?.showSceneDebugMenu === true || (isDev && this.app.config?.showSceneDebugMenu !== false);
@@ -374,7 +368,7 @@ export class SceneManagerPlugin extends Plugin implements ISceneManagerPlugin {
   }
 
   private _listenForHashChange() {
-    window.addEventListener('hashchange', this._onHashChange);
+    this.listen(window, 'hashchange', this._onHashChange);
   }
 
   private _onHashChange() {
@@ -577,6 +571,7 @@ export class SceneManagerPlugin extends Plugin implements ISceneManagerPlugin {
     this._debugMenu.appendChild(icon);
 
     (Application.containerElement || document.body).appendChild(this._debugMenu);
+    this.addDisposer(() => this._debugMenu?.parentElement?.removeChild(this._debugMenu));
 
     this._sceneSelect = document.createElement('select');
     this._sceneSelect.style.cssText =
@@ -651,7 +646,7 @@ export class SceneManagerPlugin extends Plugin implements ISceneManagerPlugin {
 
     this._debugMenu.appendChild(this._sceneSelect);
 
-    this._debugMenu.addEventListener('change', (e: Event) => {
+    this.listen(this._debugMenu, 'change', (e: Event) => {
       if (this._queue) {
         e.preventDefault();
         return;

package/src/plugins/StatsPlugin.ts

@@ -1,4 +1,4 @@
-import { Ticker, UPDATE_PRIORITY } from 'pixi.js';
+import { UPDATE_PRIORITY } from 'pixi.js';
 import Stats from 'stats.js';
 import { Application } from '../core/Application';
 import { Plugin } from './Plugin';
@@ -12,6 +12,7 @@ export class StatsPlugin extends Plugin {
     this.stats.dom.id = 'stats';
 
     Application.containerElement?.appendChild(this.stats.dom);
+    this.addDisposer(() => this.stats.dom.remove());
 
     this.stats.dom.style.position = 'absolute';
     this.stats.dom.style.top = 'auto';
@@ -19,14 +20,6 @@ export class StatsPlugin extends Plugin {
     this.stats.dom.style.right = '0';
     this.stats.dom.style.left = 'auto';
 
-    Ticker.shared.add(this.stats.update, this.stats, UPDATE_PRIORITY.UTILITY);
-  }
-
-  public destroy(): void {
-    if (this.stats) {
-      Ticker.shared.remove(this.stats.update, this.stats);
-      this.stats.dom.remove();
-    }
-    super.destroy();
+    this.addTickerCallback(this.stats.update, this.stats, UPDATE_PRIORITY.UTILITY);
   }
 }

package/src/plugins/TimerPlugin.ts

@@ -676,7 +676,7 @@ export class TimerPlugin extends Plugin implements ITimerPlugin {
 
   public postInitialize() {
     // Set up update loop for main thread timers only
-    this.app.ticker.add(this.update);
+    this.addTickerCallback(this.update);
 
     // Initialize worker if needed
     this.initWorker();
@@ -763,7 +763,6 @@ export class TimerPlugin extends Plugin implements ITimerPlugin {
   }
 
   public destroy(): void {
-    this.app.ticker.remove(this.update);
     this.worker?.terminate();
     this.worker = null;
     this.timerCallbacks.clear();

package/src/plugins/WebEventsPlugin.ts

@@ -44,26 +44,17 @@ export class WebEventsPlugin extends Plugin implements IWebEventsPlugin {
   }
 
   public initialize(): void {
-    document.addEventListener('visibilitychange', this._onVisibilityChanged, false);
-    window.addEventListener('pagehide', this._onPageHide, false);
-    window.addEventListener('pageshow', this._onPageShow, false);
-    window.addEventListener('resize', this._onResize);
-    document.addEventListener('fullscreenchange', this._onResize);
-    window.addEventListener('orientationchange', this._onOrientationChanged);
+    this.listen(document, 'visibilitychange', this._onVisibilityChanged, false);
+    this.listen(window, 'pagehide', this._onPageHide, false);
+    this.listen(window, 'pageshow', this._onPageShow, false);
+    this.listen(window, 'resize', this._onResize);
+    this.listen(document, 'fullscreenchange', this._onResize);
+    this.listen(window, 'orientationchange', this._onOrientationChanged);
     // installed PWAs (standalone/fullscreen display modes) can miss or mistime window.resize
     // during launch transitions; visualViewport reports the settled size
-    window.visualViewport?.addEventListener('resize', this._onVisualViewportResize);
-  }
-
-  public destroy() {
-    document.removeEventListener('visibilitychange', this._onVisibilityChanged, false);
-    window.removeEventListener('resize', this._onResize);
-    document.removeEventListener('fullscreenchange', this._onResize);
-    window.removeEventListener('pagehide', this._onPageHide, false);
-    window.removeEventListener('pageshow', this._onPageShow, false);
-    window.removeEventListener('orientationchange', this._onOrientationChanged);
-    window.visualViewport?.removeEventListener('resize', this._onVisualViewportResize);
-    super.destroy();
+    if (window.visualViewport) {
+      this.listen(window.visualViewport, 'resize', this._onVisualViewportResize);
+    }
   }
 
   protected getCoreSignals(): string[] {

package/src/plugins/breakpoints/BreakpointPlugin.ts

@@ -150,7 +150,6 @@ export class BreakpointPlugin extends Plugin<BreakpointPluginOptions> implements
   }
 
   public destroy(): void {
-    this._pointerQuery?.removeEventListener('change', this._onPointerChange);
     this._pointerQuery = null;
     for (const signal of this._enter.values()) signal.disconnectAll();
     for (const signal of this._leave.values()) signal.disconnectAll();
@@ -259,7 +258,7 @@ export class BreakpointPlugin extends Plugin<BreakpointPluginOptions> implements
     }
     this._pointerQuery = window.matchMedia('(pointer: coarse)');
     this._pointer = this._pointerQuery.matches ? 'coarse' : 'fine';
-    this._pointerQuery.addEventListener('change', this._onPointerChange);
+    this.listen(this._pointerQuery, 'change', this._onPointerChange as EventListener);
   }
 
   private _signal(store: Map<string, Signal<() => void>>, name: string): Signal<() => void> {

package/src/plugins/captions/CaptionsPlugin.ts

@@ -298,7 +298,7 @@ export class CaptionsPlugin extends Plugin<CaptionsOptions> implements ICaptions
     const RendererClass: CaptionRendererConstructor = this.options.renderer;
     this.renderer = this.view.addChild(new RendererClass(this)) as CaptionsRenderer;
 
-    this.app.ticker.add(this.update);
+    this.addTickerCallback(this.update);
     this.app.scenes.onSceneChangeStart.connect(this.stopAllCaptions);
   }
 

package/src/plugins/gesture/GesturePlugin.ts

@@ -74,23 +74,19 @@ export class GesturePlugin extends Plugin<GesturePluginOptions> implements IGest
       canvas.style.touchAction = 'none';
     }
 
-    canvas.addEventListener('pointerdown', this._onPointerDown);
-    window.addEventListener('pointermove', this._onPointerMove);
-    window.addEventListener('pointerup', this._onPointerUp);
-    window.addEventListener('pointercancel', this._onPointerCancel);
+    this.listen(canvas, 'pointerdown', this._onPointerDown as EventListener);
+    this.listen(window, 'pointermove', this._onPointerMove as EventListener);
+    this.listen(window, 'pointerup', this._onPointerUp as EventListener);
+    this.listen(window, 'pointercancel', this._onPointerCancel as EventListener);
   }
 
   public destroy(): void {
     if (this._canvas) {
-      this._canvas.removeEventListener('pointerdown', this._onPointerDown);
       if (this._options.preventDefault) {
         this._canvas.style.touchAction = this._previousTouchAction;
       }
       this._canvas = null;
     }
-    window.removeEventListener('pointermove', this._onPointerMove);
-    window.removeEventListener('pointerup', this._onPointerUp);
-    window.removeEventListener('pointercancel', this._onPointerCancel);
 
     this._pointers.clear();
     this._state = 'idle';