Improve destroy

package.json

@@ -25,9 +25,10 @@
     "postbuild:types": "api-extractor run --local",
     "demo": "run-p watch serve",
     "lint": "eslint src test",
+    "lint:fix": "npm run lint -- --fix",
     "types": "tsc -noEmit",
     "test": "run-s lint types unit-test build",
-    "unit-test": "jest --silent",
+    "unit-test": "jest",
     "publish:patch": "npm version patch && run-s publish:skip",
     "publish:minor": "npm version minor && run-s publish:skip",
     "publish:major": "npm version major && run-s publish:skip",

src/HTMLText.ts

@@ -16,6 +16,13 @@ import type { IDestroyOptions } from '@pixi/display';
  */
 export class HTMLText extends Sprite
 {
+    /** Default opens when destroying */
+    public static defaultDestroyOptions: IDestroyOptions = {
+        texture: true,
+        children: false,
+        baseTexture: true,
+    };
+
     /** Default maxWidth, set at construction */
     public static defaultMaxWidth = 2024;
 
@@ -47,6 +54,7 @@ export class HTMLText extends Sprite
     private _autoResolution = true;
     private _loading = false;
     private _shadow: HTMLElement;
+    private _shadowRoot: ShadowRoot;
     private localStyleID = -1;
     private dirty = false;
 
@@ -97,11 +105,9 @@ export class HTMLText extends Sprite
         this._foreignObject.appendChild(domElement);
         this._image = new Image();
         this._autoResolution = HTMLText.defaultAutoResolution;
-
-        const shadowRoot = shadow.attachShadow({ mode: 'open' });
-
-        shadowRoot.appendChild(svgRoot);
-        shadow.dataset.pixiId = '@pixi/text-html';
+        this._shadowRoot = shadow.attachShadow({ mode: 'open' });
+        this._shadowRoot.appendChild(svgRoot);
+        shadow.setAttribute('data-pixi-html-text', '1');
         Object.assign(shadow.style, {
             position: 'absolute',
             top: '0',
@@ -299,6 +305,13 @@ export class HTMLText extends Sprite
      */
     destroy(options?: boolean | IDestroyOptions | undefined)
     {
+        if (typeof options === 'boolean')
+        {
+            options = { children: options };
+        }
+
+        options = Object.assign({}, HTMLText.defaultDestroyOptions, options);
+
         super.destroy(options);
 
         const forceClear: any = null;
@@ -317,14 +330,20 @@ export class HTMLText extends Sprite
         }
         this.canvas = forceClear;
         this._style = forceClear;
+        this._svgRoot?.remove();
         this._svgRoot = forceClear;
+        this._domElement?.remove();
         this._domElement = forceClear;
+        this._foreignObject?.remove();
         this._foreignObject = forceClear;
+        this._styleElement?.remove();
         this._styleElement = forceClear;
+        this._shadow?.remove();
+        this._shadow = forceClear;
+        this._shadowRoot = forceClear;
         this._image.onload = null;
         this._image.src = '';
         this._image = forceClear;
-        this._shadow = forceClear;
     }
 
     /**

test/HTMLText.test.ts

@@ -0,0 +1,46 @@
+import { HTMLText } from '../src/HTMLText';
+
+describe('HTMLText', () =>
+{
+    it('should create an HTMLText element', () =>
+    {
+        const text = new HTMLText('Hello World');
+
+        expect(text).toBeTruthy();
+        expect(text.text).toBe('Hello World');
+
+        text.destroy();
+    });
+
+    it('should clean up the shadow element', () =>
+    {
+        const query = '[data-pixi-html-text]';
+
+        expect(document.querySelector(query)).toBeFalsy();
+
+        const text = new HTMLText('Hello world!');
+
+        expect(document.querySelector(query)).toBeTruthy();
+
+        text.destroy();
+
+        expect(document.querySelector(query)).toBeFalsy();
+    });
+
+    it('should clean up the shadow element multiples', () =>
+    {
+        const query = '[data-pixi-html-text]';
+
+        expect(document.querySelector(query)).toBeFalsy();
+
+        const text = new HTMLText('Hello world!');
+        const text2 = new HTMLText('Hello world2!');
+
+        expect(document.querySelector(query)).toBeTruthy();
+
+        text.destroy();
+        text2.destroy();
+
+        expect(document.querySelector(query)).toBeFalsy();
+    });
+});