Bump prettier to 2.0.0 (#20211)

Author: eps1lon

.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 (