WIP. remake devextreme build to produce ESM lib package

Author: GoodDayForSurf

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

@@ -0,0 +1,70 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const TS_OUTPUT_BASE_DIR = 'artifacts/dist_ts';
+
+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 = new RegExp(TS_OUTPUT_BASE_DIR)
+
+                if (currentFile) {
+                    const currentDir = path.dirname(currentFile);
+                    const resolvedPath = path.resolve(currentDir, value).replace(distPathRegExp,'js');
+
+                    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;
+                        }
+                    }
+
+                    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;
+                            }
+                        }
+                    }
+                }
+
+                source.value = value + '.js';
+            }
+        }
+    };
+};
+

packages/devextreme/build/gulp/npm.js

@@ -15,7 +15,6 @@ const gulpRename = require('gulp-rename');
 const compressionPipes = require('./compression-pipes.js');
 const ctx = require('./context.js');
 const env = require('./env-variables.js');
-const fixImports = require('./fix-imports-path');
 const dataUri = require('./gulp-data-uri').gulpPipe;
 const headerPipes = require('./header-pipes.js');
 const { packageDir, packageDistDir, isEsmPackage, stringSrc, devextremeDistDir } = require('./utils');
@@ -166,7 +165,6 @@ function collectExports(baseDir) {
         const packageJsonPath = path.join(currentDir, 'package.json');
 
         if (fs.existsSync(packageJsonPath) && !/(cjs|esm)$/.test(currentDir)) {
-            console.log('----packageJsonPath------>',currentDir)
             try {
                 const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
                 const exportEntry = {};
@@ -219,7 +217,7 @@ gulp.task('npm-dist', () => gulp
     .pipe(gulp.dest(distPath))
 );
 
-gulp.task('patch-as-esm-lib', () => gulp
+gulp.task('add-exports-to-package-json', () => gulp
     .src(`${packagePath}/package.json`)
     .pipe(
         through.obj((file, enc, callback) => {
@@ -233,11 +231,6 @@ gulp.task('patch-as-esm-lib', () => gulp
     .pipe(gulp.dest(packagePath))
 );
 
-gulp.task('fix-ext-in-imports', function(done) {
-    fixImports.addExtensionToImportsPath(`${packagePath}/esm`);
-    done();
-});
-
 const scssDir = `${packagePath}/scss`;
 
 gulp.task('npm-sass', gulp.series(
@@ -257,5 +250,5 @@ gulp.task('npm-sass', gulp.series(
     )
 ));
 
-gulp.task('npm', gulp.series('npm-sources', 'npm-dist', 'ts-check-public-modules', 'npm-sass'/*, ''patch-as-esm-lib', fix-ext-in-imports'*/));
+gulp.task('npm', gulp.series('npm-sources', 'npm-dist', 'ts-check-public-modules', 'npm-sass', 'add-exports-to-package-json'));
 

packages/devextreme/build/gulp/side-effects-finder.js

@@ -46,7 +46,7 @@ class SideEffectFinder {
             .forEach((str) => {
                 let importPath = str.match(relativePathRegExp)[0].replace(/(^['"]|['"]$)/g, '');
 
-                importPath = path.join(path.dirname(modulePath), importPath) + '.js';
+                importPath = path.join(path.dirname(modulePath), importPath);
 
                 if(!fs.existsSync(importPath)) {
                     importPath = importPath.replace(/\.js$/, '/index.js');

packages/devextreme/build/gulp/transpile-config.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const addImportExtensions = require('./babel-plugin-add-import-extensions');
+
 const common = {
     plugins: [
         ['babel-plugin-inferno', { 'imports': true }],
@@ -33,11 +35,12 @@ module.exports = {
     esm: Object.assign({}, common, {
         // eslint-disable-next-line spellcheck/spell-checker
         presets: [['@babel/preset-env', { targets, modules: false }]],
-        plugins: common.plugins.concat(
-            [['@babel/plugin-transform-runtime', {
+        plugins: common.plugins.concat([
+            addImportExtensions,
+            ['@babel/plugin-transform-runtime', {
                 useESModules: true,
                 version: '7.5.0' // https://github.com/babel/babel/issues/10261#issuecomment-514687857
-            }]]
-        )
+            }]
+        ])
     })
 };