Migrate build of modules to Rollup.

.gitignore

@@ -35,4 +35,7 @@ next-app/build
 next-app/.vercel
 next-app/npm-debug.log*
 next-app/yarn-debug.log*
-next-app/yarn-error.log*
+next-app/yarn-error.log*
+
+# autogenerated .tsconfig.json
+.tsconfig.json

app/.config/constants.js

@@ -1,26 +1,15 @@
 const path = require("path");
-const { getPkgFoldersRegexMatcher } = require("./utils/packageUtils");
+const { getBabelProcessedFolders } = require("./utils/packageUtils");
 const { normSlashes } = require("./utils/configUtils");
-const escapeForRegex = require("escape-string-regexp");
 
 const makeAbsolute = pathStr => path.resolve(UUI_ROOT, pathStr)
 
 /** Assumption: the cwd is ./app/ folder. */
 const UUI_ROOT = path.resolve(normSlashes('../'));
 
-/**
- * Folders which babel should include from each module
- * @type {string[]}
- */
-const PKG_FOLDERS_BABEL_INCLUDED = ['']
-/**
- * Folders which babel should exclude from each module
- * @type {string[]}
- */
-const PKG_FOLDERS_BABEL_EXCLUDED = ['build', 'node_modules']
-//
-const BABEL_INCLUDED_REGEXP = getPkgFoldersRegexMatcher({ uuiRoot: UUI_ROOT,  folders: PKG_FOLDERS_BABEL_INCLUDED })
-const BABEL_EXCLUDED_REGEXP = getPkgFoldersRegexMatcher({ uuiRoot: UUI_ROOT,  folders: PKG_FOLDERS_BABEL_EXCLUDED })
+const BABEL_INCLUDED_REGEXP = getBabelProcessedFolders({ uuiRoot: UUI_ROOT, isIncluded: true });
+const BABEL_EXCLUDED_REGEXP = getBabelProcessedFolders({ uuiRoot: UUI_ROOT, isIncluded: false });
+
 const CSS_URL_ROOT_PATH = makeAbsolute(normSlashes('app/public'));
 
 // ignore all node_modules unless their names start with "@epam"

app/.config/craco.config.js

