@shopify/react-utilities - npm Package Compare versions

Comparing version 2.0.0-beta.9 to 2.0.0-beta.11

components.js

 "use strict";
+/* eslint-disable camelcase, no-process-env */
 var __assign = (this && this.__assign) || Object.assign || function(t) {
@@ -21,8 +22,10 @@ for (var s, i = 1, n = arguments.length; i < n; i++) {
 function getDisplayName(Component) {
-    return Component.displayName || Component.name || 'Component';
+    return (Component.displayName ||
+        Component.name ||
+        'Component');
 }
 exports.getDisplayName = getDisplayName;
-/// Wraps `element` in `Component`, if it is not already an instance of
-/// `Component`. If `props` is passed, those will be added as props on the
-/// wrapped component. If `element` is null, the component is not wrapped.
+// Wraps `element` in `Component`, if it is not already an instance of
+// `Component`. If `props` is passed, those will be added as props on the
+// wrapped component. If `element` is null, the component is not wrapped.
 function wrapWithComponent(element, Component, props) {
@@ -32,5 +35,3 @@ if (element == null) {
     }
-    return isElementOfType(element, Component)
-        ? element
-        : React.createElement(Component, __assign({}, props), element);
+    return isElementOfType(element, Component) ? (element) : (React.createElement(Component, __assign({}, props), element));
 }
@@ -41,14 +42,17 @@ exports.wrapWithComponent = wrapWithComponent;
     var anotherComponentName = AnotherComponent.name;
-    return (AComponent === AnotherComponent) || (Boolean(componentName) && componentName === anotherComponentName);
+    return (AComponent === AnotherComponent ||
+        (Boolean(componentName) && componentName === anotherComponentName));
 }
-/// In development, we compare based on the name of the function because
-/// React Hot Loader proxies React components in order to make updates. In
-/// production we can simply compare the components for equality.
+// In development, we compare based on the name of the function because
+// React Hot Loader proxies React components in order to make updates. In
+// production we can simply compare the components for equality.
 var isComponent = process.env.NODE_ENV === 'development'
     ? hotReloadComponentCheck
     : function (AComponent, AnotherComponent) { return AComponent === AnotherComponent; };
-/// Checks whether `element` is a React element of type `Component` (or one of
-/// the passed components, if `Component` is an array of React components).
+// Checks whether `element` is a React element of type `Component` (or one of
+// the passed components, if `Component` is an array of React components).
 function isElementOfType(element, Component) {
-    if (element == null || !isValidElement(element) || typeof element.type === 'string') {
+    if (element == null ||
+        !isValidElement(element) ||
+        typeof element.type === 'string') {
         return false;
@@ -61,14 +65,12 @@ }
 exports.isElementOfType = isElementOfType;
-/// Returns all children that are valid elements as an array. Can optionally be
-/// filtered by passing `predicate`.
+// Returns all children that are valid elements as an array. Can optionally be
+// filtered by passing `predicate`.
 function elementChildren(children, predicate) {
     if (predicate === void 0) { predicate = function () { return true; }; }
-    return Children
-        .toArray(children)
-        .filter(function (child) { return isValidElement(child) && predicate(child); });
+    return Children.toArray(children).filter(function (child) { return isValidElement(child) && predicate(child); });
 }
 exports.elementChildren = elementChildren;
-/// Adds the `methods` to the prototype of `Component`, with any existing
-/// methods of the same name still being called *after* they version supplied
-/// by `methods`. Returns the newly-augmented class.
+// Adds the `methods` to the prototype of `Component`, with any existing
+// methods of the same name still being called *after* they version supplied
+// by `methods`. Returns the newly-augmented class.
 function augmentComponent(Component, methods) {
@@ -86,7 +88,5 @@ Object.keys(methods).forEach(function (name) {
             }
-            // tslint:disable-next-line no-invalid-this
             if (typeof currentMethod === 'function') {
                 currentMethod.call.apply(currentMethod, [this].concat(args));
             }
-            // tslint:disable-next-line no-invalid-this
             method.call.apply(method, [this].concat(args));
@@ -113,3 +113,2 @@ };
                 node.id = uniqueID();
-                // tslint:disable-next-line no-invalid-this
                 this.layerNode = node;
@@ -121,5 +120,3 @@ },
                 }
-                // tslint:disable-next-line no-invalid-this
                 document.body.appendChild(this.layerNode);
-                // tslint:disable-next-line no-invalid-this
                 this.renderLayerToNode();
@@ -131,3 +128,2 @@ },
                 }
-                // tslint:disable-next-line no-invalid-this
                 this.renderLayerToNode();
@@ -139,7 +135,5 @@ },
                 }
-                /* tslint:disable no-invalid-this */
                 var layerOutput = this.renderLayer() || React.createElement("span", null);
                 this.layerOutput = layerOutput;
                 react_dom_1.unstable_renderSubtreeIntoContainer(this, layerOutput, this.layerNode);
-                /* tslint:enable no-invalid-this */
             },
@@ -150,9 +144,5 @@ componentWillUnmount: function () {
                 }
-                // tslint:disable-next-line no-invalid-this
                 var layerNode = this.layerNode;
-                var parent = layerNode.parent;
                 react_dom_1.unmountComponentAtNode(layerNode);
-                if (parent) {
-                    parent.removeChild(layerNode);
-                }
+                document.body.removeChild(layerNode);
             },
@@ -159,0 +149,0 @@ });

