Linting fixes after replacing tslint with eslint

.eslintrc.json

@@ -17,6 +17,8 @@
   },
   "plugins": ["prettier"],
   "rules": {
-    "@typescript-eslint/triple-slash-reference": "off"
+    "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "no-void": "off"
   }
 }

README.md

@@ -40,6 +40,13 @@ The performance is achieved through multiple optimizations, for example:
 - createRef and forwardRef APIs (v6)
 - componentDidAppear, componentWillDisappear and componentWillMove (v8) - class and function component callbacks to ease animation work, see [inferno-animation](https://github.com/infernojs/inferno/tree/master/packages/inferno-animation) package
 
+## Runtime requirements
+InfernoJS 9 requires following features to be present in the executing runtime:
+
+- `Promise`
+- `Array.prototype.includes()`
+- `Array.prototype.includes()`
+
 ## Browser support
 Since version 4 we have started running our test suite **without** any polyfills.
 Inferno is now part of [Saucelabs](https://saucelabs.com/) open source program and we use their service for executing the tests.

packages/inferno-animation/src/animationCoordinator.ts

@@ -57,8 +57,8 @@ export function consumeGlobalAnimationSource(key: GlobalAnimationKey) {
   return tmp;
 }
 
-let _animationQueue: Function[] = [];
-let _animationActivationQueue: Function[] = [];
+let _animationQueue: Array<() => void> = [];
+let _animationActivationQueue: Array<() => void> = [];
 const IDLE = 0;
 let _nextAnimationFrame: number = IDLE;
 let _nextActivateAnimationFrame: number = IDLE;

packages/inferno-compat/src/index.ts

@@ -1,5 +1,5 @@
 import {
-  __render,
+  renderInternal,
   _CI,
   _HI,
   _M,
@@ -53,7 +53,7 @@ declare global {
 options.reactStyles = true;
 
 function unmountComponentAtNode(container: Element | SVGAElement | DocumentFragment): boolean {
-  __render(null, container, null, null);
+  renderInternal(null, container, null, null);
   return true;
 }
 
@@ -329,7 +329,7 @@ function createFactory(type) {
 }
 
 function render(rootInput, container, cb = null, context = EMPTY_OBJ) {
-  __render(rootInput, container, cb, context);
+  renderInternal(rootInput, container, cb, context);
 
   const input = container.$V;
 
@@ -356,7 +356,7 @@ if (typeof window !== 'undefined' && typeof (window as any).React === 'undefined
     _MFCC,
     _MP,
     _MR,
-    __render,
+    __render: renderInternal,
     // Public methods
     cloneElement: cloneVNode,
     cloneVNode,
@@ -407,7 +407,7 @@ export {
   _MFCC,
   _MP,
   _MR,
-  __render,
+  renderInternal,
   // Public methods
   cloneVNode as cloneElement,
   cloneVNode,
@@ -454,7 +454,7 @@ export default {
   _MFCC,
   _MP,
   _MR,
-  __render,
+  __render: renderInternal,
   // Public methods
   cloneElement: cloneVNode,
   cloneVNode,

packages/inferno-create-class/src/index.ts

@@ -68,7 +68,7 @@ function bindAll<P, S>(ctx: Component<P, S>) {
   }
 }
 
-function collateMixins(mixins: Function[] | any[], keyed = {}): any {
+function collateMixins(mixins: Array<() => void> | any[], keyed = {}): any {
   for (let i = 0, len = mixins.length; i < len; ++i) {
     const mixin = mixins[i];
 
@@ -78,7 +78,7 @@ function collateMixins(mixins: Function[] | any[], keyed = {}): any {
       collateMixins(mixin.mixins, keyed);
     }
 
-    for (const key in mixin as Function[]) {
+    for (const key in mixin as Array<() => void>) {
       if (mixin.hasOwnProperty(key) && typeof mixin[key] === 'function') {
         (keyed[key] || (keyed[key] = [])).push(mixin[key]);
       }
@@ -87,7 +87,7 @@ function collateMixins(mixins: Function[] | any[], keyed = {}): any {
   return keyed;
 }
 
-function multihook(hooks: Function[], mergeFn?: Function): any {
+function multihook(hooks: Array<() => void>, mergeFn?: Function): any {
   return function () {
     let ret;
 
@@ -129,7 +129,7 @@ function mergeNoDupes(previous: any, current: any) {
   return previous;
 }
 
-function applyMixin<P, S>(key: string, inst: Component<P, S>, mixin: Function[]): void {
+function applyMixin<P, S>(key: string, inst: Component<P, S>, mixin: Array<() => void>): void {
   const hooks = inst[key] !== void 0 ? mixin.concat(inst[key]) : mixin;
 
   if (key === 'getDefaultProps' || key === 'getInitialState' || key === 'getChildContext') {
@@ -139,7 +139,7 @@ function applyMixin<P, S>(key: string, inst: Component<P, S>, mixin: Function[])
   }
 }
 
-function applyMixins(Cl: any, mixins: Function[] | any[]) {
+function applyMixins(Cl: any, mixins: Array<() => void> | any[]) {
   for (const key in mixins) {
     if (mixins.hasOwnProperty(key)) {
       const mixin = mixins[key];

packages/inferno-hydrate/src/index.ts

@@ -45,7 +45,7 @@ function hydrateComponent(
   context,
   isSVG: boolean,
   isClass: boolean,
-  lifecycle: Function[],
+  lifecycle: Array<() => void>,
   animations: AnimationQueues
 ) {
   const type = vNode.type as Function;
@@ -69,7 +69,7 @@ function hydrateComponent(
   return currentNode;
 }
 
-function hydrateChildren(parentVNode: VNode, parentNode, currentNode, context, isSVG, lifecycle: Function[], animations: AnimationQueues) {
+function hydrateChildren(parentVNode: VNode, parentNode, currentNode, context, isSVG, lifecycle: Array<() => void>, animations: AnimationQueues) {
   const childFlags = parentVNode.childFlags;
   const children = parentVNode.children;
   const props = parentVNode.props;
@@ -130,7 +130,7 @@ function hydrateChildren(parentVNode: VNode, parentNode, currentNode, context, i
   }
 }
 
-function hydrateElement(vNode: VNode, parentDOM: Element, dom: Element, context: Object, isSVG: boolean, lifecycle: Function[], animations: AnimationQueues) {
+function hydrateElement(vNode: VNode, parentDOM: Element, dom: Element, context: Object, isSVG: boolean, lifecycle: Array<() => void>, animations: AnimationQueues) {
   const props = vNode.props;
   const className = vNode.className;
   const flags = vNode.flags;
@@ -181,7 +181,7 @@ function hydrateText(vNode: VNode, parentDOM: Element, dom: Element) {
   return vNode.dom;
 }
 
-function hydrateFragment(vNode: VNode, parentDOM: Element, dom: Element, context, isSVG: boolean, lifecycle: Function[], animations: AnimationQueues): Element {
+function hydrateFragment(vNode: VNode, parentDOM: Element, dom: Element, context, isSVG: boolean, lifecycle: Array<() => void>, animations: AnimationQueues): Element {
   const children = vNode.children;
 
   if (vNode.childFlags === ChildFlags.HasVNodeChildren) {
@@ -201,7 +201,7 @@ function hydrateVNode(
   currentDom: Element,
   context: Object,
   isSVG: boolean,
-  lifecycle: Function[],
+  lifecycle: Array<() => void>,
   animations: AnimationQueues
 ): Element | null {
   const flags = (vNode.flags |= VNodeFlags.InUse);
@@ -236,7 +236,7 @@ export function hydrate(input, parentDOM: Element, callback?: Function) {
     }
     render(input, parentDOM, callback);
   } else {
-    const lifecycle: Function[] = [];
+    const lifecycle: Array<() => void> = [];
     const animations: AnimationQueues = new AnimationQueues();
 
     if (!isInvalid(input)) {

packages/inferno-mobx/src/utils/EventEmitter.ts

@@ -1,5 +1,5 @@
 export class EventEmitter {
-  public listeners: Function[] = [];
+  public listeners: Array<() => void> = [];
 
   public on(cb: Function) {
     this.listeners.push(cb);

packages/inferno/src/DOM/constants.ts

@@ -11,5 +11,5 @@ export const namespaces: Record<string, string> = {
   'xlink:type': xlinkNS,
   'xml:base': xmlNS,
   'xml:lang': xmlNS,
-  'xml:space': xmlNS
+  'xml:space': xmlNS,
 };

packages/inferno/src/DOM/events/delegation.ts

@@ -1,13 +1,32 @@
 import type { LinkedEvent, SemiSyntheticEvent } from './../../core/types';
-import { isFunction, isNull } from 'inferno-shared';
-import { isLastValueSameLinkEvent, normalizeEventName } from './../utils/common';
+import { isFunction, isNull, isNullOrUndef } from 'inferno-shared';
+import {
+  isLastValueSameLinkEvent,
+  normalizeEventName,
+} from './../utils/common';
 import { isLinkEventObject } from './linkEvent';
 
 interface IEventData {
   dom: Element;
 }
 
-function getDelegatedEventObject(v) {
+export interface DelegateEventTypes {
+  onClick: unknown;
+  onDblClick: unknown;
+  onFocusIn: unknown;
+  onFocusOut: unknown;
+  onKeyDown: unknown;
+  onKeyPress: unknown;
+  onKeyUp: unknown;
+  onMouseDown: unknown;
+  onMouseMove: unknown;
+  onMouseUp: unknown;
+  onTouchEnd: unknown;
+  onTouchMove: unknown;
+  onTouchStart: unknown;
+}
+
+function getDelegatedEventObject(v: unknown): DelegateEventTypes {
   return {
     onClick: v,
     onDblClick: v,
@@ -21,7 +40,7 @@ function getDelegatedEventObject(v) {
     onMouseUp: v,
     onTouchEnd: v,
     onTouchMove: v,
-    onTouchStart: v
+    onTouchStart: v,
   };
 }
 const attachedEventCounts = getDelegatedEventObject(0);
@@ -33,7 +52,7 @@ function updateOrAddSyntheticEvent(name: string, dom) {
   let eventsObject = dom.$EV;
 
   if (!eventsObject) {
-    eventsObject = (dom as any).$EV = getDelegatedEventObject(null);
+    eventsObject = dom.$EV = getDelegatedEventObject(null);
   }
   if (!eventsObject[name]) {
     if (++attachedEventCounts[name] === 1) {
@@ -47,9 +66,12 @@ function updateOrAddSyntheticEvent(name: string, dom) {
 export function unmountSyntheticEvent(name: string, dom) {
   const eventsObject = dom.$EV;
 
-  if (eventsObject && eventsObject[name]) {
+  if (eventsObject?.[name]) {
     if (--attachedEventCounts[name] === 0) {
-      document.removeEventListener(normalizeEventName(name), attachedEvents[name]);
+      document.removeEventListener(
+        normalizeEventName(name),
+        attachedEvents[name],
+      );
       attachedEvents[name] = null;
     }
     eventsObject[name] = null;
@@ -60,7 +82,7 @@ export function handleSyntheticEvent(
   name: string,
   lastEvent: Function | LinkedEvent<any, any> | null | false | true,
   nextEvent: Function | LinkedEvent<any, any> | null | false | true,
-  dom
+  dom,
 ) {
   if (isFunction(nextEvent)) {
     updateOrAddSyntheticEvent(name, dom)[name] = nextEvent;
@@ -74,12 +96,19 @@ export function handleSyntheticEvent(
   }
 }
 
-// When browsers fully support event.composedPath we could loop it through instead of using parentNode property
+// TODO: When browsers fully support event.composedPath we could loop it through instead of using parentNode property
 function getTargetNode(event) {
-  return isFunction(event.composedPath) ? event.composedPath()[0] : event.target;
+  return isFunction(event.composedPath)
+    ? event.composedPath()[0]
+    : event.target;
 }
 
-function dispatchEvents(event: SemiSyntheticEvent<any>, isClick: boolean, name: string, eventData: IEventData) {
+function dispatchEvents(
+  event: SemiSyntheticEvent<any>,
+  isClick: boolean,
+  name: string,
+  eventData: IEventData,
+): void {
   let dom = getTargetNode(event);
   do {
     // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent,
@@ -90,13 +119,15 @@ function dispatchEvents(event: SemiSyntheticEvent<any>, isClick: boolean, name:
     }
     const eventsObject = dom.$EV;
 
-    if (eventsObject) {
+    if (!isNullOrUndef(eventsObject)) {
       const currentEvent = eventsObject[name];
 
       if (currentEvent) {
         // linkEvent object
         eventData.dom = dom;
-        currentEvent.event ? currentEvent.event(currentEvent.data, event) : currentEvent(event);
+        currentEvent.event
+          ? currentEvent.event(currentEvent.data, event)
+          : currentEvent(event);
         if (event.cancelBubble) {
           return;
         }
@@ -106,25 +137,27 @@ function dispatchEvents(event: SemiSyntheticEvent<any>, isClick: boolean, name:
   } while (!isNull(dom));
 }
 
-function stopPropagation() {
+function stopPropagation(): void {
   this.cancelBubble = true;
+
+  // eslint-disable-next-line
   if (!this.immediatePropagationStopped) {
     this.stopImmediatePropagation();
   }
 }
 
-function isDefaultPrevented() {
+function isDefaultPrevented(): boolean {
   return this.defaultPrevented;
 }
 
-function isPropagationStopped() {
+function isPropagationStopped(): boolean {
   return this.cancelBubble;
 }
 
-function extendEventProperties(event) {
-  // Event data needs to be object to save reference to currentTarget getter
+function extendEventProperties(event): IEventData {
+  // Event data needs to be an object to save reference to currentTarget getter
   const eventData: IEventData = {
-    dom: document as any
+    dom: document as any,
   };
 
   event.isDefaultPrevented = isDefaultPrevented;
@@ -135,15 +168,15 @@ function extendEventProperties(event) {
     configurable: true,
     get: function get() {
       return eventData.dom;
-    }
+    },
   });
 
   return eventData;
 }
 
 function rootClickEvent(name: string) {
   return function (event) {
-    if ((event as any).button !== 0) {
+    if (event.button !== 0) {
       // Firefox incorrectly triggers click event for mid/right mouse buttons.
       // This bug has been active for 17 years.
       // https://bugzilla.mozilla.org/show_bug.cgi?id=184051
@@ -161,9 +194,15 @@ function rootEvent(name: string) {
   };
 }
 
-function attachEventToDocument(name: string) {
-  const attachedEvent = name === 'onClick' || name === 'onDblClick' ? rootClickEvent(name) : rootEvent(name);
+function attachEventToDocument(
+  name: string,
+): (event: SemiSyntheticEvent<any>) => void {
+  const attachedEvent =
+    name === 'onClick' || name === 'onDblClick'
+      ? rootClickEvent(name)
+      : rootEvent(name);
 
+  // @ts-expect-error TODO: FIXME
   document.addEventListener(normalizeEventName(name), attachedEvent);
 
   return attachedEvent;