PATCH: extend renderers/react/renderToCanvas to do lit/react hydratio…

…n for hydratable elements

code/renderers/react/src/react-dom-hydrate.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from 'react';
+import { type Root, hydrateRoot } from 'react-dom/client';
+
+// A map of all rendered React 18 nodes
+const nodes = new Map<Element, Root>();
+
+// similar to renderElement from code/lib/react-dom-shim/src/react-18.tsx
+// but perform hydration not rendering
+export const hydrateElement = async (node: ReactElement, el: Element) => {
+  return new Promise((resolve) => {
+    const root = hydrateRoot(el, node);
+    nodes.set(el, root);
+    resolve(null);
+  });
+};
+
+export const unmountElement = (el: Element) => {
+  const root = nodes.get(el);
+
+  if (root) {
+    root.unmount();
+    nodes.delete(el);
+  }
+};

code/renderers/react/src/renderToCanvas.tsx

@@ -3,6 +3,8 @@ import type { FC } from 'react';
 import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
 import { renderElement, unmountElement } from '@storybook/react-dom-shim';
 
+import { hydrateElement } from './react-dom-hydrate';
+
 import type { RenderContext } from '@storybook/types';
 
 import type { ReactRenderer, StoryContext } from './types';
@@ -74,7 +76,12 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+  const ssrEnabled = canvasElement.firstElementChild?.hasAttribute('hydratable') || false;
+  if (ssrEnabled) {
+    await hydrateElement(element, canvasElement);
+  } else {
+    await renderElement(element, canvasElement);
+  }
 
   return () => unmountElement(canvasElement);
 }