chore: prepare for TypeScript 6.x

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,

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;
     }
 

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';

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} />;
     }
 }

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}/>;
     }
 }

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}/>;
     }
 }

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];
         }
     }

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>;

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;

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} />;
     }
 }

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);

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}/>;
     }
 }

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;
         }

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);
 

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} />;
     }
 }

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} />;
     }
 }

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 = '';

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);
         }
     }

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);
         });
 

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} />;
     }
 }

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;

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,