theming - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

CHANGELOG.md

@@ -6,2 +6,7 @@ # Changelog
 
+### v3.3.0 (2020-08-14)
+
+- Upgrade to flow 0.131.0
+- Apply prettier config to the sources (was defined before but not used)
+
 ### v3.2.1 (2020-07-13)
@@ -8,0 +13,0 @@

dist/theming.cjs.js

@@ -173,4 +173,2 @@ 'use strict';
 
-var ThemeContext = React.createContext();
-
 function createTheming(context) {
@@ -185,2 +183,4 @@ return {
 
+var ThemeContext = React.createContext();
+
 var _createTheming = createTheming(ThemeContext),
@@ -187,0 +187,0 @@ withTheme = _createTheming.withTheme,

dist/theming.esm.js

@@ -166,4 +166,2 @@ import React, { createContext } from 'react';
 
-var ThemeContext = createContext();
-
 function createTheming(context) {
@@ -178,2 +176,4 @@ return {
 
+var ThemeContext = createContext();
+
 var _createTheming = createTheming(ThemeContext),
@@ -180,0 +180,0 @@ withTheme = _createTheming.withTheme,

dist/theming.js

@@ -1356,4 +1356,2 @@ (function (global, factory) {
 
-  var ThemeContext = React.createContext();
-
   function createTheming(context) {
@@ -1368,2 +1366,4 @@ return {
 
+  var ThemeContext = React.createContext();
+
   var _createTheming = createTheming(ThemeContext),
@@ -1370,0 +1370,0 @@ withTheme = _createTheming.withTheme,

dist/theming.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.theming={},e.react)}(this,function(e,t){"use strict";var s="default"in t?t.default:t;function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}})()&&Object.assign;function p(){}o(function(e){e.exports=function(){function e(e,t,r,o,n,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=p,r.PropTypes=r}()});function l(i){return function(n){var e,t;function r(){for(var r,e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return a(u(u(r=n.call.apply(n,[this].concat(t))||this)),"cachedTheme",void 0),a(u(u(r)),"lastOuterTheme",void 0),a(u(u(r)),"lastTheme",void 0),a(u(u(r)),"renderProvider",function(e){var t=r.props.children;return s.createElement(i.Provider,{value:r.getTheme(e)},t)}),r}t=n,(e=r).prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t;var o=r.prototype;return o.getTheme=function(e){if(this.props.theme!==this.lastTheme||e!==this.lastOuterTheme||!this.cachedTheme)if(this.lastOuterTheme=e,this.lastTheme=this.props.theme,"function"==typeof this.lastTheme){var t=this.props.theme;this.cachedTheme=t(e)}else{var r=this.props.theme;this.cachedTheme=e?c({},e,r):r}return this.cachedTheme},o.render=function(){return this.props.children?s.createElement(i.Consumer,null,this.renderProvider):null},r}(s.Component)}var y=o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,s=r?Symbol.for("react.strict_mode"):60108,a=r?Symbol.for("react.profiler"):60114,c=r?Symbol.for("react.provider"):60109,u=r?Symbol.for("react.context"):60110,f=r?Symbol.for("react.async_mode"):60111,p=r?Symbol.for("react.concurrent_mode"):60111,l=r?Symbol.for("react.forward_ref"):60112,y=r?Symbol.for("react.suspense"):60113,m=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function h(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case f:case p:case i:case a:case s:case y:return e;default:switch(e=e&&e.$$typeof){case u:case l:case c:return e;default:return t}}case d:case m:case n:return t}}}function b(e){return h(e)===p}t.typeOf=h,t.AsyncMode=f,t.ConcurrentMode=p,t.ContextConsumer=u,t.ContextProvider=c,t.Element=o,t.ForwardRef=l,t.Fragment=i,t.Lazy=d,t.Memo=m,t.Portal=n,t.Profiler=a,t.StrictMode=s,t.Suspense=y,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===a||e===s||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===m||e.$$typeof===c||e.$$typeof===u||e.$$typeof===l)},t.isAsyncMode=function(e){return b(e)||h(e)===f},t.isConcurrentMode=b,t.isContextConsumer=function(e){return h(e)===u},t.isContextProvider=function(e){return h(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return h(e)===l},t.isFragment=function(e){return h(e)===i},t.isLazy=function(e){return h(e)===d},t.isMemo=function(e){return h(e)===m},t.isPortal=function(e){return h(e)===n},t.isProfiler=function(e){return h(e)===a},t.isStrictMode=function(e){return h(e)===s},t.isSuspense=function(e){return h(e)===y}});r(y);y.typeOf,y.AsyncMode,y.ConcurrentMode,y.ContextConsumer,y.ContextProvider,y.Element,y.ForwardRef,y.Fragment,y.Lazy,y.Memo,y.Portal,y.Profiler,y.StrictMode,y.Suspense,y.isValidElementType,y.isAsyncMode,y.isConcurrentMode,y.isContextConsumer,y.isContextProvider,y.isElement,y.isForwardRef,y.isFragment,y.isLazy,y.isMemo,y.isPortal,y.isProfiler,y.isStrictMode,y.isSuspense;var m=o(function(e,t){});r(m);m.typeOf,m.AsyncMode,m.ConcurrentMode,m.ContextConsumer,m.ContextProvider,m.Element,m.ForwardRef,m.Fragment,m.Lazy,m.Memo,m.Portal,m.Profiler,m.StrictMode,m.Suspense,m.isValidElementType,m.isAsyncMode,m.isConcurrentMode,m.isContextConsumer,m.isContextProvider,m.isElement,m.isForwardRef,m.isFragment,m.isLazy,m.isMemo,m.isPortal,m.isProfiler,m.isStrictMode,m.isSuspense;var d=o(function(e){e.exports=y}),h={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},b={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},v={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},P={};function O(e){return d.isMemo(e)?v:P[e.$$typeof]||h}P[d.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0};var T=Object.defineProperty,g=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,C=Object.getOwnPropertyDescriptor,j=Object.getPrototypeOf,w=Object.prototype;var x=function e(t,r,o){if("string"==typeof r)return t;if(w){var n=j(r);n&&n!==w&&e(t,n,o)}var i=g(r);S&&(i=i.concat(S(r)));for(var s=O(t),a=O(r),c=0;c<i.length;++c){var u=i[c];if(!(b[u]||o&&o[u]||a&&a[u]||s&&s[u])){var f=C(r,u);try{T(t,u,f)}catch(e){}}}return t};r(o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&0<e.length?e:"Unknown")}}));var M=t.createContext();function _(e){return{context:e,withTheme:(n=e,function(o){var e=s.forwardRef(function(t,r){return s.createElement(n.Consumer,null,function(e){return s.createElement(o,c({theme:e,ref:r},t))})});return x(e,o),e}),useTheme:(t=e,function(){return s.useContext(t)}),ThemeProvider:l(e)};var t,n}var E=_(M),$=E.withTheme,F=E.ThemeProvider,R=E.useTheme;e.useTheme=R,e.ThemeContext=M,e.withTheme=$,e.createTheming=_,e.ThemeProvider=F,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.theming={},e.react)}(this,function(e,t){"use strict";var s="default"in t?t.default:t;function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}})()&&Object.assign;function p(){}o(function(e){e.exports=function(){function e(e,t,r,o,n,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=p,r.PropTypes=r}()});function l(i){return function(n){var e,t;function r(){for(var r,e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return a(u(u(r=n.call.apply(n,[this].concat(t))||this)),"cachedTheme",void 0),a(u(u(r)),"lastOuterTheme",void 0),a(u(u(r)),"lastTheme",void 0),a(u(u(r)),"renderProvider",function(e){var t=r.props.children;return s.createElement(i.Provider,{value:r.getTheme(e)},t)}),r}t=n,(e=r).prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t;var o=r.prototype;return o.getTheme=function(e){if(this.props.theme!==this.lastTheme||e!==this.lastOuterTheme||!this.cachedTheme)if(this.lastOuterTheme=e,this.lastTheme=this.props.theme,"function"==typeof this.lastTheme){var t=this.props.theme;this.cachedTheme=t(e)}else{var r=this.props.theme;this.cachedTheme=e?c({},e,r):r}return this.cachedTheme},o.render=function(){return this.props.children?s.createElement(i.Consumer,null,this.renderProvider):null},r}(s.Component)}var y=o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,s=r?Symbol.for("react.strict_mode"):60108,a=r?Symbol.for("react.profiler"):60114,c=r?Symbol.for("react.provider"):60109,u=r?Symbol.for("react.context"):60110,f=r?Symbol.for("react.async_mode"):60111,p=r?Symbol.for("react.concurrent_mode"):60111,l=r?Symbol.for("react.forward_ref"):60112,y=r?Symbol.for("react.suspense"):60113,m=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function h(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case f:case p:case i:case a:case s:case y:return e;default:switch(e=e&&e.$$typeof){case u:case l:case c:return e;default:return t}}case d:case m:case n:return t}}}function b(e){return h(e)===p}t.typeOf=h,t.AsyncMode=f,t.ConcurrentMode=p,t.ContextConsumer=u,t.ContextProvider=c,t.Element=o,t.ForwardRef=l,t.Fragment=i,t.Lazy=d,t.Memo=m,t.Portal=n,t.Profiler=a,t.StrictMode=s,t.Suspense=y,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===a||e===s||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===m||e.$$typeof===c||e.$$typeof===u||e.$$typeof===l)},t.isAsyncMode=function(e){return b(e)||h(e)===f},t.isConcurrentMode=b,t.isContextConsumer=function(e){return h(e)===u},t.isContextProvider=function(e){return h(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return h(e)===l},t.isFragment=function(e){return h(e)===i},t.isLazy=function(e){return h(e)===d},t.isMemo=function(e){return h(e)===m},t.isPortal=function(e){return h(e)===n},t.isProfiler=function(e){return h(e)===a},t.isStrictMode=function(e){return h(e)===s},t.isSuspense=function(e){return h(e)===y}});r(y);y.typeOf,y.AsyncMode,y.ConcurrentMode,y.ContextConsumer,y.ContextProvider,y.Element,y.ForwardRef,y.Fragment,y.Lazy,y.Memo,y.Portal,y.Profiler,y.StrictMode,y.Suspense,y.isValidElementType,y.isAsyncMode,y.isConcurrentMode,y.isContextConsumer,y.isContextProvider,y.isElement,y.isForwardRef,y.isFragment,y.isLazy,y.isMemo,y.isPortal,y.isProfiler,y.isStrictMode,y.isSuspense;var m=o(function(e,t){});r(m);m.typeOf,m.AsyncMode,m.ConcurrentMode,m.ContextConsumer,m.ContextProvider,m.Element,m.ForwardRef,m.Fragment,m.Lazy,m.Memo,m.Portal,m.Profiler,m.StrictMode,m.Suspense,m.isValidElementType,m.isAsyncMode,m.isConcurrentMode,m.isContextConsumer,m.isContextProvider,m.isElement,m.isForwardRef,m.isFragment,m.isLazy,m.isMemo,m.isPortal,m.isProfiler,m.isStrictMode,m.isSuspense;var d=o(function(e){e.exports=y}),h={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},b={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},v={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},P={};function O(e){return d.isMemo(e)?v:P[e.$$typeof]||h}P[d.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0};var T=Object.defineProperty,g=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,C=Object.getOwnPropertyDescriptor,j=Object.getPrototypeOf,w=Object.prototype;var x=function e(t,r,o){if("string"==typeof r)return t;if(w){var n=j(r);n&&n!==w&&e(t,n,o)}var i=g(r);S&&(i=i.concat(S(r)));for(var s=O(t),a=O(r),c=0;c<i.length;++c){var u=i[c];if(!(b[u]||o&&o[u]||a&&a[u]||s&&s[u])){var f=C(r,u);try{T(t,u,f)}catch(e){}}}return t};function M(e){return{context:e,withTheme:(n=e,function(o){var e=s.forwardRef(function(t,r){return s.createElement(n.Consumer,null,function(e){return s.createElement(o,c({theme:e,ref:r},t))})});return x(e,o),e}),useTheme:(t=e,function(){return s.useContext(t)}),ThemeProvider:l(e)};var t,n}r(o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&0<e.length?e:"Unknown")}}));var _=t.createContext(),E=M(_),$=E.withTheme,F=E.ThemeProvider,R=E.useTheme;e.useTheme=R,e.ThemeContext=_,e.withTheme=$,e.createTheming=M,e.ThemeProvider=F,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "theming",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Unified CSSinJS theming solution for React",
@@ -76,3 +76,3 @@ "main": "dist/theming.cjs.js",
     "eslint-config-prettier": "^4.2.0",
