feat(og-gen): Implement middleware and hooks

.vscode/settings.json

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

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

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