@khanacademy/wonder-blocks-core 8.0.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @khanacademy/wonder-blocks-core
 
+## 9.0.0
+
+### Major Changes
+
+-   f4abd572: - Remove `RenderState.Root` from exported enum
+    -   Change `useRenderState` to only return `RenderState.Initial` or `RenderState.Standard`
+
 ## 8.0.0
 
 ### Major Changes

package/dist/components/initial-fallback.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { RenderState } from "./render-state-context";
+import { RenderStateInternal } from "./render-state-context";
 /**
  * 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.
@@ -56,7 +56,7 @@ export default class InitialFallback extends React.Component<Props, State> {
     componentDidMount(): void;
     _isTheRootComponent: boolean;
     _renderAsRootComponent(): React.ReactNode;
-    _maybeRender(renderState: typeof RenderState[keyof typeof RenderState]): React.ReactNode;
+    _maybeRender(renderState: RenderStateInternal): React.ReactNode;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/render-state-context.d.ts

@@ -1,7 +1,52 @@
 import * as React from "react";
+/**
+ * The possible states of rendering.
+ *
+ * This is used to determine if we are rendering our initial, hydrateable state
+ * or not. Initial renders must be consistent between the server and client so
+ * that hydration will succeed.
+ *
+ * We use a render state like this instead of a simple check for being mounted
+ * or not, or some other way of each component knowing if it is rendering itself
+ * for the first time so that we can avoid cascading initial renders where each
+ * component has to render itself and its children multiple times to reach a
+ * stable state. Instead, we track the initial render from the root of the tree
+ * and switch everything accordingly so that there are fewer additional renders.
+ */
 export declare enum RenderState {
+    /**
+     * The initial render, either on the server or client.
+     */
+    Initial = "initial",
+    /**
+     * Any render after the initial render. Only occurs on the client.
+     */
+    Standard = "standard"
+}
+/**
+ * The internal states of rendering.
+ *
+ * This is different to the `RenderState` enum as this is internal to the
+ * Core package and solely for components that are going to provide new values
+ * to the render state context.
+ */
+export declare enum RenderStateInternal {
+    /**
+     * This is the root state. It indicates that nothing has actually changed
+     * then context value that tracks this. This is used solely by components
+     * that control the rendering state to know that they are in charge of
+     * that process.
+     */
     Root = "root",
+    /**
+     * This indicates something has taken charge of the rendering state and
+     * components should render their initial render state that is hydrateable.
+     */
     Initial = "initial",
+    /**
+     * This indicates that things are now rendering after the initial render
+     * and components can render without worrying about hydration.
+     */
     Standard = "standard"
 }
 /**
@@ -19,5 +64,5 @@ export declare enum RenderState {
  * standard:
  *   means that we're all now doing non-SSR rendering
  */
