graphql-css - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

es/index.js

@@ -11,2 +11,3 @@ var _extends = Object.assign || 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; };
 import { Broadcast, Subscriber } from "react-broadcast";
+import PropTypes from "prop-types";
 
@@ -17,4 +18,2 @@ var smoosh = function smoosh(object) {
 
-        var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-
         return (_ref = []).concat.apply(_ref, Object.keys(objectBit).map(function (key) {
@@ -28,7 +27,3 @@ var _ref2;
 
-var resolver = function resolver(fieldName) {
-    var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var context = arguments[3];
-    var _ref3 = arguments[4];
+var resolver = function resolver(fieldName, root, args, context, _ref3) {
     var resultKey = _ref3.resultKey;
@@ -104,5 +99,11 @@
 };
+export { GqlCSS };
+GqlCSS.propTypes = {
+    styles: PropTypes.object,
+    query: PropTypes.object,
+    variables: PropTypes.object,
+    component: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
 
 // Export provider to broadcast styles to child GqlCSS components
-export { GqlCSS };
 export var GqlCSSProvider = function GqlCSSProvider(_ref6) {
@@ -121,2 +122,6 @@ var styles = _ref6.styles,
 };
+GqlCSSProvider.propTypes = {
+    styles: PropTypes.object,
+    children: PropTypes.node
+};
 
@@ -123,0 +128,0 @@ // Export HOC - uses render props underneath, because it's awesome

lib/index.js

@@ -26,2 +26,6 @@ "use strict";
 
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,4 +39,2 @@
 
-        var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-
         return (_ref = []).concat.apply(_ref, Object.keys(objectBit).map(function (key) {
@@ -46,7 +48,3 @@ var _ref2;
 
-var resolver = function resolver(fieldName) {
-    var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var context = arguments[3];
-    var _ref3 = arguments[4];
+var resolver = function resolver(fieldName, root, args, context, _ref3) {
     var resultKey = _ref3.resultKey;
@@ -122,5 +120,11 @@
 };
+exports.GqlCSS = GqlCSS;
+GqlCSS.propTypes = {
+    styles: _propTypes2.default.object,
+    query: _propTypes2.default.object,
+    variables: _propTypes2.default.object,
+    component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node])
+};
 
 // Export provider to broadcast styles to child GqlCSS components
-exports.GqlCSS = GqlCSS;
 var GqlCSSProvider = exports.GqlCSSProvider = function GqlCSSProvider(_ref6) {
@@ -139,2 +143,6 @@ var styles = _ref6.styles,
 };
+GqlCSSProvider.propTypes = {
+    styles: _propTypes2.default.object,
+    children: _propTypes2.default.node
+};
 
@@ -141,0 +149,0 @@ // Export HOC - uses render props underneath, because it's awesome

package.json

 {
     "name": "graphql-css",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "A blazing fast and battle-tested CSS-in-GQL™ library.",
@@ -9,12 +9,16 @@ "main": "./lib/index.js",
         "build": "yarn run build:commonjs && yarn run build:es && npm run build:umd && npm run build:umd:min",
-        "build:es": "babel src -d es",
-        "build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib",
+        "build:es": "babel src -d es --ignore '**/*.test.js'",
+        "build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib --ignore '**/*.test.js'",
         "build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js --output dist/graphql-css.js --mode development",
         "build:umd:min": "cross-env BABEL_ENV=commonjs NODE_ENV=production webpack src/index.js --output dist/graphql-css.min.js --mode production",
-        "clean": "rimraf lib dist es",
+        "clean": "rimraf lib dist es coverage",
         "dev": "yarn run clean && cross-env BABEL_ENV=commonjs babel src -d lib --watch",
         "dev:server": "cross-env NODE_ENV=dev-server webpack-dev-server examples --config webpack.config.js --content-base examples --inline --hot --mode development",
+        "format": "prettier --write \"**/*.{js,md,ts,json}\" *.{js,md,ts,json}",
         "lint": "eslint src/ --ext .js,.jsx",
-        "prepublishOnly": "yarn run clean && yarn run build",
-        "test": "echo \"No tests available\" && exit 0"
+        "precommit": "lint-staged",
+        "prepublishOnly": "yarn run clean && yarn run test && yarn run build",
+        "test": "jest --no-cache",
+        "test:watch": "jest --watchAll --coverage",
+        "ci": "scripts/ci.sh"
     },
@@ -55,2 +59,3 @@ "repository": {
         "babel-core": "^6.26.0",
+        "babel-eslint": "^8.2.2",
         "babel-loader": "^7.1.4",
@@ -61,8 +66,22 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
         "babel-preset-react": "^6.24.1",
+        "codecov": "^3.0.0",
         "cross-env": "^5.1.4",
+        "eslint": "^4.19.1",
+        "eslint-config-edited": "^1.0.0",
+        "eslint-config-prettier": "^2.9.0",
+        "eslint-plugin-import": "^2.9.0",
+        "eslint-plugin-prettier": "^2.6.0",
+        "eslint-plugin-react": "^7.7.0",
         "glamor": "^2.20.40",
         "graphql": "^0.13.1",
         "graphql-tag": "^2.8.0",
+        "husky": "^0.14.3",
+        "jest": "^22.4.2",
+        "jest-glamor-react": "^4.2.0",
+        "lint-staged": "^7.0.0",
+        "prettier": "^1.11.1",
+        "prop-types": "^15.6.1",
         "react": "^16.2.0",
         "react-dom": "^16.2.0",
+        "react-testing-library": "^1.3.0",
         "rimraf": "^2.6.2",
@@ -77,3 +96,9 @@ "webpack": "^4.1.1",
         "graphql-tag": "^2.8.0"
+    },
+    "lint-staged": {
+        "*.{js,md,ts,json}": [
+            "prettier --write",
+            "git add"
+        ]
     }
 }

README.md

@@ -7,2 +7,4 @@ # <a href="https://github.com/braposo/graphql-css"><img src="https://user-images.githubusercontent.com/38172/37561184-50288d50-2a40-11e8-9f19-e23c4ca61c32.png" width="376" /></a>
 
+[![Build Status][build-badge]][travis]
+[![Code Coverage][coverage-badge]][coverage]
 [![npm version][version-badge]][npm]
@@ -12,2 +14,5 @@ [![npm downloads][downloads-badge]][npm]
 [![MIT License][license-badge]][license]
+
+![Module format][modules-badge]
+![Prettier format][prettier-badge]
 [![PRs Welcome][prs-badge]][prs]
@@ -18,3 +23,2 @@ ![Blazing Fast][fast-badge]
 
-
 ## Installation
@@ -81,7 +85,7 @@
 
-| Arg    | Type                | Default | Definition                                                          |
-| ------ | ------------------- | ------- | ------------------------------------------------------------------- |
-| styles | object              |         | The styleguide object with all the rules                            |
-| query  | gql                 |         | The gql query to get the styles                                     |
-| component    | string \|\| node \|\| boolean | "div"   | HTML element or React component to be displayed. If set to false only styles are returned. |
+| Arg       | Type                          | Default | Definition                                                                                 |
+| --------- | ----------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| styles    | object                        |         | The styleguide object with all the rules                                                   |
+| query     | gql                           |         | The gql query to get the styles                                                            |
+| component | string \|\| node \|\| boolean | "div"   | HTML element or React component to be displayed. If set to false only styles are returned. |
 
@@ -127,7 +131,7 @@ Here's how you can use it:
 
-| Prop   | Type   | Default | Definition                               |
-| ------ | ------ | ------- | ---------------------------------------- |
-| styles | object |         | The styleguide object with all the rules |
-| query  | gql    |         | The gql query to get the styles          |
-| component    | string \|\| node | "div"   | HTML element or React component  to be displayed                 |
+| Prop      | Type             | Default | Definition                                      |
+| --------- | ---------------- | ------- | ----------------------------------------------- |
+| styles    | object           |         | The styleguide object with all the rules        |
+| query     | gql              |         | The gql query to get the styles                 |
+| component | string \|\| node | "div"   | HTML element or React component to be displayed |
 
@@ -205,3 +209,3 @@ All the remaining props are passed to the generated component so you can still use `glamorous` API. Here are some examples:
 ```js
-const base = 4
+const base = 4;
 const styles = {
@@ -216,3 +220,3 @@ typography: {
             xxl: base * 20,
-            unit: "px"
+            unit: "px",
         },
@@ -304,3 +308,3 @@ weight: {
     }
-`
+`;
 
@@ -386,3 +390,2 @@ const otherH1Styles = gql`
 [size]: https://unpkg.com/graphql-css/dist/graphql-css.min.js
-
 [version-badge]: https://img.shields.io/npm/v/graphql-css.svg?style=flat-square
@@ -396,1 +399,7 @@ [downloads-badge]: https://img.shields.io/npm/dm/graphql-css.svg?style=flat-square
 [size-badge]: http://img.badgesize.io/https://unpkg.com/graphql-css/dist/graphql-css.min.js?compression=gzip&style=flat-square
+[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
+[build-badge]: https://img.shields.io/travis/braposo/graphql-css.svg?style=flat-square
+[travis]: https://travis-ci.org/braposo/graphql-css
+[coverage-badge]: https://img.shields.io/codecov/c/github/braposo/graphql-css.svg?style=flat-square
+[coverage]: https://codecov.io/github/braposo/graphql-css
+[modules-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square

src/index.js

@@ -5,7 +5,8 @@ import React from "react";
 import { Broadcast, Subscriber } from "react-broadcast";
+import PropTypes from "prop-types";
 
-const smoosh = object => {
-    return Object.assign(
+const smoosh = object =>
+    Object.assign(
         {},
-        ...(function _flatten(objectBit, path = "") {
+        ...(function _flatten(objectBit) {
             return [].concat(
@@ -21,5 +22,4 @@ ...Object.keys(objectBit).map(
     );
-};
 
-const resolver = (fieldName, root = {}, args = {}, context, { resultKey }) => {
+const resolver = (fieldName, root, args, context, { resultKey }) => {
     // if it's an aliased query add alias as prop
@@ -73,11 +73,15 @@ if (fieldName !== resultKey) {
 // Also export component for more declarative API
-export const GqlCSS = ({ styles, query, component = "div", variables, ...rest }) => {
-    return (
-        <Subscriber quiet={true} channel="graphqlcss">
-            {contextStyles => {
-                const Component = gqlCSS(styles || contextStyles || "")(query, component, variables);
-                return <Component {...rest} />;
-            }}
-        </Subscriber>
-    );
+export const GqlCSS = ({ styles, query, component = "div", variables, ...rest }) => (
+    <Subscriber quiet={true} channel="graphqlcss">
+        {contextStyles => {
+            const Component = gqlCSS(styles || contextStyles || "")(query, component, variables);
+            return <Component {...rest} />;
+        }}
+    </Subscriber>
+);
+GqlCSS.propTypes = {
+    styles: PropTypes.object,
+    query: PropTypes.object,
+    variables: PropTypes.object,
+    component: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
@@ -91,11 +95,13 @@
 );
+GqlCSSProvider.propTypes = {
+    styles: PropTypes.object,
+    children: PropTypes.node,
+};
 
 // Export HOC - uses render props underneath, because it's awesome
-export const withGqlCSS = (styles, query, variables) => Component => props => {
-    return (
-        <WithGqlCSS styles={styles} query={query} variables={variables}>
-            {({ gqlStyles }) => <Component {...props} gqlStyles={gqlStyles} />}
-        </WithGqlCSS>
-    );
-};
+export const withGqlCSS = (styles, query, variables) => Component => props => (
+    <WithGqlCSS styles={styles} query={query} variables={variables}>
+        {({ gqlStyles }) => <Component {...props} gqlStyles={gqlStyles} />}
+    </WithGqlCSS>
+);
 
@@ -102,0 +108,0 @@ // Export render props component

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

475687

2.04%

Number of package files

10

25%

Lines of code

2152

7.17%

Number of low quality alerts

1

-50%

Number of lines in readme file

396

2.33%

Worsened metrics

Dev dependency count

32

88.24%

No dependency changes