feat(cli): Setup command and codemod for OG image middleware (#10485)

This PR introduces a setup command for the OG image generation
middleware.

---

It did involve moving around some of the codemod utilities we have.
Either because we needed to include them where we previously didn't or
because they no longer made sense in the directory they were in.

packages/cli/src/commands/setup/graphql/features/fragments/__tests__/fragmentsHandler.test.ts

@@ -21,7 +21,7 @@ vi.mock('node:fs', async () => {
 })
 vi.mock('execa')
 // The jscodeshift parts are tested by another test
-vi.mock('../runTransform', () => {
+vi.mock('../../../../../../lib/runTransform', () => {
   return {
     runTransform: () => {
       return {}

packages/cli/src/commands/setup/graphql/features/fragments/fragmentsHandler.ts

@@ -12,8 +12,9 @@ import {
 } from '@redwoodjs/cli-helpers'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
+import { runTransform } from '../../../../../lib/runTransform'
+
 import type { Args } from './fragments'
-import { runTransform } from './runTransform'
 
 export const command = 'fragments'
 export const description = 'Set up Fragments for GraphQL'

packages/cli/src/commands/setup/graphql/features/trustedDocuments/__tests__/trustedDocuments.test.ts

@@ -5,7 +5,9 @@ vi.mock('fs', async () => ({ ...memfsFs, default: { ...memfsFs } }))
 vi.mock('node:fs', async () => ({ ...memfsFs, default: { ...memfsFs } }))
 vi.mock('execa')
 // The jscodeshift parts are tested by another test
-vi.mock('../../fragments/runTransform', () => ({ runTransform: () => ({}) }))
+vi.mock('../../../../../../lib/runTransform', () => ({
+  runTransform: () => ({}),
+}))
 
 vi.mock('listr2', () => {
   return {

packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts

@@ -8,7 +8,7 @@ import { format } from 'prettier'
 import { getPrettierOptions, setTomlSetting } from '@redwoodjs/cli-helpers'
 import { getConfig, getPaths, resolveFile } from '@redwoodjs/project-config'
 
-import { runTransform } from '../fragments/runTransform.js'
+import { runTransform } from '../../../../../lib/runTransform'
 
 export async function handler({ force }: { force: boolean }) {
   const tasks = new Listr(

packages/cli/src/commands/setup/middleware/middleware.ts

@@ -0,0 +1,17 @@
+import terminalLink from 'terminal-link'
+import type { Argv } from 'yargs'
+
+import * as ogImageCommand from './ogImage/ogImage'
+
+export const command = 'middleware <type>'
+export const description = 'Set up a middleware'
+export function builder(yargs: Argv) {
+  return yargs
+    .command(ogImageCommand)
+    .epilogue(
+      `Also see the ${terminalLink(
+        'Redwood CLI Reference',
+        'https://redwoodjs.com/docs/cli-commands',
+      )}`,
+    )
+}

packages/cli/src/commands/setup/middleware/ogImage/__codemod_tests__/middleware.ts

@@ -0,0 +1,18 @@
+import { describe, it } from 'vitest'
+
+describe('Middleware codemod', () => {
+  it('Handles the default TSX case', async () => {
+    await matchTransformSnapshot('codemodMiddleware', 'defaultTsx')
+  })
+
+  it('Handles when OgImageMiddleware is already imported', async () => {
+    await matchTransformSnapshot('codemodMiddleware', 'alreadyContainsImport')
+  })
+
+  it('Handles when registerMiddleware function is already defined', async () => {
+    await matchTransformSnapshot(
+      'codemodMiddleware',
+      'registerFunctionAlreadyDefined',
+    )
+  })
+})

packages/cli/src/commands/setup/middleware/ogImage/__codemod_tests__/vitePlugin.ts

@@ -0,0 +1,7 @@
+import { describe, it } from 'vitest'
+
+describe('Vite plugin codemod', () => {
+  it('Handles the default vite config case', async () => {
+    await matchTransformSnapshot('codemodVitePlugin', 'defaultViteConfig')
+  })
+})

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/alreadyContainsImport.input.tsx

@@ -0,0 +1,18 @@
+import OgImageMiddleware from "@redwoodjs/ogimage-gen/middleware";
+import type { TagDescriptor } from '@redwoodjs/web'
+
+import App from './App'
+import { Document } from './Document'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App />
+    </Document>
+  )
+}

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/alreadyContainsImport.output.tsx

@@ -0,0 +1,27 @@
+import OgImageMiddleware from "@redwoodjs/ogimage-gen/middleware";
+import type { TagDescriptor } from '@redwoodjs/web'
+
+import App from './App'
+import { Document } from './Document'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App />
+    </Document>
+  )
+}
+
+export const registerMiddleware = async () => {
+  const ogMw = new OgImageMiddleware({
+    App,
+    Document,
+  });
+
+  return [ogMw];
+}

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/defaultTsx.input.tsx

@@ -0,0 +1,17 @@
+import type { TagDescriptor } from '@redwoodjs/web'
+
+import App from './App'
+import { Document } from './Document'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App />
+    </Document>
+  )
+}

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/defaultTsx.output.tsx

@@ -0,0 +1,27 @@
+import OgImageMiddleware from "@redwoodjs/ogimage-gen/middleware";
+import type { TagDescriptor } from '@redwoodjs/web'
+
+import App from './App'
+import { Document } from './Document'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App />
+    </Document>
+  )
+}
+
+export const registerMiddleware = async () => {
+  const ogMw = new OgImageMiddleware({
+    App,
+    Document,
+  });
+
+  return [ogMw];
+}

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/defaultViteConfig.input.tsx

@@ -0,0 +1,19 @@
+import dns from 'dns'
+
+import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
+
+import redwood from '@redwoodjs/vite'
+
+// So that Vite will load on localhost instead of `127.0.0.1`.
+// See: https://vitejs.dev/config/server-options.html#server-host.
+dns.setDefaultResultOrder('verbatim')
+
+const viteConfig: UserConfig = {
+  plugins: [redwood()],
+  optimizeDeps: {
+    force: true,
+  },
+}
+
+export default defineConfig(viteConfig)

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/defaultViteConfig.output.tsx

@@ -0,0 +1,20 @@
+import vitePluginOgImageGen from '@redwoodjs/ogimage-gen/plugin'
+import dns from 'dns'
+
+import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
+
+import redwood from '@redwoodjs/vite'
+
+// So that Vite will load on localhost instead of `127.0.0.1`.
+// See: https://vitejs.dev/config/server-options.html#server-host.
+dns.setDefaultResultOrder('verbatim')
+
+const viteConfig: UserConfig = {
+  plugins: [redwood(), vitePluginOgImageGen()],
+  optimizeDeps: {
+    force: true,
+  },
+}
+
+export default defineConfig(viteConfig)

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/registerFunctionAlreadyDefined.input.tsx

@@ -0,0 +1,27 @@
+import type { TagDescriptor } from '@redwoodjs/web'
+
+import App from './App'
+import { Document } from './Document'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App />
+    </Document>
+  )
+}
+
+export const registerMiddleware = async () => {
+  const mojomboMiddleware = () => {
+    while(true){
+      console.log("RedwoodJS is awesome!")
+    }
+  }
+
+  return [mojomboMiddleware]
+}

packages/cli/src/commands/setup/middleware/ogImage/__testfixtures__/registerFunctionAlreadyDefined.output.tsx

@@ -0,0 +1,33 @@
+import OgImageMiddleware from "@redwoodjs/ogimage-gen/middleware";
+import type { TagDescriptor } from '@redwoodjs/web'
+
+import App from './App'
+import { Document } from './Document'
+
+interface Props {
+  css: string[]
+  meta?: TagDescriptor[]
+}
+
+export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
+  return (
+    <Document css={css} meta={meta}>
+      <App />
+    </Document>
+  )
+}
+
+export const registerMiddleware = async () => {
+  const mojomboMiddleware = () => {
+    while(true){
+      console.log("RedwoodJS is awesome!")
+    }
+  }
+
+  const ogMw = new OgImageMiddleware({
+    App,
+    Document,
+  });
+
+  return [mojomboMiddleware, ogMw];
+}