Build devextreme as modern node format library (with fixed exports)

apps/demos/Demos/Charts/MultipleAxes/Vue/App.vue

@@ -70,7 +70,7 @@ function customizeTooltip(pointInfo: DxChartTypes.PointInfo) {
   const items = pointInfo.valueText?.split('\n');
   const color = pointInfo.point?.getColor();
 
-  items?.forEach((item, index) => {
+  items?.forEach((item: string, index: number) => {
     if (item.indexOf(pointInfo.seriesName) === 0) {
       const element = document.createElement('span');
 

apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue

@@ -46,7 +46,7 @@ const textExpression = 'Full_Name';
 function onContentReady(e: DxDiagramTypes.ContentReadyEvent) {
   const diagram = e.component;
   // preselect some shape
-  const items = diagram.getItems().filter(({ itemType, dataItem }) => itemType === 'shape' && (dataItem[textExpression] === 'Greta Sims'));
+  const items = diagram.getItems().filter(({ itemType, dataItem }: DxDiagramTypes.Item) => itemType === 'shape' && (dataItem[textExpression] === 'Greta Sims'));
   if (items.length > 0) {
     diagram.setSelectedItems(items);
     diagram.scrollToItem(items[0]);
@@ -56,7 +56,7 @@ function onContentReady(e: DxDiagramTypes.ContentReadyEvent) {
 function onSelectionChanged({ items }: DxDiagramTypes.SelectionChangedEvent) {
   selectedItemNames.value = 'Nobody has been selected';
   const filteredItems = items
-    .filter((item) => item.itemType === 'shape')
+    .filter((item: DxDiagramTypes.Item) => item.itemType === 'shape')
     .map(({ text }: Record<string, any>) => text);
   if (filteredItems.length > 0) {
     selectedItemNames.value = filteredItems.join(', ');

apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue

@@ -167,7 +167,7 @@ function moveNode(
 ) {
   const fromNodeContainingArray = getNodeContainingArray(fromNode, fromItems);
   const fromIndex = fromNodeContainingArray
-    ?.findIndex((item) => item.id === fromNode.itemData?.id) || -1;
+    ?.findIndex((item: DriveItem) => item.id === fromNode.itemData?.id) || -1;
 
   if (fromIndex !== -1 && fromNodeContainingArray) {
     fromNodeContainingArray.splice(fromIndex, 1);
@@ -179,7 +179,7 @@ function moveNode(
     const toNodeContainingArray = getNodeContainingArray(toNode, toItems);
     const toIndex = toNode === null
       ? toNodeContainingArray?.length || 0
-      : toNodeContainingArray?.findIndex((item) => item.id === toNode.itemData?.id) || 0;
+      : toNodeContainingArray?.findIndex((item: DriveItem) => item.id === toNode.itemData?.id) || 0;
     toNodeContainingArray?.splice(toIndex, 0, fromNode.itemData);
   }
 }

apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue

@@ -184,7 +184,7 @@ function moveChildren(node: Node, fromDataSource: DriveItem[], toDataSource: any
     return;
   }
 
-  node.children?.forEach((child) => {
+  node.children?.forEach((child: Node) => {
     if (child.itemData?.isDirectory) {
       moveChildren(child, fromDataSource, toDataSource);
     }

packages/devextreme-angular/karma.test.shim.js

@@ -8,6 +8,6 @@ testing.TestBed.initTestEnvironment(
   browser.platformBrowserDynamicTesting(),
 );
 
-const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
+const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-)[^\.]+\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();

packages/devextreme-angular/project.json

@@ -341,9 +341,7 @@
       "options": {
         "karmaConfig": "karma.conf.js",
         "environments": [
-          "client",
-          "server",
-          "hydration"
+          "client"
         ]
       },
       "dependsOn": [
@@ -385,42 +383,6 @@
         "build:tests"
       ]
     },
-    "test:components-server": {
-      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
-      "options": {
-        "karmaConfig": "karma.conf.js",
-        "environments": [
-          "server",
-          "hydration"
-        ]
-      },
-      "dependsOn": [
-        "build:tests"
-      ],
-      "inputs": [
-        "default",
-        "test",
-        "{projectRoot}/tests/dist/**/*"
-      ]
-    },
-    "test:components-server-debug": {
-      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
-      "options": {
-        "karmaConfig": "karma.conf.js",
-        "environments": [
-          "server"
-        ],
-        "debug": true
-      },
-      "dependsOn": [
-        "build:tests"
-      ],
-      "inputs": [
-        "default",
-        "test",
-        "{projectRoot}/tests/dist/**/*"
-      ]
-    },
     "watch:test": {
       "executor": "devextreme-nx-infra-plugin:karma-multi-env",
       "options": {
@@ -444,9 +406,7 @@
       "options": {
         "karmaConfig": "karma.conf.js",
         "environments": [
-          "client",
-          "server",
-          "hydration"
+          "client"
         ]
       },
       "dependsOn": [
@@ -489,8 +449,6 @@
       "{projectRoot}/tests/**/*",
       "{projectRoot}/karma.conf.js",
       "{projectRoot}/karma.test.shim.js",
-      "{projectRoot}/karma.server.test.shim.js",
-      "{projectRoot}/karma.hydration.test.shim.js",
       "{projectRoot}/webpack.test.js",
       "{projectRoot}/tsconfig.tests.json",
       "{projectRoot}/src/**/*.spec.ts",

packages/devextreme/build/gulp/babel-plugin-add-import-extensions.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+module.exports = function addImportExtensions() {
+    return {
+        name: 'add-import-extensions',
+        visitor: {
+            'ImportDeclaration|ExportNamedDeclaration|ExportAllDeclaration'(astPath) {
+                const source = astPath.node.source;
+
+                if (!source) return;
+
+                const value = source.value;
+
+                if (!value || (!value.startsWith('./') && !value.startsWith('../'))) {
+                    return;
+                }
+
+                if (value.match(/\.(js|mjs|json|css)$/)) {
+                    return;
+                }
+
+                if (value.endsWith('/')) {
+                    source.value = value + 'index.js';
+                    return;
+                }
+
+                const currentFile = astPath.hub?.file?.opts?.filename;
+                const distPathRegExp = /artifacts[\/\\]dist_ts/;
+
+                if (currentFile) {
+                    const currentDir = path.dirname(currentFile);
+                    const resolvedPath = path.resolve(currentDir, value).replace(distPathRegExp,'js');
+
+                    if (fs.existsSync(resolvedPath)) {
+                        const stat = fs.statSync(resolvedPath);
+
+                        if (stat.isDirectory()) {
+                            const indexPath = path.join(resolvedPath, 'index.js');
+
+                            if (fs.existsSync(indexPath)) {
+                                source.value = value + '/index.js';
+                                return;
+                            }
+                        }
+                    }
+
+                    let jsFilePath = resolvedPath + '.js';
+
+                    if ( fs.existsSync(jsFilePath)
+                        || fs.existsSync(jsFilePath = resolvedPath + '.ts')
+                    ) {
+                        const stat = fs.statSync(jsFilePath);
+
+                        if (stat.isFile()) {
+                            source.value = value + '.js';
+                            return;
+                        }
+                    }
+                }
+
+                source.value = value + '.js';
+            }
+        }
+    };
+};
+