-    "flow-bin": "^0.98.0",
+    "flow-bin": "^0.131.0",
     "nyc": "^13.1.0",
@@ -79,0 +79,0 @@ "react": "^16.8.0",

src/create-theme-provider.js

 // @flow
 
-import React, { type Node, type Context } from 'react';
-import warning from 'tiny-warning';
-import PropTypes from 'prop-types';
-import isObject from './is-object';
+import React, {type Node, type Context} from 'react'
+import warning from 'tiny-warning'
+import PropTypes from 'prop-types'
+import isObject from './is-object'
 
-type ThemeFunction<Theme> = (outerTheme: Theme) => $NonMaybeType<Theme>;
+type ThemeFunction<Theme> = (outerTheme: Theme) => $NonMaybeType<Theme>
 
-type ThemeOrThemeFunction<Theme> = $NonMaybeType<Theme> | ThemeFunction<Theme>;
+type ThemeOrThemeFunction<Theme> = $NonMaybeType<Theme> | ThemeFunction<Theme>
 
@@ -15,3 +15,3 @@ export type ThemeProviderProps<Theme> = {
   theme: ThemeOrThemeFunction<Theme>
-};
+}
 
@@ -27,8 +27,8 @@ export default function createThemeProvider<Theme>(context: Context<Theme>) {
       ) {
-        this.lastOuterTheme = outerTheme;
-        this.lastTheme = this.props.theme;
+        this.lastOuterTheme = outerTheme
+        this.lastTheme = this.props.theme
 
         if (typeof this.lastTheme === 'function') {
-          const theme: ThemeFunction<Theme> = (this.props.theme: any);
-          this.cachedTheme = theme(outerTheme);
+          const theme: ThemeFunction<Theme> = (this.props.theme: any)
+          this.cachedTheme = theme(outerTheme)
 
@@ -38,41 +38,34 @@ warning(
             '[ThemeProvider] Please return an object from your theme function'
-          );
+          )
         } else {
-          const theme: Theme = (this.props.theme: any);
-          warning(
-            isObject(theme),
-            '[ThemeProvider] Please make your theme prop a plain object'
-          );
+          const theme: Theme = (this.props.theme: any)
+          warning(isObject(theme), '[ThemeProvider] Please make your theme prop a plain object')
 
-          this.cachedTheme = outerTheme ? { ...outerTheme, ...theme } : theme;
+          this.cachedTheme = outerTheme ? {...outerTheme, ...theme} : theme
         }
       }
 
