rename and streamline ui

redwoodjs · Apr 26, 2023 · 4d6caa6 · 4d6caa6
1 parent 2ededd3
commit 4d6caa6
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 40 deletions.
diff --git a/packages/codemods/src/codemods/v5.x.x/checkReactRoot/__tests__/checkReactRoot.test.ts b/packages/codemods/src/codemods/v5.x.x/checkReactRoot/__tests__/checkReactRoot.test.ts
diff --git a/packages/codemods/src/codemods/v5.x.x/checkReactRoot/checkReactRoot.yargs.ts b/packages/codemods/src/codemods/v5.x.x/checkReactRoot/checkReactRoot.yargs.ts
diff --git a/.../codemods/v5.x.x/checkReactRoot/README.md → ...odemods/v5.x.x/upgradeToReact18/README.md b/.../codemods/v5.x.x/checkReactRoot/README.md → ...odemods/v5.x.x/upgradeToReact18/README.md
@@ -1,8 +1,8 @@
-# Check React Root
+# Upgrade to React 18
 
 React 18 doesn't handle hydration errors the same way 17 did. It's very strict, so we have to be very careful about the server HTML we send to the browser to be hydrated.
 
-In v5, we changed the default index.html file a bit—we removed the `prerenderPlaceholder`:
+In v5, we changed the default `index.html` file a bit—we removed `prerenderPlaceholder`:
 
 ```diff
  <!DOCTYPE html>

diff --git a/...xtures__/default/input/web/src/index.html → ...xtures__/default/input/web/src/index.html b/...xtures__/default/input/web/src/index.html → ...xtures__/default/input/web/src/index.html
diff --git a/...tures__/default/output/web/src/index.html → ...tures__/default/output/web/src/index.html b/...tures__/default/output/web/src/index.html → ...tures__/default/output/web/src/index.html
diff --git a/packages/codemods/src/codemods/v5.x.x/upgradeToReact18/__tests__/upgradeToReact18.test.ts b/packages/codemods/src/codemods/v5.x.x/upgradeToReact18/__tests__/upgradeToReact18.test.ts
@@ -0,0 +1,10 @@
+import { checkAndTransformReactRoot } from '../upgradeToReact18'
+
+describe('upgradeToReact18', () => {
+  it('Checks and transforms the react root', async () => {
+    await matchFolderTransform(
+      () => checkAndTransformReactRoot({ setWarning: () => {} }),
+      'default'
+    )
+  })
+})
diff --git a/...s/v5.x.x/checkReactRoot/checkReactRoot.ts → ....x.x/upgradeToReact18/upgradeToReact18.ts b/...s/v5.x.x/checkReactRoot/checkReactRoot.ts → ....x.x/upgradeToReact18/upgradeToReact18.ts
@@ -3,29 +3,42 @@ import path from 'path'
 
 import { load } from 'cheerio'
 import execa from 'execa'
+import type { TaskInnerAPI } from 'tasuku'
 
 import getRWPaths from '../../../lib/getRWPaths'
 
-export function checkReactRoot() {
-  const indexHTMLFilepath = path.join(
-    getRWPaths().web.base,
-    'src',
-    'index.html'
-  )
+function checkAndTransformReactRoot(taskContext: TaskInnerAPI) {
+  const indexHTMLFilepath = path.join(getRWPaths().web.src, 'index.html')
 
   const indexHTML = load(fs.readFileSync(indexHTMLFilepath, 'utf-8'))
 
   const reactRoot = indexHTML('#redwood-app')
   const reactRootChildren = reactRoot.children()
 
   if (reactRootChildren.length) {
-    console.log(
+    let reactRootHTML = reactRoot.html()
+
+    if (!reactRootHTML) {
+      throw new Error(
+        `Couldn't get HTML in react root (div with id="redwood-app")`
+      )
+    }
+
+    reactRootHTML = reactRootHTML
+      .replace('<!-- Please keep the line below for prerender support. -->', '')
+      .replace('&lt;%= prerenderPlaceholder %&gt;', '')
+      .split('\n')
+      .filter((line) => line.match(/\S/))
+      .join('\n')
+
+    taskContext.setWarning(
       [
         `The react root (<div id="redwood-app"></div>) in ${indexHTMLFilepath} has children:`,
-        reactRoot.html(),
+        '',
+        reactRootHTML,
+        '',
         'React expects to control this DOM node completely. This codemod has moved the children outside the react root',
         'but consider moving them into a layout.',
-        '',
       ].join('\n')
     )
   }
@@ -36,7 +49,7 @@ export function checkReactRoot() {
   fs.writeFileSync(indexHTMLFilepath, indexHTML.html())
 }
 
-export function updateReactDeps() {
+async function upgradeReactDepsTo18() {
   const redwoodProjectPaths = getRWPaths()
 
   const webPackageJSONPath = path.join(
@@ -62,8 +75,9 @@ export function updateReactDeps() {
 
   fs.writeFileSync(webPackageJSONPath, JSON.stringify(webPackageJSON, null, 2))
 
-  execa.commandSync('yarn install', {
+  await execa.command('yarn install', {
     cwd: redwoodProjectPaths.base,
-    stdio: 'inherit',
   })
 }
+
+export { checkAndTransformReactRoot, upgradeReactDepsTo18 }
diff --git a/packages/codemods/src/codemods/v5.x.x/upgradeToReact18/upgradeToReact18.yargs.ts b/packages/codemods/src/codemods/v5.x.x/upgradeToReact18/upgradeToReact18.yargs.ts
@@ -0,0 +1,20 @@
+import task from 'tasuku'
+
+import {
+  checkAndTransformReactRoot,
+  upgradeReactDepsTo18,
+} from './upgradeToReact18'
+
+export const command = 'upgrade-to-react-18'
+
+export const description = '(v4.x.x->v5.0.0) Upgrade to React 18'
+
+export const handler = () => {
+  task('Check and transform react root', async (taskContext) => {
+    checkAndTransformReactRoot(taskContext)
+  })
+
+  task('Update react deps', async () => {
+    await upgradeReactDepsTo18()
+  })
+}