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

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];
+}