Upgrade to Prettier 2 (#13061)

Author: Timer

.prettierignore

@@ -7,7 +7,4 @@ packages/react-refresh-utils/**/*.js
 packages/react-refresh-utils/**/*.d.ts
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
-# prettier can't handle the `import type {} from ''` syntax yet
-test/integration/typescript-only-remove-type-imports/**/*.ts
-test/integration/typescript-only-remove-type-imports/**/*.tsx
 lerna.json

.prettierignore_staged

@@ -2,7 +2,4 @@
 **/_next/**
 **/dist/**
 packages/next/compiled/**/*
-# prettier can't handle the `import type {} from ''` syntax yet
-test/integration/typescript-only-remove-type-imports/**/*.ts
-test/integration/typescript-only-remove-type-imports/**/*.tsx
 lerna.json

bench/recursive-copy/run.js

@@ -20,7 +20,7 @@ const createSrcFolder = async () => {
       join(srcDir, `folder${i % 5}`, `folder${i + (1 % 5)}`, `file${i}`)
     )
 
-  await Promise.all(files.map(file => fs.outputFile(file, 'hello')))
+  await Promise.all(files.map((file) => fs.outputFile(file, 'hello')))
 }
 
 async function run(fn) {

docs/advanced-features/custom-document.md

@@ -71,9 +71,9 @@ class MyDocument extends Document {
     ctx.renderPage = () =>
       originalRenderPage({
         // useful for wrapping the whole react tree
-        enhanceApp: App => App,
+        enhanceApp: (App) => App,
         // useful for wrapping in a per-page basis
-        enhanceComponent: Component => Component,
+        enhanceComponent: (Component) => Component,
       })
 
     // Run the parent `getInitialProps`, it now includes the custom `renderPage`

docs/advanced-features/custom-server.md

@@ -45,7 +45,7 @@ app.prepare().then(() => {
     } else {
       handle(req, res, parsedUrl)
     }
-  }).listen(3000, err => {
+  }).listen(3000, (err) => {
     if (err) throw err
     console.log('> Ready on http://localhost:3000')
   })

docs/advanced-features/dynamic-import.md

@@ -55,7 +55,7 @@ To dynamically import the `Hello` component, you can return it from the [Promise
 import dynamic from 'next/dynamic'
 
 const DynamicComponent = dynamic(() =>
-  import('../components/hello').then(mod => mod.Hello)
+  import('../components/hello').then((mod) => mod.Hello)
 )
 
 function Home() {

docs/api-reference/data-fetching/getInitialProps.md

@@ -29,7 +29,7 @@ function Page({ stars }) {
   return <div>Next stars: {stars}</div>
 }
 
-Page.getInitialProps = async ctx => {
+Page.getInitialProps = async (ctx) => {
   const res = await fetch('https://api.github.com/repos/zeit/next.js')
   const json = await res.json()
   return { stars: json.stargazers_count }

docs/api-reference/next.config.js/custom-webpack-config.md

@@ -24,7 +24,7 @@ module.exports = {
     config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
     return config
   },
-  webpackDevMiddleware: config => {
+  webpackDevMiddleware: (config) => {
     // Perform customizations to webpack dev middleware config
     // Important: return the modified config
     return config

docs/api-reference/next.config.js/exportPathMap.md

@@ -23,7 +23,7 @@ Open `next.config.js` and add the following `exportPathMap` config:
 
 ```js
 module.exports = {
-  exportPathMap: async function(
+  exportPathMap: async function (
     defaultPathMap,
     { dev, dir, outDir, distDir, buildId }
   ) {

docs/api-reference/next/link.md

@@ -67,7 +67,7 @@ A `Link` to a dynamic route is a combination of the `href` and `as` props. A lin
 ```jsx
 const pids = ['id1', 'id2', 'id3']
 {
-  pids.map(pid => (
+  pids.map((pid) => (
     <Link href="/post/[pid]" as={`/post/${pid}`}>
       <a>Post {pid}</a>
     </Link>

docs/api-reference/next/router.md

@@ -20,7 +20,7 @@ function ActiveLink({ children, href }) {
     color: router.pathname === href ? 'red' : 'black',
   }
 
-  const handleClick = e => {
+  const handleClick = (e) => {
     e.preventDefault()
     router.push(href)
   }
@@ -178,7 +178,7 @@ import { useCallback, useEffect } from 'react'
 import Router from 'next/router'
 
 export default function Login() {
-  const handleSubmit = useCallback(e => {
+  const handleSubmit = useCallback((e) => {
     e.preventDefault()
 
     fetch('/api/login', {
@@ -187,7 +187,7 @@ export default function Login() {
       body: JSON.stringify({
         /* Form data */
       }),
-    }).then(res => {
+    }).then((res) => {
       // Do a fast client-side transition to the already prefetched dashboard page
       if (res.ok) Router.push('/dashboard')
     })
@@ -283,7 +283,7 @@ For example, to listen to the router event `routeChangeStart`, do the following:
 ```jsx
 import Router from 'next/router'
 
-const handleRouteChange = url => {
+const handleRouteChange = (url) => {
   console.log('App is changing to: ', url)
 }
 
@@ -316,7 +316,7 @@ Router events should be registered when a component mounts ([useEffect](https://
 import Router from 'next/router'
 
 useEffect(() => {
-  const handleRouteChange = url => {
+  const handleRouteChange = (url) => {
     console.log('App is changing to: ', url)
   }
 

docs/api-routes/api-middlewares.md

@@ -94,7 +94,7 @@ const cors = Cors({
 // And to throw an error when an error happens in a middleware
 function runMiddleware(req, res, fn) {
   return new Promise((resolve, reject) => {
-    fn(req, res, result => {
+    fn(req, res, (result) => {
       if (result instanceof Error) {
         return reject(result)
       }

docs/basic-features/data-fetching.md

@@ -56,7 +56,7 @@ Here’s an example which uses `getStaticProps` to fetch a list of blog posts fr
 function Blog({ posts }) {
   return (
     <ul>
-      {posts.map(post => (
+      {posts.map((post) => (
         <li>{post.title}</li>
       ))}
     </ul>
@@ -100,7 +100,7 @@ For TypeScript, you can use the `GetStaticProps` type from `next`:
 ```ts
 import { GetStaticProps } from 'next'
 
-export const getStaticProps: GetStaticProps = async context => {
+export const getStaticProps: GetStaticProps = async (context) => {
   // ...
 }
 ```
@@ -123,7 +123,7 @@ import path from 'path'
 function Blog({ posts }) {
   return (
     <ul>
-      {posts.map(post => (
+      {posts.map((post) => (
         <li>
           <h3>{post.filename}</h3>
           <p>{post.content}</p>
@@ -140,7 +140,7 @@ export async function getStaticProps() {
   const postsDirectory = path.join(process.cwd(), 'posts')
   const filenames = fs.readdirSync(postsDirectory)
 
-  const posts = filenames.map(filename => {
+  const posts = filenames.map((filename) => {
     const filePath = path.join(postsDirectory, filename)
     const fileContents = fs.readFileSync(filePath, 'utf8')
 
@@ -260,7 +260,7 @@ export async function getStaticPaths() {
   const posts = await res.json()
 
   // Get the paths we want to pre-render based on posts
-  const paths = posts.map(post => ({
+  const paths = posts.map((post) => ({
     params: { id: post.id },
   }))
 
@@ -445,7 +445,7 @@ For TypeScript, you can use the `GetServerSideProps` type from `next`:
 ```ts
 import { GetServerSideProps } from 'next'
 
-export const getServerSideProps: GetServerSideProps = async context => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   // ...
 }
 ```

docs/basic-features/pages.md

@@ -93,7 +93,7 @@ Some pages require fetching external data for pre-rendering. There are two scena
 function Blog({ posts }) {
   return (
     <ul>
-      {posts.map(post => (
+      {posts.map((post) => (
         <li>{post.title}</li>
       ))}
     </ul>
@@ -152,7 +152,7 @@ export async function getStaticPaths() {
   const posts = await res.json()
 
   // Get the paths we want to pre-render based on posts
-  const paths = posts.map(post => `/posts/${post.id}`)
+  const paths = posts.map((post) => `/posts/${post.id}`)
 
   // We'll pre-render only these paths at build time.
   // { fallback: false } means other routes should 404.

docs/basic-features/typescript.md

@@ -54,15 +54,15 @@ For `getStaticProps`, `getStaticPaths`, and `getServerSideProps`, you can use th
 ```ts
 import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
 
-export const getStaticProps: GetStaticProps = async context => {
+export const getStaticProps: GetStaticProps = async (context) => {
   // ...
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
   // ...
 }
 
-export const getServerSideProps: GetServerSideProps = async context => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   // ...
 }
 ```

docs/routing/introduction.md

@@ -90,7 +90,7 @@ The `as` prop can also be generated dynamically. For example, to show a list of
 function Home({ posts }) {
   return (
     <ul>
-      {posts.map(post => (
+      {posts.map((post) => (
         <li key={post.id}>
           <Link href="/blog/[slug]" as={`/blog/${post.slug}`}>
             <a>{post.title}</a>

docs/upgrading.md

@@ -171,8 +171,8 @@ import dynamic from 'next/dynamic'
 const HelloBundle = dynamic({
   modules: () => {
     const components = {
-      Hello1: () => import('../components/hello1').then(m => m.default),
-      Hello2: () => import('../components/hello2').then(m => m.default),
+      Hello1: () => import('../components/hello1').then((m) => m.default),
+      Hello2: () => import('../components/hello2').then((m) => m.default),
     }
 
     return components

errors/export-path-mismatch.md

@@ -11,7 +11,7 @@ Change your `exportPathMap` function in `next.config.js` to have a path that mat
 
 ```js
 module.exports = {
-  exportPathMap: function() {
+  exportPathMap: function () {
     return {
       '/': { page: '/' },
       // '/blog/nextjs': { page: '/blog/[post]/comment/[id]' },        // wrong

errors/get-initial-props-as-an-instance-method.md

@@ -23,7 +23,7 @@ export default class YourEntryComponent extends React.Component {
 or
 
 ```js
-const YourEntryComponent = function() {
+const YourEntryComponent = function () {
   return 'foo'
 }
 

errors/next-dynamic-modules.md

@@ -18,8 +18,8 @@ import dynamic from 'next/dynamic'
 const HelloBundle = dynamic({
   modules: () => {
     const components = {
-      Hello1: () => import('../components/hello1').then(m => m.default),
-      Hello2: () => import('../components/hello2').then(m => m.default),
+      Hello1: () => import('../components/hello1').then((m) => m.default),
+      Hello2: () => import('../components/hello2').then((m) => m.default),
     }
 
     return components

errors/no-on-app-updated-hook.md

@@ -5,7 +5,7 @@ Due to [this bug fix](https://github.com/zeit/next.js/pull/3849), we had to remo
 We use this hook to detect a new app deployment when switching pages and act accordingly. Although there are many things you can do in this hook, it's often used to navigate the page via the server as shown below:
 
 ```js
-Router.onAppUpdated = function(nextRoute) {
+Router.onAppUpdated = function (nextRoute) {
   location.href = nextRoute
 }
 ```
@@ -17,7 +17,7 @@ One real use of this hook is to persist your application state to local-storage
 This is code for that:
 
 ```js
-window.onbeforeunload = function(e) {
+window.onbeforeunload = function (e) {
   // Get the application state (usually from a store like Redux)
   const appState = {}
   localStorage.setItem('app-state', JSON.stringify(appState))

errors/promise-in-next-config.md

@@ -6,7 +6,7 @@ The webpack function in `next.config.js` returned a promise which is not support
 
 ```js
 module.exports = {
-  webpack: async function(config) {
+  webpack: async function (config) {
     return config
   },
 }

examples/amp-first/components/Layout.js

@@ -10,7 +10,7 @@ const THEME_COLOR = '#005af0'
  *
  * @param {Props} props
  */
-const Layout = props => (
+const Layout = (props) => (
   <>
     <NextHead>
       <title>{props.title || ''}</title>

examples/amp-first/pages/index.js

@@ -9,7 +9,7 @@ import {
 
 export const config = { amp: true }
 
-const Home = props => (
+const Home = (props) => (
   <>
     <Layout
       title="Welcome to AMP"

examples/api-routes-apollo-server-and-client-auth/apollo/client.js

@@ -37,7 +37,7 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
   }
 
   if (ssr || PageComponent.getInitialProps) {
-    WithApollo.getInitialProps = async ctx => {
+    WithApollo.getInitialProps = async (ctx) => {
       const { AppTree } = ctx
 
       // Initialize ApolloClient, add it to the ctx object so

examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.js

@@ -31,7 +31,7 @@ export const resolvers = {
         try {
           const { id, email } = jwt.verify(token, JWT_SECRET)
 
-          return users.find(user => user.id === id && user.email === email)
+          return users.find((user) => user.id === id && user.email === email)
         } catch {
           throw new AuthenticationError(
             'Authentication token is invalid, please log in'
@@ -50,7 +50,7 @@ export const resolvers = {
     },
 
     async signIn(_parent, args, context, _info) {
-      const user = users.find(user => user.email === args.input.email)
+      const user = users.find((user) => user.email === args.input.email)
 
       if (user && validPassword(user, args.input.password)) {
         const token = jwt.sign(

examples/api-routes-apollo-server-and-client/apollo/client.js

@@ -37,7 +37,7 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
   }
 
   if (ssr || PageComponent.getInitialProps) {
-    WithApollo.getInitialProps = async ctx => {
+    WithApollo.getInitialProps = async (ctx) => {
       const { AppTree } = ctx
 
       // Initialize ApolloClient, add it to the ctx object so

examples/api-routes-cors/lib/init-middleware.js

@@ -3,7 +3,7 @@
 export default function initMiddleware(middleware) {
   return (req, res) =>
     new Promise((resolve, reject) => {
-      middleware(req, res, result => {
+      middleware(req, res, (result) => {
         if (result instanceof Error) {
           return reject(result)
         }

examples/api-routes-graphql/pages/index.js

@@ -1,15 +1,15 @@
 import useSWR from 'swr'
 
-const fetcher = query =>
+const fetcher = (query) =>
   fetch('/api/graphql', {
     method: 'POST',
     headers: {
       'Content-type': 'application/json',
     },
     body: JSON.stringify({ query }),
   })
-    .then(res => res.json())
-    .then(json => json.data)
+    .then((res) => res.json())
+    .then((json) => json.data)
 
 export default function Index() {
   const { data, error } = useSWR('{ users { name } }', fetcher)