feat: support ES module (#3595)

* Merge with "migrate-to-esm" branch

* Add plugin to .babelrc

* Reanimate grid/scheduler material-ui unit tests

* Update material import paths

* Decrease a number of changes

* Fix lint

* Revert redundant changes

* Revert exports

* Revert grid-exporter-core changes

* test update grid-exporter-api

* fix site build

* Revert "test update grid-exporter-api"

This reverts commit f26012d.

* Fix build api in dx-react-grid-export package

* Rework getting paths base on import.meta.url

Co-authored-by: Lykoi18 <aiden.ghost666@gmail.com>
Co-authored-by: Shpileva Yuliya <krijovnick@gmail.com>

.eslintrc.json

@@ -7,6 +7,7 @@
   ],
   "rules": {
     "arrow-parens": [2, "as-needed", { "requireForBlockBody": true }],
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "import/extensions": "off"
   }
 }

babel.config.js → babel.config.json

@@ -1,6 +1,11 @@
-module.exports = {
+{
   "presets": [
-    [ "@babel/preset-env", { "modules": false, "targets": { "browsers": ["last 2 versions"] } } ],
+    [
+      "@babel/preset-env",
+      {
+        "targets": { "node": "current" }
+      }
+    ],
     "@babel/preset-react"
   ],
   "plugins": [

gulpfile.js

@@ -1,8 +1,7 @@
-var gulp = require('gulp'),
-    runSequence = require("run-sequence"),
-    clean = require('gulp-clean'),
-    rename = require('gulp-rename'),
-    intercept = require('gulp-intercept');
+import gulp from 'gulp';
+import clean from 'gulp-clean';
+import rename from 'gulp-rename';
+import intercept from 'gulp-intercept';
 
 var distPath = 'site/';
 var versionTag = process.env.VERSION_TAG;

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   projects: [
     'packages/dx-chart-core/',
     'packages/dx-core/jest.config.js',
@@ -21,5 +21,5 @@ module.exports = {
     'packages/dx-vue-grid/jest.config.js',
     'packages/dx-vue-grid-bootstrap4/jest.config.js',
     'packages/dx-vue-grid-demos/jest.config.js',
-  ]
-}
+  ],
+};

package.json

@@ -9,6 +9,7 @@
     "type": "git",
     "url": "git+https://github.com/DevExpress/devextreme-reactive.git"
   },
+  "type": "module",
   "license": "SEE LICENSE IN README.md",
   "devDependencies": {
     "@microsoft/api-extractor": "7.20.0",

packages/dx-chart-core/jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   transform: {

packages/dx-chart-core/merge-dts.js

@@ -1,3 +1,6 @@
-const buildDefinitions = require('../../scripts/merge-dts');
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
 
-buildDefinitions(__dirname);
+import buildDefinitions from '../../scripts/merge-dts.js';
+
+buildDefinitions(dirname(fileURLToPath(import.meta.url)));

packages/dx-chart-core/package.json

@@ -14,6 +14,14 @@
     "type": "git",
     "url": "git+https://github.com/DevExpress/devextreme-reactive.git"
   },
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/dx-chart-core.umd.cjs",
+      "import": "./dist/dx-chart-core.es.js",
+      "default": "./dist/dx-chart-core.es.js"
+    }
+  },
   "keywords": [
     "chart",
     "d3",
@@ -23,7 +31,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/dx-chart-core.umd.js",
+  "main": "dist/dx-chart-core.umd.cjs",
   "module": "dist/dx-chart-core.es.js",
   "globalName": "DevExpress.DXChartCore",
   "files": [

packages/dx-core/jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

packages/dx-core/merge-dts.js

@@ -1,3 +1,6 @@
-const buildDefinitions = require('../../scripts/merge-dts');
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
 
-buildDefinitions(__dirname);
+import buildDefinitions from '../../scripts/merge-dts.js';
+
+buildDefinitions(dirname(fileURLToPath(import.meta.url)));

packages/dx-core/package.json

@@ -14,6 +14,14 @@
     "type": "git",
     "url": "git+https://github.com/DevExpress/devextreme-reactive.git"
   },
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/dx-core.umd.cjs",
+      "module": "./dist/dx-core.es.js",
+      "default": "./dist/dx-core.es.js"
+    }
+  },
   "keywords": [
     "pluggable",
     "reactive",
@@ -23,7 +31,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/dx-core.umd.js",
+  "main": "dist/dx-core.umd.cjs",
   "module": "dist/dx-core.es.js",
   "globalName": "DevExpress.DXCore",
   "files": [

packages/dx-demo-shell/.eslintrc.json

@@ -1,10 +1,10 @@
 {
-    "extends": "../../.eslintrc.react.json",
-    "env": {
-      "browser": true
-    },
-    "rules": {
-        "filenames/match-regex": [2, "^[a-z-\\.]+$"],
-        "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"]
-    }
+  "extends": "../../.eslintrc.react.json",
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "filenames/match-regex": [2, "^[a-z-\\.]+$"],
+    "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"]
+  }
 }

