@khanacademy/wonder-blocks-core - npm Package Compare versions

Comparing version 4.7.0 to 4.8.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-core
 
+## 4.8.0
+
+### Minor Changes
+
+-   873f4a14: Update aphrodite lib def and StyleType
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+
 ## 4.7.0
@@ -4,0 +21,0 @@

dist/es/index.js

@@ -1,3 +0,1 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
@@ -7,5 +5,46 @@ import { useContext, useRef, useEffect as useEffect$1 } from 'react';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  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) {
@@ -20,10 +59,7 @@ return result;
   }
-
   return result;
 }
-
 function processStyleList(style) {
   const stylesheetStyles = [];
   const inlineStyles = [];
-
   if (!style) {
@@ -35,15 +71,11 @@ return {
   }
-
   const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
   flatten(style).forEach(child => {
     const _definition = child._definition;
-
     if (_definition != null) {
       if (shouldInlineStyles) {
         const def = {};
-
         for (const [key, value] of Object.entries(_definition)) {
           def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
         }
-
         inlineStyles.push(def);
@@ -58,3 +90,2 @@ } else {
   const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles));
-
   if (inlineStyles.length > 0 && !shouldInlineStyles) {
@@ -66,3 +97,2 @@ const inlineStylesStyleSheet = StyleSheet.create({
   }
-
   return {
@@ -86,13 +116,17 @@ style: shouldInlineStyles ? inlineStylesObject : {},
 });
-class Text extends React.Component {
-  render() {
+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() {
     const _this$props = this.props,
-          {
-      children,
-      style,
-      tag: Tag,
-      testId
-    } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-
+      {
+        children,
+        style,
+        tag: Tag,
+        testId
+      } = _this$props,
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const isHeader = isHeaderRegex.test(Tag);
@@ -105,5 +139,5 @@ const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
     }), children);
-  }
-
-}
+  };
+  return Text;
+}(React.Component);
 Text.defaultProps = {
@@ -115,10 +149,8 @@ tag: "span"
 function addStyle(Component, defaultStyle) {
-  function StyleComponent(props) {
+  const StyleComponent = props => {
     const {
-      className,
-      style
-    } = props,
-          tmpOtherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-
-    const otherProps = tmpOtherProps;
+        className,
+        style
+      } = props,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     const reset = typeof Component === "string" ? overrides[Component] : null;
@@ -133,4 +165,3 @@ const {
     }));
-  }
-
+  };
   return StyleComponent;
@@ -169,37 +200,35 @@ }
 const StyledSection = addStyle("section", styles.default);
