emotion-theming - npm Package Compare versions

Comparing version 9.2.6 to 9.2.9

dist/index.cjs.js

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

dist/index.esm.js

@@ -223,2 +223,1 @@ import PropTypes from 'prop-types';
 export { ThemeProvider, withTheme, channel, contextTypes, createBroadcast };
-//# sourceMappingURL=index.esm.js.map

package.json

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

README.md

@@ -5,5 +5,4 @@ # emotion-theming
 
-*`emotion-theming` is a theming library inspired by [styled-components](https://github.com/styled-components/styled-components)*
+_`emotion-theming` is a theming library inspired by [styled-components](https://github.com/styled-components/styled-components)_
 
-
 ## Table of Contents
@@ -20,6 +19,4 @@
 
-
 ## Install
 
-
 ```bash
@@ -95,3 +92,2 @@ # add --save if using npm@4 or lower
 
-
 ## API
@@ -103,3 +99,4 @@
 
-*Accepts:*
+_Accepts:_
+
 * **`children`: ReactComponent** - A single React component.
@@ -109,5 +106,5 @@ * **`theme`: Object|Function** - An object or function that provides an object.
 ```jsx
-import React from 'react';
+import React from 'react'
 import styled from 'react-emotion'
-import { ThemeProvider, withTheme } from 'emotion-theming';
+import { ThemeProvider, withTheme } from 'emotion-theming'
 
@@ -118,4 +115,4 @@ // object-style theme
   backgroundColor: 'green',
-  color: 'red',
-};
+  color: 'red'
+}
 
@@ -125,3 +122,3 @@ // function-style theme; note that if multiple <ThemeProvider> are used,
 
-const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' });
+const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' })
 
@@ -133,8 +130,6 @@ class Container extends React.Component {
         <ThemeProvider theme={adjustedTheme}>
-          <Text>
-            Boom shaka laka!
-          </Text>
+          <Text>Boom shaka laka!</Text>
         </ThemeProvider>
       </ThemeProvider>
-    );
+    )
   }
@@ -144,8 +139,7 @@ }
 const Text = styled.div`
-  background-color: ${props => props.theme.backgroundColor};  // will be green
-  color: ${props => props.theme.color};                       // will be blue
+  background-color: ${props => props.theme.backgroundColor}; // will be green
+  color: ${props => props.theme.color}; // will be blue
 `
 ```
 
-
 ### withTheme(component: ReactComponent): Function
@@ -156,13 +150,9 @@
 ```jsx
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withTheme } from 'emotion-theming';
+import PropTypes from 'prop-types'
+import React from 'react'
+import { withTheme } from 'emotion-theming'
 
 class TellMeTheColor extends React.Component {
   render() {
-    return (
-      <div>
-        The color is {this.props.theme.color}.
-      </div>
-    );
+    return <div>The color is {this.props.theme.color}.</div>
   }
@@ -173,7 +163,7 @@ }
   theme: PropTypes.shape({
-    color: PropTypes.string,
-  }),
-};
+    color: PropTypes.string
+  })
+}
 
-const TellMeTheColorWithTheme = withTheme(TellMeTheColor);
+const TellMeTheColorWithTheme = withTheme(TellMeTheColor)
 ```
@@ -188,5 +178,6 @@
 ```js
-import { channel } from 'emotion-theming';
+import { channel } from 'emotion-theming'
 
-console.log(channel); '__EMOTION_THEMING__';
+console.log(channel)
+;('__EMOTION_THEMING__')
 ```
@@ -202,28 +193,26 @@
 ```js
-import {channel, createBroadcast} from 'emotion-theming';
-import {mount} from 'enzyme';
-import PropTypes from 'prop-types';
-import React from 'react';
+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 myTheme = { color: 'green' }
+    const broadcast = createBroadcast(myTheme)
     const wrapper = mount(<MyComponent />, {
       context: {
-        [channel]: broadcast,
+        [channel]: broadcast
       },
       childContextTypes: {
-        [channel]: PropTypes.object,
-      },
-    });
+        [channel]: PropTypes.object
+      }
+    })
 
-    wrapper.setState({foo: 'bar'});
-    expect(wrapper.state('foo')).toBe('bar');
-  });
-});
+    wrapper.setState({ foo: 'bar' })
+    expect(wrapper.state('foo')).toBe('bar')
+  })
+})
 ```
 
-
-
 ## Credits
@@ -233,5 +222,4 @@
 
-
 ## License
 
 MIT 2017-present

types/index.d.ts

@@ -23,1 +23,13 @@ // TypeScript Version: 2.3
 }
+
+export const channel: "__EMOTION_THEMING__";
+
+export type BroadcastListener<Theme = {}> = (state: Theme) => void;
+
+export interface Broadcast<Theme = {}> {
+    publish(nextState: Theme): void;
+    subscribe(listener: BroadcastListener<Theme>): number;
+    unsubscribe(unsubID: number): void;
+}
+
+export function createBroadcast<Theme = {}>(initialState: Theme): Broadcast<Theme>;

No alert changes

Improved metrics

Lines of code

633

increased by3.43%

Worsened metrics

Total package byte prevSize

43414

decreased by-27.62%

Number of package files

16

decreased by-11.11%

Number of lines in readme file

212

decreased by-5.36%

No dependency changes