Bump prettier to 2.0.0 (#20211)

.dependabot/config.yml

@@ -30,9 +30,6 @@ update_configs:
       - match:
           # These should be grouped once a PR for `jss` is opened
           dependency_name: 'jss-*'
-      - match:
-          # 1.18 started adding trailing commas only compatible with typescript ^3.4
-          dependency_name: 'prettier'
       - match:
           # 2.0 started using ES modules instead of CommonJS modules
           dependency_name: 'raw-loader'

dangerfile.js

@@ -43,7 +43,7 @@ async function cleanup() {
  * @param {number} gzipThreshold
  */
 function createComparisonFilter(parsedThreshold, gzipThreshold) {
-  return comparisonEntry => {
+  return (comparisonEntry) => {
     const [, snapshot] = comparisonEntry;
     return (
       Math.abs(snapshot.parsed.absoluteDiff) >= parsedThreshold ||
@@ -97,8 +97,8 @@ function formatDiff(absoluteChange, relativeChange) {
  * @returns {string}
  */
 function generateMDTable(headers, body) {
-  const headerRow = headers.map(header => header.label);
-  const alignmentRow = headers.map(header => {
+  const headerRow = headers.map((header) => header.label);
+  const alignmentRow = headers.map((header) => {
     if (header.align === 'right') {
       return ' ---:';
     }
@@ -108,7 +108,7 @@ function generateMDTable(headers, body) {
     return ' --- ';
   });
 
-  return [headerRow, alignmentRow, ...body].map(row => row.join(' | ')).join('\n');
+  return [headerRow, alignmentRow, ...body].map((row) => row.join(' | ')).join('\n');
 }
 
 function generateEmphasizedChange([bundle, { parsed, gzip }]) {
@@ -174,7 +174,7 @@ function sieveResults(results) {
   const main = [];
   const pages = [];
 
-  results.forEach(entry => {
+  results.forEach((entry) => {
     const [bundleId] = entry;
 
     if (bundleId.startsWith('docs:')) {
@@ -221,7 +221,7 @@ async function run() {
     }
 
     const mainDetailsTable = createComparisonTable(mainResults, {
-      computeBundleLabel: bundleId => {
+      computeBundleLabel: (bundleId) => {
         if (bundleId === 'packages/material-ui/build/umd/material-ui.production.min.js') {
           return '@material-ui/core[umd]';
         }
@@ -238,7 +238,7 @@ async function run() {
       },
     });
     const pageDetailsTable = createComparisonTable(pageResults, {
-      computeBundleLabel: bundleId => {
+      computeBundleLabel: (bundleId) => {
         // a page
         if (bundleId.startsWith('docs:/')) {
           const host = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.com`;

docs/next.config.js

@@ -142,7 +142,7 @@ module.exports = {
     function traverse(pages2, userLanguage) {
       const prefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
 
-      pages2.forEach(page => {
+      pages2.forEach((page) => {
         if (!page.children) {
           map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = {
             page: page.pathname,
@@ -165,7 +165,7 @@ module.exports = {
     } else {
       // eslint-disable-next-line no-console
       console.log('Considering various locales for SSR');
-      LANGUAGES_SSR.forEach(userLanguage => {
+      LANGUAGES_SSR.forEach((userLanguage) => {
         traverse(pages, userLanguage);
       });
     }

docs/pages/_app.js

@@ -49,7 +49,7 @@ function loadCrowdin() {
 function LanguageNegotiation() {
   const dispatch = useDispatch();
   const router = useRouter();
-  const userLanguage = useSelector(state => state.options.userLanguage);
+  const userLanguage = useSelector((state) => state.options.userLanguage);
 
   React.useEffect(() => {
     if (userLanguage === 'aa') {
@@ -127,9 +127,9 @@ function usePersistCodeVariant(initialCodeVariant = CODE_VARIANTS.JS, codeVarian
 
 function PersistState() {
   const dispatch = useDispatch();
-  const options = useSelector(state => state.options);
+  const options = useSelector((state) => state.options);
 
-  const codeVariant = usePersistCodeVariant(options.codeVariant, nextCodeVariant =>
+  const codeVariant = usePersistCodeVariant(options.codeVariant, (nextCodeVariant) =>
     dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, payload: { codeVariant: nextCodeVariant } }),
   );
 
@@ -164,7 +164,7 @@ function forcePageReload(registration) {
   }
 
   function listenInstalledStateChange() {
-    registration.installing.addEventListener('statechange', event => {
+    registration.installing.addEventListener('statechange', (event) => {
       // console.log('statechange', event.target.state);
       if (event.target.state === 'installed' && registration.waiting) {
         // A new service worker is available, inform the user
@@ -244,7 +244,7 @@ Tip: you can access the documentation \`theme\` object directly in the console.
 }
 
 function findActivePage(currentPages, pathname) {
-  const activePage = find(currentPages, page => {
+  const activePage = find(currentPages, (page) => {
     if (page.children) {
       if (pathname.indexOf(`${page.pathname}/`) === 0) {
         // Check if one of the children matches (for /components)
@@ -305,7 +305,7 @@ function AppWrapper(props) {
   return (
     <ReactMode>
       <NextHead>
-        {fonts.map(font => (
+        {fonts.map((font) => (
           <link rel="stylesheet" href={font} key={font} />
         ))}
       </NextHead>

docs/pages/_document.js

@@ -57,7 +57,7 @@ export default class MyDocument extends Document {
             href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`}
             hrefLang="x-default"
           />
-          {LANGUAGES_SSR.map(userLanguage2 => (
+          {LANGUAGES_SSR.map((userLanguage2) => (
             <link
               key={userLanguage2}
               rel="alternate"
@@ -97,7 +97,7 @@ export default class MyDocument extends Document {
   }
 }
 
-MyDocument.getInitialProps = async ctx => {
+MyDocument.getInitialProps = async (ctx) => {
   // Resolution order
   //
   // On the server:
@@ -121,7 +121,7 @@ MyDocument.getInitialProps = async ctx => {
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: App => props => sheets.collect(<App {...props} />),
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
     });
 
   const initialProps = await Document.getInitialProps(ctx);

docs/pages/api-docs/autocomplete.md

@@ -46,7 +46,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">forcePopupIcon</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;bool</span> | <span class="prop-default">'auto'</span> | Force the visibility display of the popup icon. |
 | <span class="prop-name">freeSolo</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. |
 | <span class="prop-name">getOptionDisabled</span> | <span class="prop-type">func</span> |  | Used to determine the disabled state for a given option. |
-| <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">x => x</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |
+| <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |
 | <span class="prop-name">getOptionSelected</span> | <span class="prop-type">func</span> |  | Used to determine if an option is selected. Uses strict equality by default. |
 | <span class="prop-name">groupBy</span> | <span class="prop-type">func</span> |  | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.<br><br>**Signature:**<br>`function(options: T) => string`<br>*options:* The option to group. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |

docs/pages/api-docs/pagination.md

@@ -35,7 +35,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">hidePrevButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the previous-page button. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> |  | The current page. |
-| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">item => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
+| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
 | <span class="prop-name">shape</span> | <span class="prop-type">'round'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'round'</span> | The shape of the pagination items. |
 | <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |
 | <span class="prop-name">showLastButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the last-page button. |

docs/pages/api-docs/slider.md

@@ -41,14 +41,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the slider's value changed.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
 | <span class="prop-name">onChangeCommitted</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the `mouseup` is triggered.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
-| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">x => x</span> | A transformation function, to change the scale of the slider. |
+| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
 | <span class="prop-name">ThumbComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used to display the value label. |
 | <span class="prop-name">track</span> | <span class="prop-type">'normal'<br>&#124;&nbsp;false<br>&#124;&nbsp;'inverted'</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">number<br>&#124;&nbsp;Array&lt;number&gt;</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">ValueLabelComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ValueLabel</span> | The value label component. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'on'<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;'off'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
-| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">string<br>&#124;&nbsp;func</span> | <span class="prop-default">x => x</span> | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
+| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">string<br>&#124;&nbsp;func</span> | <span class="prop-default">(x) => x</span> | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
 
 The `ref` is forwarded to the root element.
 

docs/pages/components/material-icons.js

@@ -3,7 +3,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import Markdown from 'docs/src/pages/components/material-icons/material-icons.md';
 import SearchIcons from 'docs/src/pages/components/material-icons/SearchIcons';
 
-const req = name => {
+const req = (name) => {
   const map = {
     'material-icons.md': Markdown,
     'SearchIcons.js': {

docs/pages/index.js

@@ -31,7 +31,7 @@ function loadDependencies() {
 }
 
 const useStyles = makeStyles(
-  theme => ({
+  (theme) => ({
     root: {
       flex: '1 0 100%',
     },
@@ -109,7 +109,7 @@ export default function LandingPage() {
 
     loadDependencies();
   }, []);
-  const t = useSelector(state => state.options.t);
+  const t = useSelector((state) => state.options.t);
   const classes = useStyles();
 
   return (

docs/pages/performance/table-component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
     const { component: Component = defaultComponent, ...other } = props;
 

docs/pages/performance/table-emotion.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
     const { component: Component = defaultComponent, ...other } = props;
 

docs/pages/performance/table-hook.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const useStyles = makeStyles({
     root: {
       background: 'pink',

docs/pages/performance/table-styled-components.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
     const { component: Component = defaultComponent, ...other } = props;
 

docs/pages/versions.js

@@ -28,9 +28,9 @@ Page.getInitialProps = async () => {
   const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next'];
 
   const branches = await getBranches();
-  let versions = branches.map(n => n.name);
-  versions = versions.filter(value => FILTERED_BRANCHES.indexOf(value) === -1);
-  versions = versions.map(version => ({
+  let versions = branches.map((n) => n.name);
+  versions = versions.filter((value) => FILTERED_BRANCHES.indexOf(value) === -1);
+  versions = versions.map((version) => ({
     version,
     // Replace dot with dashes for Netlify branch subdomains
     url: `https://${version.replace(/\./g, '-')}.material-ui.com`,

docs/scripts/buildApi.js

@@ -23,7 +23,7 @@ import createGenerateClassName from '../../packages/material-ui-styles/src/creat
 const generateClassName = createGenerateClassName();
 
 function ensureExists(pat, mask, cb) {
-  mkdir(pat, mask, err => {
+  mkdir(pat, mask, (err) => {
     if (err) {
       if (err.code === 'EEXIST') {
         cb(null); // ignore the error if the folder already exists
@@ -103,7 +103,7 @@ function computeApiDescription(api, options) {
     remark()
       .use(function docsLinksAttacher() {
         return function transformer(tree) {
-          remarkVisit(tree, 'link', linkNode => {
+          remarkVisit(tree, 'link', (linkNode) => {
             if (linkNode.url.startsWith('/')) {
               linkNode.url = `${host}${linkNode.url}`;
             }
@@ -165,10 +165,10 @@ async function annotateComponentDefinition(component, api) {
   }
 
   const demos = uniqBy(
-    api.pagesMarkdown.filter(page => {
+    api.pagesMarkdown.filter((page) => {
       return page.components.includes(api.name);
     }, []),
-    page => page.pathname,
+    (page) => page.pathname,
   );
 
   let inheritanceAPILink = null;
@@ -186,7 +186,7 @@ async function annotateComponentDefinition(component, api) {
       'Demos:',
       '',
       ...demos.map(
-        page => `- [${pageToTitle(page)}](${HOST}${rewriteUrlForNextExport(page.pathname)})`,
+        (page) => `- [${pageToTitle(page)}](${HOST}${rewriteUrlForNextExport(page.pathname)})`,
       ),
       '',
     );
@@ -198,7 +198,7 @@ async function annotateComponentDefinition(component, api) {
   }
 
   const jsdoc = `/**\n${markdownLines
-    .map(line => (line.length > 0 ? ` * ${line}` : ` *`))
+    .map((line) => (line.length > 0 ? ` * ${line}` : ` *`))
     .join('\n')}\n */`;
   const typesSourceNew = typesSource.slice(0, start) + jsdoc + typesSource.slice(end);
   writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' });
@@ -226,7 +226,7 @@ async function buildDocs(options) {
   if (component.styles && component.default.options) {
     // Collect the customization points of the `classes` property.
     styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter(
-      className => !className.match(/^(@media|@keyframes)/),
+      (className) => !className.match(/^(@media|@keyframes)/),
     );
     styles.name = component.default.options.name;
     styles.globalClasses = styles.classes.reduce((acc, key) => {
@@ -309,7 +309,7 @@ async function buildDocs(options) {
     throw err;
   }
 
-  ensureExists(docsApiDirectory, 0o744, err => {
+  ensureExists(docsApiDirectory, 0o744, (err) => {
     if (err) {
       console.log('Error creating directory', docsApiDirectory);
       return;
@@ -339,18 +339,18 @@ export default function Page() {
 
 function run() {
   const pagesMarkdown = findPagesMarkdown()
-    .map(markdown => {
+    .map((markdown) => {
       const markdownSource = readFileSync(markdown.filename, 'utf8');
       return {
         ...markdown,
         components: getHeaders(markdownSource).components,
       };
     })
-    .filter(markdown => markdown.components.length > 0);
+    .filter((markdown) => markdown.components.length > 0);
   const components = findComponents(path.resolve(rootDirectory, args[2]));
 
-  components.forEach(component => {
-    buildDocs({ component, pagesMarkdown }).catch(error => {
+  components.forEach((component) => {
+    buildDocs({ component, pagesMarkdown }).catch((error) => {
       console.warn(`error building docs for ${component.filename}`);
       console.error(error);
       process.exit(1);