@khanacademy/wonder-blocks-core 3.1.5 → 4.2.0

package/CHANGELOG.md

@@ -0,0 +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`.

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 } 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`);
@@ -251,11 +252,11 @@ View.defaultProps = {
   tag: "div"
 };
 
-/**
- * We use render functions so that we don't do any work unless we need to.
- * This avoids rendering but not mounting potentially complex component trees.
- */
-
+const RenderState = require("flow-enums-runtime")({
+  Root: "root",
+  Initial: "initial",
+  Standard: "standard"
+});
 /**
  * This is the context that tracks who is doing what in our SSR component tree.
  *
@@ -271,7 +272,14 @@ View.defaultProps = {
  * standard:
  *   means that we're all now doing non-SSR rendering
  */
-const RenderStateContext = /*#__PURE__*/createContext("root");
+
+const RenderStateContext = /*#__PURE__*/React.createContext(RenderState.Root);
+
+/**
+ * We use render functions so that we don't do any work unless we need to.
+ * This avoids rendering but not mounting potentially complex component trees.
+ */
+
 /**
  * Defer or change rendering until the component did mount.
  *
@@ -296,8 +304,7 @@ const RenderStateContext = /*#__PURE__*/createContext("root");
  * </WithSSRPlaceholder>
  * ```
  */
-
-class WithSSRPlaceholder extends Component {
+class WithSSRPlaceholder extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -333,8 +340,8 @@ 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, {
-        value: "standard"
+      return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
+        value: RenderState.Standard
       }, children());
     } // OK, this is the very first render.
     // If we have a placeholder, we render it, and ensure that any
@@ -343,8 +350,8 @@ class WithSSRPlaceholder extends Component {
 
 
     if (placeholder) {
-      return /*#__PURE__*/createElement(RenderStateContext.Provider, {
-        value: "initial"
+      return /*#__PURE__*/React.createElement(RenderStateContext.Provider, {
+        value: RenderState.Initial
       }, placeholder());
     } // Otherwise, we return nothing.
 
@@ -359,33 +366,10 @@ class WithSSRPlaceholder extends Component {
     } = this.props;
 
     switch (renderState) {
-      // There are edge cases where for some reason, we get an unknown
-      // context value here. So far it seems to be when we're nested in a
-      // v1 WithSSRPlaceholder equivalent component, or in some older
-      // React v16 situations where we're nested in the provider of a
-      // different context.
-      //
-      // We ignore this from coverage. It's a maintenance case to help
-      // us catch code changes that affect the control flow unexpectedly,
-      // but it's not something we need to write a test case for.
-      //
-
-      /* istanbul ignore next */
-      default:
-        // Let's log this case so we can debug it easily.
-        // Then fall through to the root case.
-
-        /* eslint-disable-next-line no-console */
-        console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)}"`); // We "fallthrough" to the root case. This is more obvious
-        // and maintainable code than just ignoring the no-fallthrough
-        // lint rule.
-
-        return this._maybeRender("root");
-
-      case "root":
+      case RenderState.Root:
         return this._renderAsRootComponent();
 
-      case "initial":
+      case RenderState.Initial:
         // We're not the root component, so we just have to either
         // render our placeholder or nothing.
         // The second render is going to be triggered for us.
@@ -396,15 +380,42 @@ class WithSSRPlaceholder extends Component {
 
         return null;
 
-      case "standard":
+      case RenderState.Standard:
         // We have covered the SSR render, we're now rendering with
         // standard rendering semantics.
         return children();
+    } // There are edge cases where for some reason, we get an unknown
+    // context value here. So far it seems to be when we're nested in a
+    // v1 WithSSRPlaceholder equivalent component, or in some older
+    // React v16 situations where we're nested in the provider of a
+    // different context.
+    //
+    // We ignore this from coverage. It's a maintenance case to help
+    // us catch code changes that affect the control flow unexpectedly,
+    // but it's not something we need to write a test case for.
+    //
+    // Flow will assert exhaustiveness of the switch because Flow enums
+    // rock.
+    //
+
+    /* istanbul ignore next */
+
+
+    {
+      // Let's log this case so we can debug it easily.
+      // Then fall through to the root case.
+
+      /* eslint-disable-next-line no-console */
+      console.log(`We got a render state we don't understand: "${JSON.stringify(renderState)}"`); // We "fallthrough" to the root case. This is more obvious
+      // and maintainable code than just ignoring the no-fallthrough
+      // lint rule.
+
+      return this._maybeRender(RenderState.Root);
     }
   }
 
   render() {
-    return /*#__PURE__*/createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
+    return /*#__PURE__*/React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
   }
 
 }
