Add hook for obtaining page and root

[ivangreene]

I'm working on using safetest in my Vike app, and it requires calling a bootstrap function with the root component. This requires access to the main page JSX.Element, and the React root. I have accomplished this by putting my own +onRenderClient.tsx in my project, but it would be nice if there was some kind of configurable hook so I didn't have to copy onRenderClient from vike-react

For reference, here is the diff from the vike-react onRenderClient:

diff --git a/frontend/renderer/+onRenderClient.tsx b/frontend/renderer/+onRenderClient.tsx
index bb5a374..c0c47c8 100644
--- a/frontend/renderer/+onRenderClient.tsx
+++ b/frontend/renderer/+onRenderClient.tsx
@@ -2,6 +2,7 @@ import ReactDOM from 'react-dom/client'
 import { getHeadSetting } from '../node_modules/vike-react/dist/renderer/getHeadSetting'
 import type { OnRenderClientSync } from 'vike/types'
 import { getPageElement } from '../node_modules/vike-react/dist/renderer/getPageElement'
+import { bootstrap } from 'safetest/react';

 let root: ReactDOM.Root
 const onRenderClient: OnRenderClientSync = (pageContext): ReturnType<OnRenderClientSync> => {
@@ -31,6 +32,12 @@ const onRenderClient: OnRenderClientSync = (pageContext): ReturnType<OnRenderCli

     root.render(page)
   }
+
+  void bootstrap({
+    element: page,
+    importGlob: import.meta.glob('../**/*.safetest.{j,t}s{,x}'),
+    render: (element) => root.render(element),
+  });
 }

 // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876

[ivangreene]

I would be happy to contribute this feature. Any opinion on what it should look like and be called? I'm thinking something like

onClientRender?: (page: JSX.Element, root: ReactDOM.Root) => void;

Which is optional in the ConfigVikeReact: https://github.com/vikejs/vike-react/blob/main/packages/vike-react/src/types/Config.ts#L5

[brillout]

Sounds good! How about we name it onAfterRenderClient? How about we only pass pageContext to it (while adding things to pageContext).

[brillout]

How about we create an npm package vike-react-safetest? (I just grabbed vike-react-safetest; I can make you co-owner.)

But I'm not sure if it would be worth it.

And/or maybe a vike-react + safetest example.

Creating a little guide at vike.dev/safetest would be nice.

[ivangreene]

@brillout yeah I’m not sure what could be provided in a separate package. safetest is very early stage at this point but I have a feeling it will gain popularity, so there may be a future use case for more vike specific functionality that could go in that package

When I get a chance I may provide an example in the safetest repository of using it with vike

[brillout]

👍 That‘d be great.