emotion-theming - npm Package Compare versions

Comparing version 9.0.0 to 9.1.2

dist/emotion.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e["emotion-theming"]={},e.React,e.PropTypes)}(this,function(e,t,r){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function i(){var e=this;void 0!==this.context[d]&&(this.unsubscribeToOuterId=this.context[d].subscribe(function(t){e.outerTheme=t,void 0!==e.broadcast&&e.publish(e.props.theme)})),this.broadcast=m(this.getTheme(this.props.theme))}function s(){var e;return e={},e[d]={subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e}function c(e){this.props.theme!==e.theme&&this.publish(e.theme)}function u(){var e=this.context[d];void 0!==e&&e.unsubscribe(this.unsubscribeToOuterId)}function p(e){if("function"==typeof e){var t=e(this.outerTheme);if(!v(t))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return t}if(!v(e))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return void 0===this.outerTheme?e:n({},this.outerTheme,e)}function h(e){this.broadcast.publish(this.getTheme(e))}function a(){return this.props.children?t.Children.only(this.props.children):null}function b(){var e=this,t=this.context[d];void 0!==t?this.unsubscribeId=t.subscribe(function(t){e.setState({theme:t})}):console.error("[withTheme] Please use ThemeProvider to be able to use withTheme")}function f(){-1!==this.unsubscribeId&&this.context[d].unsubscribe(this.unsubscribeId)}r=r&&r.hasOwnProperty("default")?r.default:r;var l,m=function(e){var t={},r=0,n=e;return{publish:function(e){n=e;for(var r in t){var o=t[r];void 0!==o&&o(n)}},subscribe:function(e){var o=r;return t[o]=e,r+=1,e(n),o},unsubscribe:function(e){t[e]=void 0}}},d="__EMOTION_THEMING__",y=(l={},l[d]=r.object,l),v=function(e){return"[object Object]"===Object.prototype.toString.call(e)},T=function(e){function t(){var t;return t=e.call(this)||this,t.getTheme=t.getTheme.bind(t),t}o(t,e);var r=t.prototype;return r.componentWillMount=i,r.getChildContext=s,r.componentWillReceiveProps=c,r.componentWillUnmount=u,r.getTheme=p,r.publish=h,r.render=a,t}(t.Component);T.childContextTypes=y,T.contextTypes=y;var O={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},g={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},P=Object.defineProperty,j=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols,w=Object.getOwnPropertyDescriptor,_=Object.getPrototypeOf,C=_&&_(Object),I=function e(t,r,n){if("string"!=typeof r){if(C){var o=_(r);o&&o!==C&&e(t,o,n)}var i=j(r);x&&(i=i.concat(x(r)));for(var s=0;s<i.length;++s){var c=i[s];if(!(O[c]||g[c]||n&&n[c])){var u=w(r,c);try{P(t,c,u)}catch(e){}}}return t}return t};e.ThemeProvider=T,e.withTheme=function(e){function r(){return t.createElement(e,n({theme:this.state.theme},this.props))}var i=e.displayName||e.name||"Component",s=function(e){function t(){return e.apply(this,arguments)||this}o(t,e);var n=t.prototype;return n.componentWillMount=b,n.componentWillUnmount=f,n.render=r,t}(t.Component);return s.displayName="WithTheme("+i+")",s.contextTypes=y,I(s,e)},e.channel=d,e.contextTypes=y,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e["emotion-theming"]={},e.React,e.PropTypes)}(this,function(e,t,r){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function i(){var e=this;void 0!==this.context[d]&&(this.unsubscribeToOuterId=this.context[d].subscribe(function(t){e.outerTheme=t,void 0!==e.broadcast&&e.publish(e.props.theme)})),this.broadcast=m(this.getTheme(this.props.theme))}function s(){var e;return e={},e[d]={subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e}function c(e){this.props.theme!==e.theme&&this.publish(e.theme)}function u(){var e=this.context[d];void 0!==e&&e.unsubscribe(this.unsubscribeToOuterId)}function p(e){if("function"==typeof e){var t=e(this.outerTheme);if(!v(t))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return t}if(!v(e))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return void 0===this.outerTheme?e:n({},this.outerTheme,e)}function h(e){this.broadcast.publish(this.getTheme(e))}function a(){return this.props.children?t.Children.only(this.props.children):null}function b(){var e=this,t=this.context[d];void 0!==t?this.unsubscribeId=t.subscribe(function(t){e.setState({theme:t})}):console.error("[withTheme] Please use ThemeProvider to be able to use withTheme")}function f(){-1!==this.unsubscribeId&&this.context[d].unsubscribe(this.unsubscribeId)}r=r&&r.hasOwnProperty("default")?r.default:r;var l,m=function(e){var t={},r=0,n=e;return{publish:function(e){n=e;for(var r in t){var o=t[r];void 0!==o&&o(n)}},subscribe:function(e){var o=r;return t[o]=e,r+=1,e(n),o},unsubscribe:function(e){t[e]=void 0}}},d="__EMOTION_THEMING__",y=(l={},l[d]=r.object,l),v=function(e){return"[object Object]"===Object.prototype.toString.call(e)},T=function(e){function t(){var t;return t=e.call(this)||this,t.getTheme=t.getTheme.bind(t),t}o(t,e);var r=t.prototype;return r.componentWillMount=i,r.getChildContext=s,r.componentWillReceiveProps=c,r.componentWillUnmount=u,r.getTheme=p,r.publish=h,r.render=a,t}(t.Component);T.childContextTypes=y,T.contextTypes=y;var O={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},g={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},P=Object.defineProperty,j=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols,w=Object.getOwnPropertyDescriptor,_=Object.getPrototypeOf,C=_&&_(Object),I=function e(t,r,n){if("string"!=typeof r){if(C){var o=_(r);o&&o!==C&&e(t,o,n)}var i=j(r);x&&(i=i.concat(x(r)));for(var s=0;s<i.length;++s){var c=i[s];if(!(O[c]||g[c]||n&&n[c])){var u=w(r,c);try{P(t,c,u)}catch(e){}}}return t}return t};e.ThemeProvider=T,e.withTheme=function(e){function r(){return t.createElement(e,n({theme:this.state.theme},this.props))}var i=e.displayName||e.name||"Component",s=function(e){function t(){return e.apply(this,arguments)||this}o(t,e);var n=t.prototype;return n.componentWillMount=b,n.componentWillUnmount=f,n.render=r,t}(t.Component);return s.displayName="WithTheme("+i+")",s.contextTypes=y,I(s,e)},e.channel=d,e.contextTypes=y,e.createBroadcast=m,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=emotion.umd.min.js.map

dist/index.cjs.js

@@ -250,2 +250,3 @@ 'use strict';
 exports.contextTypes = contextTypes;
+exports.createBroadcast = createBroadcast;
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

@@ -240,3 +240,3 @@ import { Children, Component, createElement } from 'react';
 
-export { ThemeProvider, withTheme, channel, contextTypes };
+export { ThemeProvider, withTheme, channel, contextTypes, createBroadcast };
 //# sourceMappingURL=index.es.js.map

package.json

 {
   "name": "emotion-theming",
-  "version": "9.0.0",
+  "version": "9.1.2",
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

@@ -182,2 +182,36 @@ # emotion-theming
 
+### createBroadcast: Function
+
+Creates a broadcast that is used to listen to theme events via context. This is probably only useful for testing.
+If you have styled components that depend on `theme` via `ThemeProvider`, one option is to wrap all your components being tested
+in `ThemeProvider`. However if you're using `enzyme`, you'll lose the ability to call some methods that require it to be run on the root instance.
+Instead you can `mount` a component a pass the channel and broadcast as part of `context`.
+
+```js
+import {channel, createBroadcast} from 'emotion-theming';
+import {mount} from 'enzyme';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+describe('emotion-theming', function() {
+  it('can use theme from a ThemeProvider', function() {
+    const myTheme = {color: 'green'};
+    const broadcast = createBroadcast(myTheme);
+    const wrapper = mount(<MyComponent />, {
+      context: {
+        [channel]: broadcast,
+      },
+      childContextTypes: {
+        [channel]: PropTypes.object,
+      },
+    });
+
+    wrapper.setState({foo: 'bar'});
+    expect(wrapper.state('foo')).toBe('bar');
+  });
+});
+```
+
+
+
 ## Credits
@@ -184,0 +218,0 @@

src/index.js

 // @flow
 export { default as ThemeProvider } from './theme-provider'
 export { default as withTheme } from './with-theme'
-export { channel, contextTypes } from './utils'
+export { channel, contextTypes, createBroadcast } from './utils'

src/utils.js

@@ -10,3 +10,4 @@ // @flow
 export { default as channel } from './channel'
+export { default as createBroadcast } from './create-broadcast'
 
 export type Theme = Object | ((theme: Object) => Object)

No alert changes

Improved metrics

Total package byte prevSize

109715

increased by1.38%

Lines of code

636

increased by0.32%

Number of lines in readme file

224

increased by17.89%

No dependency changes