-class View extends React.Component {
-  render() {
+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() {
     const _this$props = this.props,
-          {
-      testId,
-      tag
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      {
+        testId,
+        tag
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const props = _extends({}, restProps, {
       "data-test-id": testId
     });
-
     switch (tag) {
       case "article":
         return React.createElement(StyledArticle, props);
-
       case "aside":
         return React.createElement(StyledAside, props);
-
       case "nav":
         return React.createElement(StyledNav, props);
-
       case "section":
         return React.createElement(StyledSection, props);
-
       case "div":
         return React.createElement(StyledDiv, props);
-
       default:
         throw Error(`${tag} is not an allowed value for the 'tag' prop`);
     }
-  }
-
-}
+  };
+  return View;
+}(React.Component);
 View.defaultProps = {
@@ -216,12 +245,15 @@ tag: "div"
 
-class WithSSRPlaceholder extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+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 = {
       mounted: false
     };
-    this._isTheRootComponent = false;
+    _this._isTheRootComponent = false;
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = WithSSRPlaceholder.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this._isTheRootComponent) {
@@ -232,5 +264,4 @@ this.setState({
     }
-  }
-
-  _renderAsRootComponent() {
+  };
+  _proto._renderAsRootComponent = function _renderAsRootComponent() {
     const {
@@ -244,3 +275,2 @@ mounted
     this._isTheRootComponent = true;
-
     if (mounted) {
@@ -251,3 +281,2 @@ return React.createElement(RenderStateContext.Provider, {
     }
-
     if (placeholder) {
@@ -258,7 +287,5 @@ return React.createElement(RenderStateContext.Provider, {
     }
-
     return null;
-  }
-
-  _maybeRender(renderState) {
+  };
+  _proto._maybeRender = function _maybeRender(renderState) {
     const {
@@ -268,7 +295,5 @@ children,
     } = this.props;
-
     switch (renderState) {
       case RenderState.Root:
         return this._renderAsRootComponent();
-
       case RenderState.Initial:
@@ -278,69 +303,68 @@ if (placeholder) {
         }
-
         return null;
-
       case RenderState.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);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
-  }
+  };
+  return WithSSRPlaceholder;
+}(React.Component);
 
-}
-
-class UniqueIDFactory {
-  constructor(scope) {
+let UniqueIDFactory = function () {
+  function UniqueIDFactory(scope) {
+    this._uniqueFactoryName = void 0;
     this.get = key => {
       const normalizedKey = key.toLowerCase();
-
       if (!this._hasValidIdChars(key)) {
         throw new Error(`Invalid identifier key: ${key}`);
       }
-
       return `${this._uniqueFactoryName}-${normalizedKey}`;
     };
-
     scope = typeof scope === "string" ? scope : "";
     const normalizedScope = scope.toLowerCase();
-
     if (!this._hasValidIdChars(normalizedScope)) {
       throw new Error(`Invalid factory scope: ${scope}`);
     }
-
     this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
   }
-
-  _hasValidIdChars(value) {
+  var _proto = UniqueIDFactory.prototype;
+  _proto._hasValidIdChars = function _hasValidIdChars(value) {
     if (typeof value !== "string") {
       return false;
     }
-
     const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
     return value === invalidCharsReplaced;
-  }
-
-}
+  };
+  return UniqueIDFactory;
+}();
 UniqueIDFactory._factoryUniquenessCounter = 0;
 
-class SsrIDFactory {
-  get(id) {
+let SsrIDFactory = function () {
+  function SsrIDFactory() {}
+  var _proto = SsrIDFactory.prototype;
+  _proto.get = function get(id) {
     return id;
-  }
-
-}
-
+  };
+  return SsrIDFactory;
+}();
 SsrIDFactory.Default = new SsrIDFactory();
 var SsrIDFactory$1 = SsrIDFactory.Default;
 
-class UniqueIDProvider extends React.Component {
-  _performRender(firstRender) {
+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;
+  }
+  var _proto = UniqueIDProvider.prototype;
+  _proto._performRender = function _performRender(firstRender) {
     const {
@@ -351,3 +375,2 @@ children,
     } = this.props;
-
     if (firstRender) {
@@ -357,23 +380,24 @@ if (mockOnFirstRender) {
       }
-
       return null;
     }
-
     if (!this._idFactory) {
       this._idFactory = new UniqueIDFactory(scope);
     }
-
     return children(this._idFactory);
-  }
-
-  render() {
+  };
+  _proto.render = function 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;
   }
-
-}
-
-class IDProvider extends React.Component {
-  renderChildren(ids) {
+  var _proto = IDProvider.prototype;
+  _proto.renderChildren = function renderChildren(ids) {
     const {
@@ -384,11 +408,8 @@ id,
     const uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
-
     if (!uniqueId) {
       throw new Error("Did not get an identifier factory nor a id prop");
     }
-
     return children(uniqueId);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
@@ -398,3 +419,2 @@ id,
     } = this.props;
-
     if (id) {
@@ -408,5 +428,5 @@ return this.renderChildren();
     }
-  }
-
-}
+  };
+  return IDProvider;
+}(React.Component);
 IDProvider.defaultId = "wb-id";
@@ -427,15 +447,11 @@
   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;
   }
-
   if (!idFactory.current) {
     idFactory.current = new UniqueIDFactory(scope);
   }
-
   return idFactory.current;
@@ -446,15 +462,11 @@ };
   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;
   }
-
   if (!idFactory.current) {
     idFactory.current = new UniqueIDFactory(scope);
   }
-
   return idFactory.current;
@@ -488,3 +500,2 @@ };
     const handleChange = () => forceUpdate();
-
     window.addEventListener("online", handleChange);
@@ -504,3 +515,2 @@ window.addEventListener("offline", handleChange);
 } = React;
-
 const RenderStateRoot = ({
@@ -515,3 +525,2 @@ children,
   }, []);
-
   if (renderState !== RenderState.Root) {
@@ -521,6 +530,4 @@ if (throwIfNested) {
     }
-
     return children;
   }
-
   const value = firstRender ? RenderState.Initial : RenderState.Standard;
@@ -531,3 +538,2 @@ return React.createElement(RenderStateContext.Provider, {
 };
-
 RenderStateRoot.defaultProps = {
@@ -534,0 +540,0 @@ throwIfNested: true

dist/index.js

@@ -5,34 +5,69 @@ 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
 var aphrodite = require('aphrodite');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  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) {
@@ -47,10 +82,7 @@ return result;
   }
-
   return result;
 }
