Update FatalErrorPage codemod to work with hybrid JS/TS projects (#5366)

Co-authored-by: Dominic Saadi <32992335+jtoar@users.noreply.github.com>

packages/codemods/src/codemods/v0.50.x/updateDevFatalErrorPage/__testfixtures__/typescript/input/web/src/pages/FatalErrorPage/FatalErrorPage.tsx

@@ -0,0 +1,53 @@
+// This page will be rendered when an error makes it all the way to the top of the
+// application without being handled by a Javascript catch statement or React error
+// boundary.
+//
+// You can modify this page as you wish, but it is important to keep things simple to
+// avoid the possibility that it will cause its own error. If it does, Redwood will
+// still render a generic error page, but your users will prefer something a bit more
+// thoughtful. =)
+
+export default () => (
+  <main>
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+              html, body {
+                margin: 0;
+              }
+              html * {
+                box-sizing: border-box;
+              }
+              main {
+                display: flex;
+                align-items: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+                text-align: center;
+                background-color: #E2E8F0;
+                height: 100vh;
+              }
+              section {
+                background-color: white;
+                border-radius: 0.25rem;
+                width: 32rem;
+                padding: 1rem;
+                margin: 0 auto;
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+              }
+              h1 {
+                font-size: 2rem;
+                margin: 0;
+                font-weight: 500;
+                line-height: 1;
+                color: #2D3748;
+              }
+            `,
+      }}
+    />
+    <section>
+      <h1>
+        <span>Something went wrong</span>
+      </h1>
+    </section>
+  </main>
+)

packages/codemods/src/codemods/v0.50.x/updateDevFatalErrorPage/__testfixtures__/typescript/output/web/src/pages/FatalErrorPage/FatalErrorPage.tsx

@@ -0,0 +1,61 @@
+// This page will be rendered when an error makes it all the way to the top of the
+// application without being handled by a Javascript catch statement or React error
+// boundary.
+//
+// You can modify this page as you wish, but it is important to keep things simple to
+// avoid the possibility that it will cause its own error. If it does, Redwood will
+// still render a generic error page, but your users will prefer something a bit more
+// thoughtful. =)
+
+// Ensures that production builds do not include the error page
+let RedwoodDevFatalErrorPage = undefined
+if (process.env.NODE_ENV === 'development') {
+  RedwoodDevFatalErrorPage =
+    require('@redwoodjs/web/dist/components/DevFatalErrorPage').DevFatalErrorPage
+}
+
+export default RedwoodDevFatalErrorPage ||
+  (() => (
+    <main>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+              html, body {
+                margin: 0;
+              }
+              html * {
+                box-sizing: border-box;
+              }
+              main {
+                display: flex;
+                align-items: center;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+                text-align: center;
+                background-color: #E2E8F0;
+                height: 100vh;
+              }
+              section {
+                background-color: white;
+                border-radius: 0.25rem;
+                width: 32rem;
+                padding: 1rem;
+                margin: 0 auto;
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+              }
+              h1 {
+                font-size: 2rem;
+                margin: 0;
+                font-weight: 500;
+                line-height: 1;
+                color: #2D3748;
+              }
+            `,
+        }}
+      />
+      <section>
+        <h1>
+          <span>Something went wrong</span>
+        </h1>
+      </section>
+    </main>
+  ))

packages/codemods/src/codemods/v0.50.x/updateDevFatalErrorPage/__tests__/updateDevFatalErrorPage.test.ts

@@ -1,7 +1,11 @@
 import { updateDevFatalErrorPage } from '../updateDevFatalErrorPage'
 
 describe('updateDevFatalErrorPage', () => {
-  it('Replaces the FatalErrorPage with a new version that includes development info', async () => {
-    await matchFolderTransform(updateDevFatalErrorPage, 'default')
+  it('Replaces the JS FatalErrorPage with a new version that includes development info', async () => {
+    await matchFolderTransform(updateDevFatalErrorPage, 'javascript')
+  })
+
+  it('Replaces the TS FatalErrorPage with a new version that includes development info', async () => {
+    await matchFolderTransform(updateDevFatalErrorPage, 'typescript')
   })
 })

packages/codemods/src/codemods/v0.50.x/updateDevFatalErrorPage/updateDevFatalErrorPage.ts

@@ -2,7 +2,6 @@ import fs from 'fs'
 import path from 'path'
 
 import { fetch } from 'cross-undici-fetch'
-import fg from 'fast-glob'
 
 import getRWPaths from '../../../lib/getRWPaths'
 
@@ -28,16 +27,16 @@ export const updateDevFatalErrorPage = async () => {
    * Now we just fetch and replace files
    */
   for (const [_dir, filenamesToUrls] of Object.entries(dirs)) {
-    const isTSProject =
-      fg.sync('api/tsconfig.json').length > 0 ||
-      fg.sync('web/tsconfig.json').length > 0
+    const isTSPage = fs.existsSync(
+      path.join(webFatalErrorPagesDir, 'FatalErrorPage.tsx')
+    )
 
     for (const [filename, url] of Object.entries(filenamesToUrls)) {
       const res = await fetch(url)
 
       const text = await res.text()
 
-      const newFatalErrorPage = `${filename}.${isTSProject ? 'tsx' : 'js'}`
+      const newFatalErrorPage = `${filename}.${isTSPage ? 'tsx' : 'js'}`
 
       fs.writeFileSync(newFatalErrorPage, text)
     }