packages/dx-demo-shell/generate-demos.js

@@ -1,25 +1,21 @@
-const fs = require('fs');
-const path = require('path');
-const {
+import fs from 'fs';
+import path from 'path';
+
+import {
   generateThemeFilesRegistry,
   generateDataHelpersRegistry,
-} = require('./scripts/helper-files-parser');
-// const mustache = require('mustache');
-// const {
-//   overrideFileIfChanged, getFileContents, writeObjectToFile,
-// } = require('./scripts/fs-utils');
-const { getCurrentProductName } = require('./scripts/utils');
-const {
+} from './scripts/helper-files-parser.js';
+import { getCurrentProductName } from './scripts/utils.js';
+import {
   loadDemosToGenerate, generateDemos, removePendingFiles,
-} = require('./scripts/demos-generator');
-const { generateDemoRegistry } = require('./scripts/registry-generator');
+} from './scripts/demos-generator.js';
+import { generateDemoRegistry } from './scripts/registry-generator.js';
 
 const THEMES_FOLDER = './src/theme-sources';
 
-
 const DEMOS_REGISTRY_FILE = './src/demo-registry.js';
 
-const reactCommonPath = `../dx-react-common/src`;
+const reactCommonPath = '../dx-react-common/src';
 const productDemosFile = productName => `${reactCommonPath}/${productName}-demo-registry.js`;
 const productDemoDataFile = productName => `${reactCommonPath}/${productName}-demo-data-registry.js`;
 const productThemeComponentsFile = productName => (

packages/dx-demo-shell/package.json

@@ -8,6 +8,7 @@
     "url": "https://www.devexpress.com/"
   },
   "license": "SEE LICENSE IN README.md",
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "styles": "dist/index.css",

packages/dx-demo-shell/scripts/demos-generator.js

@@ -1,9 +1,8 @@
-const fs = require('fs');
-const path = require('path');
-const mustache = require('mustache');
-const {
-  overrideFileIfChanged, getFileContents, writeObjectToFile,
-} = require('./fs-utils');
+import fs from 'fs';
+import path from 'path';
+import mustache from 'mustache';
+
+import { overrideFileIfChanged } from './fs-utils.js';
 
 const DEMOS_FOLDER = './src/demo-sources';
 const THEMES_FOLDER = './src/theme-sources';
@@ -38,7 +37,8 @@ const cancelFileRemoving = (filename) => {
     filesToRemove.splice(removeIndex, 1);
   }
 };
