Add Codemod to Update Fatal Error Page to support Development version (…

…#4577) * Adds tests (current fails due to paths) * Console logging to debug * Remove console debugging * Remove commented out console debugging Co-authored-by: Dominic Saadi <[email protected]>
redwoodjs · Feb 26, 2022 · 23bf323 · 23bf323
1 parent f740275
commit 23bf323
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 0 deletions.
diff --git a/packages/codemods/README.md b/packages/codemods/README.md
@@ -42,6 +42,15 @@ The difference is that it's overwriting files.
 That means things that Babel doesn't care about, like spaces, styling (single quotes or double quotes, etc.), all of a sudden matter a lot.
 The parser jscodeshift uses, [recast](https://github.com/benjamn/recast), knows how to preserve these details as much as possible.
 
+### Generating a new Codemod
+
+```
+cd packages/codemods
+yarn generate:codemod
+```
+
+Follow the interactive guide to specify the Redwood framework version for the codemod and type odf codemod.
+
 ### Structure of this package
 
 The root of the CLI is run from `src/codemods.ts`, which loads all the available codemods from the `src/codemods/*` folder.

diff --git a/packages/codemods/src/codemods/v47.x/updateDevFatalErrorPage/README.md b/packages/codemods/src/codemods/v47.x/updateDevFatalErrorPage/README.md
@@ -0,0 +1,19 @@
+# Update Development Fatal Error Page
+
+|         |                  |
+|:--------|:-----------------|
+| version | `0.46` -> `0.47` |
+
+Replaces the web side `FatalErrorPage` with a version that with helpful debugging details in development.
+
+```
+web
+├── src
+│   ├── pages
+│   │   ├── FatalErrorPage
+│   │   │   └── FatalErrorPage.tsx
+```
+
+No jscodeshift is involved.
+
+
diff --git a/...alErrorPage/__testfixtures__/default/input/web/src/pages/FatalErrorPage/FatalErrorPage.js b/...alErrorPage/__testfixtures__/default/input/web/src/pages/FatalErrorPage/FatalErrorPage.js
@@ -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>
+)
diff --git a/...lErrorPage/__testfixtures__/default/output/web/src/pages/FatalErrorPage/FatalErrorPage.js b/...lErrorPage/__testfixtures__/default/output/web/src/pages/FatalErrorPage/FatalErrorPage.js
@@ -0,0 +1,60 @@
+// 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').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>
+  ))
diff --git a/...mods/src/codemods/v47.x/updateDevFatalErrorPage/__tests__/updateDevFatalErrorPage.test.ts b/...mods/src/codemods/v47.x/updateDevFatalErrorPage/__tests__/updateDevFatalErrorPage.test.ts
@@ -0,0 +1,7 @@
+import { updateDevFatalErrorPage } from '../updateDevFatalErrorPage'
+
+describe('updateDevFatalErrorPage', () => {
+  it('Replaces the FatalErrorPage with a new version that includes development info', async () => {
+    await matchFolderTransform(updateDevFatalErrorPage, 'default')
+  })
+})
diff --git a/packages/codemods/src/codemods/v47.x/updateDevFatalErrorPage/updateDevFatalErrorPage.ts b/packages/codemods/src/codemods/v47.x/updateDevFatalErrorPage/updateDevFatalErrorPage.ts
@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+
+import fg from 'fast-glob'
+import fetch from 'node-fetch'
+
+import getRWPaths from '../../../lib/getRWPaths'
+
+export const updateDevFatalErrorPage = async () => {
+  const rwPaths = getRWPaths()
+
+  /**
+   * An object where the keys are resolved filenames and the values are (for the most part) URLs to fetch.
+   *
+   * @remarks
+   *
+   */
+  const webFatalErrorPagesDir = path.join(rwPaths.web.pages, 'FatalErrorPage')
+
+  const dirs = {
+    [webFatalErrorPagesDir]: {
+      [path.join(webFatalErrorPagesDir, 'FatalErrorPage')]:
+        'https://raw.githubusercontent.com/redwoodjs/redwood/main/packages/create-redwood-app/template/web/src/pages/FatalErrorPage/FatalErrorPage.tsx',
+    },
+  }
+
+  /**
+   * 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
+
+    for (const [filename, url] of Object.entries(filenamesToUrls)) {
+      const res = await fetch(url)
+
+      const text = await res.text()
+
+      const newFatalErrorPage = `${filename}.${isTSProject ? 'tsx' : 'js'}`
+
+      fs.writeFileSync(newFatalErrorPage, text)
+    }
+  }
+}
diff --git a/...ages/codemods/src/codemods/v47.x/updateDevFatalErrorPage/updateDevFatalErrorPage.yargs.ts b/...ages/codemods/src/codemods/v47.x/updateDevFatalErrorPage/updateDevFatalErrorPage.yargs.ts
@@ -0,0 +1,13 @@
+import task from 'tasuku'
+
+import { updateDevFatalErrorPage } from './updateDevFatalErrorPage'
+
+export const command = 'update-dev-fatal-error-page'
+export const description =
+  '(v0.46->v0.47) Update Fatal Error Page with development version from the create-redwood-app template'
+
+export const handler = () => {
+  task('Update Fatal Error Page with development version', async () => {
+    await updateDevFatalErrorPage()
+  })
+}