feat(prettier) upgrade to prettier v3 (#10179)

Second attempt of #9077 now that Jest tests are holding us back thanks to @Josh-Walker-GM! 🚀 I've also included the changes in #9078. I'm pretty sure this isn't breaking but will be more thorough after CI passes.
redwoodjs · Mar 10, 2024 · 6f34164 · 6f34164
1 parent d2eddd3
commit 6f34164
Show file tree

Hide file tree

Showing 49 changed files with 463 additions and 278 deletions.
diff --git a/.changesets/10179.md b/.changesets/10179.md
@@ -0,0 +1,34 @@
+- feat(prettier) upgrade to prettier v3 (#10179) by @jtoar
+
+This PR upgrades Redwood internally to Prettier v3. We believe this won't have any downstream effect for users.
+
+If you have Tailwind CSS configured, can upgrade `prettier-plugin-tailwindcss` to a version later than `0.4.1` if you make a few changes:
+
+- Change `prettier.config.js` to `prettier.config.mjs` (js -> mjs)
+- `export default` instead of `module.exports` 
+- `await import('...')` any plugins instead of `require('...')`
+
+Here's an example of an updated `prettier.config.mjs` to work with `prettier-plugin-tailwindcss@^0.5.12`:
+
+```js
+// prettier.config.mjs
+
+export default {
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'always',
+  overrides: [
+    {
+      files: 'Routes.*',
+      options: {
+        printWidth: 999,
+      },
+    },
+  ],
+  tailwindConfig: './web/config/tailwind.config.js',
+  plugins: [await import('prettier-plugin-tailwindcss')],
+}
+```
diff --git a/packages/cli-helpers/package.json b/packages/cli-helpers/package.json
@@ -38,7 +38,7 @@
     "listr2": "6.6.1",
     "lodash": "4.17.21",
     "pascalcase": "1.0.0",
-    "prettier": "2.8.8",
+    "prettier": "3.2.5",
     "prompts": "2.4.2",
     "terminal-link": "2.1.1"
   },

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -72,7 +72,7 @@
     "pascalcase": "1.0.0",
     "pluralize": "8.0.0",
     "portfinder": "1.0.32",
-    "prettier": "2.8.8",
+    "prettier": "3.2.5",
     "prisma": "5.10.2",
     "prompts": "2.4.2",
     "rimraf": "5.0.5",

diff --git a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
@@ -887,16 +887,14 @@ import type {
   TypedDocumentNode,
 } from '@redwoodjs/web'
 
-export const QUERY: TypedDocumentNode<
-  MembersQuery,
-  MembersQueryVariables
-> = gql\`
-  query MembersQuery {
-    members {
-      id
+export const QUERY: TypedDocumentNode<MembersQuery, MembersQueryVariables> =
+  gql\`
+    query MembersQuery {
+      members {
+        id
+      }
     }
-  }
-\`
+  \`
 
 export const Loading = () => <div>Loading...</div>
 

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap b/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap
@@ -2233,28 +2233,26 @@ import type {
 
 import Post from 'src/components/Post/Post'
 
-export const QUERY: TypedDocumentNode<
-  FindPostById,
-  FindPostByIdVariables
-> = gql\`
-  query FindPostById($id: Int!) {
-    post: post(id: $id) {
-      id
-      title
-      slug
-      author
-      body
-      image
-      postedAt
-      isPinned
-      readTime
-      rating
-      upvotes
-      metadata
-      hugeNumber
+export const QUERY: TypedDocumentNode<FindPostById, FindPostByIdVariables> =
+  gql\`
+    query FindPostById($id: Int!) {
+      post: post(id: $id) {
+        id
+        title
+        slug
+        author
+        body
+        image
+        postedAt
+        isPinned
+        readTime
+        rating
+        upvotes
+        metadata
+        hugeNumber
+      }
     }
-  }
-\`
+  \`
 
 export const Loading = () => <div>Loading...</div>
 

diff --git a/...es/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffoldNoNest.test.js.snap b/...es/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffoldNoNest.test.js.snap
@@ -1618,28 +1618,26 @@ import type {
 
 import Post from 'src/components/Post'
 
-export const QUERY: TypedDocumentNode<
-  FindPostById,
-  FindPostByIdVariables
-> = gql\`
-  query FindPostById($id: Int!) {
-    post: post(id: $id) {
-      id
-      title
-      slug
-      author
-      body
-      image
-      postedAt
-      isPinned
-      readTime
-      rating
-      upvotes
-      metadata
-      hugeNumber
+export const QUERY: TypedDocumentNode<FindPostById, FindPostByIdVariables> =
+  gql\`
+    query FindPostById($id: Int!) {
+      post: post(id: $id) {
+        id
+        title
+        slug
+        author
+        body
+        image
+        postedAt
+        isPinned
+        readTime
+        rating
+        upvotes
+        metadata
+        hugeNumber
+      }
     }
-  }
-\`
+  \`
 
 export const Loading = () => <div>Loading...</div>
 

diff --git a/packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts b/packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts
@@ -64,7 +64,7 @@ export async function handler({ force }: { force: boolean }) {
 
           const prettierOptions = await getPrettierOptions()
 
-          const prettifiedApp = format(source, {
+          const prettifiedApp = await format(source, {
             ...prettierOptions,
             parser: 'babel-ts',
           })

diff --git a/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js b/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js
@@ -115,7 +115,7 @@ export const handler = async ({ force, install }) => {
   })
   const rwPaths = getPaths()
 
-  const projectPackages = ['prettier-plugin-tailwindcss@0.4.1']
+  const projectPackages = ['prettier-plugin-tailwindcss']
 
   const webWorkspacePackages = [
     'postcss',

diff --git a/packages/cli/src/lib/__tests__/mergeBasics.test.js b/packages/cli/src/lib/__tests__/mergeBasics.test.js
@@ -5,22 +5,22 @@ import { concatUnique } from '../merge/strategy'
 
 import { unindented } from './fixtures/unindented'
 
-const expectMerged = (base, ext, merged, strategy = {}) => {
-  expect(merge(unindented(base), unindented(ext), strategy)).toBe(
+const expectMerged = async (base, ext, merged, strategy = {}) => {
+  expect(await merge(unindented(base), unindented(ext), strategy)).toBe(
     unindented(merged)
   )
 }
 
-const expectTrivialConcat = (base, ext, strategy = {}) => {
+const expectTrivialConcat = async (base, ext, strategy = {}) => {
   const ubase = unindented(base)
   const uext = unindented(ext)
-  expect(merge(ubase, uext, strategy)).toBe(`${ubase}\n${uext}\n`)
+  expect(await merge(ubase, uext, strategy)).toBe(`${ubase}\n${uext}\n`)
 }
 
 describe('the basics', () => {
-  it('Inserts extension declarations in the last possible position', () => {
+  it('Inserts extension declarations in the last possible position', async () => {
     // Notice how 'y' is reordered above 'list' to ensure its reference in 'list' is valid.
-    expectMerged(
+    await expectMerged(
       `\
       const x = 'x'
       const list = [x]
@@ -37,20 +37,20 @@ describe('the basics', () => {
       { ArrayExpression: concatUnique }
     )
   })