-      return this.cachedTheme;
+      return this.cachedTheme
     }
 
-    cachedTheme: Theme;
+    cachedTheme: Theme
 
-    lastOuterTheme: Theme;
+    lastOuterTheme: Theme
 
-    lastTheme: ThemeOrThemeFunction<Theme>;
+    lastTheme: ThemeOrThemeFunction<Theme>
 
     renderProvider = (outerTheme: Theme) => {
-      const { children } = this.props;
+      const {children} = this.props
 
-      return (
-        <context.Provider value={this.getTheme(outerTheme)}>
-          {children}
-        </context.Provider>
-      );
-    };
+      return <context.Provider value={this.getTheme(outerTheme)}>{children}</context.Provider>
+    }
 
     render() {
-      const { children } = this.props;
+      const {children} = this.props
 
       if (!children) {
-        return null;
+        return null
       }
 
-      return <context.Consumer>{this.renderProvider}</context.Consumer>;
+      return <context.Consumer>{this.renderProvider}</context.Consumer>
     }
@@ -85,8 +78,7 @@ }
       children: PropTypes.node,
-      theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func])
-        .isRequired
-    };
+      theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired
+    }
   }
 
-  return ThemeProvider;
+  return ThemeProvider
 }

src/create-theme-provider.test.js

 // @flow
 
