@khanacademy/wonder-blocks-core 5.0.3 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-core
 
+## 5.1.0
+
+### Minor Changes
+
+-   3c400719: Add useLatestRef hook to wonder-blocks-core
+
+### Patch Changes
+
+-   a6164ed0: Don't use React.FC<> for functional components
+
+## 5.0.4
+
+### Patch Changes
+
+-   c20f48f3: Don't transpile classes when building bundles
+
 ## 5.0.3
 
 ### Patch Changes

package/dist/components/id-provider.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for id-provider
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import * as React from "react";
 import type { IIdentifierFactory } from "../util/types";
 declare type Props = {|

package/dist/components/render-state-context.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for render-state-context
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import * as React from "react";
 declare export var RenderState: {|
   +Root: "root",

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

@@ -6,5 +6,5 @@ type Props = {
      */
     throwIfNested?: boolean;
 };
-declare const RenderStateRoot: React.FC<Props>;
+declare const RenderStateRoot: ({ children, throwIfNested, }: Props) => React.ReactElement;
 export { RenderStateRoot };

package/dist/components/render-state-root.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for render-state-root
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import * as React from "react";
 declare type Props = {|
   children: React.Node,
@@ -14,5 +13,5 @@ declare type Props = {|
    */
   throwIfNested?: boolean,
 |};
-declare var RenderStateRoot: React.StatelessFunctionalComponent<Props>;
+declare var RenderStateRoot: (x: Props) => React.Element<any>;
 declare export { RenderStateRoot };

package/dist/components/unique-id-provider.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for unique-id-provider
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import * as React from "react";
 import type { IIdentifierFactory } from "../util/types";
 declare type Props = {|

package/dist/components/with-ssr-placeholder.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for with-ssr-placeholder
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import * as React from "react";
 import { RenderState } from "./render-state-context";
 

package/dist/es/index.js

@@ -30,27 +30,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 function flatten(list) {
   const result = [];
   if (!list) {
     return result;
   } else if (Array.isArray(list)) {
     for (const item of list) {
-      result.push.apply(result, flatten(item));
+      result.push(...flatten(item));
     }
   } else {
     result.push(list);
@@ -83,7 +69,7 @@ function processStyleList(style) {
       inlineStyles.push(child);
     }
   });
-  const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles));
+  const inlineStylesObject = Object.assign({}, ...inlineStyles);
   if (inlineStyles.length > 0 && !shouldInlineStyles) {
     const inlineStylesStyleSheet = StyleSheet.create({
       inlineStyles: inlineStylesObject
@@ -92,7 +78,7 @@ function processStyleList(style) {
   }
   return {
     style: shouldInlineStyles ? inlineStylesObject : {},
-    className: css.apply(void 0, stylesheetStyles)
+    className: css(...stylesheetStyles)
   };
 }
 
@@ -108,13 +94,8 @@ const styles$1 = StyleSheet.create({
     marginBottom: 0
   }
 });
-let Text = function (_React$Component) {
-  _inheritsLoose(Text, _React$Component);
-  function Text() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = Text.prototype;
-  _proto.render = function render() {
+class Text extends React.Component {
+  render() {
     const _this$props = this.props,
       {
         children,
@@ -130,16 +111,15 @@ let Text = function (_React$Component) {
       className: styleAttributes.className,
       "data-test-id": testId
     }), children);
-  };
-  return Text;
-}(React.Component);
+  }
+}
 Text.defaultProps = {
   tag: "span"
 };
 
 const _excluded$1 = ["className", "style"];
 function addStyle(Component, defaultStyle) {
-  const StyleComponent = props => {
+  return React.forwardRef((props, ref) => {
     const {
         className,
         style
@@ -151,11 +131,11 @@ function addStyle(Component, defaultStyle) {
       style: inlineStyles
     } = processStyleList([reset, defaultStyle, style]);
     return React.createElement(Component, _extends({}, otherProps, {
+      ref: ref,
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
-  };
-  return StyleComponent;
+  });
 }
 const overrides = StyleSheet.create({
   button: {
@@ -188,13 +168,8 @@ const StyledArticle = addStyle("article", styles.default);
 const StyledAside = addStyle("aside", styles.default);
 const StyledNav = addStyle("nav", styles.default);
 const StyledSection = addStyle("section", styles.default);
-let View = function (_React$Component) {
-  _inheritsLoose(View, _React$Component);
-  function View() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = View.prototype;
-  _proto.render = function render() {
+class View extends React.Component {
+  render() {
     const _this$props = this.props,
       {
         testId,
@@ -218,9 +193,8 @@ let View = function (_React$Component) {
       default:
         throw Error(`${tag} is not an allowed value for the 'tag' prop`);
     }
-  };
-  return View;
-}(React.Component);
+  }
+}
 View.defaultProps = {
   tag: "div"
 };
@@ -232,26 +206,22 @@ const RenderState = {
 };
 const RenderStateContext = React.createContext(RenderState.Root);
 
-let WithSSRPlaceholder = function (_React$Component) {
-  _inheritsLoose(WithSSRPlaceholder, _React$Component);
-  function WithSSRPlaceholder(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
+class WithSSRPlaceholder extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       mounted: false
     };
-    _this._isTheRootComponent = false;
-    return _this;
+    this._isTheRootComponent = false;
   }
-  var _proto = WithSSRPlaceholder.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     if (this._isTheRootComponent) {
       this.setState({
         mounted: true
       });
     }
-  };
-  _proto._renderAsRootComponent = function _renderAsRootComponent() {
+  }
+  _renderAsRootComponent() {
     const {
       mounted
     } = this.state;
@@ -271,8 +241,8 @@ let WithSSRPlaceholder = function (_React$Component) {
       }, placeholder());
     }
     return null;
-  };
-  _proto._maybeRender = function _maybeRender(renderState) {
+  }
+  _maybeRender(renderState) {
     const {
       children,
       placeholder
@@ -293,15 +263,14 @@ let WithSSRPlaceholder = function (_React$Component) {
       console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
       return this._maybeRender(RenderState.Root);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
-  };
-  return WithSSRPlaceholder;
-}(React.Component);
+  }
+}
 
-let UniqueIDFactory = function () {
-  function UniqueIDFactory(scope) {
+class UniqueIDFactory {
+  constructor(scope) {
     this._uniqueFactoryName = void 0;
     this.get = key => {
       const normalizedKey = key.toLowerCase();
@@ -317,39 +286,30 @@ let UniqueIDFactory = function () {
     }
     this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
   }
-  var _proto = UniqueIDFactory.prototype;
-  _proto._hasValidIdChars = function _hasValidIdChars(value) {
+  _hasValidIdChars(value) {
     if (typeof value !== "string") {
       return false;
     }
     const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
     return value === invalidCharsReplaced;
-  };
-  return UniqueIDFactory;
-}();
+  }
+}
 UniqueIDFactory._factoryUniquenessCounter = 0;
 
-let SsrIDFactory = function () {
-  function SsrIDFactory() {}
-  var _proto = SsrIDFactory.prototype;
-  _proto.get = function get(id) {
+class SsrIDFactory {
+  get(id) {
     return id;
-  };
-  return SsrIDFactory;
-}();
+  }
+}
 SsrIDFactory.Default = new SsrIDFactory();
 var SsrIDFactory$1 = SsrIDFactory.Default;
 
-let UniqueIDProvider = function (_React$Component) {
-  _inheritsLoose(UniqueIDProvider, _React$Component);
-  function UniqueIDProvider(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this._idFactory = void 0;
-    return _this;
+class UniqueIDProvider extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._idFactory = void 0;
   }
-  var _proto = UniqueIDProvider.prototype;
-  _proto._performRender = function _performRender(firstRender) {
+  _performRender(firstRender) {
     const {
       children,
       mockOnFirstRender,
@@ -365,22 +325,16 @@ let UniqueIDProvider = function (_React$Component) {
       this._idFactory = new UniqueIDFactory(scope);
     }
     return children(this._idFactory);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return React.createElement(WithSSRPlaceholder, {
       placeholder: () => this._performRender(true)
     }, () => this._performRender(false));
-  };
-  return UniqueIDProvider;
-}(React.Component);
-
-let IDProvider = function (_React$Component) {
-  _inheritsLoose(IDProvider, _React$Component);
-  function IDProvider() {
-    return _React$Component.apply(this, arguments) || this;
   }
-  var _proto = IDProvider.prototype;
-  _proto.renderChildren = function renderChildren(ids) {
+}
+
+class IDProvider extends React.Component {
+  renderChildren(ids) {
     const {
       id,
       children
@@ -390,8 +344,8 @@ let IDProvider = function (_React$Component) {
       throw new Error("Did not get an identifier factory nor a id prop");
     }
     return children(uniqueId);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       id,
       scope
@@ -404,9 +358,8 @@ let IDProvider = function (_React$Component) {
         mockOnFirstRender: true
       }, ids => this.renderChildren(ids));
     }
-  };
-  return IDProvider;
-}(React.Component);
+  }
+}
 IDProvider.defaultId = "wb-id";
 
 let serverSide = false;
@@ -469,6 +422,12 @@ const useIsMounted = () => {
   return React.useCallback(() => isMounted.current, []);
 };
 
+function useLatestRef(value) {
+  const ref = React.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
 const useOnline = () => {
   const forceUpdate = useForceUpdate();
   useEffect$1(() => {
@@ -489,7 +448,7 @@ const {
 } = React;
 const RenderStateRoot = ({
   children,
-  throwIfNested
+  throwIfNested: _throwIfNested = true
 }) => {
   const [firstRender, setFirstRender] = useState(true);
   const renderState = useRenderState();
@@ -497,7 +456,7 @@ const RenderStateRoot = ({
     setFirstRender(false);
   }, []);
   if (renderState !== RenderState.Root) {
-    if (throwIfNested) {
+    if (_throwIfNested) {
       throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
     }
     return children;
@@ -507,8 +466,5 @@ const RenderStateRoot = ({
     value: value
   }, children);
 };
-RenderStateRoot.defaultProps = {
-  throwIfNested: true
-};
 
-export { IDProvider, RenderState, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useIsMounted, useOnMountEffect, useOnline, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { IDProvider, RenderState, RenderStateRoot, server as Server, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };

package/dist/hooks/use-force-update.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for use-force-update
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 /**
  * Hook for forcing a component to update on demand.
  *

package/dist/hooks/use-is-mounted.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for use-is-mounted
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 /**
  * Hook to provide a function for determining component mounted state.
  *

package/dist/hooks/use-latest-ref.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Return a ref that always contains the `value` passed.
+ *
+ * The useLatestRef hook returns a ref that always contains the `value` passed
+ * to the hook during the most recent render.
+ *
+ * It can be used to wrap a possibly-changing prop in a stable value that can
+ * be passed to useEffect without causing unnecessary re-renders. See the
+ * Storybook docs for a usage example.
+ */
+export declare function useLatestRef<T>(value: T): React.RefObject<T>;

package/dist/hooks/use-latest-ref.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Flowtype definitions for useLatestRef
+ * @flow
+ */
+
+/**
+ * Return a ref that always contains the `value` passed.
+ *
+ * The useLatestRef hook returns a ref that always contains the `value` passed
+ * to the hook during the most recent render.
+ *
+ * It can be used to wrap a possibly-changing prop in a stable value that can
+ * be passed to useEffect without causing unnecessary re-renders. See the
+ * Storybook docs for a usage example.
+ */
+declare export function useLatestRef<T>(value: T): {|current: T|};

package/dist/hooks/use-on-mount-effect.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for use-on-mount-effect
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 /**
  * Runs a callback once on mount.
  *

package/dist/hooks/use-online.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for use-online
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 /**
  * Track the online status of the browser.
  *

package/dist/hooks/use-render-state.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for use-render-state
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import { RenderState } from "../components/render-state-context";
 declare export var useRenderState: () => $ElementType<
   typeof RenderState,

package/dist/hooks/use-unique-id.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for use-unique-id
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import type { IIdentifierFactory } from "../util/types";
 
 /**

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as Server } from "./util/server";
 export { useUniqueIdWithMock, useUniqueIdWithoutMock, } from "./hooks/use-unique-id";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useIsMounted } from "./hooks/use-is-mounted";
+export { useLatestRef } from "./hooks/use-latest-ref";
 export { useOnMountEffect } from "./hooks/use-on-mount-effect";
 export { useOnline } from "./hooks/use-online";
 export { useRenderState } from "./hooks/use-render-state";