-
 function processStyleList(style) {
   const stylesheetStyles = [];
   const inlineStyles = [];
-
   if (!style) {
@@ -62,15 +94,11 @@ return {
   }
-
   const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
   flatten(style).forEach(child => {
     const _definition = child._definition;
-
     if (_definition != null) {
       if (shouldInlineStyles) {
         const def = {};
-
         for (const [key, value] of Object.entries(_definition)) {
           def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
         }
-
         inlineStyles.push(def);
@@ -85,3 +113,2 @@ } else {
   const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles));
-
   if (inlineStyles.length > 0 && !shouldInlineStyles) {
@@ -93,3 +120,2 @@ const inlineStylesStyleSheet = aphrodite.StyleSheet.create({
   }
-
   return {
@@ -113,16 +139,20 @@ style: shouldInlineStyles ? inlineStylesObject : {},
 });
-class Text extends React__namespace.Component {
-  render() {
+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() {
     const _this$props = this.props,
-          {
-      children,
-      style,
-      tag: Tag,
-      testId
-    } = _this$props,
-          otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
-
+      {
+        children,
+        style,
+        tag: Tag,
+        testId
+      } = _this$props,
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const isHeader = isHeaderRegex.test(Tag);
     const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
-    return React__namespace.createElement(Tag, _extends__default["default"]({}, otherProps, {
+    return React__namespace.createElement(Tag, _extends({}, otherProps, {
       style: styleAttributes.style,
@@ -132,5 +162,5 @@ className: styleAttributes.className,
     }), children);
-  }
-
-}
+  };
+  return Text;
+}(React__namespace.Component);
 Text.defaultProps = {
@@ -142,10 +172,8 @@ tag: "span"
 function addStyle(Component, defaultStyle) {
-  function StyleComponent(props) {
+  const StyleComponent = props => {
     const {
-      className,
-      style
-    } = props,
-          tmpOtherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-
-    const otherProps = tmpOtherProps;
+        className,
+        style
+      } = props,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     const reset = typeof Component === "string" ? overrides[Component] : null;
@@ -156,8 +184,7 @@ const {
     } = processStyleList([reset, defaultStyle, style]);
-    return React__namespace.createElement(Component, _extends__default["default"]({}, otherProps, {
+    return React__namespace.createElement(Component, _extends({}, otherProps, {
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
     }));
-  }
-
+  };
   return StyleComponent;
@@ -196,37 +223,35 @@ }
 const StyledSection = addStyle("section", styles.default);
-class View extends React__namespace.Component {
-  render() {
+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() {
     const _this$props = this.props,
-          {
-      testId,
-      tag
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
-
-    const props = _extends__default["default"]({}, restProps, {
+      {
+        testId,
+        tag
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+    const props = _extends({}, restProps, {
       "data-test-id": testId
     });
-
     switch (tag) {
       case "article":
         return React__namespace.createElement(StyledArticle, props);
-
       case "aside":
         return React__namespace.createElement(StyledAside, props);
-
       case "nav":
         return React__namespace.createElement(StyledNav, props);
-
       case "section":
         return React__namespace.createElement(StyledSection, props);
-
       case "div":
         return React__namespace.createElement(StyledDiv, props);
-
       default:
         throw Error(`${tag} is not an allowed value for the 'tag' prop`);
     }
-  }
-
-}
+  };
+  return View;
+}(React__namespace.Component);
 View.defaultProps = {
@@ -243,12 +268,15 @@ tag: "div"
 
-class WithSSRPlaceholder extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+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 = {
       mounted: false
     };
-    this._isTheRootComponent = false;
+    _this._isTheRootComponent = false;
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = WithSSRPlaceholder.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this._isTheRootComponent) {
@@ -259,5 +287,4 @@ this.setState({
     }
-  }
-
-  _renderAsRootComponent() {
+  };
+  _proto._renderAsRootComponent = function _renderAsRootComponent() {
     const {
@@ -271,3 +298,2 @@ mounted
     this._isTheRootComponent = true;
-
     if (mounted) {
@@ -278,3 +304,2 @@ return React__namespace.createElement(RenderStateContext.Provider, {
     }
-
     if (placeholder) {
@@ -285,7 +310,5 @@ return React__namespace.createElement(RenderStateContext.Provider, {
     }
-
     return null;
-  }
-
-  _maybeRender(renderState) {
+  };
+  _proto._maybeRender = function _maybeRender(renderState) {
     const {
@@ -295,7 +318,5 @@ children,
     } = this.props;
-
     switch (renderState) {
       case RenderState.Root:
         return this._renderAsRootComponent();
-
       case RenderState.Initial:
@@ -305,69 +326,68 @@ if (placeholder) {
         }
-
         return null;
-
       case RenderState.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);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
-  }
+  };
+  return WithSSRPlaceholder;
+}(React__namespace.Component);
 
-}
-
-class UniqueIDFactory {
-  constructor(scope) {
+let UniqueIDFactory = function () {
+  function UniqueIDFactory(scope) {
+    this._uniqueFactoryName = void 0;
     this.get = key => {
       const normalizedKey = key.toLowerCase();
-
       if (!this._hasValidIdChars(key)) {
         throw new Error(`Invalid identifier key: ${key}`);
       }
-
       return `${this._uniqueFactoryName}-${normalizedKey}`;
     };
-
     scope = typeof scope === "string" ? scope : "";
     const normalizedScope = scope.toLowerCase();
-
     if (!this._hasValidIdChars(normalizedScope)) {
       throw new Error(`Invalid factory scope: ${scope}`);
     }
-
     this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
   }
-
-  _hasValidIdChars(value) {
+  var _proto = UniqueIDFactory.prototype;
+  _proto._hasValidIdChars = function _hasValidIdChars(value) {
     if (typeof value !== "string") {
       return false;
     }
-
     const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
     return value === invalidCharsReplaced;
-  }
-
-}
+  };
+  return UniqueIDFactory;
+}();
 UniqueIDFactory._factoryUniquenessCounter = 0;
 
-class SsrIDFactory {
-  get(id) {
+let SsrIDFactory = function () {
+  function SsrIDFactory() {}
+  var _proto = SsrIDFactory.prototype;
+  _proto.get = function get(id) {
     return id;
-  }
-
-}
-
+  };
+  return SsrIDFactory;
+}();
 SsrIDFactory.Default = new SsrIDFactory();
 var SsrIDFactory$1 = SsrIDFactory.Default;
 
-class UniqueIDProvider extends React__namespace.Component {
-  _performRender(firstRender) {
+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;
+  }
+  var _proto = UniqueIDProvider.prototype;
+  _proto._performRender = function _performRender(firstRender) {
     const {
@@ -378,3 +398,2 @@ children,
     } = this.props;
-
     if (firstRender) {
@@ -384,23 +403,24 @@ if (mockOnFirstRender) {
       }
-
       return null;
     }
-
     if (!this._idFactory) {
       this._idFactory = new UniqueIDFactory(scope);
     }
-
     return children(this._idFactory);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(WithSSRPlaceholder, {
       placeholder: () => this._performRender(true)
     }, () => this._performRender(false));
+  };
+  return UniqueIDProvider;
+}(React__namespace.Component);
+
+let IDProvider = function (_React$Component) {
+  _inheritsLoose(IDProvider, _React$Component);
+  function IDProvider() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-}
-
-class IDProvider extends React__namespace.Component {
-  renderChildren(ids) {
+  var _proto = IDProvider.prototype;
+  _proto.renderChildren = function renderChildren(ids) {
     const {
@@ -411,11 +431,8 @@ id,
     const uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
-
     if (!uniqueId) {
       throw new Error("Did not get an identifier factory nor a id prop");
     }
-
     return children(uniqueId);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
@@ -425,3 +442,2 @@ id,
     } = this.props;
-
     if (id) {
@@ -435,5 +451,5 @@ return this.renderChildren();
     }
-  }
-
-}
+  };
+  return IDProvider;
+}(React__namespace.Component);
 IDProvider.defaultId = "wb-id";
@@ -454,15 +470,11 @@
   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;
   }
-
   if (!idFactory.current) {
     idFactory.current = new UniqueIDFactory(scope);
   }
-
   return idFactory.current;
@@ -473,15 +485,11 @@ };
   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;
   }
-
   if (!idFactory.current) {
     idFactory.current = new UniqueIDFactory(scope);
   }
-
   return idFactory.current;
@@ -515,3 +523,2 @@ };
     const handleChange = () => forceUpdate();
-
     window.addEventListener("online", handleChange);
@@ -531,3 +538,2 @@ window.addEventListener("offline", handleChange);
 } = React__namespace;
-
 const RenderStateRoot = ({
@@ -542,3 +548,2 @@ children,
   }, []);
-
   if (renderState !== RenderState.Root) {
@@ -548,6 +553,4 @@ if (throwIfNested) {
     }
-
     return children;
   }
-
   const value = firstRender ? RenderState.Initial : RenderState.Standard;
@@ -558,3 +561,2 @@ return React__namespace.createElement(RenderStateContext.Provider, {
 };
-
 RenderStateRoot.defaultProps = {
@@ -561,0 +563,0 @@ throwIfNested: true

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "design": "v1",
@@ -11,3 +11,3 @@ "publishConfig": {
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
@@ -21,3 +21,2 @@ "test": "echo \"Error: no test specified\" && exit 1"
     "aphrodite": "^1.2.5",
-    "flow-enums-runtime": "^0.0.6",
     "react": "16.14.0",
@@ -29,3 +28,3 @@ "react-dom": "16.14.0",
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.2"
   },
@@ -32,0 +31,0 @@ "author": "",

src/components/__tests__/view.test.js

 import * as React from "react";
-import renderer from "react-test-renderer";
+import * as renderer from "react-test-renderer";
 
@@ -4,0 +4,0 @@ import View from "../view";

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

229147

increased by50.88%

Dependency count

6

decreased by-14.29%

Number of package files

89

increased by53.45%

Lines of code

3975

increased by3.38%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes