React Wrappers: New Template Engine (#25781)

DevExpress · Nov 4, 2023 · 44a3e66 · 44a3e66
1 parent 7ccaca0
commit 44a3e66
Show file tree

Hide file tree

Showing 26 changed files with 537 additions and 868 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/devextreme-react/.eslintrc b/packages/devextreme-react/.eslintrc
@@ -43,7 +43,7 @@
     },
     "overrides": [
         {
-            "files": [ "*.ts" ],
+            "files": [ "*.ts", "*.tsx" ],
             "rules": {
                 "import/extensions": "warn",
                 "max-len": ["error", { "code": 150 }],

diff --git a/packages/devextreme-react/jest.config.js b/packages/devextreme-react/jest.config.js
@@ -7,4 +7,10 @@ module.exports = {
   ...base,
   name: packageName,
   displayName: packageName,
+  testPathIgnorePatterns: [
+    "component.test.tsx",
+    "nested-option.test.tsx",
+    "props-updating.test.tsx",
+    "template.test.tsx",
+  ],
 };
diff --git a/packages/devextreme-react/package.json b/packages/devextreme-react/package.json
@@ -35,8 +35,8 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.0.1",
     "@types/jest": "^26.0.24",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "~18.0.0",
+    "@types/react-dom": "~18.0.0",
     "del": "^3.0.0",
     "gulp": "^4.0.2",
     "gulp-header": "^2.0.9",

diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx
@@ -10,6 +10,8 @@ import {
   Widget,
   WidgetClass,
 } from './test-component';
+
+// @ts-ignore: Non-existent module
 import { TemplatesRenderer } from '../templates-renderer';
 
 jest.useFakeTimers();
@@ -160,7 +162,6 @@ describe('rendering', () => {
       <TestComponent />,
     );
 
-    // @ts-ignore
     expect(WidgetClass.mock.calls[0][1]).toEqual({ templatesRenderAsynchronously: true });
   });
 
@@ -193,7 +194,6 @@ describe('rendering', () => {
       </TestComponent>,
     );
 
-    // @ts-ignore
     expect(WidgetClass.mock.calls[1][1].children).toBeUndefined();
   });
 });

diff --git a/packages/devextreme-react/src/core/__tests__/config.test.tsx b/packages/devextreme-react/src/core/__tests__/config.test.tsx
@@ -50,8 +50,7 @@ describe('useLegacyTemplateEngine', () => {
         <div ref={ref} />
       </ComponentWithTemplates>,
     );
-
-    // @ts-ignore
+
     const { render } = WidgetClass.mock.calls[0][1].integrationOptions.templates.item;
 
     act(() => {
@@ -88,7 +87,6 @@ describe('useLegacyTemplateEngine', () => {
       </ComponentWithTemplates>,
     );
 
-    // @ts-ignore
     const { render } = WidgetClass.mock.calls[0][1].integrationOptions.templates.item;
 
     act(() => render({

diff --git a/packages/devextreme-react/src/core/__tests__/dx-template.test.tsx b/packages/devextreme-react/src/core/__tests__/dx-template.test.tsx
diff --git a/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx b/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx
@@ -9,12 +9,13 @@ import {
   Widget,
   WidgetClass,
 } from './test-component';
+import { IHtmlOptions } from '../component-base';
 
-const ExtensionWidgetClass = jest.fn(() => Widget);
+const ExtensionWidgetClass = jest.fn<typeof Widget, any[]>(() => Widget);
 
 class TestExtensionComponent<P extends HTMLElement = HTMLElement> extends ExtensionComponent<P> {
   constructor(props: P) {
-    super(props);
+    super(props as P & IHtmlOptions);
 
     this._WidgetClass = ExtensionWidgetClass;
   }
@@ -57,7 +58,6 @@ it('creates widget on componentDidMount inside another component on same element
   );
 
   expect(ExtensionWidgetClass).toHaveBeenCalledTimes(1);
-  // @ts-ignore
   expect(ExtensionWidgetClass.mock.calls[0][0]).toBe(WidgetClass.mock.calls[0][0]);
 });
 
@@ -78,11 +78,9 @@ it('pulls options from a single nested component', () => {
     </TestComponent>,
   );
 
-  // @ts-ignore
   const options = ExtensionWidgetClass.mock.calls[0][1];
 
   expect(options).toHaveProperty('option1');
-  // @ts-ignore
   expect(options.option1).toMatchObject({
     a: 123,
   });

diff --git a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
@@ -1,18 +1,17 @@
-// @ts-nocheck
 /* eslint-disable max-classes-per-file */
 import { render, cleanup } from '@testing-library/react';
 import * as React from 'react';
-import { Component } from '../component';
+import { Component, IHtmlOptions } from '../component';
 import ConfigurationComponent from '../nested-option';
 import { TestComponent, Widget, WidgetClass } from './test-component';
 
 jest.useFakeTimers();
 
-class NestedComponent extends ConfigurationComponent<{ a: number }> {
+class NestedComponent extends ConfigurationComponent<{ a: number } & React.PropsWithChildren> {
   public static OptionName = 'option';
 }
 
-class NestedComponentWithPredfeinedProps extends ConfigurationComponent<{ a: number }> {
+class NestedComponentWithPredfeinedProps extends ConfigurationComponent<{ a: number } & React.PropsWithChildren> {
   public static OptionName = 'option';
 
   public static PredefinedProps = {
@@ -170,7 +169,7 @@ describe('nested option', () => {
   });
 
   it('is pulled according to expectations', () => {
-    class TestComponentWithExpectation<P = any> extends Component<P> {
+    class TestComponentWithExpectation<P = any> extends Component<P & IHtmlOptions> {
       protected _expectedChildren = {
         option: {
           optionName: 'expectedItemOptions',
@@ -505,7 +504,7 @@ describe('nested sub-option', () => {
   });
 
   it('is pulled according to expectations', () => {
-    class NestedComponentWithExpectations extends ConfigurationComponent<{ a: number }> {
+    class NestedComponentWithExpectations extends ConfigurationComponent<{ a: number } & React.PropsWithChildren> {
       public static OptionName = 'option';
 
       public static ExpectedChildren = {