package.json

 {
   "name": "@shopify/react-utilities",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-beta.11",
   "description": "A set of utilities for React projects at Shopify.",
@@ -8,29 +8,83 @@ "main": "lib/index.js",
   "author": "Shopify Inc.",
+  "engines": {
+    "node": ">=8.9.0"
+  },
   "scripts": {
     "ts": "tsc --noEmit",
-    "lint": "tslint -c ./config/tslint/full.json './src/**/*.{ts,tsx}' --exclude './node_modules/**/*.{ts,tsx}' --project tsconfig.json --type-check",
+    "lint": "eslint ./**/*.{js,ts,tsx} --format codeframe",
     "clean": "rimraf '*.{js,d.ts}'",
-    "test": "yarn run check",
+    "test": "jest",
+    "test:watch": "yarn test --watch",
+    "test:ci": "yarn run test -- --runInBand",
     "prebuild": "yarn run clean",
     "build": "tsc",
+    "prettier": "prettier ./**/*.{scss,css,json,js,ts,tsx} --write",
     "check": "npm-run-all lint ts",
     "prepublish": "in-publish && yarn run build || :"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:shopify/node",
+      "plugin:shopify/typescript-react",
+      "plugin:shopify/typescript-prettier"
+    ],
+    "rules": {
+      "func-style": [
+        "error",
+        "declaration",
+        {
+          "allowArrowFunctions": true
+        }
+      ]
+    }
+  },
+  "jest": {
+    "setupFiles": [
+      "<rootDir>/tests/setup.ts"
+    ],
+    "testRegex": "[\\w+]\\.test\\.(tsx?|js)$",
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "transform": {
+      "\\.tsx|ts?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ]
+  },
   "dependencies": {
     "@shopify/javascript-utilities": "^2.1.0",
     "@types/classnames": "^2.2.3",
-    "@types/node": "^8.0.41",
-    "@types/react": "^16.0.10",
+    "@types/node": "^10.0.2",
+    "@types/react": "^16.3.13",
     "classnames": "^2.2.5",
-    "core-js": "^2.5.1"
+    "core-js": "^2.5.5"
   },
   "devDependencies": {
+    "@types/enzyme-adapter-react-16": "^1.0.2",
+    "@types/jest": "^22.2.3",
+    "@types/react-dom": "^16.0.5",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-shopify": "^21.0.1",
     "in-publish": "^2.0.0",
-    "npm-run-all": "^4.1.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "jest": "^22.4.3",
+    "jest-cli": "^23.0.0-alpha.0",
+    "npm-run-all": "^4.1.2",
+    "prettier": "^1.12.1",
+    "raf": "^3.4.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "rimraf": "^2.6.2",
-    "tslint": "5.7.0",
-    "tslint-config-shopify": "^3.0.1",
-    "typescript": "^2.5.3"
+    "ts-jest": "^22.4.4",
+    "typescript": "^2.8.3"
   },
@@ -37,0 +91,0 @@ "keywords": [

README.md

 # react-utilities
 
-[![CircleCI](https://circleci.com/gh/Shopify/react-utilities.svg?style=svg&circle-token=3a8fc955d07b5bd4cb53eeb4b01c57cde84e1154)](https://circleci.com/gh/Shopify/react-utilities)
+[![CircleCI](https://circleci.com/gh/Shopify/react-utilities.svg?style=shield&circle-token=3a8fc955d07b5bd4cb53eeb4b01c57cde84e1154)](https://circleci.com/gh/Shopify/react-utilities)
 
@@ -5,0 +5,0 @@ A set of utilities for React projects at Shopify.

src/styles.ts

@@ -1,2 +0,2 @@
-import * as classNames from 'classnames';
+import classNames from 'classnames';
 
@@ -6,4 +6,7 @@ export {classNames};
 export function variationName(name: string, value: string | number) {
-  const valuePortion = typeof value === 'number' ? String(value) : `${value[0].toUpperCase()}${value.substring(1)}`;
+  const valuePortion =
+    typeof value === 'number'
+      ? String(value)
+      : `${value[0].toUpperCase()}${value.substring(1)}`;
   return `${name}${valuePortion}`;
 }

src/target.ts

@@ -1,2 +0,3 @@
-export const isServer = (typeof window === 'undefined' || typeof document === 'undefined');
+export const isServer =
+  typeof window === 'undefined' || typeof document === 'undefined';
 export const isClient = !isServer;

styles.d.ts

@@ -1,3 +0,3 @@
-import * as classNames from 'classnames';
+import classNames from 'classnames';
 export { classNames };
 export declare function variationName(name: string, value: string | number): string;

styles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var classNames = require("classnames");
-exports.classNames = classNames;
+var classnames_1 = require("classnames");
+exports.classNames = classnames_1.default;
 function variationName(name, value) {
-    var valuePortion = typeof value === 'number' ? String(value) : "" + value[0].toUpperCase() + value.substring(1);
+    var valuePortion = typeof value === 'number'
+        ? String(value)
+        : "" + value[0].toUpperCase() + value.substring(1);
     return "" + name + valuePortion;
 }
 exports.variationName = variationName;

target.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isServer = (typeof window === 'undefined' || typeof document === 'undefined');
+exports.isServer = typeof window === 'undefined' || typeof document === 'undefined';
 exports.isClient = !exports.isServer;

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

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

Improved metrics

Total package byte prevSize

208272

increased by812.59%

Number of package files

23

increased by9.52%

Lines of code

450

increased by21.29%

Worsened metrics

Dev dependency count

20

increased by150%

Dependency changes

• + Added@types/node@10.17.60(transitive)

• - Removed@types/node@8.10.66(transitive)

• Updated@types/node@^10.0.2

• Updated@types/react@^16.3.13

• Updatedcore-js@^2.5.5