From 1e70c09961d0e1acbaa6165fe677f5d88d5c0171 Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Wed, 27 May 2026 20:18:46 +0100
Subject: [PATCH] chore: prepare for TypeScript 6.x

Update tsconfig.json and react/tsconfig.json to use
`moduleResolution: "bundler"` (matches how Rollup actually resolves
modules and understands the `exports` field) and add an explicit
`strict: false` so intent is unambiguous regardless of future
default changes.

Convert all 38 `@ts-ignore` directives to `@ts-expect-error` across
20 files. `@ts-expect-error` requires the line below it to actually
produce a type error, so if a future TS release fixes any of the
underlying typing issues the build fails loudly with "unused
directive" instead of the suppression silently going dead.

All six checks (build:es6, build:react:es6, build:types, test, lint,
publint) pass on TS 5.9.3 with these changes applied.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 react/tsconfig.json                         |  3 ++-
 src/binding/BindingBase/index.ts            |  4 ++--
 src/components/ArrayInput/index.ts          |  2 +-
 src/components/Button/component.tsx         |  2 +-
 src/components/Canvas/component.tsx         |  2 +-
 src/components/ColorPicker/component.tsx    |  2 +-
 src/components/ColorPicker/index.ts         |  4 ++--
 src/components/Container/component.tsx      |  2 +-
 src/components/Container/index.ts           |  2 +-
 src/components/Element/component.tsx        | 10 +++++-----
 src/components/Element/index.ts             | 10 +++++-----
 src/components/GradientPicker/component.tsx |  2 +-
 src/components/GradientPicker/index.ts      |  4 ++--
 src/components/GridViewItem/index.ts        |  2 +-
 src/components/InfoBox/component.tsx        |  2 +-
 src/components/Label/component.tsx          |  2 +-
 src/components/Menu/index.ts                |  4 ++--
 src/components/Panel/index.ts               | 12 ++++++------
 src/components/SelectInput/index.ts         |  4 ++--
 src/components/Spinner/component.tsx        |  2 +-
 src/components/TreeView/index.ts            |  2 +-
 tsconfig.json                               |  3 ++-
 22 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/react/tsconfig.json b/react/tsconfig.json
index 5c06d1f9..c7a368a7 100644
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "strict": false,
         "noImplicitAny": true,
         "allowJs": true,
         "target": "es2020",
@@ -13,7 +14,7 @@
         ],
         "esModuleInterop": true,
         "sourceMap": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "resolveJsonModule": true,
         "forceConsistentCasingInFileNames": true,
