graphql-react - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

changelog.md

 # graphql-react changelog
 
+## 4.1.0
+
+### Minor
+
+- Support more browsers by changing the [Browserslist](https://github.com/browserslist/browserslist) query from [`> 1%`](https://browserl.ist/?q=%3E+1%25) to [`> 0.5%, not dead`](https://browserl.ist/?q=%3E+0.5%25%2C+not+dead).
+
+### Patch
+
+- Updated dependencies.
+- Fix Babel not reading from the package `browserslist` field due to [a sneaky `@babel/preset-env` breaking change](https://github.com/babel/babel/pull/8509).
+- Add back the bundle size test accidentally removed in v4.0.1.
+
 ## 4.0.1
@@ -7,3 +19,3 @@
 
-- Fixed preload for `production` `NODE_ENV`, fixing [#11](https://github.com/jaydenseric/graphql-react/issues/11) and [#12](https://github.com/jaydenseric/graphql-react/issues/12).
+- Fixed `preload` for `production` `NODE_ENV`, fixing [#11](https://github.com/jaydenseric/graphql-react/issues/11) and [#12](https://github.com/jaydenseric/graphql-react/issues/12).
 - `preload` now scopes context under providers.
@@ -10,0 +22,0 @@ - Removed redundant uses of `this` in the internal `GraphQLQuery` component constructor.

lib/components.js

@@ -10,2 +10,6 @@ 'use strict'
 
+var _inheritsLoose2 = _interopRequireDefault(
+  require('@babel/runtime/helpers/inheritsLoose')
+)
+
 var _react = _interopRequireDefault(require('react'))
@@ -19,16 +23,22 @@
 
-const GraphQLContext = _react.default.createContext()
+var GraphQLContext = _react.default.createContext()
 
 GraphQLContext.displayName = 'GraphQLContext'
-const { Provider, Consumer } = GraphQLContext
+var Provider = GraphQLContext.Provider,
+  Consumer = GraphQLContext.Consumer
 exports.Consumer = Consumer
 exports.Provider = Provider
 
-class GraphQLQuery extends _react.default.Component {
-  constructor(props) {
-    super(props)
+var GraphQLQuery = (function(_React$Component) {
+  ;(0, _inheritsLoose2.default)(GraphQLQuery, _React$Component)
 
-    this.onFetch = ({ fetchOptionsHash }) => {
-      if (fetchOptionsHash === this.state.fetchOptionsHash)
-        this.setState({
+  function GraphQLQuery(props) {
+    var _this
+
+    _this = _React$Component.call(this, props) || this
+
+    _this.onFetch = function(_ref) {
+      var fetchOptionsHash = _ref.fetchOptionsHash
+      if (fetchOptionsHash === _this.state.fetchOptionsHash)
+        _this.setState({
           loading: true
@@ -38,15 +48,17 @@ })
 
-    this.onCache = ({ fetchOptionsHash }) => {
-      if (fetchOptionsHash === this.state.fetchOptionsHash)
-        this.setState({
+    _this.onCache = function(_ref2) {
+      var fetchOptionsHash = _ref2.fetchOptionsHash
+      if (fetchOptionsHash === _this.state.fetchOptionsHash)
+        _this.setState({
           loading: false,
-          requestCache: this.props.graphql.cache[fetchOptionsHash]
+          requestCache: _this.props.graphql.cache[fetchOptionsHash]
         })
     }
 
-    this.onReset = ({ exceptFetchOptionsHash }) => {
-      if (exceptFetchOptionsHash !== this.state.fetchOptionsHash)
-        if (this.props.loadOnReset) this.load()
+    _this.onReset = function(_ref3) {
+      var exceptFetchOptionsHash = _ref3.exceptFetchOptionsHash
+      if (exceptFetchOptionsHash !== _this.state.fetchOptionsHash)
+        if (_this.props.loadOnReset) _this.load()
         else
-          this.setState({
+          _this.setState({
             requestCache: null
@@ -56,17 +68,22 @@ })
 
-    this.load = () => {
-      const { fetchOptionsHash, cache, request } = this.props.graphql.query({
-        operation: this.props.operation,
-        fetchOptionsOverride: this.props.fetchOptionsOverride,
-        resetOnLoad: this.props.resetOnLoad
-      })
-      this.setState({
+    _this.load = function() {
+      var _this$props$graphql$q = _this.props.graphql.query({
+          operation: _this.props.operation,
+          fetchOptionsOverride: _this.props.fetchOptionsOverride,
+          resetOnLoad: _this.props.resetOnLoad
+        }),
+        fetchOptionsHash = _this$props$graphql$q.fetchOptionsHash,
+        cache = _this$props$graphql$q.cache,
+        request = _this$props$graphql$q.request
+
+      _this.setState({
         loading: true,
-        fetchOptionsHash,
-        cache
+        fetchOptionsHash: fetchOptionsHash,
+        cache: cache
       })
+
       return request
     }
 
-    this.state = {
+    _this.state = {
       loading: props.loadOnMount
@@ -76,22 +93,25 @@ }
     if (props.loadOnMount) {
-      const fetchOptions = props.graphql.constructor.fetchOptions(
-        props.operation
-      )
+      var fetchOptions = props.graphql.constructor.fetchOptions(props.operation)
       if (props.fetchOptionsOverride) props.fetchOptionsOverride(fetchOptions)
-      this.state.fetchOptionsHash = props.graphql.constructor.hashFetchOptions(
+      _this.state.fetchOptionsHash = props.graphql.constructor.hashFetchOptions(
         fetchOptions
       )
-      this.state.requestCache = props.graphql.cache[this.state.fetchOptionsHash]
+      _this.state.requestCache =
+        props.graphql.cache[_this.state.fetchOptionsHash]
     }
 
-    props.graphql.on('fetch', this.onFetch)
-    props.graphql.on('cache', this.onCache)
-    props.graphql.on('reset', this.onReset)
+    props.graphql.on('fetch', _this.onFetch)
+    props.graphql.on('cache', _this.onCache)
+    props.graphql.on('reset', _this.onReset)
+    return _this
   }
 
-  componentDidMount() {
+  var _proto = GraphQLQuery.prototype
+
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.loadOnMount) this.load()
   }
 
-  componentDidUpdate({ operation }) {
+  _proto.componentDidUpdate = function componentDidUpdate(_ref4) {
+    var operation = _ref4.operation
     if (!(0, _fastDeepEqual.default)(operation, this.props.operation))
@@ -106,3 +126,3 @@ if (this.props.loadOnMount) this.load()
 
-  componentWillUnmount() {
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.props.graphql.off('fetch', this.onFetch)
@@ -113,3 +133,3 @@ this.props.graphql.off('cache', this.onCache)
 
-  render() {
+  _proto.render = function render() {
     return this.props.children(
@@ -125,4 +145,6 @@ (0, _objectAssign.default)(
   }
-}
 
+  return GraphQLQuery
+})(_react.default.Component)
+
 GraphQLQuery.propTypes = {
@@ -138,5 +160,5 @@ graphql: _propTypes.default.instanceOf(_graphql.GraphQL).isRequired,
 
-const Query = props =>
-  _react.default.createElement(Consumer, null, graphql =>
-    _react.default.createElement(
+var Query = function Query(props) {
+  return _react.default.createElement(Consumer, null, function(graphql) {
+    return _react.default.createElement(
       GraphQLQuery,
@@ -150,3 +172,4 @@ (0, _objectAssign.default)(
     )
-  )
+  })
+}
 
@@ -153,0 +176,0 @@ exports.Query = Query

lib/graphql.js

@@ -16,10 +16,10 @@ 'use strict'
 
-var _mitt = _interopRequireDefault(require('mitt'))
+var _mitt2 = _interopRequireDefault(require('mitt'))
 
-class GraphQL {
-  static requestBody(operation) {
-    const files = (0, _extractFiles.extractFiles)(operation)
+var GraphQL = (function() {
+  GraphQL.requestBody = function requestBody(operation) {
+    var files = (0, _extractFiles.extractFiles)(operation)
 
     if (files.length) {
-      const form = new FormData()
+      var form = new FormData()
       form.append('operations', JSON.stringify(operation))
@@ -29,4 +29,5 @@ form.append(
         JSON.stringify(
-          files.reduce((map, { path }, index) => {
-            map[`${index}`] = [path]
+          files.reduce(function(map, _ref, index) {
+            var path = _ref.path
+            map['' + index] = [path]
             return map
@@ -36,3 +37,6 @@ }, {})
       )
-      files.forEach(({ file }, index) => form.append(index, file, file.name))
+      files.forEach(function(_ref2, index) {
+        var file = _ref2.file
+        return form.append(index, file, file.name)
+      })
       return form
@@ -42,4 +46,4 @@ } else return JSON.stringify(operation)
 
-  static fetchOptions(operation) {
-    const fetchOptions = {
+  GraphQL.fetchOptions = function fetchOptions(operation) {
+    var fetchOptions = {
       url: '/graphql',
@@ -57,34 +61,44 @@ method: 'POST',
 
-  constructor({ cache = {} } = {}) {
-    this.reset = exceptFetchOptionsHash => {
-      let fetchOptionsHashes = Object.keys(this.cache)
+  function GraphQL(_temp) {
+    var _this = this
+
+    var _ref3 = _temp === void 0 ? {} : _temp,
+      _ref3$cache = _ref3.cache,
+      cache = _ref3$cache === void 0 ? {} : _ref3$cache
+
+    this.reset = function(exceptFetchOptionsHash) {
+      var fetchOptionsHashes = Object.keys(_this.cache)
       if (exceptFetchOptionsHash)
-        fetchOptionsHashes = fetchOptionsHashes.filter(
-          hash => hash !== exceptFetchOptionsHash
-        )
-      fetchOptionsHashes.forEach(
-        fetchOptionsHash => delete this.cache[fetchOptionsHash]
-      )
-      this.emit('reset', {
-        exceptFetchOptionsHash
+        fetchOptionsHashes = fetchOptionsHashes.filter(function(hash) {
+          return hash !== exceptFetchOptionsHash
+        })
+      fetchOptionsHashes.forEach(function(fetchOptionsHash) {
+        return delete _this.cache[fetchOptionsHash]
       })
+
+      _this.emit('reset', {
+        exceptFetchOptionsHash: exceptFetchOptionsHash
+      })
     }
 
-    this.request = (_ref, fetchOptionsHash) => {
-      let { url } = _ref,
-        options = (0, _objectWithoutPropertiesLoose2.default)(_ref, ['url'])
-      const requestCache = {}
-      const fetcher =
+    this.request = function(_ref4, fetchOptionsHash) {
+      var url = _ref4.url,
+        options = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ['url'])
+      var requestCache = {}
+      var fetcher =
         typeof fetch === 'function'
           ? fetch
-          : () =>
-              Promise.reject(
+          : function() {
+              return Promise.reject(
                 new Error('Global fetch API or polyfill unavailable.')
               )
-      this.emit('fetch', {
-        fetchOptionsHash
+            }
+
+      _this.emit('fetch', {
+        fetchOptionsHash: fetchOptionsHash
       })
-      return (this.requests[fetchOptionsHash] = fetcher(url, options))
+
+      return (_this.requests[fetchOptionsHash] = fetcher(url, options))
         .then(
-          response => {
+          function(response) {
             if (!response.ok)
@@ -96,3 +110,5 @@ requestCache.httpError = {
             return response.json().then(
-              ({ errors, data }) => {
+              function(_ref5) {
+                var errors = _ref5.errors,
+                  data = _ref5.data
                 if (!errors && !data)
@@ -103,3 +119,4 @@ requestCache.parseError = 'Malformed payload.'
               },
-              ({ message }) => {
+              function(_ref6) {
+                var message = _ref6.message
                 requestCache.parseError = message
@@ -109,12 +126,15 @@ }
           },
-          ({ message }) => {
+          function(_ref7) {
+            var message = _ref7.message
             requestCache.fetchError = message
           }
         )
-        .then(() => {
-          this.cache[fetchOptionsHash] = requestCache
-          delete this.requests[fetchOptionsHash]
-          this.emit('cache', {
-            fetchOptionsHash
+        .then(function() {
+          _this.cache[fetchOptionsHash] = requestCache
+          delete _this.requests[fetchOptionsHash]
+
+          _this.emit('cache', {
+            fetchOptionsHash: fetchOptionsHash
           })
+
           return requestCache
@@ -124,14 +144,25 @@ })
 
-    this.query = ({ operation, fetchOptionsOverride, resetOnLoad }) => {
-      const fetchOptions = this.constructor.fetchOptions(operation)
+    this.query = function(_ref8) {
+      var operation = _ref8.operation,
+        fetchOptionsOverride = _ref8.fetchOptionsOverride,
+        resetOnLoad = _ref8.resetOnLoad
+
+      var fetchOptions = _this.constructor.fetchOptions(operation)
+
       if (fetchOptionsOverride) fetchOptionsOverride(fetchOptions)
-      const fetchOptionsHash = this.constructor.hashFetchOptions(fetchOptions)
-      const request =
-        this.requests[fetchOptionsHash] ||
-        this.request(fetchOptions, fetchOptionsHash)
-      if (resetOnLoad) request.then(() => this.reset(fetchOptionsHash))
+
+      var fetchOptionsHash = _this.constructor.hashFetchOptions(fetchOptions)
+
+      var request =
+        _this.requests[fetchOptionsHash] ||
+        _this.request(fetchOptions, fetchOptionsHash)
+
+      if (resetOnLoad)
+        request.then(function() {
+          return _this.reset(fetchOptionsHash)
+        })
       return {
-        fetchOptionsHash,
-        cache: this.cache[fetchOptionsHash],
-        request
+        fetchOptionsHash: fetchOptionsHash,
+        cache: _this.cache[fetchOptionsHash],
+        request: request
       }
@@ -142,3 +173,8 @@ }
     this.requests = {}
-    const { on, off, emit } = (0, _mitt.default)()
+
+    var _mitt = (0, _mitt2.default)(),
+      on = _mitt.on,
+      off = _mitt.off,
+      emit = _mitt.emit
+
     this.on = on
@@ -148,7 +184,10 @@ this.off = off
   }
-}
 
+  return GraphQL
+})()
+
 exports.GraphQL = GraphQL
 
-GraphQL.hashFetchOptions = fetchOptions =>
-  (0, _fnv1a.default)(JSON.stringify(fetchOptions)).toString(36)
+GraphQL.hashFetchOptions = function(fetchOptions) {
+  return (0, _fnv1a.default)(JSON.stringify(fetchOptions)).toString(36)
+}

lib/preload.js

@@ -10,19 +10,33 @@ 'use strict'
 
-const hasSymbol = typeof Symbol === 'function' && Symbol.for
-const REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace
+var hasSymbol = typeof Symbol === 'function' && Symbol.for
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace
 
 function preload(element) {
-  const recursePreload = (
+  var recursePreload = function recursePreload(
     rootElement,
-    rootLegacyContext = {},
-    rootNewContext = new Map(),
-    loadRoot = true
-  ) => {
-    const loading = []
+    rootLegacyContext,
+    rootNewContext,
+    loadRoot
+  ) {
+    if (rootLegacyContext === void 0) {
+      rootLegacyContext = {}
+    }
 
-    const recurse = (element, legacyContext, newContext) => {
+    if (rootNewContext === void 0) {
+      rootNewContext = new Map()
+    }
+
+    if (loadRoot === void 0) {
+      loadRoot = true
+    }
+
+    var loading = []
+
+    var recurse = function recurse(element, legacyContext, newContext) {
       if (!element) return
 
       if (Array.isArray(element)) {
-        element.forEach(item => recurse(item, legacyContext, newContext))
+        element.forEach(function(item) {
+          return recurse(item, legacyContext, newContext)
+        })
         return
@@ -36,3 +50,3 @@ }
       ) {
-        const props = (0, _objectAssign.default)(
+        var props = (0, _objectAssign.default)(
           {},
@@ -44,4 +58,4 @@ element.type.defaultProps,
         if (element.type.$$typeof === REACT_CONTEXT_TYPE) {
-          let value = element.type._currentValue
-          const Provider = element.type._context
+          var value = element.type._currentValue
+          var Provider = element.type._context
             ? element.type._context.Provider
@@ -57,6 +71,6 @@ : element.type.Provider
         ) {
-          const instance = new element.type(props, legacyContext)
+          var instance = new element.type(props, legacyContext)
           instance.state = instance.state || null
 
-          instance.setState = newState => {
+          instance.setState = function(newState) {
             if (typeof newState === 'function')
@@ -84,7 +98,5 @@ newState = newState(instance.state, instance.props)
             loading.push(
-              instance
-                .load()
-                .then(() =>
-                  recursePreload(element, legacyContext, newContext, false)
-                )
+              instance.load().then(function() {
+                return recursePreload(element, legacyContext, newContext, false)
+              })
             )
@@ -91,0 +103,0 @@ else recurse(instance.render(), legacyContext, newContext)

package.json

 {
   "name": "graphql-react",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "A lightweight GraphQL client for React.",
@@ -35,3 +35,3 @@ "license": "MIT",
   },
-  "browserslist": ">1%",
+  "browserslist": "> 0.5%, not dead, node 8.5",
   "peerDependencies": {
@@ -42,3 +42,3 @@ "react": "^16.6.0"
     "@babel/runtime": "^7.1.2",
-    "extract-files": "^4.0.0",
+    "extract-files": "^4.1.0",
     "fast-deep-equal": "^2.0.1",
@@ -60,8 +60,8 @@ "fnv1a": "^1.0.1",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "cross-fetch": "^2.2.2",
-    "eslint": "^5.7.0",
-    "eslint-config-env": "^1.2.0",
+    "cross-fetch": "^2.2.3",
+    "eslint": "^5.8.0",
+    "eslint-config-env": "^1.2.1",
     "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-node": "^8.0.0",
     "eslint-plugin-prettier": "^3.0.0",
@@ -75,7 +75,7 @@ "eslint-plugin-react": "^7.11.1",
     "koa-bodyparser": "^4.2.1",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.0.4",
     "prettier": "^1.14.3",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "size-limit": "^0.20.1",
+    "size-limit": "^0.21.0",
     "tap": "^12.0.1",
@@ -91,3 +91,3 @@ "watch": "^1.0.2"
     "prepare:prettier": "prettier 'lib/**/*.{mjs,js}' readme.md --write",
-    "test": "npm run test:eslint && npm run test:prettier && npm run test:lib && NODE_ENV=production npm run test:lib",
+    "test": "npm run test:eslint && npm run test:prettier && npm run test:size && npm run test:lib && NODE_ENV=production npm run test:lib",
     "test:eslint": "eslint . --ext mjs,js",
@@ -94,0 +94,0 @@ "test:prettier": "prettier '**/*.{json,yml,md}' -l",

readme.md

@@ -110,4 +110,4 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)
 
-- Node.js v8.5+.
-- Browsers [>1% usage](http://browserl.ist/?q=%3E1%25).
+- Node.js v8.5+
+- Browsers [`> 0.5%, not dead`](https://browserl.ist/?q=%3E+0.5%25%2C+not+dead)
 
@@ -114,0 +114,0 @@ Consider polyfilling:

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

63905

increased by7.65%

Lines of code

779

increased by14.22%

Dependency changes

• Updatedextract-files@^4.1.0