@khanacademy/wonder-blocks-core 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @khanacademy/wonder-blocks-core
+
+## 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`.

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { Component, createElement, createContext, useContext, useState, useRef, useEffect } from 'react';
+import * as React from 'react';
+import { useContext as useContext$1, useRef } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 
 function flatten(list) {
@@ -76,9 +77,9 @@ function processStyleList(style) {
   };
 }
 
-const _excluded = ["children", "style", "tag", "testId"];
+const _excluded$2 = ["children", "style", "tag", "testId"];
 const isHeaderRegex = /^h[1-6]$/;
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   text: {
     // Disable subpixel antialiasing on Mac desktop for consistency of
     // rendering with mobile and Sketch (neither of which support it).
@@ -106,7 +107,7 @@ const styles = StyleSheet.create({
  * - An array combining the above
  */
 
-class Text extends Component {
+class Text extends React.Component {
   render() {
     const _this$props = this.props,
           {
@@ -115,11 +116,11 @@ class Text extends Component {
       tag: Tag,
       testId
     } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
 
     const isHeader = isHeaderRegex.test(Tag);
-    const styleAttributes = processStyleList([styles.text, isHeader && styles.header, style]);
-    return /*#__PURE__*/createElement(Tag, _extends({}, otherProps, {
+    const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
+    return /*#__PURE__*/React.createElement(Tag, _extends({}, otherProps, {
       style: styleAttributes.style,
       className: styleAttributes.className,
       "data-test-id": testId
@@ -149,7 +150,7 @@ function addStyle(Component, defaultStyle) {
       className: aphroditeClassName,
       style: inlineStyles
     } = processStyleList([reset, defaultStyle, style]);
-    return /*#__PURE__*/createElement(Component, _extends({}, otherProps, {
+    return /*#__PURE__*/React.createElement(Component, _extends({}, otherProps, {
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
@@ -174,8 +175,8 @@ const overrides = StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["testId", "tag"];
-const styles$1 = StyleSheet.create({
+const _excluded = ["testId", "tag"];
+const styles = StyleSheet.create({
   // https://github.com/facebook/css-layout#default-values
   default: {
     alignItems: "stretch",
@@ -193,11 +194,11 @@ const styles$1 = StyleSheet.create({
     minWidth: 0
   }
 });
-const StyledDiv = addStyle("div", styles$1.default);
-const StyledArticle = addStyle("article", styles$1.default);
-const StyledAside = addStyle("aside", styles$1.default);
-const StyledNav = addStyle("nav", styles$1.default);
-const StyledSection = addStyle("section", styles$1.default);
+const StyledDiv = addStyle("div", styles.default);
+const StyledArticle = addStyle("article", styles.default);
+const StyledAside = addStyle("aside", styles.default);
+const StyledNav = addStyle("nav", styles.default);
+const StyledSection = addStyle("section", styles.default);
 /**
  * View is a building block for constructing other components. `View` roughly
  * maps to `div` and `Text` roughly maps to `span`. You can override which tag
@@ -212,14 +213,14 @@ const StyledSection = addStyle("section", styles$1.default);
  * - An array combining the above
  */
 
-class View extends Component {
+class View extends React.Component {
   render() {
     const _this$props = this.props,
           {
       testId,
       tag
     } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     const props = _extends({}, restProps, {
       "data-test-id": testId
@@ -227,19 +228,19 @@ class View extends Component {
 
     switch (tag) {
       case "article":
-        return /*#__PURE__*/createElement(StyledArticle, props);
+        return /*#__PURE__*/React.createElement(StyledArticle, props);
 
       case "aside":
-        return /*#__PURE__*/createElement(StyledAside, props);
+        return /*#__PURE__*/React.createElement(StyledAside, props);
 
       case "nav":
-        return /*#__PURE__*/createElement(StyledNav, props);
+        return /*#__PURE__*/React.createElement(StyledNav, props);
 
       case "section":
-        return /*#__PURE__*/createElement(StyledSection, props);
+        return /*#__PURE__*/React.createElement(StyledSection, props);
 
       case "div":
-        return /*#__PURE__*/createElement(StyledDiv, props);
+        return /*#__PURE__*/React.createElement(StyledDiv, props);
 
       default:
         throw Error(`${tag} is not an allowed value for the 'tag' prop`);
@@ -272,7 +273,7 @@ const RenderState = require("flow-enums-runtime")({
  *   means that we're all now doing non-SSR rendering
  */
 
-const RenderStateContext = /*#__PURE__*/createContext(RenderState.Root);
+const RenderStateContext = /*#__PURE__*/React.createContext(RenderState.Root);
 
 /**
  * We use render functions so that we don't do any work unless we need to.
@@ -303,7 +304,7 @@ const RenderStateContext = /*#__PURE__*/createContext(RenderState.Root);
  * </WithSSRPlaceholder>
  * ```
  */
-class WithSSRPlaceholder extends Component {
+class WithSSRPlaceholder extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -339,7 +340,7 @@ class WithSSRPlaceholder extends Component {
     if (mounted) {
       // This is our second non-SSR render, so let's tell everyone to
       // do their thing.
-      return /*#__PURE__*/createElement(RenderStateContext.Provider, {
+      return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
         value: RenderState.Standard
       }, children());
     } // OK, this is the very first render.
@@ -349,7 +350,7 @@ class WithSSRPlaceholder extends Component {
 
 
     if (placeholder) {
-      return /*#__PURE__*/createElement(RenderStateContext.Provider, {
+      return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
         value: RenderState.Initial
       }, placeholder());
     } // Otherwise, we return nothing.
@@ -414,7 +415,7 @@ class WithSSRPlaceholder extends Component {
   }
 
   render() {
-    return /*#__PURE__*/createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
+    return /*#__PURE__*/React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
   }
 
 }
@@ -520,7 +521,7 @@ var SsrIDFactory$1 = SsrIDFactory.Default;
  * `get("test2")` will always equal `get("test2")`, but `get("test")` will
  * never equal `get("test2")`.
  */
-class UniqueIDProvider extends Component {
+class UniqueIDProvider extends React.Component {
   _performRender(firstRender) {
     const {
       children,
@@ -553,7 +554,7 @@ class UniqueIDProvider extends Component {
     // Here we use the WithSSRPlaceholder component to control
     // when we render and whether we provide a mock or real
     // identifier factory.
-    return /*#__PURE__*/createElement(WithSSRPlaceholder, {
+    return /*#__PURE__*/React.createElement(WithSSRPlaceholder, {
       placeholder: () => this._performRender(true)
     }, () => this._performRender(false));
   }
@@ -574,7 +575,7 @@ class UniqueIDProvider extends Component {
  * e.g. It uses the same generated id to connect a Dialog with its main title, or form label
  * with the associated input element, etc.
  */
-class IDProvider extends Component {
+class IDProvider extends React.Component {
   renderChildren(ids) {
     const {
       id,
@@ -600,7 +601,7 @@ class IDProvider extends Component {
       // need it.
       return this.renderChildren();
     } else {
-      return /*#__PURE__*/createElement(UniqueIDProvider, {
+      return /*#__PURE__*/React.createElement(UniqueIDProvider, {
         scope: scope,
         mockOnFirstRender: true
       }, ids => this.renderChildren(ids));
@@ -628,25 +629,6 @@ var server = {
   }
 };
 
-/**
- * This is a thin wrapper around React.useContext(RenderStateContext).
- *
- * RenderStateContext is used by WithSSRPlaceholder to hide a component from
- * rendered during SSR.  It's also used by useUniqueId(With|Without)Mock to
- * to return a UniqueIDFactory instance in a SSR-safe way.
- *
- * This hook isn't part of wonder-blocks-core's public interface since we still
- * need to use WithSSRPlaceholder to update the value in the context.
- *
- * TODO(FEI-4153): Figure out whether we should always render a WithSSRPlaceholder
- * at the root of our render tree just to update the value of the context.  Once
- * we figure this out we can make `useRenderState` public and create some proper
- * documentation for it.
- */
-const useRenderState = () => {
-  return useContext(RenderStateContext);
-};
-
 /**
  * Returns a unique identifier factory.  If the parent component hasn't
  * been mounted yet, the global SsrIDFactory will be returned until the
@@ -656,15 +638,14 @@ const useRenderState = () => {
  * @returns {IIdentifierFactory}
  */
 const useUniqueIdWithMock = scope => {
-  const renderState = useRenderState();
-  const [isMounted, setIsMounted] = useState(false);
+  const renderState = useContext$1(RenderStateContext);
   const idFactory = useRef(null);
-  useEffect(() => {
-    // triggers a re-render now that the component is mounted
-    setIsMounted(true);
-  }, []);
 
-  if (renderState === RenderState.Initial || renderState === RenderState.Root && !isMounted) {
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === RenderState.Initial) {
     return SsrIDFactory$1;
   }
 
@@ -683,15 +664,14 @@ const useUniqueIdWithMock = scope => {
  */
 
 const useUniqueIdWithoutMock = scope => {
-  const renderState = useRenderState();
-  const [isMounted, setIsMounted] = useState(false);
+  const renderState = useContext$1(RenderStateContext);
   const idFactory = useRef(null);
-  useEffect(() => {
-    // triggers a re-render now that the component is mounted
-    setIsMounted(true);
-  }, []);
 
-  if (renderState === RenderState.Initial || renderState === RenderState.Root && !isMounted) {
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === RenderState.Initial) {
     return null;
   }
 
@@ -702,4 +682,29 @@ const useUniqueIdWithoutMock = scope => {
   return idFactory.current;
 };
 
-export { IDProvider, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useUniqueIdWithMock, useUniqueIdWithoutMock };
+const {
+  useContext,
+  useEffect,
+  useState
+} = React;
+const RenderStateRoot = ({
+  children
+}) => {
+  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.
+
+  const value = firstRender ? RenderState.Initial : RenderState.Standard;
+  return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
+    value: value
+  }, children);
+};
+
+export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/index.js

@@ -267,7 +267,8 @@ UniqueIDFactory._factoryUniquenessCounter = 0;
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _render_state_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
- // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+ // TODO(FEI-4202): update to use `useContext(RenderStateContext)`
+// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
 // have fixed:
 // https://github.com/import-js/eslint-plugin-import/issues/2073
 // eslint-disable-next-line import/named
@@ -610,16 +611,10 @@ SsrIDFactory.Default = new SsrIDFactory();
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _util_ssr_id_factory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* harmony import */ var _util_unique_id_factory_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
-/* harmony import */ var _use_render_state_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
-/* harmony import */ var _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
 
 
 
- // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-
 
 
 /**
@@ -631,15 +626,14 @@ SsrIDFactory.Default = new SsrIDFactory();
  * @returns {IIdentifierFactory}
  */
 const useUniqueIdWithMock = scope => {
-  const renderState = Object(_use_render_state_js__WEBPACK_IMPORTED_MODULE_3__[/* useRenderState */ "a"])();
-  const [isMounted, setIsMounted] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false);
+  const renderState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__[/* RenderStateContext */ "b"]);
   const idFactory = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
-  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-    // triggers a re-render now that the component is mounted
-    setIsMounted(true);
-  }, []);
 
-  if (renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_4__[/* RenderState */ "a"].Initial || renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_4__[/* RenderState */ "a"].Root && !isMounted) {
+  if (renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__[/* RenderState */ "a"].Root) {
+    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__[/* RenderState */ "a"].Initial) {
     return _util_ssr_id_factory_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"];
   }
 
@@ -658,15 +652,14 @@ const useUniqueIdWithMock = scope => {
  */
 
 const useUniqueIdWithoutMock = scope => {
-  const renderState = Object(_use_render_state_js__WEBPACK_IMPORTED_MODULE_3__[/* useRenderState */ "a"])();
-  const [isMounted, setIsMounted] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false);
+  const renderState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__[/* RenderStateContext */ "b"]);
   const idFactory = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
-  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
-    // triggers a re-render now that the component is mounted
-    setIsMounted(true);
-  }, []);
 
-  if (renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_4__[/* RenderState */ "a"].Initial || renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_4__[/* RenderState */ "a"].Root && !isMounted) {
+  if (renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__[/* RenderState */ "a"].Root) {
+    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_3__[/* RenderState */ "a"].Initial) {
     return null;
   }
 
@@ -681,36 +674,6 @@ const useUniqueIdWithoutMock = scope => {
 /* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useRenderState; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _components_render_state_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
-/**
- * This is a thin wrapper around React.useContext(RenderStateContext).
- *
- * RenderStateContext is used by WithSSRPlaceholder to hide a component from
- * rendered during SSR.  It's also used by useUniqueId(With|Without)Mock to
- * to return a UniqueIDFactory instance in a SSR-safe way.
- *
- * This hook isn't part of wonder-blocks-core's public interface since we still
- * need to use WithSSRPlaceholder to update the value in the context.
- *
- * TODO(FEI-4153): Figure out whether we should always render a WithSSRPlaceholder
- * at the root of our render tree just to update the value of the context.  Once
- * we figure this out we can make `useRenderState` public and create some proper
- * documentation for it.
- */
-
-
-const useRenderState = () => {
-  return Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_components_render_state_context_js__WEBPACK_IMPORTED_MODULE_1__[/* RenderStateContext */ "b"]);
-};
-
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Text; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
@@ -776,7 +739,7 @@ Text.defaultProps = {
 };
 
 /***/ }),
-/* 12 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -866,7 +829,7 @@ View.defaultProps = {
 };
 
 /***/ }),
-/* 13 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -928,7 +891,7 @@ class IDProvider extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 IDProvider.defaultId = "wb-id";
 
 /***/ }),
-/* 14 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -950,22 +913,62 @@ let serverSide = false;
   }
 });
 
+/***/ }),
+/* 14 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RenderStateRoot; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _render_state_context_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+ // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+// have fixed:
+// https://github.com/import-js/eslint-plugin-import/issues/2073
+// eslint-disable-next-line import/named
+
+
+const {
+  useContext,
+  useEffect,
+  useState
+} = react__WEBPACK_IMPORTED_MODULE_0__;
+const RenderStateRoot = ({
+  children
+}) => {
+  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.
+
+  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);
+};
+
 /***/ }),
 /* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_text_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(11);
+/* harmony import */ var _components_text_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Text", function() { return _components_text_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_view_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
+/* harmony import */ var _components_view_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "View", function() { return _components_view_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
 /* harmony import */ var _components_with_ssr_placeholder_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "WithSSRPlaceholder", function() { return _components_with_ssr_placeholder_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-/* harmony import */ var _components_id_provider_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
+/* harmony import */ var _components_id_provider_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "IDProvider", function() { return _components_id_provider_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
 /* harmony import */ var _components_unique_id_provider_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
@@ -974,7 +977,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _util_add_style_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "addStyle", function() { return _util_add_style_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _util_server_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14);
+/* harmony import */ var _util_server_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(13);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Server", function() { return _util_server_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
 /* harmony import */ var _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
@@ -982,6 +985,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useUniqueIdWithoutMock", function() { return _hooks_use_unique_id_js__WEBPACK_IMPORTED_MODULE_7__["b"]; });
 
+/* harmony import */ var _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(14);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RenderStateRoot", function() { return _components_render_state_root_js__WEBPACK_IMPORTED_MODULE_8__["a"]; });
+
+
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -27,6 +27,5 @@
     "wb-dev-build-settings": "^0.2.0"
   },
   "author": "",
-  "license": "MIT",
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  "license": "MIT"
 }

package/src/components/__tests__/id-provider.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import IDProvider from "../id-provider.js";
 

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

@@ -0,0 +1,72 @@
+// @flow
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {RenderStateRoot} from "../render-state-root.js";
+// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+// have fixed:
+// https://github.com/import-js/eslint-plugin-import/issues/2073
+// eslint-disable-next-line import/named
+import {RenderState, RenderStateContext} from "../render-state-context.js";
+
+const {useContext} = React;
+
+describe("RenderStateRoot", () => {
+    test("the first render should set context's value to RenderState.Initial", () => {
+        // Arrange
+        const values = [];
+        const TestComponent = () => {
+            const value = useContext(RenderStateContext);
+
+            values.push(value);
+
+            return null;
+        };
+
+        // Act
+        render(
+            <RenderStateRoot>
+                <TestComponent />
+            </RenderStateRoot>,
+        );
+
+        // Assert
+        expect(values[0]).toEqual(RenderState.Initial);
+    });
+
+    test("the second render should set context's value to RenderState.Standard", () => {
+        // Arrange
+        const values = [];
+        const TestComponent = () => {
+            const value = useContext(RenderStateContext);
+
+            values.push(value);
+
+            return null;
+        };
+
+        // Act
+        render(
+            <RenderStateRoot>
+                <TestComponent />
+            </RenderStateRoot>,
+        );
+
+        // Assert
+        expect(values[1]).toEqual(RenderState.Standard);
+    });
+
+    it("should not allow nesting of <RenderStateRoot>", () => {
+        // Act
+        const underTest = () =>
+            render(
+                <RenderStateRoot>
+                    <RenderStateRoot>Hello, world!</RenderStateRoot>
+                </RenderStateRoot>,
+            );
+
+        expect(underTest).toThrowErrorMatchingInlineSnapshot(
+            `"There's already a <RenderStateRoot> above this instance in the render tree.  This instance should be removed."`,
+        );
+    });
+});

package/src/components/__tests__/unique-id-provider.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOMServer from "react-dom/server.js";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import View from "../view.js";
 
@@ -9,6 +10,7 @@ import SsrIDFactory from "../../util/ssr-id-factory.js";
 import UniqueIDFactory from "../../util/unique-id-factory.js";
 import UniqueIDProvider from "../unique-id-provider.js";
 import WithSSRPlaceholder from "../with-ssr-placeholder.js";
+import {RenderStateRoot} from "../render-state-root.js";
 
 describe("UniqueIDProvider", () => {
     describe("mockOnFirstRender is default (false)", () => {
@@ -155,4 +157,25 @@ describe("UniqueIDProvider", () => {
             expect(foo.mock.calls[0][0]).toBeTruthy();
         });
     });
+
+    describe("inside a RenderStateRoot", () => {
+        test("it should pass an id to its children", () => {
+            // Arrange
+            const foo = jest.fn(() => null);
+            const nodes = (
+                <RenderStateRoot>
+                    <UniqueIDProvider mockOnFirstRender={false}>
+                        {(ids) => foo(ids.get(""))}
+                    </UniqueIDProvider>
+                </RenderStateRoot>
+            );
+
+            // Act
+            mount(nodes);
+
+            // Assert
+            expect(foo).toHaveBeenCalled();
+            expect(foo.mock.calls[0][0]).toBeTruthy();
+        });
+    });
 });