Inferno - update to v8 (#29318)

pomahtri · web-flow · commit d0acdba3d295 · 2025-03-18T17:20:39.000+04:00
diff --git a/apps/demos/package.json b/apps/demos/package.json
@@ -50,8 +50,8 @@
         "fs-extra": "11.1.1",
         "globalize": "1.7.0",
         "html-react-parser": "1.4.14",
-        "inferno": "^7.4.9",
-        "inferno-create-element": "7.4.11",
+        "inferno": "catalog:",
+        "inferno-create-element": "catalog:",
         "jquery": "3.6.3",
         "jspdf": "2.5.2",
         "jspdf-autotable": "3.8.3",
diff --git a/apps/react-storybook/package.json b/apps/react-storybook/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "devextreme": "workspace:~",
     "devextreme-react": "workspace:~",
-    "inferno": "^7.4.9",
+    "inferno": "catalog:",
     "html-react-parser": "^5.2.2"
   },
   "devDependencies": {
diff --git a/packages/devextreme-angular/package.json b/packages/devextreme-angular/package.json
@@ -87,7 +87,7 @@
   "dependencies": {
     "@angular-devkit/schematics": "17.3.11",
     "devextreme-schematics": "*",
-    "inferno-server": "7.4.11"
+    "inferno-server": "catalog:"
   },
   "schematics": "./schematics/collection.json",
   "publishConfig": {
diff --git a/packages/devextreme/js/__internal/core/jsx.ts b/packages/devextreme/js/__internal/core/jsx.ts
@@ -0,0 +1,8 @@
+import type { Inferno } from 'inferno';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    type Element = Inferno.InfernoElement;
+  }
+}
diff --git a/packages/devextreme/js/__internal/core/r1/component_wrapper.ts b/packages/devextreme/js/__internal/core/r1/component_wrapper.ts
@@ -234,7 +234,7 @@ export class ComponentWrapper extends DOMComponent<ComponentWrapperProps> {
     super._dispose();
   }
 