-  it('Merges JSX strings', () => {
+  it('Merges JSX strings', async () => {
     const componentA = 'const ComponentA = (props) => <div>Hello</div>'
     const componentB = 'const ComponentB = (props) => <div>Bye</div>'
-    expectTrivialConcat(componentA, componentB)
+    await expectTrivialConcat(componentA, componentB)
   })
-  it('Merges TSX strings', () => {
+  it('Merges TSX strings', async () => {
     const componentA =
       'const ComponentA: MyComponent = (props) => <div>Hello</div>'
     const componentB =
       'const ComponentB: MyComponent = (props) => <div>Bye</div>'
-    expectTrivialConcat(componentA, componentB)
+    await expectTrivialConcat(componentA, componentB)
   })
-  it('Merges TS strings', () => {
-    expectMerged(
+  it('Merges TS strings', async () => {
+    await expectMerged(
       `\
       const x: string = 'x'
       const list: string[] = [x]
@@ -70,108 +70,117 @@ describe('the basics', () => {
 })
 
 describe('Import behavior', () => {
-  it('keeps both identical namespace imports', () => {
-    expectTrivialConcat(
+  it('keeps both identical namespace imports', async () => {
+    await expectTrivialConcat(
       "import * as React from 'react'",
       "import * as React from 'react'"
     )
   })
 
-  it('keeps both identical specifier imports', () => {
-    expectTrivialConcat(
+  it('keeps both identical specifier imports', async () => {
+    await expectTrivialConcat(
       "import { foo } from 'source'",
       "import { foo } from 'source'"
     )
   })
 
-  it('keeps both differing import specifiers in separate imports', () => {
-    expectTrivialConcat(
+  it('keeps both differing import specifiers in separate imports', async () => {
+    await expectTrivialConcat(
       "import { bar } from 'source'",
       "import { foo } from 'source'"
     )
   })
 
-  it('keeps both differing sets of import specifiers, even with an overlap.', () => {
-    expectTrivialConcat(
+  it('keeps both differing sets of import specifiers, even with an overlap.', async () => {
+    await expectTrivialConcat(
       "import { foo, bar } from 'source'",
       "import { bar, baz } from 'source'"
     )
   })
 
-  it('keeps both default and specifier imports', () => {
-    expectTrivialConcat(
+  it('keeps both default and specifier imports', async () => {
+    await expectTrivialConcat(
       "import def from 'source'",
       "import { foo } from 'source'"
     )
   })
 
-  it('keeps both default + specifier and specifier imports', () => {
-    expectTrivialConcat(
+  it('keeps both default + specifier and specifier imports', async () => {
+    await expectTrivialConcat(
       "import def, { foo } from 'source'",
       "import { bar } from 'source'"
     )
   })
 
-  it('keeps both specifier and default imports', () => {
-    expectTrivialConcat(
+  it('keeps both specifier and default imports', async () => {
+    await expectTrivialConcat(
       "import { foo } from 'source'",
       "import def from 'source'"
     )
   })
 
-  it('does not merge import namespace identifiers with conflicting local names', () => {
-    expectTrivialConcat(
+  it('does not merge import namespace identifiers with conflicting local names', async () => {
+    await expectTrivialConcat(
       "import * as One from 'source'",
       "import * as Two from 'source'"
     )
   })
 
-  it('does not merge default specifiers with conflicting local names', () => {
-    expectTrivialConcat("import One from 'source'", "import Two from 'source'")
+  it('does not merge default specifiers with conflicting local names', async () => {
+    await expectTrivialConcat(
+      "import One from 'source'",
+      "import Two from 'source'"
+    )
   })
 
-  it('does not merge side-effect imports and default imports', () => {
-    expectTrivialConcat("import 'source'", "import Def from 'source'")
+  it('does not merge side-effect imports and default imports', async () => {
+    await expectTrivialConcat("import 'source'", "import Def from 'source'")
   })
 
-  it('does not merge side-effect imports and namespace imports', () => {
-    expectTrivialConcat("import 'source'", "import * as Name from 'source'")
+  it('does not merge side-effect imports and namespace imports', async () => {
+    await expectTrivialConcat(
+      "import 'source'",
+      "import * as Name from 'source'"
+    )
   })
 
-  it('does not merge side-effect imports import specifiers', () => {
-    expectTrivialConcat("import 'source'", "import { foo, bar } from 'source'")
+  it('does not merge side-effect imports import specifiers', async () => {
+    await expectTrivialConcat(
+      "import 'source'",
+      "import { foo, bar } from 'source'"
+    )
   })
 
-  it('Does not merge side-effect imports with other import types', () => {
-    expectTrivialConcat(
+  it('Does not merge side-effect imports with other import types', async () => {
+    await expectTrivialConcat(
       "import def, { foo, bar } from 'source'",
       "import 'source'"
     )
   })
 
-  it('keeps both import default specifiers and import namespace identifiers', () => {
-    expectTrivialConcat(
+  it('keeps both import default specifiers and import namespace identifiers', async () => {
+    await expectTrivialConcat(
       "import src from 'source'",
       "import * as Source from 'source'"
     )
   })
 
-  it('keeps all imports with the same source', () => {
-    expectTrivialConcat(
+  it('keeps all imports with the same source', async () => {
+    await expectTrivialConcat(
       "import { foo } from 'source'",
       "import { bar } from 'source'\nimport { baz } from 'source'"
     )
   })
 
-  it('keeps multiple default imports with the same source', () => {
-    expectTrivialConcat(
+  it('keeps multiple default imports with the same source', async () => {
+    await expectTrivialConcat(
       "import default1 from 'source'",
       "import default2 from 'source'\nimport { foo } from 'source'"
     )
   })
 
-  it('keeps multiple types of imports with the same source', () => {
-    expectTrivialConcat(
+  it('keeps multiple types of imports with the same source', async () => {
+    await expectTrivialConcat(
       "import default1 from 'source'\nimport * as namespace from 'source'",
       "import default2 from 'source'\nimport { foo } from 'source'"
     )