-import test from 'ava';
-import React from 'react';
-import sinon from 'sinon';
-import TestRenderer from 'react-test-renderer';
+import test from 'ava'
+import React from 'react'
+import sinon from 'sinon'
+import TestRenderer from 'react-test-renderer'
 
-import createThemeProvider from './create-theme-provider';
+import createThemeProvider from './create-theme-provider'
 
-const Comp = () => null;
+const Comp = () => null
 
-test("createThemeProvider's type", t => {
-  t.true(
-    typeof createThemeProvider === 'function',
-    'createThemeProvider should be a function'
-  );
-});
+test("createThemeProvider's type", (t) => {
+  t.true(typeof createThemeProvider === 'function', 'createThemeProvider should be a function')
+})
 
-test('should call the theme fn with the default theme', t => {
-  const defaultTheme = {};
-  const themeFn = sinon.spy(outerTheme => outerTheme);
-  const context = React.createContext(defaultTheme);
-  const ThemeProvider = createThemeProvider(context);
+test('should call the theme fn with the default theme', (t) => {
+  const defaultTheme = {}
+  const themeFn = sinon.spy((outerTheme) => outerTheme)
+  const context = React.createContext(defaultTheme)
+  const ThemeProvider = createThemeProvider(context)
 
@@ -29,12 +26,12 @@ TestRenderer.create(
     </ThemeProvider>
-  );
+  )
 
-  t.true(themeFn.calledWith(defaultTheme));
-});
+  t.true(themeFn.calledWith(defaultTheme))
+})
 
-test('should call the theme fn with the outerTheme', t => {
-  const outerTheme: Object = {};
-  const themeFn = sinon.spy(theme => theme);
-  const context = React.createContext({});
-  const ThemeProvider = createThemeProvider(context);
+test('should call the theme fn with the outerTheme', (t) => {
+  const outerTheme: Object = {}
+  const themeFn = sinon.spy((theme) => theme)
+  const context = React.createContext({})
+  const ThemeProvider = createThemeProvider(context)
 
@@ -47,20 +44,20 @@ TestRenderer.create(
     </ThemeProvider>
-  );
+  )
 
-  t.true(themeFn.calledWith(outerTheme));
-});
+  t.true(themeFn.calledWith(outerTheme))
+})
 