@@ -11,24 +11,20 @@ const FileLoader = require.resolve("file-loader");
 module.exports = function uuiConfig() {
     return {
         eslint: { enable: false }, // EsLint is disabled as of now, but it would be enabled in the future.
-        webpack: {
-            configure: configureWebpack,
+        webpack: { configure: configureWebpack },
+        devServer: config => {
+            return config;
         },
-        devServer: configureDevServer,
     };
 };
 
-function configureDevServer(config) {
-    return config;
-}
-
-function configureWebpack(config) {
+function configureWebpack(config, { paths }) {
     // reason: no such use case in UUI.
     removeRuleByTestAttr(config, /\.module\.css$/);
     // reason: .sass files are always modules in UUI
     removeRuleByTestAttr(config, /\.(scss|sass)$/);
     // reason: all .css files are not modules in UUI
-    changeRuleByTestAttr(config, /\.css$/, r => { delete r.exclude; return r; })
+    changeRuleByTestAttr(config, /\.css$/, r => { delete r.exclude; return r; });
 
     /**
      * Reason: bug in vfile package which only reproduced in webpack 5.
@@ -39,8 +35,8 @@ function configureWebpack(config) {
      */
     addRule(config, {
         test: VFILE_SPECIAL_CASE_REGEX,
-        use: [{ loader: require.resolve('imports-loader'), options: { type: 'commonjs', imports: ['single process/browser process'] } }],
-    })
+        use: [{ loader: require.resolve("imports-loader"), options: { type: "commonjs", imports: ["single process/browser process"] } }],
+    });
     /** Use older version of @svgr/webpack as a workaround for https://github.com/facebook/create-react-app/issues/11770
      * Use older version of file-loader as a workaround for https://github.com/gregberge/svgr/issues/367
      * related bug: https://github.com/gregberge/svgr/issues/727
@@ -56,9 +52,13 @@ function configureWebpack(config) {
 
     /**
      * This is Babel for our source files. We need to include sources of all our modules, not only "app/src".
-     * TODO: should be applied only for dev, i.e. the production build should use "./build" folder of modules instead of their sources.
      */
-    changeRuleByTestAttr(config, /\.(js|mjs|jsx|ts|tsx)$/, r => Object.assign(r, { include: BABEL_INCLUDED_REGEXP, exclude: BABEL_EXCLUDED_REGEXP }));
+    changeRuleByTestAttr(config, /\.(js|mjs|jsx|ts|tsx)$/, r => {
+        const include = isUseBuildFolderOfDeps() ? BABEL_INCLUDED_REGEXP.BUILD_FOLDERS : BABEL_INCLUDED_REGEXP.DEFAULT;
+        const exclude = isUseBuildFolderOfDeps() ? BABEL_EXCLUDED_REGEXP.BUILD_FOLDERS : BABEL_EXCLUDED_REGEXP.DEFAULT;
+        return Object.assign(r, { include, exclude });
+    });
+
     // Fix for the issue when some modules have no source maps. see this discussion for details https://github.com/facebook/create-react-app/discussions/11767
     changeRuleByTestAttr(config, /\.(js|mjs|jsx|ts|tsx|css)$/, r =>
         Object.assign(r, { exclude: [ r.exclude, VFILE_SPECIAL_CASE_REGEX, ...LIBS_WITHOUT_SOURCE_MAPS ] }));
@@ -86,5 +86,27 @@ function configureWebpack(config) {
      * we need to get rid of it in the future.
      * */
     config.resolve.alias.path = "path-browserify";
+    if (isUseBuildFolderOfDeps()) {
+        config.resolve.mainFields = ["epam:uui:main", "browser", "module", "main"];
+    }
     return config;
 }
+
+function isUseBuildFolderOfDeps() {
+    /**
+     * TODO: need to change the approach to process "docs". I.e. get rid of "require.context" and use explicit imports instead.
+     * Known places:
+     * app/src/common/docs/ComponentEditor.tsx
+     * app/src/common/docs/DocExample.tsx
+     * epam-assets/icons/index.ts
+     * epam-assets/icons/legacy/index.ts
+     * epam-assets/icons/loaders/index.ts
+     * epam-promo/index.docs.ts
+     * loveship/index.docs.ts
+     * uui/index.docs.ts
+     *
+     * @type {boolean}
+     */
+    //return !!process.argv.find(a => a === '--use-build-folder-of-deps');
+    return false;
+}

app/.config/utils/packageUtils.js

@@ -17,16 +17,51 @@ function readPackages({ uuiRoot }) {
  */
 function getPkgFoldersRegexMatcher({ uuiRoot, folders }) {
     const pkgs = readPackages({ uuiRoot });
-    return pkgs.reduce((acc, p) => {
-        folders.forEach(f => {
-            const e = escapeForRegex(path.join(path.sep, p, f))
-            acc.push(new RegExp(e))
-        })
-        return acc
+    return pkgs.reduce((acc, pkg) => {
+        return acc.concat(getSinglePkgFolderRegexMatcher({ pkg, folders }))
     }, [])
 }
 
+function getSinglePkgFolderRegexMatcher({ pkg, folders }) {
+    const acc = [];
+    folders(pkg).forEach(f => {
+        const e = escapeForRegex(path.join(path.sep, pkg, f))
+        acc.push(new RegExp(e))
+    })
+    return acc;
+}
+function getBabelProcessedFolders({ uuiRoot, isIncluded }) {
+    /**
+     * Folders which babel should include from each module
+     */
+    const PKG_FOLDERS_BABEL_INCLUDED = ['']
+    const PKG_FOLDERS_BABEL_INCLUDED_BUILD = ['build', 'assets']
+    /**
+     * Folders which babel should exclude from each module
+     */
+    const PKG_FOLDERS_BABEL_EXCLUDED = ['build', 'node_modules']
+    const PKG_FOLDERS_BABEL_EXCLUDED_BUILD = ['node_modules']
+
+    const getFoldersFn = isUseBuildFolderOfDeps => pkg => {
+        if (isIncluded) {
+            if (isUseBuildFolderOfDeps) {
+                if (['app', 'epam-assets'].indexOf(pkg) !== -1) {
+                    return PKG_FOLDERS_BABEL_INCLUDED
+                }
+                return PKG_FOLDERS_BABEL_INCLUDED_BUILD
+            }
+            return PKG_FOLDERS_BABEL_INCLUDED;
+        }
+        if (isUseBuildFolderOfDeps) {
+            return PKG_FOLDERS_BABEL_EXCLUDED_BUILD;
+        }
+        return PKG_FOLDERS_BABEL_EXCLUDED;
+    }
+    const DEFAULT = getPkgFoldersRegexMatcher({ uuiRoot,  folders: getFoldersFn(false) });
+    const BUILD_FOLDERS = getPkgFoldersRegexMatcher({ uuiRoot,  folders: getFoldersFn(true) });
+    return { DEFAULT, BUILD_FOLDERS }
+}
 
 module.exports = {
-    getPkgFoldersRegexMatcher,
+    getBabelProcessedFolders,
 }

app/package.json

@@ -9,7 +9,7 @@
     "start": "craco start",
     "build": "craco build",
     "server": "node ../server/app.js",
-    "analyze": "source-map-explorer 'build/static/js/*.js'"
+    "analyzer": "source-map-explorer 'build/static/**/*.js'"
   },
   "cracoConfig": "./.config/craco.config.js",
   "eslintConfig": {
@@ -52,8 +52,7 @@
     "react-measure": "2.5.2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "slate": "0.47.9",
-    "path-browserify": "1.0.1"
+    "slate": "0.47.9"
   },
   "browserslist": {
     "production": [
@@ -91,6 +90,9 @@
     "file-loader": "4.3.0",
     "imports-loader": "4.0.1",
     "escape-string-regexp": "1.0.5",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "process": "0.11.10",
+    "webpack-stats-plugin": "1.1.1",
+    "path-browserify": "1.0.1"
   }
 }

babel.config.js

@@ -2,4 +2,4 @@ module.exports = {
     "presets": [
         "react-app"
     ]
-}
+}

draft-rte/package.json

@@ -4,6 +4,7 @@
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
+  "epam:uui:main": "build/index.js",
   "typings": "index.d.ts",
   "scripts": {
     "build": "node ../uui-build/scripts/buildModule",
@@ -21,7 +22,8 @@
     "draft-js-clear-formatting": "^1.0.0",
     "draft-js-plugins-utils": "^2.0.2",
     "immutable": "*",
-    "markdown-draft-js": "1.6.0"
+    "markdown-draft-js": "1.6.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "react": ">=16.0.0",

draft-rte/src/utils/helpers.tsx

@@ -1,6 +1,6 @@
 import { convertFromHTML as draftConvertFromHTML, convertToHTML as draftConvertToHTML } from 'draft-convert';
 import { ContentBlock, ContentState, convertToRaw, EditorState, RawDraftEntity, SelectionState } from 'draft-js';
-import getContentStateFragment from 'draft-js/lib/getContentStateFragment';
+import getContentStateFragment from 'draft-js/lib/getContentStateFragment.js';
 import * as React from 'react';
 import { Link } from '../decorators';
 
@@ -183,4 +183,4 @@ export function getEntityRange(editorState: EditorState): { startOffset: number,
     }
 
     return { startOffset: finalPrevOffset, endOffset: finalNextOffset };
-}
+}

epam-promo/components/datePickers/docs/rangeDatePicker.doc.tsx

@@ -7,7 +7,7 @@ import dayjs, { Dayjs } from "dayjs";
 import { RangeDatePickerValue, rangeDatePickerPresets, Day, IconContainer } from '@epam/uui-components';
 import { Button, Text } from '../..';
 import { ReactComponent as Point } from "../../../icons/radio-point.svg";
-import isBetween from 'dayjs/plugin/isBetween';
+import isBetween from 'dayjs/plugin/isBetween.js';
 dayjs.extend(isBetween);
 
 const getCustomDay = (day: Dayjs) => {

epam-promo/components/inputs/TimePicker.tsx

@@ -7,7 +7,7 @@ import { DropdownContainer } from '../overlays';
 import { TextInput } from './TextInput';
 import { TimePickerBody } from './TimePickerBody';
 import css from './TimePicker.scss';
-import customParseFormat from "dayjs/plugin/customParseFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
 dayjs.extend(customParseFormat);
 
 const defaultMode = EditMode.FORM;

epam-promo/package.json

@@ -5,6 +5,7 @@
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
+  "epam:uui:main": "build/index.js",
   "typings": "index.d.ts",
   "scripts": {
     "build": "node ../uui-build/scripts/buildModule",

extra/package.json

@@ -5,6 +5,7 @@
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
+  "epam:uui:main": "build/index.js",
   "typings": "index.d.ts",
   "scripts": {
     "build": "node ../uui-build/scripts/buildModule"

jest.config.js

@@ -23,8 +23,8 @@ module.exports = {
         // ...tsjPreset.transform,
         "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
         // "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest",
-        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/uui-build/config/jest/fileTransform.js",
-        "^.+\\.css$": "<rootDir>/uui-build/config/jest/cssTransform.js",
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/uui-build/jest/fileTransform.js",
+        "^.+\\.css$": "<rootDir>/uui-build/jest/cssTransform.js",
     },
     "transformIgnorePatterns": [
         "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
@@ -41,7 +41,7 @@ module.exports = {
     ],
     "moduleNameMapper": {
         "^react-native$": "react-native-web",
-        "^.+\\.(sass|scss|less)$": "<rootDir>/uui-build/config/jest/cssModuleTransform.js",
+        "^.+\\.(sass|scss|less)$": "<rootDir>/uui-build/jest/cssModuleTransform.js",
         "@epam/test-utils": "<rootDir>/test-utils",
         "@epam/uui-core": "<rootDir>/uui-core",
         "\\.svg": "<rootDir>/test-utils/mocks/svgrMock.js"

loveship/package.json

@@ -5,6 +5,7 @@
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
+  "epam:uui:main": "build/index.js",
   "typings": "index.d.ts",
   "scripts": {
     "build": "node ../uui-build/scripts/buildModule",

package.json

@@ -3,23 +3,21 @@
   "private": true,
   "version": "2.1.434",
   "description": "",
-  "main": "index.js",
   "scripts": {
-    "analyzer": "webpack-bundle-analyzer app/build/bundle-stats.json",
+    "analyzer": "cd app && yarn analyzer",
     "postinstall": "cd server && yarn",
     "test": "node uui-build/scripts/runTests.js",
     "coverage": "yarn test --coverage",
     "process-icons": "node uui-build/scripts/processIcons.js",
-    "start": "cd ./app && cross-env DEV=TRUE yarn start",
+    "start": "cd ./app && yarn start",
     "next:dev": "cd ./next-app && yarn && node ../uui-build/scripts/runNextApp.js && yarn dev",
-    "build": "cd ./app && yarn build --stats",
-    "build-dev": "cd ./app && yarn build-dev",
+    "build": "cd ./app && yarn build",
     "start-server": "cd ./app && yarn server",
     "lint": "npx tslint -p ./tsconfig.json -e node_modules",
     "style-lint": "npx stylelint \"**/*.{scss,less}\"\n",
     "format": "npx tslint -p ./tsconfig.json --fix -e node_modules",
     "copy-to-template": "node uui-build/scripts/copyToTemplate",
-    "build-server-helpers": "npx tsc uui-core/src/data/querying/getFilterPredicate.ts --outDir ./server/helpers/",
+    "build-server-helpers": "tsc --esModuleInterop uui-core/src/data/querying/getFilterPredicate.ts --outDir ./server/helpers/",
     "generate-components-api": "cd uui-build && yarn generate-components-api",
     "transform-tokens": "tsc --esModuleInterop uui-build/tokens-converter/index.ts && node uui-build/tokens-converter",
     "release": "lerna publish --force-publish",

server/helpers/getFilterPredicate.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 exports.getFilterPredicate = exports.simplifyPredicates = void 0;
 var dayjs_1 = __importDefault(require("dayjs"));
-var isSameOrBefore_1 = __importDefault(require("dayjs/plugin/isSameOrBefore"));
-var isSameOrAfter_1 = __importDefault(require("dayjs/plugin/isSameOrAfter"));
+var isSameOrBefore_1 = __importDefault(require("dayjs/plugin/isSameOrBefore.js"));
+var isSameOrAfter_1 = __importDefault(require("dayjs/plugin/isSameOrAfter.js"));
 dayjs_1["default"].extend(isSameOrBefore_1["default"]);
 dayjs_1["default"].extend(isSameOrAfter_1["default"]);
 function simplifyPredicates(filter) {