[core] Restrict top level imports that target CJS modules (#23159)

Author: eps1lon

.eslintrc.js

@@ -52,6 +52,17 @@ module.exports = {
       {
         patterns: [
           '@material-ui/*/*/*',
+          // Begin block: Packages with files instead of packages in the top level
+          // Importing from the top level pulls in CommonJS instead of ES modules
+          // Allowing /icons as to reduce cold-start of dev builds significantly.
+          // There's nothing to tree-shake when importing from /icons this way:
+          // '@material-ui/icons/*/',
+          '@material-ui/system/*',
+          '@material-ui/utils/*',
+          // End block
+          // Macros are fine since their import path is transpiled away
+          '!@material-ui/utils/macros',
+          '@material-ui/utils/macros/*',
           '!@material-ui/utils/macros/*.macro',
           // public API: https://next.material-ui-pickers.dev/getting-started/installation#peer-library
           '!@material-ui/pickers/adapter/*',

azure-pipelines.yml

@@ -98,6 +98,7 @@ steps:
     displayName: Cache nextjs build
 
   - script: |
+      set -o pipefail
       mkdir -p scripts/sizeSnapshot/build	
       yarn docs:build | tee scripts/sizeSnapshot/build/docs.next
     displayName: 'build docs for size snapshot'

docs/pages/_app.js

@@ -24,6 +24,7 @@ import RtlContext from 'docs/src/modules/utils/RtlContext';
 import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
+import { useUserLanguage } from 'docs/src/modules/utils/i18n';
 
 // Configure JSS
 const jss = create({
@@ -45,7 +46,7 @@ acceptLanguage.languages(['en', 'zh', 'pt', 'ru']);
 function LanguageNegotiation() {
   const dispatch = useDispatch();
   const router = useRouter();
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const userLanguage = useUserLanguage();
 
   React.useEffect(() => {
     const { userLanguage: userLanguageUrl, canonical } = pathnameToLanguage(router.asPath);

docs/pages/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
@@ -19,6 +18,7 @@ import AppFrame from 'docs/src/modules/components/AppFrame';
 import Link from 'docs/src/modules/components/Link';
 import Head from 'docs/src/modules/components/Head';
 import loadScript from 'docs/src/modules/utils/loadScript';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 let dependenciesLoaded = false;
 
@@ -119,7 +119,7 @@ export default function LandingPage(props) {
   React.useEffect(() => {
     loadDependencies();
   }, []);
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
   const classes = useStyles();
 
   return (

docs/src/modules/components/Ad.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import AdCarbon from 'docs/src/modules/components/AdCarbon';
 import AdReadthedocs from 'docs/src/modules/components/AdReadthedocs';
 import AdInHouse from 'docs/src/modules/components/AdInHouse';
 import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const styles = (theme) => ({
   root: {
@@ -39,7 +39,7 @@ const styles = (theme) => ({
 });
 
 function PleaseDisableAdblock(props) {
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   return (
     <Paper component="span" elevation={0} {...props}>

docs/src/modules/components/AppDrawer.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
@@ -14,6 +13,7 @@ import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
 import Link from 'docs/src/modules/components/Link';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import PageContext from 'docs/src/modules/components/PageContext';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 let savedScrollTop = null;
 function PersistScroll(props) {
@@ -140,9 +140,9 @@ const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
 function AppDrawer(props) {
   const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props;
   const { activePage, pages } = React.useContext(PageContext);
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const userLanguage = useUserLanguage();
   const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   const navItems = React.useMemo(
     () => renderNavItems({ onClose, pages, activePage, depth: 0, t }),

docs/src/modules/components/AppFooter.js

@@ -1,14 +1,14 @@
 /* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import Interpolate from '@trendmicro/react-interpolate';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
 import Divider from '@material-ui/core/Divider';
 import Link from 'docs/src/modules/components/Link';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 const styles = (theme) => ({
   root: {
@@ -52,9 +52,9 @@ const styles = (theme) => ({
 
 function AppFooter(props) {
   const { classes } = props;
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const userLanguage = useUserLanguage();
   const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   return (
     <div className={classes.root}>

docs/src/modules/components/AppFrame.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import Router, { useRouter } from 'next/router';
 import { withStyles, useTheme } from '@material-ui/core/styles';
 import NProgress from 'nprogress';
@@ -35,6 +34,7 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import RtlContext from 'docs/src/modules/utils/RtlContext';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import PageContext from 'docs/src/modules/components/PageContext';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
 const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/';
@@ -146,8 +146,8 @@ const styles = (theme) => ({
 function AppFrame(props) {
   const { children, classes, disableDrawer = false } = props;
   const theme = useTheme();
-  const t = useSelector((state) => state.options.t);
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const t = useTranslate();
+  const userLanguage = useUserLanguage();
   const { rtl, setRtl } = React.useContext(RtlContext);
 
   const crowdInLocale = LOCALES[userLanguage] || userLanguage;

docs/src/modules/components/AppSearch.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import url from 'url';
-import { useSelector } from 'react-redux';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { alpha, useTheme, makeStyles } from '@material-ui/core/styles';
@@ -9,6 +8,7 @@ import SearchIcon from '@material-ui/icons/Search';
 import { handleEvent } from 'docs/src/modules/components/MarkdownLinks';
 import docsearch from 'docsearch.js';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -117,8 +117,8 @@ export default function AppSearch() {
   const classes = useStyles();
   const inputRef = React.useRef(null);
   const theme = useTheme();
-  const userLanguage = useSelector((state) => state.options.userLanguage);
-  const t = useSelector((state) => state.options.t);
+  const userLanguage = useUserLanguage();
+  const t = useTranslate();
 
   useLazyCSS('https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css', '#app-search');
 

docs/src/modules/components/AppTableOfContents.js

@@ -3,11 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import clsx from 'clsx';
-import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -100,7 +100,7 @@ function useThrottledOnScroll(callback, delay) {
 export default function AppTableOfContents(props) {
   const { items } = props;
   const classes = useStyles();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   const itemsWithNodeRef = React.useRef([]);
   React.useEffect(() => {