@@ -510,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,
@@ -543,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));
   }
@@ -564,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,
@@ -590,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));
@@ -600,237 +611,109 @@ class IDProvider extends Component {
 }
 IDProvider.defaultId = "wb-id";
 
-let _Symbol$iterator;
+let serverSide = false;
+var server = {
+  /**
+   * Check if we are running in server-side mode.
+   *
+   * @returns {boolean} `true` if we are in server-side mode; otherwise,
+   * `false`
+   */
+  isServerSide: () => serverSide,
+
+  /**
+   * Set server-side mode to true.
+   */
+  setServerSide: () => {
+    serverSide = true;
+  }
+};
 
 /**
- * Utility for finding the scroll ancestors of a child
+ * Returns a unique identifier factory.  If the parent component hasn't
+ * been mounted yet, the global SsrIDFactory will be returned until the
+ * component becomes mounted.
  *
- * Inspired by https://github.com/olahol/scrollparent.js
- * with modifications to make an iterator that returns a sequence of all scroll
- * ancestors.
- *
- * Also modified for our standards (and commented a bit).
+ * @param {string} [scope] optional string to prefix generated ids with.
+ * @returns {IIdentifierFactory}
  */
-const getElementStyle = function getElementStyle(node, prop) {
-  return getComputedStyle(node).getPropertyValue(prop);
-};
+const useUniqueIdWithMock = scope => {
+  const renderState = useContext$1(RenderStateContext);
+  const idFactory = useRef(null);
 
-const getElementOverflow = function getElementOverflow(node) {
-  return getElementStyle(node, "overflow") + getElementStyle(node, "overflow-y") + getElementStyle(node, "overflow-x");
-};
-
-const canScroll = function canScroll(node) {
-  return /(auto|scroll)/.test(getElementOverflow(node));
-}; // NOTE(somewhatabstract): Flow includes the @@iterator value in the Iterator
-// interface definition, but it doesn't pick up on our computed property
-// defining it (tried handling this in other ways, but it just won't work).
-// So, we need this and the additional FlowFixMe a few lines down on the
-// iterator property itself.
-// $FlowFixMe[prop-missing]
-
-
-_Symbol$iterator = Symbol.iterator;
-
-class ScrollAncestorsIterator {
-  constructor(element) {
-    this.done = false;
-
-    if (!(element instanceof HTMLElement)) {
-      this.done = true;
-    } else {
-      this.parentElement = element.parentElement;
-    }
-  } //$FlowFixMe: Computed property keys are not allowed by flow at the moment
-
-
-  [_Symbol$iterator]() {
-    return this;
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
   }
 
-  next() {
-    if (this.done) {
-      return {
-        done: true
-      };
-    } // Climb the DOM looking for the next scroll candidate.
-
-
-    let scrollCandidate;
-
-    do {
-      scrollCandidate = this.parentElement;
-      this.parentElement = this.parentElement && this.parentElement.parentElement;
-    } while (scrollCandidate && !canScroll(scrollCandidate));
-
-    if (!scrollCandidate) {
-      // If we don't have a scroll candidate, we'll definitely be done
-      // iterating by the next call to next().
-      // So let's remember that.
-      this.done = true; // If we don't have a documentElement, we are actually done right
-      // now, rather than on the next call.
-
-      if (!document.documentElement) {
-        return {
-          done: true
-        };
-      } // Otherwise, as we have a documentElement, this is our penultimate
-      // iteration .
-
-
-      return {
-        done: false,
-        value: document.documentElement
-      };
-    } // We found a scroll ancestor, so let's return that.
-
-
-    return {
-      done: false,
-      value: scrollCandidate
-    };
+  if (renderState === RenderState.Initial) {
+    return SsrIDFactory$1;
   }
 
-}
-
-function enumerateScrollAncestors(element) {
-  return Object.defineProperty({}, Symbol.iterator, {
-    value: () => new ScrollAncestorsIterator(element),
-    writable: true
-  });
-}
-
-function getAxisIntersection(intersectingRect, boundsRect, axis) {
-  const start = rect => axis === "horizontal" ? rect.left : rect.top;
-
-  const end = rect => axis === "horizontal" ? rect.right : rect.bottom;
-
-  if (end(intersectingRect) <= start(boundsRect)) {
-    return "before";
-  } else if (start(intersectingRect) >= end(boundsRect)) {
-    return "after";
+  if (!idFactory.current) {
+    idFactory.current = new UniqueIDFactory(scope);
   }
 
-  return "within";
-}
-
-function UndeterminedIntersection() {
-  return {
-    horizontal: null,
-    vertical: null
-  };
-}
-
-function FullIntersection() {
-  return {
-    horizontal: "within",
-    vertical: "within"
-  };
-}
+  return idFactory.current;
+};
 /**
- * Determine if an element intersects a single other element.
+ * Returns a unique identifier factory.  If the parent component hasn't
+ * been mounted yet, null will be returned.
  *
- * It is assumed that the element provided as `boundsElement` is an element that
- * could obscure the given element, `element`.
+ * @param {string} [scope] optional string to prefix generated ids with.
+ * @returns {?IIdentifierFactory}
  */
 
+const useUniqueIdWithoutMock = scope => {
+  const renderState = useContext$1(RenderStateContext);
+  const idFactory = useRef(null);
 
-function getElementIntersectionAgainstParent(intersectingRect, boundsElement) {
-  // We need to check that it matters if we're out of bounds. If the parent
-  // element isn't clipping or otherwise hiding things outside its bounds,
-  // then checking against bounds isn't going to be much use.
-  // So, let's get the style for the element and use the overflow values.
-  const style = boundsElement.currentStyle || window.getComputedStyle(boundsElement);
-  const boundingRect = boundsElement.getBoundingClientRect();
-  const boundsRect = {
-    top: boundingRect.top,
-    bottom: boundingRect.bottom,
-    left: boundingRect.left,
-    right: boundingRect.right
-  }; // In webapp we set height: 100% on html, body and overflow-y: scroll on body.
-  // This results in the height reported by getBoundingClientRect being the height
-  // of the viewport instead of the height of the page.  We use the scrollHeight
-  // of the body to corect the bounds.
-  // TODO(kevinb): screenshot test this
-
-  if (boundsElement === document.body) {
-    boundsRect.bottom = boundsRect.top + boundsElement.scrollHeight;
-  } // We assume we're within this specific bounds element if it's overflow is
-  // visible.
-
-
-  const horizontal = style.overflowX === "visible" ? "within" : getAxisIntersection(intersectingRect, boundsRect, "horizontal"); // We assume we're within this specific bounds element if it's overflow is
-  // visible.
-
-  const vertical = style.overflowY === "visible" ? "within" : getAxisIntersection(intersectingRect, boundsRect, "vertical");
-  return {
-    horizontal,
-    vertical
-  };
-}
-/**
- * Determine if a given element intersects with the visible bounds of its
- * scroll parents, or the bounds of a specific element.
- */
-
-
-function getElementIntersection(element, boundsElement) {
-  if (!element) {
-    // An non-existant element is definitely not visible.
-    return UndeterminedIntersection();
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
   }
 
-  const {
-    top,
-    left,
-    bottom,
-    right
-  } = element.getBoundingClientRect();
-  const intersectingRect = {
-    top,
-    left,
-    bottom,
-    right
-  }; // If we're looking against a single boundary element, then we just do that.
-
-  if (boundsElement) {
-    return getElementIntersectionAgainstParent(intersectingRect, boundsElement);
+  if (renderState === RenderState.Initial) {
+    return null;
   }
 
-  if (element instanceof Element) {
-    // Otherwise, we enumerate the scroll parents and test against those.
-    // If one of them is hiding our candidate element, then we will return.
-    for (const scrollParent of enumerateScrollAncestors(element)) {
-      const intersection = getElementIntersectionAgainstParent(intersectingRect, scrollParent); // If the intersectingRect is before or after the parent in one or both
-      // dimensions, then return our intersection result. Otherwise, we'll
-      // keep on searching up our parents.
-
-      if (intersection.vertical !== "within" || intersection.horizontal !== "within") {
-        // Stop looking, we've found something that is hiding the element.
-        return intersection;
-      }
-    }
-  } // If we got here, the element is within the bounds of its parents.
-
-
-  return FullIntersection();
-}
+  if (!idFactory.current) {
+    idFactory.current = new UniqueIDFactory(scope);
+  }
 
-let serverSide = false;
-var server = {
-  /**
-   * Check if we are running in server-side mode.
-   *
-   * @returns {boolean} `true` if we are in server-side mode; otherwise,
-   * `false`
-   */
-  isServerSide: () => serverSide,
+  return idFactory.current;
+};
 
-  /**
-   * Set server-side mode to true.
-   */
-  setServerSide: () => {
-    serverSide = true;
+const {
+  useContext,
+  useEffect,
+  useState
+} = React;
+const RenderStateRoot = ({
+  children,
+  throwIfNested
+}) => {
+  const [firstRender, setFirstRender] = useState(true);
+  const contextValue = useContext(RenderStateContext);
+  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, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, getElementIntersection };
+export { IDProvider, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useUniqueIdWithMock, useUniqueIdWithoutMock };