@khanacademy/wonder-blocks-core 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,11 +1,18 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.2.0
+
+### Minor Changes
+
+-   0aed8723: Adds `throwIfNested` required prop to `RenderStateRoot`.
+
 ## 4.1.0
+
 ### Minor Changes
 
-- 45588e5f: Fix an issue with `useUniqueIdWithMock`/`useUniqueIdWithoutMock`
-  rerender more than was needed.  The fix introduces `<RenderStateRoot>`
-  which must be an ancestor to all components uses these hooks.
-- 875b7893: Nesting of `RenderStateRoot`s inside each other can result in extra renders
-  and potentially incorrect behavior.  `RenderStateRoot` now throws if it
-  appears as a descendent of another `RenderStateRoot`.
+-   45588e5f: Fix an issue with `useUniqueIdWithMock`/`useUniqueIdWithoutMock`
+    rerender more than was needed. The fix introduces `<RenderStateRoot>`
+    which must be an ancestor to all components uses these hooks.
+-   875b7893: Nesting of `RenderStateRoot`s inside each other can result in extra renders
+    and potentially incorrect behavior. `RenderStateRoot` now throws if it
+    appears as a descendent of another `RenderStateRoot`.

package/dist/es/index.js

@@ -688,23 +688,32 @@ const {
   useState
 } = React;
 const RenderStateRoot = ({
-  children
+  children,
+  throwIfNested
 }) => {
   const [firstRender, setFirstRender] = useState(true);
   const contextValue = useContext(RenderStateContext);
-
-  if (contextValue !== RenderState.Root) {
-    throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
-  }
-
   useEffect(() => {
     setFirstRender(false);
   }, []); // This effect will only run once.
 
+  if (contextValue !== RenderState.Root) {
+    if (throwIfNested) {
+      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
+    } // Avoid rendering multiple providers if this RenderStateRoot
+    // is nested inside another one.
+
+
+    return children;
+  }
+
   const value = firstRender ? RenderState.Initial : RenderState.Standard;
   return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
     value: value
   }, children);
 };
+RenderStateRoot.defaultProps = {
+  throwIfNested: true
+};
 
 export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/index.js

@@ -934,24 +934,33 @@ const {
   useState
 } = react__WEBPACK_IMPORTED_MODULE_0__;
 const RenderStateRoot = ({
-  children
+  children,
+  throwIfNested
 }) => {
   const [firstRender, setFirstRender] = useState(true);
   const contextValue = useContext(_render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderStateContext */ "b"]);
-
-  if (contextValue !== _render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderState */ "a"].Root) {
-    throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
-  }
-
   useEffect(() => {
     setFirstRender(false);
   }, []); // This effect will only run once.
 
+  if (contextValue !== _render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderState */ "a"].Root) {
+    if (throwIfNested) {
+      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
+    } // Avoid rendering multiple providers if this RenderStateRoot
+    // is nested inside another one.
+
+
+    return children;
+  }
+
   const value = firstRender ? _render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderState */ "a"].Initial : _render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderState */ "a"].Standard;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderStateContext */ "b"].Provider, {
     value: value
   }, children);
 };
+RenderStateRoot.defaultProps = {
+  throwIfNested: true
+};
 
 /***/ }),
 /* 15 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/components/__tests__/render-state-root.test.js

@@ -56,7 +56,7 @@ describe("RenderStateRoot", () => {
         expect(values[1]).toEqual(RenderState.Standard);
     });
 
-    it("should not allow nesting of <RenderStateRoot>", () => {
+    it("should not allow nesting of <RenderStateRoot> when", () => {
         // Act
         const underTest = () =>
             render(
@@ -69,4 +69,23 @@ describe("RenderStateRoot", () => {
             `"There's already a <RenderStateRoot> above this instance in the render tree.  This instance should be removed."`,
         );
     });
+
+    it("should allow nesting of <RenderStateRoot> when throwIfNested={false}", () => {
+        // Act
+        const underTest = () =>
+            render(
+                <RenderStateRoot throwIfNested={false}>
+                    <RenderStateRoot throwIfNested={false}>
+                        Hello, world!
+                    </RenderStateRoot>
+                </RenderStateRoot>,
+            );
+
+        expect(underTest).not.toThrowError();
+    });
+
+    // This test can be written once ADR #526 has been implemented.  I've left
+    // a comment in the ADR about this kind of test case being something we
+    // should support.
+    it.todo("should only render a single context provider when nesting");
 });

package/src/components/render-state-root.js

@@ -11,23 +11,35 @@ const {useContext, useEffect, useState} = React;
 
 type Props = {|
     children: React.Node,
+
+    /**
+     * Whether the component should throw when nested.  Defaults to `true`.
+     */
+    throwIfNested?: boolean,
 |};
 
-export const RenderStateRoot = ({children}: Props): React.Node => {
+export const RenderStateRoot = ({
+    children,
+    throwIfNested,
+}: Props): React.Node => {
     const [firstRender, setFirstRender] = useState<boolean>(true);
     const contextValue = useContext(RenderStateContext);
-
-    if (contextValue !== RenderState.Root) {
-        throw new Error(
-            "There's already a <RenderStateRoot> above this instance in " +
-                "the render tree.  This instance should be removed.",
-        );
-    }
-
     useEffect(() => {
         setFirstRender(false);
     }, []); // This effect will only run once.
 
+    if (contextValue !== RenderState.Root) {
+        if (throwIfNested) {
+            throw new Error(
+                "There's already a <RenderStateRoot> above this instance in " +
+                    "the render tree.  This instance should be removed.",
+            );
+        }
+        // Avoid rendering multiple providers if this RenderStateRoot
+        // is nested inside another one.
+        return children;
+    }
+
     const value = firstRender ? RenderState.Initial : RenderState.Standard;
 
     return (
@@ -36,3 +48,7 @@ export const RenderStateRoot = ({children}: Props): React.Node => {
         </RenderStateContext.Provider>
     );
 };
+
+RenderStateRoot.defaultProps = {
+    throwIfNested: true,
+};