-test('should merge nested themes', t => {
-  const context = React.createContext({});
-  const ThemeProvider = createThemeProvider(context);
-  const themeA: Object = { themeA: 'a' };
-  const themeB: Object = { themeB: 'b' };
+test('should merge nested themes', (t) => {
+  const context = React.createContext({})
+  const ThemeProvider = createThemeProvider(context)
+  const themeA: Object = {themeA: 'a'}
+  const themeB: Object = {themeB: 'b'}
 
-  const { root } = TestRenderer.create(
+  const {root} = TestRenderer.create(
     <ThemeProvider theme={themeA}>
       <ThemeProvider theme={themeB}>
-        <context.Consumer>{theme => <Comp theme={theme} />}</context.Consumer>
+        <context.Consumer>{(theme) => <Comp theme={theme} />}</context.Consumer>
       </ThemeProvider>
     </ThemeProvider>
-  );
+  )
 
@@ -70,22 +67,22 @@ t.deepEqual(root.findByType(Comp).props.theme, {
     themeB: 'b'
-  });
-});
+  })
+})
 
-test('should not render any Consumer and Provider if no children were passed', t => {
-  const context = React.createContext({});
-  const ThemeProvider = createThemeProvider(context);
+test('should not render any Consumer and Provider if no children were passed', (t) => {
+  const context = React.createContext({})
+  const ThemeProvider = createThemeProvider(context)
 
-  const { root } = TestRenderer.create(
+  const {root} = TestRenderer.create(
     // $FlowFixMe: Flow complains because we require children
     <ThemeProvider theme={{}} />
-  );
+  )
 
-  t.deepEqual(root.findByType(ThemeProvider).children.length, 0);
-});
+  t.deepEqual(root.findByType(ThemeProvider).children.length, 0)
+})
 
