Add script to create a functional test project using the latest CRWA template

.gitignore

@@ -9,3 +9,4 @@ tasks/.verdaccio
 tasks/e2e/cypress/fixtures/example.json
 tmp/
 .vscode/*
+blog-test-project/*

package.json

@@ -5,6 +5,7 @@
     "build:clean": "rimraf ./packages/**/dist",
     "build:watch": "lerna run build:watch --parallel; ttsc --build",
     "build:link": "./tasks/build-link",
+    "build:test-project": "./tasks/test-project/test-project",
     "test": "lerna run test --stream -- --colors --maxWorkers=4",
     "lint": "cross-env __REDWOOD__CONFIG_PATH=packages/create-redwood-app/template eslint -c .eslintrc.js packages",
     "lint:fix": "cross-env __REDWOOD__CONFIG_PATH=packages/create-redwood-app/template eslint -c .eslintrc.js --fix packages"

tasks/test-project/codemods/aboutPage.js

@@ -0,0 +1,34 @@
+const body = `
+<p className="font-light">
+This site was created to demonstrate my mastery of Redwood: Look on my
+works, ye mighty, and despair!
+</p>
+`
+
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: 'Literal',
+        value: '@redwoodjs/router',
+      },
+    })
+    .remove()
+
+  return root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'AboutPage',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.body.body[0].argument = body
+      return node
+    })
+    .toSource()
+}

tasks/test-project/codemods/blogLayout.js

@@ -0,0 +1,72 @@
+const body = `
+<header className="relative flex justify-between items-center py-4 px-8 bg-blue-700 text-white">
+  <h1 className="text-3xl font-semibold tracking-tight">
+    <Link
+      className="text-blue-400 hover:text-blue-100 transition duration-100"
+      to={routes.home()}
+    >
+      Redwood Blog
+    </Link>
+  </h1>
+  <nav>
+    <ul className="relative flex items-center font-light">
+      <li>
+        <Link
+          className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+          to={routes.about()}
+        >
+          About
+        </Link>
+      </li>
+      <li>
+        <Link
+          className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+          to={routes.contact()}
+        >
+          Contact
+        </Link>
+      </li>
+      <li>
+        <Link
+          className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+          to={routes.posts()}
+        >
+          Admin
+        </Link>
+      </li>
+    </ul>
+  </nav>
+</header>
+<main className="max-w-4xl mx-auto p-12 bg-white shadow-lg rounded-b mt-3">
+  {children}
+</main>
+`
+
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const routerImport = j.importDeclaration(
+    [
+      j.importSpecifier(j.identifier('Link'), j.identifier('Link')),
+      j.importSpecifier(j.identifier('routes'), j.identifier('routes')),
+    ],
+    j.stringLiteral('@redwoodjs/router')
+  )
+
+  root.find(j.VariableDeclaration).insertBefore(routerImport)
+
+  return root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'BlogLayout',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.body.body[0].argument.children = [body]
+      return node
+    })
+    .toSource()
+}

tasks/test-project/codemods/blogPost.js

