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

Comparing version 1.4.16 to 1.4.17

CHANGELOG.md

 # @khanacademy/wonder-blocks-layout
 
+## 1.4.17
+
+### 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
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+
 ## 1.4.16
@@ -4,0 +28,0 @@

dist/es/index.js

@@ -1,2 +0,1 @@
-import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
@@ -7,2 +6,31 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 
+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 _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);
+}
+
 const VALID_MEDIA_SIZES = ["small", "medium", "large"];
@@ -63,22 +91,22 @@ const mediaDefaultSpecLargeMarginWidth = Spacing.large_24;
 const DEFAULT_SIZE = "large";
-
-class MediaLayoutInternal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
+let MediaLayoutInternal = function (_React$Component) {
+  _inheritsLoose(MediaLayoutInternal, _React$Component);
+  function MediaLayoutInternal(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.cleanupThunks = void 0;
+    _this.state = {
       size: undefined
     };
-    this.cleanupThunks = [];
+    _this.cleanupThunks = [];
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = MediaLayoutInternal.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const entries = Object.entries(this.props.mediaSpec);
-
     for (const [size, spec] of entries) {
       const mql = mediaQueryLists[spec.query];
-
       if (!mql) {
         continue;
       }
-
       const listener = e => {
@@ -91,13 +119,10 @@ if (e.matches) {
       };
-
       mql.addListener(listener);
       this.cleanupThunks.push(() => mql.removeListener(listener));
     }
-  }
-
-  componentWillUnmount() {
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.cleanupThunks.forEach(cleaup => cleaup());
-  }
-
-  getCurrentSize(spec) {
+  };
+  _proto.getCurrentSize = function getCurrentSize(spec) {
     if (this.state.size) {
@@ -107,6 +132,4 @@ return this.state.size;
       const entries = Object.entries(this.props.mediaSpec);
-
       for (const [size, _spec] of entries) {
         const mql = mediaQueryLists[_spec.query];
-
         if (mql.matches) {
@@ -117,11 +140,8 @@ return size;
     }
-
     return DEFAULT_SIZE;
-  }
-
-  isServerSide() {
+  };
+  _proto.isServerSide = function isServerSide() {
     return typeof window === "undefined" || !window.matchMedia;
-  }
-
-  getMockStyleSheet(mediaSize) {
+  };
+  _proto.getMockStyleSheet = function getMockStyleSheet(mediaSize) {
     const {
@@ -131,14 +151,10 @@ styleSheets
     const mockStyleSheet = {};
-
     if (!styleSheets) {
       return mockStyleSheet;
     }
-
     for (const styleSize of Object.keys(styleSheets)) {
       const styleSheet = styleSheets[styleSize];
-
       if (!styleSheet) {
         continue;
       }
-
       for (const name of Object.keys(styleSheet)) {
@@ -148,11 +164,8 @@ if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
         }
-
         mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
       }
     }
-
     return mockStyleSheet;
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
@@ -164,3 +177,2 @@ children,
     } = this.props;
-
     if (!this.isServerSide()) {
@@ -171,3 +183,2 @@ for (const query of queries.filter(query => !mediaQueryLists[query])) {
     }
-
     const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
@@ -180,8 +191,12 @@ const styles = this.getMockStyleSheet(mediaSize);
     });
+  };
+  return MediaLayoutInternal;
+}(React.Component);
+let MediaLayout = function (_React$Component2) {
+  _inheritsLoose(MediaLayout, _React$Component2);
+  function MediaLayout() {
+    return _React$Component2.apply(this, arguments) || this;
   }
-
-}
-
-class MediaLayout extends React.Component {
-  render() {
+  var _proto2 = MediaLayout.prototype;
+  _proto2.render = function render() {
     return React.createElement(MediaLayoutContext.Consumer, null, ({
@@ -196,8 +211,13 @@ overrideSize,
     })));
+  };
+  return MediaLayout;
+}(React.Component);
+
+let Spring = function (_React$Component) {
+  _inheritsLoose(Spring, _React$Component);
+  function Spring() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-}
-
-class Spring extends React.Component {
-  render() {
+  var _proto = Spring.prototype;
+  _proto.render = function render() {
     const {
@@ -210,5 +230,5 @@ style
     });
-  }
-
-}
+  };
+  return Spring;
+}(React.Component);
 const styles = StyleSheet.create({
@@ -220,4 +240,9 @@ grow: {
 
-class Strut extends React.Component {
-  render() {
+let Strut = function (_React$Component) {
+  _inheritsLoose(Strut, _React$Component);
+  function Strut() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Strut.prototype;
+  _proto.render = function render() {
     const {
@@ -231,6 +256,5 @@ size,
     });
-  }
-
-}
-
+  };
+  return Strut;
+}(React.Component);
 const strutStyle = size => {
@@ -251,18 +275,12 @@ return {
       return true;
-
     case "small":
       return mediaSize === "small";
-
     case "mdOrSmaller":
       return mediaSize === "medium" || mediaSize === "small";
-
     case "medium":
       return mediaSize === "medium";
-
     case "mdOrLarger":
       return mediaSize === "medium" || mediaSize === "large";
-
     case "large":
       return mediaSize === "large";
-
     default:
@@ -269,0 +287,0 @@ throw new Error(`Unsupported mediaSize: ${mediaSize}`);

dist/index.js

@@ -5,3 +5,2 @@ 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
@@ -15,23 +14,51 @@ var Spacing = require('@khanacademy/wonder-blocks-spacing');
 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 React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
+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 _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);
+}
+
 const VALID_MEDIA_SIZES = ["small", "medium", "large"];
@@ -92,22 +119,22 @@ const mediaDefaultSpecLargeMarginWidth = Spacing__default["default"].large_24;
 const DEFAULT_SIZE = "large";
-
-class MediaLayoutInternal extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
+let MediaLayoutInternal = function (_React$Component) {
+  _inheritsLoose(MediaLayoutInternal, _React$Component);
+  function MediaLayoutInternal(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.cleanupThunks = void 0;
+    _this.state = {
       size: undefined
     };
-    this.cleanupThunks = [];
+    _this.cleanupThunks = [];
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = MediaLayoutInternal.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const entries = Object.entries(this.props.mediaSpec);
-
     for (const [size, spec] of entries) {
       const mql = mediaQueryLists[spec.query];
-
       if (!mql) {
         continue;
       }
-
       const listener = e => {
@@ -120,13 +147,10 @@ if (e.matches) {
       };
-
       mql.addListener(listener);
       this.cleanupThunks.push(() => mql.removeListener(listener));
     }
-  }
-
-  componentWillUnmount() {
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.cleanupThunks.forEach(cleaup => cleaup());
-  }
-
-  getCurrentSize(spec) {
+  };
+  _proto.getCurrentSize = function getCurrentSize(spec) {
     if (this.state.size) {
@@ -136,6 +160,4 @@ return this.state.size;
       const entries = Object.entries(this.props.mediaSpec);
-
       for (const [size, _spec] of entries) {
         const mql = mediaQueryLists[_spec.query];
-
         if (mql.matches) {
@@ -146,11 +168,8 @@ return size;
     }
-
     return DEFAULT_SIZE;
-  }
-
-  isServerSide() {
+  };
+  _proto.isServerSide = function isServerSide() {
     return typeof window === "undefined" || !window.matchMedia;
-  }
-
-  getMockStyleSheet(mediaSize) {
+  };
+  _proto.getMockStyleSheet = function getMockStyleSheet(mediaSize) {
     const {
@@ -160,14 +179,10 @@ styleSheets
     const mockStyleSheet = {};
-
     if (!styleSheets) {
       return mockStyleSheet;
     }
-
     for (const styleSize of Object.keys(styleSheets)) {
       const styleSheet = styleSheets[styleSize];
-
       if (!styleSheet) {
         continue;
       }
-
       for (const name of Object.keys(styleSheet)) {
@@ -177,11 +192,8 @@ if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
         }
-
         mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
       }
     }
-
     return mockStyleSheet;
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
@@ -193,3 +205,2 @@ children,
     } = this.props;
-
     if (!this.isServerSide()) {
@@ -200,3 +211,2 @@ for (const query of queries.filter(query => !mediaQueryLists[query])) {
     }
-
     const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
@@ -209,8 +219,12 @@ const styles = this.getMockStyleSheet(mediaSize);
     });
+  };
+  return MediaLayoutInternal;
+}(React__namespace.Component);
+let MediaLayout = function (_React$Component2) {
+  _inheritsLoose(MediaLayout, _React$Component2);
+  function MediaLayout() {
+    return _React$Component2.apply(this, arguments) || this;
   }
-
-}
-
-class MediaLayout extends React__namespace.Component {
-  render() {
+  var _proto2 = MediaLayout.prototype;
+  _proto2.render = function render() {
     return React__namespace.createElement(MediaLayoutContext.Consumer, null, ({
@@ -220,3 +234,3 @@ overrideSize,
       mediaSpec
-    }) => React__namespace.createElement(MediaLayoutInternal, _extends__default["default"]({}, this.props, {
+    }) => React__namespace.createElement(MediaLayoutInternal, _extends({}, this.props, {
       overrideSize: overrideSize,
@@ -226,8 +240,13 @@ ssrSize: ssrSize,
     })));
+  };
+  return MediaLayout;
+}(React__namespace.Component);
+
+let Spring = function (_React$Component) {
+  _inheritsLoose(Spring, _React$Component);
+  function Spring() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-}
-
-class Spring extends React__namespace.Component {
-  render() {
+  var _proto = Spring.prototype;
+  _proto.render = function render() {
     const {
@@ -240,5 +259,5 @@ style
     });
-  }
-
-}
+  };
+  return Spring;
+}(React__namespace.Component);
 const styles = aphrodite.StyleSheet.create({
@@ -250,4 +269,9 @@ grow: {
 
-class Strut extends React__namespace.Component {
-  render() {
+let Strut = function (_React$Component) {
+  _inheritsLoose(Strut, _React$Component);
+  function Strut() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Strut.prototype;
+  _proto.render = function render() {
     const {
@@ -261,6 +285,5 @@ size,
     });
-  }
-
-}
-
+  };
+  return Strut;
+}(React__namespace.Component);
 const strutStyle = size => {
@@ -281,18 +304,12 @@ return {
       return true;
-
     case "small":
       return mediaSize === "small";
-
     case "mdOrSmaller":
       return mediaSize === "medium" || mediaSize === "small";
-
     case "medium":
       return mediaSize === "medium";
-
     case "mdOrLarger":
       return mediaSize === "medium" || mediaSize === "large";
-
     case "large":
       return mediaSize === "large";
-
     default:
@@ -299,0 +316,0 @@ throw new Error(`Unsupported mediaSize: ${mediaSize}`);

package.json

 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "design": "v1",
@@ -11,3 +11,3 @@ "publishConfig": {
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
@@ -18,7 +18,7 @@ "test": "echo \"Error: no test specified\" && exit 1"
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5"
+    "@khanacademy/wonder-blocks-core": "^4.8.0",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.2"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

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

139743

increased by67.03%

Number of package files

37

increased by76.19%

Worsened metrics

Lines of code

2254

decreased by-4.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@khanacademy/wonder-blocks-core@^4.8.0

• Updated@khanacademy/wonder-blocks-spacing@^3.0.6