-test("should return not modify the theme when the ThemeProvider isn't nested", t => {
-  const context = React.createContext();
-  const ThemeProvider = createThemeProvider(context);
-  const themeA: Object = {};
-  let receivedTheme;
+test("should return not modify the theme when the ThemeProvider isn't nested", (t) => {
+  const context = React.createContext()
+  const ThemeProvider = createThemeProvider(context)
+  const themeA: Object = {}
+  let receivedTheme
 
@@ -95,19 +92,19 @@ TestRenderer.create(
       <context.Consumer>
-        {theme => {
-          receivedTheme = theme;
-          return null;
+        {(theme) => {
+          receivedTheme = theme
+          return null
         }}
       </context.Consumer>
     </ThemeProvider>
-  );
+  )
 
-  t.true(themeA === receivedTheme);
-});
+  t.true(themeA === receivedTheme)
+})
 
-test("should create new theme object when 2 ThemeProvider's are nested", t => {
-  const context = React.createContext();
-  const ThemeProvider = createThemeProvider(context);
-  const themeA: Object = {};
-  const themeB: Object = {};
-  let receivedTheme;
+test("should create new theme object when 2 ThemeProvider's are nested", (t) => {
+  const context = React.createContext()
+  const ThemeProvider = createThemeProvider(context)
+  const themeA: Object = {}
+  const themeB: Object = {}
+  let receivedTheme
 
@@ -118,5 +115,5 @@ TestRenderer.create(
         <context.Consumer>
-          {theme => {
-            receivedTheme = theme;
-            return null;
+          {(theme) => {
+            receivedTheme = theme
+            return null
           }}
@@ -126,6 +123,6 @@ </context.Consumer>
     </ThemeProvider>
-  );
+  )
 
-  t.true(themeA !== receivedTheme);
-  t.true(themeB !== receivedTheme);
-});
+  t.true(themeA !== receivedTheme)
+  t.true(themeB !== receivedTheme)
+})

src/create-use-theme.js

 // @flow
 
-import React, { type Context } from 'react';
-import warning from 'tiny-warning';
-import isObject from './is-object';
+import React, {type Context} from 'react'
+import warning from 'tiny-warning'
+import isObject from './is-object'
 
 export default function createUseTheme<Theme>(context: Context<Theme>) {
   const useTheme = () => {
-    const theme = React.useContext(context);
+    const theme = React.useContext(context)
 
-    warning(
-      isObject(theme),
-      '[theming] Please use useTheme only with the ThemeProvider'
-    );
+    warning(isObject(theme), '[theming] Please use useTheme only with the ThemeProvider')
 
-    return theme;
-  };
+    return theme
+  }
 
-  return useTheme;
+  return useTheme
 }

src/create-with-theme.js

 // @flow
 
-import React, { type ComponentType, type Context } from 'react';
-import hoist from 'hoist-non-react-statics';
-import getDisplayName from 'react-display-name';
-import warning from 'tiny-warning';
-import isObject from './is-object';
+import React, {type ComponentType, type Context} from 'react'
+import hoist from 'hoist-non-react-statics'
+import getDisplayName from 'react-display-name'
+import warning from 'tiny-warning'
+import isObject from './is-object'
 
@@ -13,25 +13,22 @@ export default function createWithTheme<Theme>(context: Context<Theme>) {
     InnerComponent: ComponentType<InnerProps>,
-    OuterProps: { ...InnerProps, theme?: $NonMaybeType<Theme> }
+    OuterProps: {|...InnerProps, theme?: $NonMaybeType<Theme>|}
   >(Component: InnerComponent): ComponentType<OuterProps> {
     const withTheme = React.forwardRef((props, ref) => (
       <context.Consumer>
-        {theme => {
-          warning(
-            isObject(theme),
-            '[theming] Please use withTheme only with the ThemeProvider'
-          );
+        {(theme) => {
+          warning(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider')
 
-          return <Component theme={theme} ref={ref} {...props} />;
+          return <Component theme={theme} ref={ref} {...props} />
         }}
       </context.Consumer>
-    ));
+    ))
 
     if (process.env.NODE_ENV !== 'production') {
-      withTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
+      withTheme.displayName = `WithTheme(${getDisplayName(Component)})`
     }
 
-    hoist(withTheme, Component);
+    hoist(withTheme, Component)
 
-    return withTheme;
-  };
+    return withTheme
+  }
 }

src/create-with-theme.test.js

 // @flow
-import test from 'ava';
-import React from 'react';
-import TestRenderer from 'react-test-renderer';
-import sinon from 'sinon';
+import test from 'ava'
+import React from 'react'
+import TestRenderer from 'react-test-renderer'
+import sinon from 'sinon'
 
-import createWithTheme from './create-with-theme';
+import createWithTheme from './create-with-theme'
 
-type Props = { theme: {} };
+type Props = {|theme: {||}|}
 
 // eslint-disable-next-line no-unused-vars
-const FunctionalComponent = (props: Props) => null;
+const FunctionalComponent = (props: Props) => null
 
 class ClassComponent extends React.Component<Props> {
-  static displayName = 'foo';
+  static displayName = 'foo'
 
-  static someSpecialStatic = 'bar';
+  static someSpecialStatic = 'bar'
 
-  inner = true;
+  inner = true
 
   render() {
-    return null;
+    return null
   }
 }
 
-test("createWithTheme's type", t => {
-  t.true(
-    typeof createWithTheme === 'function',
-    'createWithTheme should be a function'
-  );
-});
+test("createWithTheme's type", (t) => {
+  t.true(typeof createWithTheme === 'function', 'createWithTheme should be a function')
+})
 
-test("createWithTheme's result is function on its own", t => {
-  const context = React.createContext({});
-  const withTheme = createWithTheme(context);
+test("createWithTheme's result is function on its own", (t) => {
+  const context = React.createContext({})
+  const withTheme = createWithTheme(context)
 
-  t.true(typeof withTheme === 'function', 'withTheme should be a function');
-});
+  t.true(typeof withTheme === 'function', 'withTheme should be a function')
+})
 
-test('should pass the default value of the context', t => {
-  const theme = {};
-  const context = React.createContext(theme);
-  const WithTheme = createWithTheme(context)(FunctionalComponent);
-  const { root } = TestRenderer.create(<WithTheme />);
+test('should pass the default value of the context', (t) => {
+  const theme = {}
+  const context = React.createContext(theme)
+  const WithTheme = createWithTheme(context)(FunctionalComponent)
+  const {root} = TestRenderer.create(<WithTheme />)
 
-  t.true(root.findByType(FunctionalComponent).props.theme === theme);
-});
+  t.true(root.findByType(FunctionalComponent).props.theme === theme)
+})
 
-test('should pass the value of the Provider', t => {
-  const theme = { test: 'test' };
-  const context = React.createContext(theme);
-  const WithTheme = createWithTheme(context)(FunctionalComponent);
-  const { root } = TestRenderer.create(
+test('should pass the value of the Provider', (t) => {
+  const theme = {test: 'test'}
+  const context = React.createContext(theme)
+  const WithTheme = createWithTheme(context)(FunctionalComponent)
+  const {root} = TestRenderer.create(
     <context.Provider value={theme}>
       <WithTheme />
     </context.Provider>
-  );
+  )
 
-  t.true(root.findByType(FunctionalComponent).props.theme === theme);
-});
+  t.true(root.findByType(FunctionalComponent).props.theme === theme)
+})
 
-test('should allow overriding the prop from the outer props', t => {
-  const otherTheme = {};
-  const context = React.createContext<{}>({});
-  const WithTheme = createWithTheme<{}>(context)(FunctionalComponent);
-  const { root } = TestRenderer.create(<WithTheme theme={otherTheme} />);
+test('should allow overriding the prop from the outer props', (t) => {
+  const otherTheme = {}
+  const context = React.createContext<{}>({})
+  const WithTheme = createWithTheme<{}>(context)(FunctionalComponent)
+  const {root} = TestRenderer.create(<WithTheme theme={otherTheme} />)
 
-  t.true(root.findByType(FunctionalComponent).props.theme === otherTheme);
-});
+  t.true(root.findByType(FunctionalComponent).props.theme === otherTheme)
+})
 
-test('normal refs should just work and correctly be forwarded', t => {
-  const context = React.createContext({});
-  const WithTheme = createWithTheme(context)(ClassComponent);
-  let refComp = null;
-  const innerRef = comp => {
-    refComp = comp;
-  };
+test('normal refs should just work and correctly be forwarded', (t) => {
+  const context = React.createContext({})
+  const WithTheme = createWithTheme(context)(ClassComponent)
+  let refComp = null
+  const innerRef = (comp) => {
+    refComp = comp
+  }
 
-  TestRenderer.create(<WithTheme ref={innerRef} />);
+  TestRenderer.create(<WithTheme ref={innerRef} />)
 
-  t.deepEqual(refComp !== null && refComp.inner, true);
-});
+  t.deepEqual(refComp !== null && refComp.inner, true)
+})
 
-test('withTheme(Comp) hoists non-react static class properties', t => {
-  const context = React.createContext({});
-  const withTheme = createWithTheme(context);
-  const WithTheme = withTheme(ClassComponent);
+test('withTheme(Comp) hoists non-react static class properties', (t) => {
+  const context = React.createContext({})
+  const withTheme = createWithTheme(context)
+  const WithTheme = withTheme(ClassComponent)
 
@@ -93,3 +90,3 @@ t.deepEqual(
     'withTheme(Comp) should not hoist react static properties'
-  );
+  )
   t.deepEqual(
@@ -100,17 +97,17 @@ // $FlowFixMe: Need to find a better way to type the hoist-non-react-statics
     'withTheme(Comp) should hoist non-react static properties'
-  );
-});
+  )
+})
 