-declare const RenderStateContext: React.Context<RenderState>;
+declare const RenderStateContext: React.Context<RenderStateInternal>;
 export { RenderStateContext };

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { useContext, useRef, useEffect as useEffect$1 } from 'react';
+import { useContext as useContext$1, useRef, useEffect as useEffect$1 } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 
 function flatten(list) {
@@ -175,12 +175,17 @@ const View = React.forwardRef(function View(props, ref) {
 });
 
 let RenderState = function (RenderState) {
-  RenderState["Root"] = "root";
   RenderState["Initial"] = "initial";
   RenderState["Standard"] = "standard";
   return RenderState;
 }({});
-const RenderStateContext = React.createContext(RenderState.Root);
+let RenderStateInternal = function (RenderStateInternal) {
+  RenderStateInternal["Root"] = "root";
+  RenderStateInternal["Initial"] = "initial";
+  RenderStateInternal["Standard"] = "standard";
+  return RenderStateInternal;
+}({});
+const RenderStateContext = React.createContext(RenderStateInternal.Root);
 RenderStateContext.displayName = "RenderStateContext";
 
 class InitialFallback extends React.Component {
@@ -209,12 +214,12 @@ class InitialFallback extends React.Component {
     this._isTheRootComponent = true;
     if (mounted) {
       return React.createElement(RenderStateContext.Provider, {
-        value: RenderState.Standard
+        value: RenderStateInternal.Standard
       }, children());
     }
     if (fallback) {
       return React.createElement(RenderStateContext.Provider, {
-        value: RenderState.Initial
+        value: RenderStateInternal.Initial
       }, fallback());
     }
     return null;
@@ -225,17 +230,17 @@ class InitialFallback extends React.Component {
       fallback
     } = this.props;
     switch (renderState) {
-      case RenderState.Root:
+      case RenderStateInternal.Root:
         return this._renderAsRootComponent();
-      case RenderState.Initial:
+      case RenderStateInternal.Initial:
         return fallback ? fallback() : null;
-      case RenderState.Standard:
+      case RenderStateInternal.Standard:
         return children();
     }
     {
       var _JSON$stringify;
       console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
-      return this._maybeRender(RenderState.Root);
+      return this._maybeRender(RenderStateInternal.Root);
     }
   }
   render() {
@@ -340,14 +345,18 @@ var Server = {
   }
 };
 
-const useRenderState = () => useContext(RenderStateContext);
+const useRenderState = () => {
+  const rawRenderState = useContext$1(RenderStateContext);
+  if (rawRenderState === RenderStateInternal.Standard) {
+    return RenderState.Standard;
+  } else {
+    return RenderState.Initial;
+  }
+};
 
 const useUniqueIdWithMock = scope => {
   const renderState = useRenderState();
   const idFactory = useRef(null);
-  if (renderState === RenderState.Root) {
-    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
-  }
   if (renderState === RenderState.Initial) {
     return SsrIDFactory$1;
   }
@@ -359,9 +368,6 @@ const useUniqueIdWithMock = scope => {
 const useUniqueIdWithoutMock = scope => {
   const renderState = useRenderState();
   const idFactory = useRef(null);
-  if (renderState === RenderState.Root) {
-    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
-  }
   if (renderState === RenderState.Initial) {
     return null;
   }
@@ -422,24 +428,25 @@ const usePreHydrationEffect = effect => {
 
 const {
   useEffect,
-  useState
+  useState,
+  useContext
 } = React;
 const RenderStateRoot = ({
   children,
   throwIfNested: _throwIfNested = true
 }) => {
   const [firstRender, setFirstRender] = useState(true);
-  const renderState = useRenderState();
+  const renderState = useContext(RenderStateContext);
   useEffect(() => {
     setFirstRender(false);
   }, []);
-  if (renderState !== RenderState.Root) {
+  if (renderState !== RenderStateInternal.Root) {
     if (_throwIfNested) {
       throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
     }
     return React.createElement(React.Fragment, null, children);
   }
-  const value = firstRender ? RenderState.Initial : RenderState.Standard;
+  const value = firstRender ? RenderStateInternal.Initial : RenderStateInternal.Standard;
   return React.createElement(RenderStateContext.Provider, {
     value: value
   }, children);

package/dist/hooks/use-render-state.d.ts

@@ -1,2 +1,2 @@
 import { RenderState } from "../components/render-state-context";
-export declare const useRenderState: () => (typeof RenderState)[keyof typeof RenderState];
+export declare const useRenderState: () => RenderState;

package/dist/index.js

@@ -202,12 +202,17 @@ const View = React__namespace.forwardRef(function View(props, ref) {
 });
 
 let RenderState = function (RenderState) {
-  RenderState["Root"] = "root";
   RenderState["Initial"] = "initial";
   RenderState["Standard"] = "standard";
   return RenderState;
 }({});
-const RenderStateContext = React__namespace.createContext(RenderState.Root);
+let RenderStateInternal = function (RenderStateInternal) {
+  RenderStateInternal["Root"] = "root";
+  RenderStateInternal["Initial"] = "initial";
+  RenderStateInternal["Standard"] = "standard";
+  return RenderStateInternal;
+}({});
+const RenderStateContext = React__namespace.createContext(RenderStateInternal.Root);
 RenderStateContext.displayName = "RenderStateContext";
 
 class InitialFallback extends React__namespace.Component {
@@ -236,12 +241,12 @@ class InitialFallback extends React__namespace.Component {
     this._isTheRootComponent = true;
     if (mounted) {
       return React__namespace.createElement(RenderStateContext.Provider, {
-        value: RenderState.Standard
+        value: RenderStateInternal.Standard
       }, children());
     }
     if (fallback) {
       return React__namespace.createElement(RenderStateContext.Provider, {
-        value: RenderState.Initial
+        value: RenderStateInternal.Initial
       }, fallback());
     }
     return null;
@@ -252,17 +257,17 @@ class InitialFallback extends React__namespace.Component {
       fallback
     } = this.props;
     switch (renderState) {
-      case RenderState.Root:
+      case RenderStateInternal.Root:
         return this._renderAsRootComponent();
-      case RenderState.Initial:
+      case RenderStateInternal.Initial:
         return fallback ? fallback() : null;
-      case RenderState.Standard:
+      case RenderStateInternal.Standard:
         return children();
     }
     {
       var _JSON$stringify;
       console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
-      return this._maybeRender(RenderState.Root);
+      return this._maybeRender(RenderStateInternal.Root);
     }
   }
   render() {
@@ -367,14 +372,18 @@ var Server = {
   }
 };
 
-const useRenderState = () => React.useContext(RenderStateContext);
+const useRenderState = () => {
+  const rawRenderState = React.useContext(RenderStateContext);
+  if (rawRenderState === RenderStateInternal.Standard) {
+    return RenderState.Standard;
+  } else {
+    return RenderState.Initial;
+  }
+};
 
 const useUniqueIdWithMock = scope => {
   const renderState = useRenderState();
   const idFactory = React.useRef(null);
-  if (renderState === RenderState.Root) {
-    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
-  }
   if (renderState === RenderState.Initial) {
     return SsrIDFactory$1;
   }
@@ -386,9 +395,6 @@ const useUniqueIdWithMock = scope => {
 const useUniqueIdWithoutMock = scope => {
   const renderState = useRenderState();
   const idFactory = React.useRef(null);
-  if (renderState === RenderState.Root) {
-    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
-  }
   if (renderState === RenderState.Initial) {
     return null;
   }
@@ -449,24 +455,25 @@ const usePreHydrationEffect = effect => {
 
 const {
   useEffect,
-  useState
+  useState,
+  useContext
 } = React__namespace;
 const RenderStateRoot = ({
   children,
   throwIfNested: _throwIfNested = true
 }) => {
   const [firstRender, setFirstRender] = useState(true);
-  const renderState = useRenderState();
+  const renderState = useContext(RenderStateContext);
   useEffect(() => {
     setFirstRender(false);
   }, []);
-  if (renderState !== RenderState.Root) {
+  if (renderState !== RenderStateInternal.Root) {
     if (_throwIfNested) {
       throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
     }
     return React__namespace.createElement(React__namespace.Fragment, null, children);
   }
-  const value = firstRender ? RenderState.Initial : RenderState.Standard;
+  const value = firstRender ? RenderStateInternal.Initial : RenderStateInternal.Standard;
   return React__namespace.createElement(RenderStateContext.Provider, {
     value: value
   }, children);

package/package.json

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