re-enable and fix hydration for imperative routes.

The fix consists of passing a couple of new query params for imperative routes when building the client entrypoint url, the query params are then passed to the route table to enable dynamically adding a route for the imperative component.

Author: AyoubElk

packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx

@@ -121,10 +121,14 @@ export class ReactRenderer implements Renderer {
 
   /** Given a node-land module id (path), return the build time path to the virtual script to hydrate the render client side */
   public buildVirtualClientEntrypointModuleID(route: RenderableRoute) {
+    const queryParams = {
+      layout: route.layout,
+      base: route.base,
+      ...(route.isImperative && { route: route.url, component: route.renderable }),
+    }
+
     return (
-      path.join(CLIENT_ENTRYPOINT_PREFIX, route.renderable, 'hydrate.jsx') +
-      '?' +
-      querystring.stringify({ layout: route.layout, base: route.base })
+      path.join(CLIENT_ENTRYPOINT_PREFIX, route.renderable, 'hydrate.jsx') + '?' + querystring.stringify(queryParams)
     )
   }
 
@@ -189,7 +193,6 @@ export class ReactRenderer implements Renderer {
     // push the props for the entrypoint to use when hydrating client side
     bus.push('tail', `<script type="module">window.__FSTR_PROPS=${JSON.stringify(render.props)};</script>`)
 
-    const entrypointName = this.buildVirtualClientEntrypointModuleID(render)
     // if we're in development, we just source the entrypoint directly from vite and let the browser do its thing importing all the referenced stuff
     if (this.plugin.devMode) {
       bus.push(
@@ -200,6 +203,7 @@ export class ReactRenderer implements Renderer {
         )}"></script>`
       )
     } else {
+      const entrypointName = this.buildVirtualClientEntrypointModuleID(render)
       const manifestEntryName = normalizePath(path.relative(this.viteConfig.root, entrypointName))
       this.plugin.pushImportTagsFromManifest(bus, manifestEntryName)
     }
@@ -309,13 +313,16 @@ export class ReactRenderer implements Renderer {
           const entrypoint = id.replace(CLIENT_ENTRYPOINT_PREFIX, '/@fs/').replace(/\/hydrate\.jsx\?.+$/, '')
           const layout = url.searchParams.get('layout')!
           const base = url.searchParams.get('base')!
+          const route = url.searchParams.get('route')!
+          const component = url.searchParams.get('component')!
+          const queryParams = { base, lazy: true, ...(component && { route, component }) }
 
           return `
           // client side hydration entrypoint for a particular route generated by fastify-renderer
           import React from 'react'
           import ReactDOM from 'react-dom'
           import { routes } from ${JSON.stringify(
-            ReactRenderer.ROUTE_TABLE_ID + '?' + querystring.stringify({ base, lazy: true })
+            ReactRenderer.ROUTE_TABLE_ID + '?' + querystring.stringify(queryParams)
           )}
           import { Root } from ${JSON.stringify(this.clientModulePath)}
           import Layout from ${JSON.stringify(layout)}
@@ -411,9 +418,19 @@ export class ReactRenderer implements Renderer {
           const url = new URL('fstr://' + id)
           const lazy = !!url.searchParams.get('lazy')!
           const base = url.searchParams.get('base')!
+          const route = url.searchParams.get('route')!
+          const component = url.searchParams.get('component')!
           // We filter out the routes the imperatively renderable routes, which don't have a url property
           // There is no point in having them included in the route table
           const applicableRoutes = this.routes.filter((route) => route.base == base && route.url !== undefined)
+          if (route) {
+            const imperativeRoute = Object.assign(
+              {},
+              this.routes.find((route) => (route.renderable = component)),
+              { url: route }
+            )
+            applicableRoutes.push(imperativeRoute)
+          }
           applicableRoutes.sort((a, b) => routeSortScore(a.url!) - routeSortScore(b.url!))
 
           const pathsToModules = applicableRoutes.map((route) => [