-test("should warn when theme isn't an object", t => {
-  const spy = sinon.spy(console, 'warn');
+test("should warn when theme isn't an object", (t) => {
+  const spy = sinon.spy(console, 'warn')
 
-  const context = React.createContext<{} | void>();
-  const withTheme = createWithTheme(context);
-  const WithTheme = withTheme(ClassComponent);
+  const context = React.createContext<{} | void>()
+  const withTheme = createWithTheme(context)
+  const WithTheme = withTheme(ClassComponent)
 
-  TestRenderer.create(<WithTheme />);
+  TestRenderer.create(<WithTheme />)
 
-  t.deepEqual(spy.callCount, 1);
+  t.deepEqual(spy.callCount, 1)
 
-  spy.restore();
-});
+  spy.restore()
+})

src/index.d.ts

@@ -1,42 +0,44 @@
-import * as React from 'react';
+import * as React from 'react'
 
-type DefaultTheme = object | null;
+type DefaultTheme = object | null
 
 type WithThemeFactory<Theme> = <
-    InnerProps extends { theme: NonNullable<Theme> },
-    InnerComponent extends React.ComponentType<InnerProps>,
-    OuterProps extends InnerProps & { theme?: NonNullable<Theme> },
->(comp: InnerComponent) => React.ComponentType<OuterProps>;
+  InnerProps extends {theme: NonNullable<Theme>},
+  InnerComponent extends React.ComponentType<InnerProps>,
+  OuterProps extends InnerProps & {theme?: NonNullable<Theme>}
+>(
+  comp: InnerComponent
+) => React.ComponentType<OuterProps>
 
 interface ThemeProviderProps<Theme> {
-    theme: NonNullable<Theme> | ((outerTheme: Theme) => NonNullable<Theme>),
-    children: React.ReactNode,
+  theme: NonNullable<Theme> | ((outerTheme: Theme) => NonNullable<Theme>)
+  children: React.ReactNode
 }
 
-type ThemeProviderFactory<Theme> = React.ComponentType<ThemeProviderProps<Theme>>;
+type ThemeProviderFactory<Theme> = React.ComponentType<ThemeProviderProps<Theme>>
 
-type UseThemeFactory<Theme> = <CustomTheme = Theme>() => CustomTheme;
+type UseThemeFactory<Theme> = <CustomTheme = Theme>() => CustomTheme
 
 interface Theming<Theme> {
-    context: React.Context<Theme>,
-    withTheme: WithThemeFactory<Theme>,
-    ThemeProvider: ThemeProviderFactory<Theme>,
-    useTheme: UseThemeFactory<Theme>,
+  context: React.Context<Theme>
+  withTheme: WithThemeFactory<Theme>
+  ThemeProvider: ThemeProviderFactory<Theme>
+  useTheme: UseThemeFactory<Theme>
 }
 
-declare function createTheming<Theme>(context: React.Context<Theme>): Theming<Theme>;
+declare function createTheming<Theme>(context: React.Context<Theme>): Theming<Theme>
 
