feat(og-gen): Implement middleware and hooks (redwoodjs#10469)

Co-authored-by: Rob Cameron <cannikin@fastmail.com>

Author: dac09

.changesets/10469.md

@@ -0,0 +1,45 @@
+- feat(og-gen): Implement middleware and hooks  (#10469) by @dac09
+
+The OG Gen saga continues with  @cannikin and @dac09 ⚔️
+
+This PR:
+- adds OgImageMiddleware and Hooks to `@redwoodjs/og-gen`, complete with tests
+
+⚠️ Template changes:
+- updates entry.client template to pass in Routes to App
+- updates App to take children (i.e. Routes)
+
+This is so that we can pass the OG component to be rendered _with_ your App's CSS setup.
+
+
+**How to use this?**
+
+1. **Registering the middleware:**
+    ```ts 
+    import OgImageMiddleware from '@redwoodjs/ogimage-gen/middleware'
+
+    export const registerMiddleware = () => {
+      const ogMw = new OgImageMiddleware({
+        App,
+        Document,
+      })
+
+      return [ogMw]
+    }
+    ```
+
+2. Configure your `vite.config.ts`
+    ```ts
+    import vitePluginOgImageGen from '@redwoodjs/ogimage-gen/plugin'
+
+    const viteConfig: UserConfig = {
+      // 👇 so it builds your OG components
+      plugins: [redwood(), vitePluginOgImageGen()],
+    }
+
+    export default defineConfig(viteConfig)
+    ```
+3. Add your OG Image component next to the page it's for
+e.g. web/src/pages/AboutPage/AboutPage.png.tsx
+
+4. Use hooks on AboutPage to generate the ogURL

.vscode/settings.json

@@ -31,6 +31,7 @@
     "Flightcontrol",
     "graphiql",
     "memfs",
+    "OGIMAGE",
     "opentelemetry",
     "pino",
     "Pistorius",

__fixtures__/test-project/web/src/App.tsx

@@ -4,12 +4,12 @@ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
 import { AuthProvider, useAuth } from './auth'
 
-import './scaffold.css'
 import './index.css'
+import './scaffold.css'
+
 interface AppProps {
   children?: ReactNode
 }
@@ -19,7 +19,7 @@ const App = ({ children }: AppProps) => (
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
         <RedwoodApolloProvider useAuth={useAuth}>
-          {children ? children : <Routes />}
+          {children}
         </RedwoodApolloProvider>
       </AuthProvider>
     </RedwoodProvider>

__fixtures__/test-project/web/src/entry.client.tsx

@@ -1,6 +1,8 @@
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from './App'
+import Routes from './Routes'
+
 /**
  * When `#redwood-app` isn't empty then it's very likely that you're using
  * prerendering. So React attaches event listeners to the existing markup
@@ -16,8 +18,17 @@ if (!redwoodAppElement) {
 }
 
 if (redwoodAppElement.children?.length > 0) {
-  hydrateRoot(redwoodAppElement, <App />)
+  hydrateRoot(
+    redwoodAppElement,
+    <App>
+      <Routes />
+    </App>
+  )
 } else {
   const root = createRoot(redwoodAppElement)
-  root.render(<App />)
+  root.render(
+    <App>
+      <Routes />
+    </App>
+  )
 }

packages/cli/src/commands/experimental/templates/streamingSsr/entry.client.tsx.template

@@ -2,6 +2,7 @@ import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from './App'
 import { Document } from './Document'
+import Routes from './Routes'
 
 /**
  * When `#redwood-app` isn't empty then it's very likely that you're using
@@ -15,14 +16,18 @@ if (redwoodAppElement.children?.length > 0) {
   hydrateRoot(
     document,
     <Document css={window.__assetMap?.()?.css}>
-      <App />
+      <App>
+        <Routes />
+      </App>
     </Document>
   )
 } else {
   const root = createRoot(document)
   root.render(
     <Document css={window.__assetMap?.()?.css}>
-      <App />
+      <App>
+        <Routes />
+      </App>
     </Document>
   )
 }

packages/cli/src/commands/experimental/templates/streamingSsr/entry.server.tsx.template

@@ -2,6 +2,7 @@ import type { TagDescriptor } from '@redwoodjs/web'
 
 import App from './App'
 import { Document } from './Document'
+import Routes from './Routes'
 
 interface Props {
   css: string[]
@@ -11,7 +12,9 @@ interface Props {
 export const ServerEntry: React.FC<Props> = ({ css, meta }) => {
   return (
     <Document css={css} meta={meta}>
-      <App />
+      <App>
+        <Routes />
+      </App>
     </Document>
   )
 }

packages/cli/src/commands/setup/graphql/features/fragments/__codemod_tests__/appGqlConfigTransform.test.ts

@@ -70,12 +70,12 @@ describe('fragments graphQLClientConfig', () => {
       import { RedwoodApolloProvider } from \"@redwoodjs/web/apollo\";
 
       import FatalErrorPage from \"src/pages/FatalErrorPage\";
-      import Routes from \"src/Routes\";
 
       import { AuthProvider, useAuth } from \"./auth\";
 
-      import \"./scaffold.css\";
       import \"./index.css\";
+      import \"./scaffold.css\";
+
       interface AppProps {
         children?: ReactNode;
       }
@@ -94,7 +94,7 @@ describe('fragments graphQLClientConfig', () => {
                 useAuth={useAuth}
                 graphQLClientConfig={graphQLClientConfig}
               >
-                {children ? children : <Routes />}
+                {children}
               </RedwoodApolloProvider>
             </AuthProvider>
           </RedwoodProvider>

packages/cli/src/lib/index.js

@@ -441,8 +441,8 @@ export const addScaffoldImport = () => {
   }
 
   appJsContents = appJsContents.replace(
-    "import Routes from 'src/Routes'\n",
-    "import Routes from 'src/Routes'\n\nimport './scaffold.css'",
+    "import './index.css'",
+    "import './index.css'\nimport './scaffold.css'\n",
   )
   writeFile(appJsPath, appJsContents, { overwriteExisting: true })
 

packages/core/config/webpack.common.js

@@ -240,6 +240,7 @@ module.exports = (webpackEnv) => {
           'styled-components',
         ),
         '~redwood-app-root': path.resolve(redwoodPaths.web.app),
+        '~redwood-app-routes': path.resolve(redwoodPaths.web.routes),
         react: path.resolve(redwoodPaths.base, 'node_modules', 'react'),
         'react-hook-form': path.resolve(
           redwoodPaths.base,

packages/create-redwood-app/templates/js/web/src/App.jsx

@@ -2,16 +2,13 @@ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
 import './index.css'
 
 const App = ({ children }) => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <RedwoodApolloProvider>
-        {children ? children : <Routes />}
-      </RedwoodApolloProvider>
+      <RedwoodApolloProvider>{children}</RedwoodApolloProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>
 )

packages/create-redwood-app/templates/js/web/src/entry.client.jsx

@@ -1,6 +1,8 @@
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from './App'
+import Routes from './Routes'
+
 /**
  * When `#redwood-app` isn't empty then it's very likely that you're using
  * prerendering. So React attaches event listeners to the existing markup
@@ -16,8 +18,17 @@ if (!redwoodAppElement) {
 }
 
 if (redwoodAppElement.children?.length > 0) {
-  hydrateRoot(redwoodAppElement, <App />)
+  hydrateRoot(
+    redwoodAppElement,
+    <App>
+      <Routes />
+    </App>
+  )
 } else {
   const root = createRoot(redwoodAppElement)
-  root.render(<App />)
+  root.render(
+    <App>
+      <Routes />
+    </App>
+  )
 }

packages/create-redwood-app/templates/ts/web/src/App.tsx

@@ -4,7 +4,6 @@ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
 import './index.css'
 interface AppProps {
@@ -14,9 +13,7 @@ interface AppProps {
 const App = ({ children }: AppProps) => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <RedwoodApolloProvider>
-        {children ? children : <Routes />}
-      </RedwoodApolloProvider>
+      <RedwoodApolloProvider>{children}</RedwoodApolloProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>
 )

packages/create-redwood-app/templates/ts/web/src/entry.client.tsx

@@ -1,6 +1,8 @@
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from './App'
+import Routes from './Routes'
+
 /**
  * When `#redwood-app` isn't empty then it's very likely that you're using
  * prerendering. So React attaches event listeners to the existing markup
@@ -16,8 +18,17 @@ if (!redwoodAppElement) {
 }
 
 if (redwoodAppElement.children?.length > 0) {
-  hydrateRoot(redwoodAppElement, <App />)
+  hydrateRoot(
+    redwoodAppElement,
+    <App>
+      <Routes />
+    </App>
+  )
 } else {
   const root = createRoot(redwoodAppElement)
-  root.render(<App />)
+  root.render(
+    <App>
+      <Routes />
+    </App>
+  )
 }

packages/internal/src/routes.ts

@@ -71,7 +71,7 @@ export interface RWRouteManifestItem {
   routeHooks: string | null
   bundle: string | null
   hasParams: boolean
-  relativeFilePath: string | undefined
+  relativeFilePath: string
   redirect: { to: string; permanent: boolean } | null
   // Probably want isNotFound here, so we can attach a separate 404 handler
 }
@@ -80,7 +80,7 @@ export interface RouteSpec extends RWRouteManifestItem {
   id: string
   isNotFound: boolean
   filePath: string | undefined
-  relativeFilePath: string | undefined
+  relativeFilePath: string
 }
 
 export const getProjectRoutes = (): RouteSpec[] => {

packages/ogimage-gen/cjsWrappers/hooks.js

@@ -0,0 +1,3 @@
+/* eslint-env node */
+
+module.exports = require('../dist/hooks.js').default

packages/ogimage-gen/cjsWrappers/middleware.js

@@ -0,0 +1,3 @@
+/* eslint-env node */
+
+module.exports = require('../dist/OgImageMiddleware.js').default

packages/ogimage-gen/package.json

@@ -8,12 +8,20 @@
   },
   "license": "MIT",
   "exports": {
-    ".": {
-      "default": "./dist/index.js"
-    },
     "./plugin": {
       "import": "./dist/vite-plugin-ogimage-gen.js",
-      "default": "./cjsWrappers/plugin.js"
+      "default": "./cjsWrappers/plugin.js",
+      "types": "./dist/vite-plugin-ogimage-gen.d.ts"
+    },
+    "./middleware": {
+      "import": "./dist/OgImageMiddleware.js",
+      "default": "./cjsWrappers/middleware.js",
+      "types": "./dist/OgImageMiddleware.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/hooks.js",
+      "default": "./cjsWrappers/hooks.js",
+      "types": "./dist/hooks.d.ts"
     }
   },
   "files": [
@@ -34,10 +42,12 @@
     "@redwoodjs/router": "workspace:*",
     "@redwoodjs/vite": "workspace:*",
     "fast-glob": "3.3.2",
+    "lodash": "4.17.21",
     "react": "19.0.0-canary-cb151849e1-20240424",
     "react-dom": "19.0.0-canary-cb151849e1-20240424"
   },
   "devDependencies": {
+    "@playwright/test": "1.42.1",
     "@redwoodjs/framework-tools": "workspace:*",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.7.1",