-  get elementAttr(): HTMLAttributes<unknown> {
+  get elementAttr(): Record<string, unknown> {
     const element = this.$element()[0];
     if (!this._elementAttr) {
       const { attributes } = element;
@@ -356,7 +356,7 @@ export class ComponentWrapper extends DOMComponent<ComponentWrapperProps> {
       ...this.elementAttr,
       ...elementAttr,
       className: [
-        ...(this.elementAttr.class ?? '').split(' '),
+        ...(this.elementAttr.class as string ?? '').split(' '),
         ...(elementAttr?.class ?? '').split(' '),
       ]
         .filter((c, i, a) => c && a.indexOf(c) === i)
diff --git a/packages/devextreme/js/__internal/core/r1/runtime/inferno/base_component.ts b/packages/devextreme/js/__internal/core/r1/runtime/inferno/base_component.ts
@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable spellcheck/spell-checker */
+
 /* eslint-disable max-classes-per-file */
-import { Component, findDOMfromVNode } from 'inferno';
+import { Component, findDOMFromVNode } from 'inferno';
 
 import type { InfernoEffect } from './effect';
 import { InfernoEffectHost } from './effect_host';
@@ -134,7 +134,7 @@ export class InfernoWrapperComponent<
   }
 
   componentDidMount(): void {
-    const el = findDOMfromVNode(this.$LI, true) as ElementWithCustomClassesData;
+    const el = findDOMFromVNode(this.$LI, true) as ElementWithCustomClassesData;
     this.vDomElement = el;
     super.componentDidMount();
     el.dxClasses = el.dxClasses || {
diff --git a/packages/devextreme/js/__internal/core/r1/runtime/inferno/mocked/hydrate.ts b/packages/devextreme/js/__internal/core/r1/runtime/inferno/mocked/hydrate.ts
@@ -20,7 +20,7 @@
 /* eslint-disable simple-import-sort/imports */
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 import {
-  _CI, _HI, _M, _MCCC, _ME, _MFCC, _MP, _MR, EMPTY_OBJ, render, VNode, _RFC as renderFunctionalComponent,
+  _CI, _HI, _M, _MCCC, _ME, _MFCC, _MP, _MR, EMPTY_OBJ, render, VNode, _RFC as renderFunctionalComponent, AnimationQueues,
 } from 'inferno';
 import {
   isFunction, isInvalid, isNull, isNullOrUndef, throwError,
@@ -63,7 +63,7 @@ function isSamePropsInnerHTML(dom: Element, props: any): boolean {
   return Boolean(props && props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html && isSameInnerHTML(dom, props.dangerouslySetInnerHTML.__html));
 }
 
-function hydrateComponent(vNode: VNode, parentDOM: Element, dom: Element, context: any, isSVG: boolean, isClass: boolean, lifecycle: Function[]) {
+function hydrateComponent(vNode: VNode, parentDOM: Element, dom: Element, context: any, isSVG: boolean, isClass: boolean, lifecycle: (() => void)[], animations: AnimationQueues) {
   const type = vNode.type as Function;
   const ref = vNode.ref;
   const props = vNode.props || EMPTY_OBJ;
@@ -73,19 +73,19 @@ function hydrateComponent(vNode: VNode, parentDOM: Element, dom: Element, contex
     const instance = _CI(vNode, type, props, context, isSVG, lifecycle);
     const input = instance.$LI;
 
-    currentNode = hydrateVNode(input, parentDOM, dom, instance.$CX, isSVG, lifecycle);
-    _MCCC(ref, instance, lifecycle);
+    currentNode = hydrateVNode(input, parentDOM, dom, instance.$CX, isSVG, lifecycle, animations);
+    _MCCC(ref, instance, lifecycle, animations);
   } else {
     const input = _HI(renderFunctionalComponent(vNode, context));
-    currentNode = hydrateVNode(input, parentDOM, dom, context, isSVG, lifecycle);
+    currentNode = hydrateVNode(input, parentDOM, dom, context, isSVG, lifecycle, animations);
     vNode.children = input;
-    _MFCC(vNode, lifecycle);
+    _MFCC(vNode, lifecycle, animations);
   }
 
   return currentNode;
 }
 
-function hydrateChildren(parentVNode: VNode, parentNode: any, currentNode: any, context: any, isSVG: boolean, lifecycle: Function[]) {
+function hydrateChildren(parentVNode: VNode, parentNode: any, currentNode: any, context: any, isSVG: boolean, lifecycle: (() => void)[], animations: AnimationQueues) {
   const childFlags = parentVNode.childFlags as unknown as ChildFlags;
   const children = parentVNode.children;
   const props = parentVNode.props;
@@ -94,9 +94,9 @@ function hydrateChildren(parentVNode: VNode, parentNode: any, currentNode: any,
   if (childFlags !== ChildFlags.HasInvalidChildren) {
     if (childFlags === ChildFlags.HasVNodeChildren) {
       if (isNull(currentNode)) {
-        _M(children as VNode, parentNode, context, isSVG, null, lifecycle);
+        _M(children as VNode, parentNode, context, isSVG, null, lifecycle, animations);
       } else {
-        currentNode = hydrateVNode(children as VNode, parentNode, currentNode as Element, context, isSVG, lifecycle);
+        currentNode = hydrateVNode(children as VNode, parentNode, currentNode as Element, context, isSVG, lifecycle, animations);
         currentNode = currentNode ? currentNode.nextSibling : null;
       }
     } else if (childFlags === ChildFlags.HasTextChildren) {
@@ -115,9 +115,9 @@ function hydrateChildren(parentVNode: VNode, parentNode: any, currentNode: any,
         const child = (children as VNode[])[i];
 
         if (isNull(currentNode) || (prevVNodeIsTextNode && (child.flags & VNodeFlags.Text) > 0)) {
-          _M(child as VNode, parentNode, context, isSVG, currentNode, lifecycle);
+          _M(child as VNode, parentNode, context, isSVG, currentNode, lifecycle, animations);
         } else {
-          currentNode = hydrateVNode(child as VNode, parentNode, currentNode as Element, context, isSVG, lifecycle);
+          currentNode = hydrateVNode(child as VNode, parentNode, currentNode as Element, context, isSVG, lifecycle, animations);
           currentNode = currentNode ? currentNode.nextSibling : null;
         }
 
@@ -144,23 +144,23 @@ function hydrateChildren(parentVNode: VNode, parentNode: any, currentNode: any,
   }
 }
 
-function hydrateElement(vNode: VNode, parentDOM: Element, dom: Element, context: Object, isSVG: boolean, lifecycle: Function[]) {
+function hydrateElement(vNode: VNode, parentDOM: Element, dom: Element, context, isSVG: boolean, lifecycle: (() => void)[], animations: AnimationQueues) {
   const props = vNode.props;
   const className = vNode.className;
   const flags = vNode.flags;
   const ref = vNode.ref;
 
   isSVG = isSVG || (flags & VNodeFlags.SvgElement) > 0;
   if (dom.nodeType !== 1) {
-    _ME(vNode, null, context, isSVG, null, lifecycle);
+    _ME(vNode, null, context, isSVG, null, lifecycle, animations);
     parentDOM.replaceChild(vNode.dom as Element, dom);
   } else {
     vNode.dom = dom;
 
-    hydrateChildren(vNode, dom, dom.firstChild, context, isSVG, lifecycle);
+    hydrateChildren(vNode, dom, dom.firstChild, context, isSVG, lifecycle, animations);
 
     if (!isNull(props)) {
-      _MP(vNode, flags, props, dom, isSVG);
+      _MP(vNode, flags, props, dom, isSVG, animations);
     }
     if (isNullOrUndef(className)) {
       if (dom.className !== '') {
@@ -192,7 +192,7 @@ function hydrateText(vNode: VNode, parentDOM: Element, dom: Element) {
   return vNode.dom;
 }
 
-function hydrateFragment(vNode: VNode, parentDOM: Element, dom: Element, context: any, isSVG: boolean, lifecycle: Function[]): Element {
+function hydrateFragment(vNode: VNode, parentDOM: Element, dom: Element, context: any, isSVG: boolean, lifecycle: (() => void)[], animations: AnimationQueues): Element {
   const children = vNode.children;
 
   if ((vNode.childFlags as unknown as ChildFlags) === ChildFlags.HasVNodeChildren) {
@@ -201,19 +201,19 @@ function hydrateFragment(vNode: VNode, parentDOM: Element, dom: Element, context
     return (children as VNode).dom as Element;
   }
 
-  hydrateChildren(vNode, parentDOM, dom, context, isSVG, lifecycle);
+  hydrateChildren(vNode, parentDOM, dom, context, isSVG, lifecycle, animations);
 
   return findLastDOMFromVNode((children as VNode[])[(children as VNode[]).length - 1]) as Element;
 }
 
-function hydrateVNode(vNode: VNode, parentDOM: Element, currentDom: Element, context: Object, isSVG: boolean, lifecycle: Function[]): Element | null {
+function hydrateVNode(vNode: VNode, parentDOM: Element, currentDom: Element, context: Object, isSVG: boolean, lifecycle: (() => void)[], animations: AnimationQueues): Element | null {
   const flags = (vNode.flags |= VNodeFlags.InUse);
 
   if (flags & VNodeFlags.Component) {
-    return hydrateComponent(vNode, parentDOM, currentDom, context, isSVG, (flags & VNodeFlags.ComponentClass) > 0, lifecycle);
+    return hydrateComponent(vNode, parentDOM, currentDom, context, isSVG, (flags & VNodeFlags.ComponentClass) > 0, lifecycle, animations);
   }
   if (flags & VNodeFlags.Element) {
-    return hydrateElement(vNode, parentDOM, currentDom, context, isSVG, lifecycle);
+    return hydrateElement(vNode, parentDOM, currentDom, context, isSVG, lifecycle, animations);
   }
   if (flags & VNodeFlags.Text) {
     return hydrateText(vNode, parentDOM, currentDom);
@@ -222,24 +222,25 @@ function hydrateVNode(vNode: VNode, parentDOM: Element, currentDom: Element, con
     return (vNode.dom = currentDom);
   }
   if (flags & VNodeFlags.Fragment) {
-    return hydrateFragment(vNode, parentDOM, currentDom, context, isSVG, lifecycle);
+    return hydrateFragment(vNode, parentDOM, currentDom, context, isSVG, lifecycle, animations);
   }
 
   throwError();
 
   return null;
 }
 
-export function hydrate(input: any, parentDOM: Element, callback?: Function) {
+export function hydrate(input: any, parentDOM: Element, callback?: () => void) {
   let dom = parentDOM.firstChild as Element;
 
   if (isNull(dom)) {
     render(input, parentDOM, callback);
   } else {
-    const lifecycle: Function[] = [];
+    const lifecycle: (() => void)[] = [];
+    const animations = new AnimationQueues();
 
     if (!isInvalid(input)) {
-      dom = hydrateVNode(input, parentDOM, dom, {}, false, lifecycle) as Element;
+      dom = hydrateVNode(input, parentDOM, dom, {}, false, lifecycle, animations) as Element;
     }
     // clear any other DOM nodes, there should be only a single entry for the root
     while (dom && (dom = dom.nextSibling as Element)) {
diff --git a/packages/devextreme/js/__internal/core/r1/template_wrapper.ts b/packages/devextreme/js/__internal/core/r1/template_wrapper.ts
@@ -7,8 +7,7 @@ import type { FunctionTemplate } from '@js/core/templates/function_template';
 import { replaceWith } from '@js/core/utils/dom';
 import { isDefined } from '@js/core/utils/type';
 import { InfernoComponent, InfernoEffect } from '@ts/core/r1/runtime/inferno/index';
-// eslint-disable-next-line spellcheck/spell-checker
-import { findDOMfromVNode } from 'inferno';
+import { findDOMFromVNode } from 'inferno';
 
 import { shallowEquals } from './utils/shallow_equals';
 
@@ -113,8 +112,7 @@ export class TemplateWrapper extends InfernoComponent<TemplateWrapperProps> {
   }
 
   renderTemplate(): () => void {
-    // eslint-disable-next-line spellcheck/spell-checker
-    const node = findDOMfromVNode(this.$LI, true);
+    const node = findDOMFromVNode(this.$LI, true);
 
     /* istanbul ignore next */
     if (!node?.parentNode) {
diff --git a/packages/devextreme/js/__internal/core/r1/types.ts b/packages/devextreme/js/__internal/core/r1/types.ts
@@ -1,5 +1,7 @@
 import type * as CSS from 'csstype';
-import type { Component, StatelessComponent, VNode } from 'inferno';
+import type {
+  ComponentType, VNode,
+} from 'inferno';
 
 import type { TemplateModel } from './template_wrapper';
 
@@ -24,9 +26,6 @@ export interface PropsWithChildren {
   children?: JSX.Element | (JSX.Element | undefined | false | null)[];
 }
 
-// TODO: replace by import from inferno after update to inferno 8
-export type ComponentType<P = {}> = typeof Component<P> | StatelessComponent<P>;
-
 export interface RefObject<T> {
   current: T | null;
 }
diff --git a/packages/devextreme/js/__internal/scheduler/r1/components/base/row.tsx b/packages/devextreme/js/__internal/scheduler/r1/components/base/row.tsx
@@ -47,9 +47,9 @@ export class Row extends BaseInfernoComponent<RowProps> {
           hasLeftVirtualCell
           && leftVirtualCellCount != null
           && splitNumber(leftVirtualCellCount, MAX_COL_SPAN).map(
-            // @ts-ignore
-            (colSpan, index) => <VirtualCell
-              className={`left-virtual-cell-${index}`}
+            (colSpan) => <VirtualCell
+              // TODO: do we need this?
+              // className={`left-virtual-cell-${index}`}
               width={leftVirtualCellWidth * (colSpan / leftVirtualCellCount)}
               colSpan={colSpan}
               isHeaderCell={isHeaderRow ?? VirtualCellDefaultProps.isHeaderCell}
@@ -61,9 +61,9 @@ export class Row extends BaseInfernoComponent<RowProps> {
           hasRightVirtualCell
           && rightVirtualCellCount != null
           && splitNumber(rightVirtualCellCount, MAX_COL_SPAN).map(
-            // @ts-ignore
-            (colSpan, index) => <VirtualCell
-              className={`right-virtual-cell-${index}`}
+            (colSpan) => <VirtualCell
+              // TODO: do we need this?
+              // className={`right-virtual-cell-${index}`}
               width={rightVirtualCellWidth * (colSpan / rightVirtualCellCount)}
               colSpan={colSpan}
               isHeaderCell={isHeaderRow ?? VirtualCellDefaultProps.isHeaderCell}
diff --git a/packages/devextreme/js/__internal/ui/m_track_bar.ts b/packages/devextreme/js/__internal/ui/m_track_bar.ts
@@ -108,7 +108,7 @@ class TrackBar<
     this._currentRatio = ratio;
   }
 
-  _rangeStylesConfig(): CSSProperties {
+  _rangeStylesConfig(): Record<string, unknown> {
     return { width: `${this._currentRatio * 100}%` };
   }
 
diff --git a/packages/devextreme/package.json b/packages/devextreme/package.json
@@ -32,9 +32,9 @@
     "devexpress-diagram": "catalog:",
     "devexpress-gantt": "catalog:",
     "devextreme-quill": "1.7.2",
-    "inferno": "^7.4.9",
-    "inferno-hydrate": "^7.4.9",
-    "inferno-create-element": "^7.4.9",
+    "inferno": "catalog:",
+    "inferno-hydrate": "catalog:",
+    "inferno-create-element": "catalog:",
     "jszip": "^3.10.1",
     "rrule": "^2.7.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
