Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Use exports instead of aliases where possible #25799

Closed
wants to merge 5 commits into from
Closed

[core] Use exports instead of aliases where possible #25799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f0fad23
[core] Use `exports` instead of aliases where possible
eps1lon Apr 16, 2021
0c87291
Leverage exports in top-level-imports test
eps1lon Apr 17, 2021
961bfa7
Leverage exports in optimal-imports test
eps1lon Apr 17, 2021
dab0b05
add note about webpack 5 and exports vs alias
eps1lon Apr 17, 2021
7b5ca03
Apply to all packages
eps1lon Apr 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 1 addition & 31 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,6 @@ const path = require('path');
const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';

function resolveAliasPath(relativeToBabelConf) {
const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
return `./${resolvedPath.replace('\\', '/')}`;
}

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'),
'@material-ui/styled-engine': resolveAliasPath('./packages/material-ui-styled-engine/src'),
'@material-ui/styled-engine-sc': resolveAliasPath('./packages/material-ui-styled-engine-sc/src'),
'@material-ui/styles': resolveAliasPath('./packages/material-ui-styles/src'),
'@material-ui/system': resolveAliasPath('./packages/material-ui-system/src'),
'@material-ui/unstyled': resolveAliasPath('./packages/material-ui-unstyled/src'),
'@material-ui/utils': resolveAliasPath('./packages/material-ui-utils/src'),
};

const productionPlugins = [
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
];
Expand Down Expand Up @@ -88,7 +70,6 @@ module.exports = function getBabelConfig(api) {
plugins.push([
'babel-plugin-module-resolver',
{
alias: defaultAlias,
root: ['./'],
},
]);
Expand All @@ -106,7 +87,6 @@ module.exports = function getBabelConfig(api) {
'babel-plugin-module-resolver',
{
root: ['./'],
alias: defaultAlias,
},
],
],
Expand All @@ -117,7 +97,6 @@ module.exports = function getBabelConfig(api) {
'babel-plugin-module-resolver',
{
alias: {
...defaultAlias,
modules: './modules',
'typescript-to-proptypes': './packages/typescript-to-proptypes/src',
},
Expand All @@ -139,21 +118,12 @@ module.exports = function getBabelConfig(api) {
'babel-plugin-module-resolver',
{
root: ['./'],
alias: defaultAlias,
},
],
],
},
benchmark: {
plugins: [
...productionPlugins,
[
'babel-plugin-module-resolver',
{
alias: defaultAlias,
},
],
],
plugins: productionPlugins,
},
},
};
Expand Down
1 change: 1 addition & 0 deletions docs/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 0 additions & 7 deletions packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,6 @@ import { dirname } from 'path';
import addImports from 'jscodeshift-add-imports';
import getJSExports from '../util/getJSExports';

// istanbul ignore next
if (process.env.NODE_ENV === 'test') {
const resolve = require.resolve;
require.resolve = (source) =>
resolve(source.replace(/^@material-ui\/core\/es/, '../../../material-ui/src'));
}

export default function transformer(fileInfo, api, options) {
const j = api.jscodeshift;
const importModule = options.importModule || '@material-ui/core';
Expand Down
6 changes: 1 addition & 5 deletions packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ export default function transformer(fileInfo, api, options) {
const importModule = options.importModule || '@material-ui/core';
const targetModule = options.targetModule || '@material-ui/core';

let requirePath = importModule;

if (process.env.NODE_ENV === 'test') {
requirePath = requirePath.replace(/^@material-ui\/core/, '../../../material-ui/src');
}
const requirePath = importModule;

// eslint-disable-next-line global-require, import/no-dynamic-require
const whitelist = require(requirePath);
Expand Down
5 changes: 4 additions & 1 deletion packages/material-ui-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
"private": false,
"author": "Material-UI Team",
"description": "Material-UI Docs - Documentation building blocks.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
5 changes: 4 additions & 1 deletion packages/material-ui-icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
"private": false,
"author": "Material-UI Team",
"description": "Material Design icons distributed as SVG React components.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui-lab/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"private": false,
"author": "Material-UI Team",
"description": "Laboratory for new Material-UI modules.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice but breaks down in packages where we mix index.ts and index.js. Since these are just files that define the public interface via import/export we should convert them to TypeScript anyway.

But there are some moving parts that need to be solved first. Considering we can't get rid of custom aliasing solutions anyway (see PR description) I'm closing until we can migrate completely.

},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui-styled-engine-sc/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"private": false,
"author": "Material-UI Team",
"description": "styled() API wrapper package for styled-components.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui-styled-engine/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"private": false,
"author": "Material-UI Team",
"description": "styled() API wrapper package for emotion.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"private": false,
"author": "Material-UI Team",
"description": "Material-UI Styles - The styling solution of Material-UI.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui-system/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"private": false,
"author": "Material-UI Team",
"description": "CSS utilities for rapidly laying out custom designs.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui-unstyled/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"private": false,
"author": "Material-UI Team",
"description": "Unstyled React components with which to implement custom design systems.",
"main": "./src/index.js",
"exports": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
5 changes: 4 additions & 1 deletion packages/material-ui-utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
"private": false,
"author": "Material-UI Team",
"description": "Utility functions for React components.",
"main": "./src/index.ts",
"exports": {
".": "./src/index.ts",
"./es": "./src/index.ts"
},
"keywords": [
"react",
"react-component",
Expand Down
6 changes: 5 additions & 1 deletion packages/material-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
"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": {
".": "./src/index.js",
"./es/*": "./src/*/index.js",
"./*": "./src/*/index.js"
},
"keywords": [
"react",
"react-component",
Expand Down
13 changes: 10 additions & 3 deletions scripts/copy-files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 3 additions & 0 deletions test/karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const playwright = require('playwright');
const webpack = require('webpack');
const webpackBaseConfig = require('../webpackBaseConfig');

const CI = Boolean(process.env.CI);

Expand Down Expand Up @@ -105,6 +106,8 @@ module.exports = function setKarmaConfig(config) {
fs: 'empty',
},
resolve: {
// TODO: Can be dropped with webpack 5 which supports the `exports` field
alias: webpackBaseConfig.resolve.alias,
extensions: ['.js', '.ts', '.tsx'],
},
},
Expand Down
3 changes: 3 additions & 0 deletions test/karma.conf.profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const path = require('path');
const { chromium } = require('playwright');
const webpack = require('webpack');
const webpackBaseConfig = require('../webpackBaseConfig');

const workspaceRoot = path.resolve(__dirname, '../');

Expand Down Expand Up @@ -103,6 +104,8 @@ module.exports = function setKarmaConfig(config) {
},
resolve: {
alias: {
// TODO: Can be dropped with webpack 5 which supports the `exports` field
...webpackBaseConfig.resolve.alias,
// "How to use profiling in production"
// https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#react-dom1660--scheduler0100
'react-dom$': 'react-dom/profiling',
Expand Down
2 changes: 2 additions & 0 deletions webpackBaseConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down