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

.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(() => {

docs/src/modules/components/ComponentLinkHeader.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import Chip from '@material-ui/core/Chip';
 import Tooltip from '@material-ui/core/Tooltip';
 import SketchIcon from 'docs/src/modules/components/SketchIcon';
@@ -10,6 +9,7 @@ import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import W3CIcon from 'docs/src/modules/components/W3CIcon';
 import MaterialDesignIcon from 'docs/src/modules/components/MaterialDesignIcon';
 import { makeStyles } from '@material-ui/core/styles';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -32,7 +32,7 @@ export default function ComponentLinkHeader(props) {
     options,
   } = props;
   const classes = useStyles();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   if (headers.materialDesign && options.design === false) {
     throw new Error('missing design assets');

docs/src/modules/components/Demo.js

@@ -11,6 +11,7 @@ import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import { AdCarbonInline } from 'docs/src/modules/components/AdCarbon';
 import getJsxPreview from 'docs/src/modules/utils/getJsxPreview';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
 // Sync with styles from DemoToolbar
@@ -31,7 +32,7 @@ const useDemoToolbarFallbackStyles = makeStyles(
 );
 export function DemoToolbarFallback() {
   const classes = useDemoToolbarFallbackStyles();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   return (
     <div aria-busy aria-label={t('demoToolbarLabel')} className={classes.root} role="toolbar" />
@@ -43,7 +44,7 @@ function getDemoName(location) {
 }
 
 function useDemoData(codeVariant, demo, githubLocation) {
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const userLanguage = useUserLanguage();
   const title = `${getDemoName(githubLocation)} Material Demo`;
   if (codeVariant === CODE_VARIANTS.TS && demo.rawTS) {
     return {
@@ -164,7 +165,7 @@ const useStyles = makeStyles(
 export default function Demo(props) {
   const { demo, demoOptions, disableAd, githubLocation } = props;
   const classes = useStyles();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
   const codeVariant = useSelector((state) => state.options.codeVariant);
   const demoData = useDemoData(codeVariant, demo, githubLocation);
 

docs/src/modules/components/DemoSandboxed.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { create } from 'jss';
 import { makeStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
 import rtl from 'jss-rtl';
-import { useSelector } from 'react-redux';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 function FramedDemo(props) {
   const { children, document } = props;
@@ -107,7 +107,7 @@ function DemoSandboxed(props) {
   const Sandbox = iframe ? DemoFrame : React.Fragment;
   const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {};
 
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   return (
     <DemoErrorBoundary onResetDemoClick={onResetDemoClick} t={t}>

docs/src/modules/components/DemoToolbar.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import copy from 'clipboard-copy';
 import LZString from 'lz-string';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -23,6 +23,7 @@ import ResetFocusIcon from '@material-ui/icons/CenterFocusWeak';
 import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS } from 'docs/src/modules/constants';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 function compress(object) {
   return LZString.compressToBase64(JSON.stringify(object))
@@ -70,7 +71,7 @@ const useDemoToolbarStyles = makeStyles(
 
 export function DemoToolbarFallback() {
   const classes = useDemoToolbarStyles();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   return (
     <div aria-busy aria-label={t('demoToolbarLabel')} className={classes.root} role="toolbar" />
@@ -225,7 +226,7 @@ export default function DemoToolbar(props) {
   const classes = useDemoToolbarStyles();
 
   const dispatch = useDispatch();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   const hasTSVariant = demo.rawTS;
   const renderedCodeVariant = () => {

docs/src/modules/components/DiamondSponsors.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import { useSelector } from 'react-redux';
 import { useTheme, makeStyles } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -38,7 +38,7 @@ export default function DiamondSponsors(props) {
   const classes = useStyles();
   const { spot } = props;
   const theme = useTheme();
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
 
   return (
     <div className={classes.root}>

docs/src/modules/components/EditPage.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import Button from '@material-ui/core/Button';
 import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 export default function EditPage(props) {
   const { markdownLocation } = props;
-  const t = useSelector((state) => state.options.t);
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const t = useTranslate();
+  const userLanguage = useUserLanguage();
   const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
   const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/';
   const crowdInLocale = LOCALES[userLanguage] || userLanguage;

docs/src/modules/components/Head.js

@@ -2,18 +2,18 @@ import * as React from 'react';
 import NextHead from 'next/head';
 import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
 export default function Head(props) {
-  const t = useSelector((state) => state.options.t);
+  const t = useTranslate();
   const {
     card = 'https://material-ui.com/static/logo.png',
     children,
     description = t('strapline'),
     largeCard = false,
     title = t('headTitle'),
   } = props;
-  const userLanguage = useSelector((state) => state.options.userLanguage);
+  const userLanguage = useUserLanguage();
   const router = useRouter();
 
   return (