Fix rehydrate children

src/IRehydrator.ts

@@ -1,11 +1,9 @@
 import * as React from "react";
 
-type RehydrateChildren = (el: Element) => Promise<React.ReactNode>;
-
 export default interface IRehydrator {
   [name: string]: (
     el: Element,
-    rehydrateChildren: RehydrateChildren,
+    rehydrate: (element: Element) => React.ReactNode,
     extra: object
   ) => Promise<React.ReactElement<any>>;
 }

src/__tests__/tests.ts

@@ -27,14 +27,10 @@ describe("reactFromHtml E2E tests", async () => {
 
     const mockCall = jest.fn();
     const rehydrators = {
-      [componentName]: async (node: HTMLElement) => {
+      [componentName]: async (el, rehydrate) => {
         mockCall();
 
-        await reactFromHtml(node, rehydrators, { extra: {} });
-
-        return React.createElement("span", {
-          dangerouslySetInnerHTML: { __html: node.innerHTML },
-        });
+        return React.createElement("span", {}, await rehydrate(el));
       },
     };
 

src/dom-element-to-react/convert.ts

@@ -13,23 +13,30 @@ const convertText = (el: Text): string =>
 
 const convertElement = async (
   el: Element,
-  customElementHandler: CustomElementHandlerType,
-  recursor: StaticToReactElementRecursor
-) =>
-  // If customElementHandler is truthy, use it; otherwise, just convert to a React element.
-  (await customElementHandler(el)) || staticToReactElement(el, recursor);
+  recursor: StaticToReactElementRecursor,
+  customElementHandler?: CustomElementHandlerType
+) => {
+  if (customElementHandler) {
+    // If customElementHandler is truthy, use it; otherwise, just convert to a React element.
+    return (
+      (await customElementHandler(el)) || staticToReactElement(el, recursor)
+    );
+  }
+
+  return staticToReactElement(el, recursor);
+};
 
 const convert = async (
   el: Node,
-  customElementHandler: CustomElementHandlerType
+  customElementHandler?: CustomElementHandlerType
 ) => {
   const recursor: StaticToReactElementRecursor = (innerEl: Node) =>
     convert(innerEl, customElementHandler);
 
   if (el.nodeType === Node.TEXT_NODE) {
     return convertText(el as Text);
   } else if (el.nodeType === Node.ELEMENT_NODE) {
-    return convertElement(el as Element, customElementHandler, recursor);
+    return convertElement(el as Element, recursor, customElementHandler);
   }
 
   // Unhandled node type. Probably an HTML comment.

src/dom-element-to-react/index.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 import convert, { CustomElementHandlerType } from "./convert";
 
-const rehydrateChildren = async (
+const domElementToReact = async (
   node: Node,
-  customHandler: CustomElementHandlerType
+  customHandler?: CustomElementHandlerType
 ): Promise<React.ReactNode> => {
   if (!node || !node.childNodes) {
     return null;
@@ -18,4 +18,4 @@ const rehydrateChildren = async (
   return React.createElement(React.Fragment, {}, ...children);
 };
 
-export default rehydrateChildren;
+export default domElementToReact;

src/index.ts

@@ -1 +1 @@
-export { default, rehydrateChildren } from "./rehydrator";
+export { default } from "./rehydrator";

src/rehydrator.ts

@@ -23,8 +23,10 @@ const rehydratableToReactElement = async (
 
   return rehydrator(
     el,
-    async children =>
-      (await rehydrateChildren(children, rehydrators, options)).rehydrated,
+    async node => {
+      await rehydrate(node, rehydrators, options);
+      return domElementToReact(node);
+    },
     options.extra
   );
 };
@@ -98,7 +100,7 @@ const createQuerySelector = (rehydratableIds: string[]) =>
     ""
   );
 
-export default async (
+const rehydrate = async (
   container: Element,
   rehydrators: IRehydrator,
   options: IOptions
@@ -144,4 +146,6 @@ export default async (
   await Promise.all(renders.map(r => r().then(render)));
 };
 
-export { IRehydrator, rehydratableToReactElement, rehydrateChildren };
+export default rehydrate;
+
+export { IRehydrator, rehydratableToReactElement };