From e9a393b7e82e1db8169010cd645985f838b528e9 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 14 Sep 2020 17:41:35 +0100
Subject: [PATCH 1/2] fix: update rehydrate children for new API

---
 src/IRehydrator.ts                  |  4 +---
 src/__tests__/tests.ts              |  8 ++------
 src/dom-element-to-react/convert.ts | 21 ++++++++++++++-------
 src/dom-element-to-react/index.ts   |  2 +-
 src/index.ts                        |  2 +-
 src/rehydrator.ts                   | 12 ++++++++----
 6 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/IRehydrator.ts b/src/IRehydrator.ts
index 7118a84..5b6c48a 100644
--- a/src/IRehydrator.ts
+++ b/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>>;
 }
diff --git a/src/__tests__/tests.ts b/src/__tests__/tests.ts
index dad62c6..a91709b 100644
--- a/src/__tests__/tests.ts
+++ b/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));
       },
     };
 
diff --git a/src/dom-element-to-react/convert.ts b/src/dom-element-to-react/convert.ts
index ebae377..30c73b1 100644
--- a/src/dom-element-to-react/convert.ts
+++ b/src/dom-element-to-react/convert.ts
@@ -13,15 +13,22 @@ 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);
@@ -29,7 +36,7 @@ const convert = async (
   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.
diff --git a/src/dom-element-to-react/index.ts b/src/dom-element-to-react/index.ts
index 4b9e0e0..a1fdf77 100644
--- a/src/dom-element-to-react/index.ts
+++ b/src/dom-element-to-react/index.ts
@@ -3,7 +3,7 @@ import convert, { CustomElementHandlerType } from "./convert";
 
 const rehydrateChildren = async (
   node: Node,
-  customHandler: CustomElementHandlerType
+  customHandler?: CustomElementHandlerType
 ): Promise<React.ReactNode> => {
   if (!node || !node.childNodes) {
     return null;
diff --git a/src/index.ts b/src/index.ts
index 054d4b3..e3429f3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1 @@
-export { default, rehydrateChildren } from "./rehydrator";
+export { default } from "./rehydrator";
diff --git a/src/rehydrator.ts b/src/rehydrator.ts
index f200d3e..72426e9 100644
--- a/src/rehydrator.ts
+++ b/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 };

From 9b0f36eda583b57d98ad56005c3eb6c70f0c70d2 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 14 Sep 2020 17:41:56 +0100
Subject: [PATCH 2/2] refactor: fix internal method name

---
 src/dom-element-to-react/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dom-element-to-react/index.ts b/src/dom-element-to-react/index.ts
index a1fdf77..00ba24b 100644
--- a/src/dom-element-to-react/index.ts
+++ b/src/dom-element-to-react/index.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import convert, { CustomElementHandlerType } from "./convert";
 
-const rehydrateChildren = async (
+const domElementToReact = async (
   node: Node,
   customHandler?: CustomElementHandlerType
 ): Promise<React.ReactNode> => {
@@ -18,4 +18,4 @@ const rehydrateChildren = async (
   return React.createElement(React.Fragment, {}, ...children);
 };
 
-export default rehydrateChildren;
+export default domElementToReact;