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

Comparing version 2.4.2 to 2.4.3

dist/es/index.js

@@ -60,16 +60,31 @@ import React__default, { Component, createElement, createContext } from 'react';
 
-function _objectSpread(target) {
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
 
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
+    if (i % 2) {
+      ownKeys(source, true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(source).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
     }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    });
   }
@@ -188,2 +203,6 @@
 function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
   var _arr = [];
@@ -408,9 +427,9 @@ var _n = true;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "waitingForClick", void 0);
+    _defineProperty(_assertThisInitialized(_this), "waitingForClick", void 0);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "enterClick", void 0);
+    _defineProperty(_assertThisInitialized(_this), "enterClick", void 0);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dragging", void 0);
+    _defineProperty(_assertThisInitialized(_this), "dragging", void 0);
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClick", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
       if (_this.enterClick) {
@@ -425,3 +444,3 @@ return;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseEnter", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
       // When the left button is pressed already, we want it to be pressed
@@ -441,3 +460,3 @@ if (e.buttons === 1) {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseLeave", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
       if (!_this.waitingForClick) {
@@ -454,3 +473,3 @@ _this.dragging = false;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
       _this.setState({
@@ -461,3 +480,3 @@ pressed: true
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseUp", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
       if (_this.dragging) {
@@ -475,3 +494,3 @@ _this.dragging = false;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragStart", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) {
       _this.dragging = true;
@@ -481,3 +500,3 @@ e.preventDefault();
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchStart", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () {
       _this.setState({
@@ -488,3 +507,3 @@ pressed: true
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchEnd", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () {
       _this.setState({
@@ -497,3 +516,3 @@ pressed: false
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTouchCancel", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () {
       _this.setState({
@@ -506,3 +525,3 @@ pressed: false
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
       var keyCode = e.which || e.keyCode;
@@ -531,3 +550,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyUp", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) {
       var keyCode = e.which || e.keyCode;
@@ -562,3 +581,3 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleFocus", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
       _this.setState({
@@ -569,3 +588,3 @@ focused: true
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleBlur", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
       _this.setState({
@@ -577,3 +596,3 @@ focused: false,
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "maybeNavigate", function () {
+    _defineProperty(_assertThisInitialized(_this), "maybeNavigate", function () {
       var _this$props = _this.props,
@@ -691,9 +710,7 @@ history = _this$props.history,
 
-        var _arr = Object.entries(_definition);
+        for (var _i = 0, _Object$entries = Object.entries(_definition); _i < _Object$entries.length; _i++) {
+          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+              key = _Object$entries$_i[0],
+              value = _Object$entries$_i[1];
 
-        for (var _i = 0; _i < _arr.length; _i++) {
-          var _arr$_i = _slicedToArray(_arr[_i], 2),
-              key = _arr$_i[0],
-              value = _arr$_i[1];
-
           // This regex converts all instances of -{lowercaseLetter}
@@ -802,3 +819,3 @@ // to the uppercase version of that letter, without the
 // TODO(kevinb): have an a version which uses exact object types
-function addStyle(Component$$1, defaultStyle) {
+function addStyle(Component, defaultStyle) {
   function StyleComponent(props) {
@@ -811,3 +828,3 @@ var style = props.style,
     var otherProps = tmpOtherProps;
-    var reset = typeof Component$$1 === "string" ? overrides[Component$$1] : null;
+    var reset = typeof Component === "string" ? overrides[Component] : null;
 
@@ -818,3 +835,3 @@ var _processStyleList = processStyleList([reset, defaultStyle, style]),
 
-    return createElement(Component$$1, _extends({}, otherProps, {
+    return createElement(Component, _extends({}, otherProps, {
       className: className,
@@ -1003,7 +1020,7 @@ style: inlineStyles
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_assertThisInitialized(_this), "state", {
       mounted: false
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_isTheRootComponent", false);
+    _defineProperty(_assertThisInitialized(_this), "_isTheRootComponent", false);
 
@@ -1266,3 +1283,3 @@ return _this;
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_idFactory", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_idFactory", void 0);
 
@@ -1428,2 +1445,4 @@ return _this;
 
+var _Symbol$iterator;
+
 /**
@@ -1455,3 +1474,3 @@ * Utility for finding the scroll ancestors of a child
 
-var _Symbol$iterator = Symbol.iterator;
+_Symbol$iterator = Symbol.iterator;
 
@@ -1589,3 +1608,3 @@ var ScrollAncestorsIterator =
 
-  var boundsRect = _objectSpread({}, boundsElement.getBoundingClientRect()); // In webapp we set height: 100% on html, body and overflow-y: scroll on body.
+  var boundsRect = _objectSpread2({}, boundsElement.getBoundingClientRect()); // 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
@@ -1668,2 +1687,2 @@ // of the viewport instead of the height of the page.  We use the scrollHeight
 
-export { ClickableBehavior, Text, View, WithSSRPlaceholder, IDProvider, UniqueIDProvider, addStyle, getClickableBehavior, getElementIntersection };
+export { ClickableBehavior, IDProvider, Text, UniqueIDProvider, View, WithSSRPlaceholder, addStyle, getClickableBehavior, getElementIntersection };

generated-snapshot.test.js

@@ -24,2 +24,3 @@ // This file is auto-generated by gen-snapshot-tests.js
 import {
+    Title,
     Body,
@@ -137,3 +138,49 @@ HeadingSmall,
     it("example 4", () => {
+        // you'll need to import the type definition here
+        // import type {StyleType} from "@khanacademy/wonder-blocks-core";
+        class CustomComponent extends React.Component {
+            render() {
+                return (
+                    <View
+                        style={[
+                            styles.default, // this `style` prop should be of type `StyleType`
+                            this.props.style,
+                        ]}
+                    >
+                        <Title>Lorem ipsum</Title>
+                    </View>
+                );
+            }
+        }
+
+        const styles = StyleSheet.create({
+            // default styles
+            default: {
+                background: Color.white,
+                color: Color.white,
+                padding: Spacing.medium,
+            },
+            // style to be passed as a prop
+            customStyle: {
+                background: Color.lightBlue,
+            },
+        });
         const example = (
+            <CustomComponent
+                style={[
+                    // you can pass style rules from an Aphrodite StyleSheet
+                    styles.customStyle, // and pass inline styles as well
+                    {
+                        border: `1px solid ${Color.darkBlue}`,
+                        padding: Spacing.xxLarge,
+                    },
+                ]}
+            />
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 5", () => {
+        const example = (
             <View>
@@ -154,3 +201,3 @@ <IDProvider scope="field">
 
-    it("example 5", () => {
+    it("example 6", () => {
         const example = (
@@ -172,3 +219,3 @@ <View>
 
-    it("example 6", () => {
+    it("example 7", () => {
         const styles = StyleSheet.create({
@@ -204,3 +251,3 @@ container: {
 
-    it("example 7", () => {
+    it("example 8", () => {
         const example = (
@@ -219,3 +266,3 @@ <View>
 
-    it("example 8", () => {
+    it("example 9", () => {
         const example = (
@@ -231,3 +278,3 @@ <View>
 
-    it("example 9", () => {
+    it("example 10", () => {
         let providerRef = null;
@@ -280,3 +327,3 @@ const renders = [];
 
-    it("example 10", () => {
+    it("example 11", () => {
         let firstId = null;
@@ -318,3 +365,3 @@ let secondId = null;
 
-    it("example 11", () => {
+    it("example 12", () => {
         const children = ({get}) => (
@@ -344,3 +391,3 @@ <View>
 
-    it("example 12", () => {
+    it("example 13", () => {
         // TODO(somewhatabstract): Update this to be nice once we can get BodyMonospace
@@ -369,3 +416,3 @@ // to allow us to properly preserve whitespace or have an alternative. Or remove
 
-    it("example 13", () => {
+    it("example 14", () => {
         const styles = StyleSheet.create({
@@ -401,3 +448,3 @@ container: {
 
-    it("example 14", () => {
+    it("example 15", () => {
         const example = (
@@ -416,3 +463,3 @@ <View>
 
-    it("example 15", () => {
+    it("example 16", () => {
         const example = (
@@ -439,3 +486,3 @@ <WithSSRPlaceholder
 
-    it("example 16", () => {
+    it("example 17", () => {
         const example = (
@@ -455,3 +502,3 @@ <WithSSRPlaceholder placeholder={null}>
 
-    it("example 17", () => {
+    it("example 18", () => {
         const trackingArray = [];
@@ -497,3 +544,3 @@ const resultsId = "nossr-example-2-results";
                 </Body>
-                <ul id={resultsId} />
+                <ul id={resultsId}></ul>
                 <Body>
@@ -535,3 +582,3 @@ And below this is the actual WithSSRPlaceholder nesting,
 
-    it("example 18", () => {
+    it("example 19", () => {
         const trackingArray = [];
@@ -575,3 +622,3 @@ const resultsId = "nossr-example-3-results";
                 </Body>
-                <ul id={resultsId} />
+                <ul id={resultsId}></ul>
                 <Body>
@@ -578,0 +625,0 @@ And below this are the WithSSRPlaceholder component trees,

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "design": "v1",
@@ -16,3 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-spacing": "^2.1.8"
+    "@khanacademy/wonder-blocks-spacing": "^2.1.9"
   },
@@ -27,6 +27,7 @@ "peerDependencies": {
   "devDependencies": {
-    "wb-dev-build-settings": "^0.0.2"
+    "wb-dev-build-settings": "^0.0.3"
   },
   "author": "",
-  "license": "MIT"
+  "license": "MIT",
+  "gitHead": "be0b1f6e2cd428289f5c3e54e6a2370de2019d27"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

330448

increased by1.24%

Number of package files

44

increased by2.33%

Lines of code

6708

increased by0.95%

Number of medium supply chain risk alerts

1

decreased by-50%

Dependency changes

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