diff --git a/src/binding/BindingBase/index.ts b/src/binding/BindingBase/index.ts
index 05a7cd6d..4959706b 100644
--- a/src/binding/BindingBase/index.ts
+++ b/src/binding/BindingBase/index.ts
@@ -264,7 +264,7 @@ class BindingBase extends Events {
      */
     set historyEnabled(value) {
         if (this._history) {
-            // @ts-ignore
+            // @ts-expect-error
             this._history.enabled = value;
         }
     }
@@ -273,7 +273,7 @@ class BindingBase extends Events {
      * Gets whether history is enabled for the binding.
      */
     get historyEnabled() {
-        // @ts-ignore
+        // @ts-expect-error
         return this._history && this._history.enabled;
     }
 
diff --git a/src/components/ArrayInput/index.ts b/src/components/ArrayInput/index.ts
index b719eeba..a1c2dc63 100644
--- a/src/components/ArrayInput/index.ts
+++ b/src/components/ArrayInput/index.ts
@@ -179,7 +179,7 @@ class ArrayInput extends Element implements IFocusable, IBindable {
 
         this._getDefaultFn = args.getDefaultFn ?? null;
 
-        // @ts-ignore
+        // @ts-expect-error
         let valueType = args.elementArgs && args.elementArgs.type || args.type;
         if (!ArrayInput.DEFAULTS.hasOwnProperty(valueType)) {
             valueType = 'string';
diff --git a/src/components/Button/component.tsx b/src/components/Button/component.tsx
index 61703966..8f44c052 100644
--- a/src/components/Button/component.tsx
+++ b/src/components/Button/component.tsx
@@ -11,7 +11,7 @@ class Button extends Element<ButtonArgs, any> {
     static ctor = ButtonClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <button ref={this.attachElement} />;
     }
 }
diff --git a/src/components/Canvas/component.tsx b/src/components/Canvas/component.tsx
index 28ee82a6..f8029847 100644
--- a/src/components/Canvas/component.tsx
+++ b/src/components/Canvas/component.tsx
@@ -11,7 +11,7 @@ class Canvas extends Element<CanvasArgs, any> {
     static ctor = CanvasClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <canvas ref={this.attachElement}/>;
     }
 }
diff --git a/src/components/ColorPicker/component.tsx b/src/components/ColorPicker/component.tsx
index a7764e1a..8328a9ed 100644
--- a/src/components/ColorPicker/component.tsx
+++ b/src/components/ColorPicker/component.tsx
@@ -11,7 +11,7 @@ class ColorPicker extends Element<ColorPickerArgs, any> {
     static ctor = ColorPickerClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <div ref={this.attachElement}/>;
     }
 }
diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts
index 6f07cdd1..9d853e2b 100644
--- a/src/components/ColorPicker/index.ts
+++ b/src/components/ColorPicker/index.ts
@@ -768,7 +768,7 @@ class ColorPicker extends Element implements IBindable {
         const value = values[0];
         for (let i = 1; i < values.length; i++) {
             if (Array.isArray(value)) {
-                // @ts-ignore
+                // @ts-expect-error
                 const other: number[] = values[i];
                 if (!Array.isArray(other) || value.length !== other.length ||
                     value.some((v, j) => v !== other[j])) {
@@ -787,7 +787,7 @@ class ColorPicker extends Element implements IBindable {
             this.value = null;
             this.class.add(CLASS_MULTIPLE_VALUES);
         } else {
-            // @ts-ignore
+            // @ts-expect-error
             this.value = values[0];
         }
     }
diff --git a/src/components/Container/component.tsx b/src/components/Container/component.tsx
index b1ec2121..eac61273 100644
--- a/src/components/Container/component.tsx
+++ b/src/components/Container/component.tsx
@@ -45,7 +45,7 @@ class Container extends Element<ContainerArgs, any> {
             );
         }
 
-        // @ts-ignore
+        // @ts-expect-error
         return <div ref={this.attachElement}>
             { elements }
         </div>;
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
index e3d4661e..8abf62f3 100644
--- a/src/components/Container/index.ts
+++ b/src/components/Container/index.ts
@@ -577,7 +577,7 @@ class Container extends Element {
             });
         } else {
             rootNode = node[keys[0]];
-            // @ts-ignore
+            // @ts-expect-error
             this[`_${keys[0]}`] = rootNode;
         }
         return rootNode;
diff --git a/src/components/Element/component.tsx b/src/components/Element/component.tsx
index 5c12576e..18298c74 100644
--- a/src/components/Element/component.tsx
+++ b/src/components/Element/component.tsx
@@ -91,14 +91,14 @@ class Element<P extends ElementArgs, S> extends React.Component<P, S> {
             const propDescriptor = this.getPropertyDescriptor(this.element, prop);
             if (propDescriptor && propDescriptor.set) {
                 if (prop === 'value') {
-                    // @ts-ignore
+                    // @ts-expect-error
                     this.element._suppressChange = true;
-                    // @ts-ignore
+                    // @ts-expect-error
                     this.element[prop] = this.props[prop];
-                    // @ts-ignore
+                    // @ts-expect-error
                     this.element._suppressChange = false;
                 } else {
-                    // @ts-ignore
+                    // @ts-expect-error
                     this.element[prop] = this.props[prop];
                 }
             } else if (prop === 'class') {
@@ -124,7 +124,7 @@ class Element<P extends ElementArgs, S> extends React.Component<P, S> {
     }
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <div ref={this.attachElement} />;
     }
 }
diff --git a/src/components/Element/index.ts b/src/components/Element/index.ts
index 5e426664..2aefb880 100644
--- a/src/components/Element/index.ts
+++ b/src/components/Element/index.ts
@@ -546,10 +546,10 @@ class Element extends Events {
 
         // copy CSS properties from args
         for (const key in args) {
-            // @ts-ignore
+            // @ts-expect-error
             if (args[key] === undefined) continue;
             if (SIMPLE_CSS_PROPERTIES.indexOf(key) !== -1) {
-                // @ts-ignore
+                // @ts-expect-error
                 this[key] = args[key];
             }
         }
@@ -587,9 +587,9 @@ class Element extends Events {
             // because we do not want to be emitting events
             // on a destroyed parent after it's been destroyed
             // as it is easy to lead to null exceptions
-            // @ts-ignore
+            // @ts-expect-error
             if (parent.remove && !parent._destroyed) {
-                // @ts-ignore
+                // @ts-expect-error
                 parent.remove(this);
             }
 
@@ -1047,7 +1047,7 @@ class Element extends Events {
         this._binding = value;
 
         if (this._binding) {
-            // @ts-ignore
+            // @ts-expect-error
             this._binding.element = this;
             if (prevObservers && prevPaths) {
                 this.link(prevObservers, prevPaths);
diff --git a/src/components/GradientPicker/component.tsx b/src/components/GradientPicker/component.tsx
index 8b8b9d8e..64e284a3 100644
--- a/src/components/GradientPicker/component.tsx
+++ b/src/components/GradientPicker/component.tsx
@@ -11,7 +11,7 @@ class GradientPicker extends Element<GradientPickerArgs, any> {
     static ctor = GradientPickerClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <div ref={this.attachElement}/>;
     }
 }
diff --git a/src/components/GradientPicker/index.ts b/src/components/GradientPicker/index.ts
index 98b9d563..d56e21c2 100644
--- a/src/components/GradientPicker/index.ts
+++ b/src/components/GradientPicker/index.ts
@@ -453,7 +453,7 @@ class GradientPicker extends Element {
         this._channels = args.channels ?? 3;
         this._value = this._getDefaultValue();
         if (args.value) {
-            // @ts-ignore
+            // @ts-expect-error
             this.value = args.value;
         }
     }
@@ -1396,7 +1396,7 @@ class GradientPicker extends Element {
         if (value[0].type !== CURVE_STEP &&
             value[0].type !== CURVE_LINEAR &&
             value[0].type !== CURVE_SPLINE) {
-            // @ts-ignore
+            // @ts-expect-error
             comboItems[3] = 'Legacy';
             this.STATE.typeMap[3] = value[0].type;
         }
diff --git a/src/components/GridViewItem/index.ts b/src/components/GridViewItem/index.ts
index 278c2f7a..92acd83d 100644
--- a/src/components/GridViewItem/index.ts
+++ b/src/components/GridViewItem/index.ts
@@ -75,7 +75,7 @@ class GridViewItem extends Container implements IFocusable {
                 binding: new BindingObserversToElement()
             });
 
-            // @ts-ignore Remove radio button click event listener
+            // @ts-expect-error Remove radio button click event listener
             this._radioButton.dom.removeEventListener('click', this._radioButton._onClick);
             this._radioButton.dom.addEventListener('click', this._onRadioButtonClick);
 
diff --git a/src/components/InfoBox/component.tsx b/src/components/InfoBox/component.tsx
index c9650349..2192f94a 100644
--- a/src/components/InfoBox/component.tsx
+++ b/src/components/InfoBox/component.tsx
@@ -11,7 +11,7 @@ class InfoBox extends Element<InfoBoxArgs, any> {
     static ctor = InfoBoxClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <span ref={this.attachElement} />;
     }
 }
diff --git a/src/components/Label/component.tsx b/src/components/Label/component.tsx
index dbbebce4..032dbb9d 100644
--- a/src/components/Label/component.tsx
+++ b/src/components/Label/component.tsx
@@ -11,7 +11,7 @@ class Label extends Element<LabelArgs, any> {
     static ctor = LabelClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <span ref={this.attachElement} />;
     }
 }
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index ec6c078f..87312e68 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -115,7 +115,7 @@ class Menu extends Container implements IFocusable {
             item.hidden = !item.onIsVisible();
         }
 
-        // @ts-ignore
+        // @ts-expect-error
         for (const child of item._containerItems.dom.childNodes) {
             this._filterMenuItems(child.ui as MenuItem);
         }
@@ -141,7 +141,7 @@ class Menu extends Container implements IFocusable {
     protected _limitSubmenuAtScreenEdges(item: MenuItem) {
         if (!(item instanceof MenuItem) || !item.hasChildren) return;
 
-        // @ts-ignore
+        // @ts-expect-error
         const containerItems = item._containerItems;
 
         containerItems.style.top = '';
diff --git a/src/components/Panel/index.ts b/src/components/Panel/index.ts
index 2123235e..b6f09b23 100644
--- a/src/components/Panel/index.ts
+++ b/src/components/Panel/index.ts
@@ -320,18 +320,18 @@ class Panel extends Container {
         window.addEventListener('mousemove', this._onDragMove);
 
         this.emit('dragstart');
-        // @ts-ignore accessing protected methods
+        // @ts-expect-error accessing protected methods
         if (this.parent && this.parent._onChildDragStart) {
-            // @ts-ignore accessing protected methods
+            // @ts-expect-error accessing protected methods
             this.parent._onChildDragStart(evt, this);
         }
     };
 
     protected _onDragMove = (evt: MouseEvent) => {
         this.emit('dragmove');
-        // @ts-ignore accessing protected methods
+        // @ts-expect-error accessing protected methods
         if (this.parent && this.parent._onChildDragStart) {
-            // @ts-ignore accessing protected methods
+            // @ts-expect-error accessing protected methods
             this.parent._onChildDragMove(evt, this);
         }
     };
@@ -346,9 +346,9 @@ class Panel extends Container {
         }
 
         this.emit('dragend');
-        // @ts-ignore accessing protected methods
+        // @ts-expect-error accessing protected methods
         if (this.parent && this.parent._onChildDragStart) {
-            // @ts-ignore accessing protected methods
+            // @ts-expect-error accessing protected methods
             this.parent._onChildDragEnd(evt, this);
         }
     }
diff --git a/src/components/SelectInput/index.ts b/src/components/SelectInput/index.ts
index f7597683..91ebf616 100644
--- a/src/components/SelectInput/index.ts
+++ b/src/components/SelectInput/index.ts
@@ -655,7 +655,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
             label.class.add(CLASS_SELECTED);
         }
 
-        // @ts-ignore
+        // @ts-expect-error
         container.value = value;
 
         return container;
@@ -1270,7 +1270,7 @@ class SelectInput extends Element implements IBindable, IFocusable {
         // value from the tags that are currently visible
         const result: any = [];
         this._containerTags.dom.childNodes.forEach((dom) => {
-            // @ts-ignore
+            // @ts-expect-error
             result.push(dom.ui.value);
         });
 
diff --git a/src/components/Spinner/component.tsx b/src/components/Spinner/component.tsx
index 3ce0442c..0dda7d7d 100644
--- a/src/components/Spinner/component.tsx
+++ b/src/components/Spinner/component.tsx
@@ -11,7 +11,7 @@ class Spinner extends Element<SpinnerArgs, any> {
     static ctor = SpinnerClass;
 
     render() {
-        // @ts-ignore
+        // @ts-expect-error
         return <svg ref={this.attachElement} />;
     }
 }
diff --git a/src/components/TreeView/index.ts b/src/components/TreeView/index.ts
index ce45846c..a61732e7 100644
--- a/src/components/TreeView/index.ts
+++ b/src/components/TreeView/index.ts
@@ -1007,7 +1007,7 @@ class TreeView extends Container {
         if (!dragOverItem || dragOverItem.hidden || !dragOverItem.parentsOpen) {
             this._dragHandle.hidden = true;
         } else {
-            // @ts-ignore
+            // @ts-expect-error
             const rect = dragOverItem._containerContents.dom.getBoundingClientRect();
 
             this._dragHandle.hidden = false;
diff --git a/tsconfig.json b/tsconfig.json
index 7750f44e..ebfc532a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "strict": false,
         "noImplicitAny": true,
         "allowJs": true,
         "target": "es2020",
@@ -13,7 +14,7 @@
         ],
         "esModuleInterop": true,
         "sourceMap": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "resolveJsonModule": true,
         "forceConsistentCasingInFileNames": true,