From 1b24a815b251325715a7f657aac082c8a1e1d99a Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Fri, 16 Apr 2021 18:25:32 +0200
Subject: [PATCH] [core] Use `exports` instead of aliases where possible

---
 babel.config.js                                     |  1 -
 docs/babel.config.js                                |  1 +
 .../src/v4.0.0/optimal-imports.js                   |  1 +
 .../src/v4.0.0/top-level-imports.js                 |  1 +
 packages/material-ui/package.json                   |  5 ++++-
 scripts/copy-files.js                               | 13 ++++++++++---
 webpackBaseConfig.js                                |  2 ++
 7 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 9240d2d6f1597c..c315ca859b925b 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -9,7 +9,6 @@ function resolveAliasPath(relativeToBabelConf) {
 }
 
 const defaultAlias = {
-  '@material-ui/core': resolveAliasPath('./packages/material-ui/src'),
   '@material-ui/docs': resolveAliasPath('./packages/material-ui-docs/src'),
   '@material-ui/icons': resolveAliasPath('./packages/material-ui-icons/src'),
   '@material-ui/lab': resolveAliasPath('./packages/material-ui-lab/src'),
diff --git a/docs/babel.config.js b/docs/babel.config.js
index 0ea562b4895c50..277542afefe3df 100644
--- a/docs/babel.config.js
+++ b/docs/babel.config.js
@@ -13,6 +13,7 @@ function resolvePath(sourcePath, currentFile, opts) {
   return bpmr.resolvePath(sourcePath, currentFile, opts);
 }
 
+// TODO: Can be dropped with webpack 5 which supports the `exports` field
 const alias = {
   '@material-ui/core': '../packages/material-ui/src',
   '@material-ui/docs': '../packages/material-ui-docs/src',
diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
index 6c42998c254f72..0c7d54a4fb3439 100644
--- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
+++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
@@ -2,6 +2,7 @@ import { dirname } from 'path';
 import addImports from 'jscodeshift-add-imports';
 import getJSExports from '../util/getJSExports';
 
+// TODO: do we still need this?
 // istanbul ignore next
 if (process.env.NODE_ENV === 'test') {
   const resolve = require.resolve;
diff --git a/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
index cbaec0b52572d8..ed65d58d7682e9 100644
--- a/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
+++ b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
@@ -7,6 +7,7 @@ export default function transformer(fileInfo, api, options) {
 
   let requirePath = importModule;
 
+  // TODO: do we still need this?
   if (process.env.NODE_ENV === 'test') {
     requirePath = requirePath.replace(/^@material-ui\/core/, '../../../material-ui/src');
   }
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 1d71141c16ad82..73c9c9e284521b 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -4,7 +4,10 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
-  "main": "./src/index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/scripts/copy-files.js b/scripts/copy-files.js
index 7d5ec0ed223218..c5eefbea572b52 100644
--- a/scripts/copy-files.js
+++ b/scripts/copy-files.js
@@ -66,9 +66,16 @@ async function typescriptCopy({ from, to }) {
 
 async function createPackageFile() {
   const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
-  const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } = JSON.parse(
-    packageData,
-  );
+  const {
+    nyc,
+    scripts,
+    devDependencies,
+    workspaces,
+    // Using native ES 6 modules internally only for now
+    exports,
+    type,
+    ...packageDataOther
+  } = JSON.parse(packageData);
 
   const newPackageData = {
     ...packageDataOther,
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index c5715bccedccad..addbbd0302fc16 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -8,6 +8,8 @@ module.exports = {
   context: path.resolve(__dirname),
   resolve: {
     modules: [__dirname, 'node_modules'],
+    // TODO: Can be dropped with webpack 5 which supports the `exports` field
+    // But might be required for eslint-plugin-import: https://github.com/benmosher/eslint-plugin-import/issues/1868
     alias: {
       '@material-ui/core': path.resolve(__dirname, './packages/material-ui/src'),
       '@material-ui/docs': path.resolve(__dirname, './packages/material-ui-docs/src'),