-const removePendingFiles = () => {
+
+export const removePendingFiles = () => {
   filesToRemove.forEach(file => fs.unlinkSync(file));
 };
 
@@ -51,7 +51,7 @@ const createFromTemplate = (sourceFilename, outputFilename, data) => {
   cancelFileRemoving(outputFilename);
 };
 
-const loadDemosToGenerate = (themeNames) => {
+export const loadDemosToGenerate = (themeNames) => {
   const demos = [];
   fs.readdirSync(DEMOS_FOLDER).forEach((sectionName) => {
     if (sectionName.startsWith('.')) return;
@@ -162,7 +162,7 @@ const processPartialContent = (content) => {
   return bag;
 };
 
-const generateDemos = (demos) => {
+export const generateDemos = (demos) => {
   demos.forEach(({
     sectionName,
     demoName,
@@ -217,9 +217,3 @@ const generateDemos = (demos) => {
     }
   });
 };
-
-module.exports = {
-  loadDemosToGenerate,
-  generateDemos,
-  removePendingFiles,
-};

packages/dx-demo-shell/scripts/fs-utils.js

@@ -1,7 +1,6 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
 
-const overrideFileIfChanged = (filename, data) => {
+export const overrideFileIfChanged = (filename, data) => {
   let existingData;
   if (fs.existsSync(filename)) {
     existingData = fs.readFileSync(filename, 'utf-8');
@@ -11,7 +10,7 @@ const overrideFileIfChanged = (filename, data) => {
   }
 };
 const indent = level => ' '.repeat(level * 2);
-const getFileContents = filePath => JSON.stringify(String(fs.readFileSync(filePath, 'utf-8')));
+export const getFileContents = filePath => JSON.stringify(String(fs.readFileSync(filePath, 'utf-8')));
 
 const stringifyEntity = (entity, level) => {
   const type = typeof entity;
@@ -45,16 +44,9 @@ const stringifyObject = (obj, level) => Object.keys(obj)
 
 const stringify = obj => stringifyEntity(obj, 0);
 
-const writeObjectToFile = (filePath, obj, varName) => {
+export const writeObjectToFile = (filePath, obj, varName) => {
   overrideFileIfChanged(
     filePath,
-    '/* eslint-disable */\n\n'
-    + `module.exports.${varName} = ${stringify(obj)};\n`,
+    `export const ${varName} = ${stringify(obj)};\n`,
   );
 };
-
-module.exports = {
-  overrideFileIfChanged,
-  getFileContents,
-  writeObjectToFile,
-};

packages/dx-demo-shell/scripts/helper-files-parser.js

@@ -1,9 +1,8 @@
-const fs = require('fs');
-const path = require('path');
-const {
-  getFileContents, writeObjectToFile,
-} = require('./fs-utils');
-const { getCurrentProductName } = require('./utils');
+import fs from 'fs';
+import path from 'path';
+
+import { getFileContents, writeObjectToFile } from './fs-utils.js';
+import { getCurrentProductName } from './utils.js';
 
 const THEME_SOURCES_FOLDER = './src/theme-sources';
 const DEMO_DATA_FOLDER = './src/demo-data';
@@ -63,7 +62,7 @@ const getDepsRecursive = (name, deps = []) => {
   return deps;
 };
 
-const parseHelperFiles = (source) => {
+export const parseHelperFiles = (source) => {
   const imports = source.split('import');
   const themeComponents = quotify(retrieveImportFiles(
     imports, /'.+(theme-sources[^']+?[\w]+\/?[\w-]+)'/,
@@ -127,7 +126,7 @@ const generateDirRegistry = (dir) => {
   }, { deps: {}, files: {} });
 };
 
-const generateThemeFilesRegistry = (commonPath) => {
+export const generateThemeFilesRegistry = (commonPath) => {
   const helperRegistry = fs.readdirSync(THEME_SOURCES_FOLDER).reduce((themeAcc, themeName) => {
     const componentsPath = path.join(THEME_SOURCES_FOLDER, themeName, 'components');
 
@@ -153,11 +152,14 @@ const generateThemeFilesRegistry = (commonPath) => {
 };
 
 const parseDepsVersions = () => {
-  const deps = require(process.cwd() + '/package.json').dependencies;
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  const pkg = fs.readFileSync(packageJsonPath).toString();
+  const { dependencies: deps } = JSON.parse(pkg);
+
   return JSON.stringify(deps);
 };
 
-const generateDataHelpersRegistry = (commonPath) => {
+export const generateDataHelpersRegistry = (commonPath) => {
   const registry = generateDirRegistry(path.normalize(DEMO_DATA_FOLDER));
   const depsVersions = parseDepsVersions();
   writeObjectToFile(
@@ -171,11 +173,3 @@ const generateDataHelpersRegistry = (commonPath) => {
     'demoData',
   );
 };
-
-module.exports = {
-  generateThemeFilesRegistry,
-  generateDataHelpersRegistry,
-  // generateHelperFilesRegistry: () => {
-  // },
-  parseHelperFiles,
-};

packages/dx-demo-shell/scripts/registry-generator.js

@@ -1,9 +1,6 @@
-const path = require('path');
-const {
-  overrideFileIfChanged, getFileContents, writeObjectToFile,
-} = require('./fs-utils');
-const { getCurrentProductName } = require('./utils');
-const { parseHelperFiles } = require('./helper-files-parser');
+import { getFileContents, writeObjectToFile } from './fs-utils.js';
+import { getCurrentProductName } from './utils.js';
+import { parseHelperFiles } from './helper-files-parser.js';
 
 const DEMOS_FOLDER = './src/demo-sources';
 const GENERATED_SUFFIX = '.g';
@@ -19,7 +16,7 @@ const groupBy = (arr, iteratee) => arr
     return acc;
   }, {});
 
-const generateDemoRegistry = (demos, folderPath, getDemoLink) => {
+export const generateDemoRegistry = (demos, folderPath, getDemoLink) => {
   const productName = getCurrentProductName();
   const structuredDemos = groupBy(demos, element => element.sectionName);
   Object.keys(structuredDemos).forEach((sectionName) => {
@@ -55,7 +52,3 @@ const generateDemoRegistry = (demos, folderPath, getDemoLink) => {
 
   writeObjectToFile(folderPath, sections, 'demos');
 };
-
-module.exports = {
-  generateDemoRegistry,
-};

packages/dx-demo-shell/scripts/utils.js

@@ -1,11 +1,7 @@
-const path = require('path');
+import path from 'path';
 
-const getCurrentProductName = () => {
+export const getCurrentProductName = () => {
   const packageName = path.basename(path.resolve('./'));
   const productName = packageName.split('-')[2];
   return productName;
 };
-
-module.exports = {
-  getCurrentProductName,
-};