@@ -0,0 +1,69 @@
+const body = `
+<article>
+  <header className="mt-4">
+    <p className="text-sm">
+      {new Intl.DateTimeFormat('en-US', {  year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(post.createdAt))}
+    </p>
+    <h2 className="text-xl mt-2 font-semibold">
+      <Link className="hover:text-blue-600" to={routes.blogPost({ id: post.id })}>{post.title}</Link>
+    </h2>
+  </header>
+  <div className="mt-2 mb-4 text-gray-900 font-light">{post.body}</div>
+</article>
+`
+
+const propsInterface = `
+interface Props {
+  post: { id: string, title: string, body: string, createdAt: string }
+}
+`
+
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const routerImport = j.importDeclaration(
+    [
+      j.importSpecifier(j.identifier('Link'), j.identifier('Link')),
+      j.importSpecifier(j.identifier('routes'), j.identifier('routes')),
+    ],
+    j.stringLiteral('@redwoodjs/router')
+  )
+
+  root.find(j.VariableDeclaration).insertBefore(routerImport)
+
+  if (file.path.endsWith('.tsx')) {
+    root.find(j.VariableDeclaration).insertBefore(propsInterface)
+
+    root
+      .find(j.Identifier, {
+        name: 'BlogPost',
+      })
+      .at(0)
+      .replaceWith((nodePath) => {
+        const { node } = nodePath
+        node.typeAnnotation.typeAnnotation.typeParameters = '<Props>'
+        return node
+      })
+  }
+
+  return root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'BlogPost',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.params = [
+        ...node.init.params,
+        j.objectPattern([
+          j.objectProperty(j.identifier('post'), j.identifier('post')),
+        ]),
+      ]
+      node.init.body.body[0].argument = body
+      return node
+    })
+    .toSource()
+}

tasks/test-project/codemods/blogPostCell.js

@@ -0,0 +1,64 @@
+const query = `
+  query BlogPostQuery($id: Int!) {
+    post(id: $id) {
+      id
+      title
+      body
+      createdAt
+    }
+  }
+`
+const successBody = `<BlogPost post={post} />`
+
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const componentImport = j.importDeclaration(
+    [j.importDefaultSpecifier(j.identifier('BlogPost'))],
+    j.stringLiteral('src/components/BlogPost')
+  )
+
+  root.find(j.ExportNamedDeclaration).at(0).insertBefore(componentImport)
+
+  root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'QUERY',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.quasi = j.templateLiteral(
+        [j.templateElement({ raw: query, cooked: query }, true)],
+        []
+      )
+      return node
+    })
+
+  root
+    .find(j.Identifier, {
+      type: 'Identifier',
+      name: 'blogPost',
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name = 'post'
+      return node
+    })
+
+  return root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'Success',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.body = successBody
+      return node
+    })
+    .toSource()
+}

tasks/test-project/codemods/blogPostPage.js

@@ -0,0 +1,38 @@
+const body = `
+<BlogPostCell id={id} />
+`
+
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const importComponent = j.importDeclaration(
+    [j.importDefaultSpecifier(j.identifier('BlogPostCell'))],
+    j.stringLiteral('src/components/BlogPostCell')
+  )
+
+  root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: 'Literal',
+        value: '@redwoodjs/router',
+      },
+    })
+    .remove()
+
+  root.find(j.VariableDeclaration).insertBefore(importComponent)
+
+  return root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'BlogPostPage',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.body = body
+      return node
+    })
+    .toSource()
+}

tasks/test-project/codemods/blogPostsCell.js

@@ -0,0 +1,66 @@
+const query = `
+    query BlogPostsQuery {
+        posts {
+            id
+            title
+            body
+            createdAt
+        }
+    }
+`
+const successBody = `<div className="divide-y divide-grey-700">
+{posts.map((post) => <BlogPost post={post} />)}
+</div>`
+
+export default (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const importComponent = j.importDeclaration(
+    [j.importDefaultSpecifier(j.identifier('BlogPost'))],
+    j.stringLiteral('src/components/BlogPost')
+  )
+
+  root.find(j.ExportNamedDeclaration).at(0).insertBefore(importComponent)
+
+  root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'QUERY',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.quasi = j.templateLiteral(
+        [j.templateElement({ raw: query, cooked: query }, true)],
+        []
+      )
+      return node
+    })
+
+  root
+    .find(j.Identifier, {
+      type: 'Identifier',
+      name: 'blogPosts',
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.name = 'posts'
+      return node
+    })
+
+  return root
+    .find(j.VariableDeclarator, {
+      id: {
+        type: 'Identifier',
+        name: 'Success',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const { node } = nodePath
+      node.init.body = successBody
+      return node
+    })
+    .toSource()
+}