-declare const withTheme: WithThemeFactory<DefaultTheme>;
-declare const ThemeProvider: ThemeProviderFactory<DefaultTheme>;
-declare const ThemeContext: React.Context<DefaultTheme>;
-declare const useTheme: UseThemeFactory<DefaultTheme>;
+declare const withTheme: WithThemeFactory<DefaultTheme>
+declare const ThemeProvider: ThemeProviderFactory<DefaultTheme>
+declare const ThemeContext: React.Context<DefaultTheme>
+declare const useTheme: UseThemeFactory<DefaultTheme>
 
 export {
-    ThemeContext,
-    createTheming,
-    withTheme,
-    useTheme,
-    ThemeProvider,
-    ThemeProviderProps,
-    Theming,
+  ThemeContext,
+  createTheming,
+  withTheme,
+  useTheme,
+  ThemeProvider,
+  ThemeProviderProps,
+  Theming
 }

src/index.js

 // @flow
 
-import { createContext, type Context } from 'react';
+import {createContext, type Context} from 'react'
 
-import createThemeProvider, { type ThemeProviderProps } from './create-theme-provider';
-import createWithTheme from './create-with-theme';
-import createUseTheme from './create-use-theme';
+import createThemeProvider, {type ThemeProviderProps} from './create-theme-provider'
+import createWithTheme from './create-with-theme'
+import createUseTheme from './create-use-theme'
 
-type ExtractReturnType<Theme> = <ReturnType>(
-  (context: Context<Theme>) => ReturnType
-) => ReturnType;
+type ExtractReturnType<Theme> = <ReturnType>((context: Context<Theme>) => ReturnType) => ReturnType
 
 interface Theming<Theme> {
-  context: Context<Theme>,
-  withTheme: $Call<ExtractReturnType<Theme>, typeof createWithTheme>,
-  ThemeProvider: $Call<ExtractReturnType<Theme>, typeof createThemeProvider>,
-  useTheme: $Call<ExtractReturnType<Theme>, typeof createUseTheme>,
+  context: Context<Theme>;
+  withTheme: $Call<ExtractReturnType<Theme>, typeof createWithTheme>;
+  ThemeProvider: $Call<ExtractReturnType<Theme>, typeof createThemeProvider>;
+  useTheme: $Call<ExtractReturnType<Theme>, typeof createUseTheme>;
 }
 
-const ThemeContext = createContext<{} | void>();
-
 function createTheming<Theme>(context: Context<Theme>): Theming<Theme> {
@@ -27,23 +23,14 @@ return {
     useTheme: createUseTheme(context),
-    ThemeProvider: createThemeProvider(context),
-  };
+    ThemeProvider: createThemeProvider(context)
+  }
 }
 
-const {
-  withTheme,
-  ThemeProvider,
-  useTheme,
-} = createTheming(ThemeContext);
+type DefaultTheme = Object
 
-export type {
-  Theming,
-  ThemeProviderProps,
-};
+const ThemeContext = createContext<DefaultTheme>()
 
-export {
-  useTheme,
-  ThemeContext,
-  withTheme,
-  createTheming,
-  ThemeProvider,
-};
+const {withTheme, ThemeProvider, useTheme} = createTheming<DefaultTheme>(ThemeContext)
+
+export type {Theming, ThemeProviderProps}
+
+export {useTheme, ThemeContext, withTheme, createTheming, ThemeProvider}

src/index.test.js

 // @flow
-import test from 'ava';
-import { createContext } from 'react';
+import test from 'ava'
+import {createContext} from 'react'
 
-import isObject from './is-object';
-import { createTheming } from '.';
+import isObject from './is-object'
+import {createTheming} from '.'
 
-test('createTheming\'s type', (t) => {
-  t.true(typeof createTheming === 'function', 'createTheming should be a function');
-});
+test("createTheming's type", (t) => {
+  t.true(typeof createTheming === 'function', 'createTheming should be a function')
+})
 
-test('createTheming()\'s type', (t) => {
-  const context = createContext({});
-  const theming = createTheming(context);
-  const actual = isObject(theming);
-  t.true(actual, 'createTheming() should be an object');
-});
+test("createTheming()'s type", (t) => {
+  const context = createContext({})
+  const theming = createTheming(context)
+  const actual = isObject(theming)
+  t.true(actual, 'createTheming() should be an object')
+})
 
-test('createTheming()\'s key names', (t) => {
-  const context = createContext({});
-  const theming = createTheming(context);
-  const actual = Object.keys(theming);
-  const expected = ['context', 'withTheme', 'useTheme', 'ThemeProvider'];
+test("createTheming()'s key names", (t) => {
+  const context = createContext({})
+  const theming = createTheming(context)
+  const actual = Object.keys(theming)
+  const expected = ['context', 'withTheme', 'useTheme', 'ThemeProvider']
 
-  t.deepEqual(
-    actual,
-    expected,
-    'createTheming()\' keys are withTheme and ThemeProvider',
-  );
-});
+  t.deepEqual(actual, expected, "createTheming()' keys are withTheme and ThemeProvider")
+})

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

Worsened metrics

Total package byte prevSize

181296

decreased by-0.27%

Lines of code

1910

decreased by-1.85%

No dependency changes