Merge pull request #38 from willtonkin/container-filter

Skip nested markup containers

Author: simon360

.travis.yml

@@ -4,6 +4,7 @@ node_js:
 
 script:
   - yarn compile
+  - yarn test
   - yarn docz:build
 
 deploy:

package.json

@@ -15,7 +15,7 @@
     "lint:ts": "tslint -c tslint.json './packages/**/*.ts*(x)'",
     "release": "lerna version prerelease",
     "pretest": "npm-run-all lint",
-    "test": "echo \"Tests coming soon. I'm aware that's not ideal.\""
+    "test": "jest"
   },
   "dependencies": {
     "react": "^16.5.0",

packages/react-from-markup/src/__tests__/__snapshots__/tests.ts.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reactFromMarkupContainer E2E tests Should rehydrate a basic component 1`] = `
+"
+      <div data-react-from-markup-container=\\"\\">
+        <span>rehydrated component</span>
+      </div>"
+`;
+
+exports[`reactFromMarkupContainer E2E tests Should rehydrate valid HTML markup 1`] = `
+"
+    <div data-react-from-markup-container=\\"\\">
+      <p>paragraph</p>
+    </div>"
+`;
+
+exports[`reactFromMarkupContainer E2E tests Should work for nested markup containers 1`] = `
+"
+      <div data-react-from-markup-container=\\"\\">
+        <span>rehydrated component</span>
+          <div data-react-from-markup-container=\\"\\">
+            <span>rehydrated component</span>
+            <span>rehydrated component</span>
+          </div>
+      </div>"
+`;

packages/react-from-markup/src/__tests__/tests.ts

@@ -0,0 +1,75 @@
+/* eslint-env jest */
+import * as React from "react";
+import reactFromMarkupContainer from "..";
+
+describe("reactFromMarkupContainer E2E tests", async () => {
+  it("Should rehydrate a basic component", async () => {
+    const componentName: string = "myComponent";
+
+    const rehydrator = async () => {
+      return React.createElement("span", {}, "rehydrated component");
+    };
+
+    const rehydrators = { [componentName]: rehydrator };
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `
+      <div data-react-from-markup-container>
+        <div data-rehydratable="${componentName}"></div>
+      </div>`;
+
+    await reactFromMarkupContainer(documentElement, rehydrators, {
+      extra: {}
+    });
+
+    expect(documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it("Should rehydrate valid HTML markup", async () => {
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `
+    <div data-react-from-markup-container>
+      <p>paragraph</p>
+    </div>`;
+
+    await reactFromMarkupContainer(documentElement, {}, { extra: {} });
+
+    expect(documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it("Should work for nested markup containers", async () => {
+    const componentName: string = "mycomponentName";
+
+    const mockCall = jest.fn();
+    const rehydrators = {
+      [componentName]: async () => {
+        mockCall();
+
+        return React.createElement("span", {}, "rehydrated component");
+      }
+    };
+
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `
+      <div data-react-from-markup-container>
+        <div data-rehydratable="${componentName}"></div>
+          <div data-react-from-markup-container>
+            <div data-rehydratable="${componentName}">
+              <div data-react-from-markup-container>
+                <div data-rehydratable="${componentName}"></div>
+              </div>
+            </div>
+            <div data-rehydratable="${componentName}"></div>
+          </div>
+      </div>`;
+
+    await reactFromMarkupContainer(documentElement, rehydrators, {
+      extra: {}
+    });
+
+    expect(documentElement.innerHTML).toMatchSnapshot();
+    expect(mockCall).toBeCalledTimes(3);
+  });
+});

packages/react-from-markup/src/rehydrator.ts

@@ -75,7 +75,13 @@ export default async (
   const roots = Array.from(
     // TODO: allow setting a container identifier so multiple rehydration instances can exist
     container.querySelectorAll("[data-react-from-markup-container]")
-  );
+  ).reduce((acc: Element[], root: Element) => {
+    // filter roots that are contained within other roots
+    if (!acc.some(r => r.contains(root))) {
+      acc.push(root);
+    }
+    return acc;
+  }, []);
 
   // TODO: solve race condition when a second rehydrate runs