@cloudflare/style-container - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

CHANGELOG.md

@@ -6,3 +6,15 @@ # Change Log
 
-       <a name="4.0.2"></a>
+      <a name="4.0.3"></a>
+## [4.0.3](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@4.0.2...@cloudflare/style-container@4.0.3) (2018-07-20)
+
+
+### Bug Fixes
+
+* **style-container:** UI-986 Make createComponent typings awesome ([46d647a](http://stash.cfops.it:7999/fe/stratus/commits/46d647a))
+* **style-container:** UI-986 Make createComponent typings awesome ([9fa7b44](http://stash.cfops.it:7999/fe/stratus/commits/9fa7b44))
+
+
+
+
+      <a name="4.0.2"></a>
 ## [4.0.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@4.0.1...@cloudflare/style-container@4.0.2) (2018-07-19)
@@ -15,3 +27,3 @@
 
-       <a name="4.0.1"></a>
+     <a name="4.0.1"></a>
 ## [4.0.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@4.0.0...@cloudflare/style-container@4.0.1) (2018-07-19)
@@ -24,3 +36,3 @@
 
-      <a name="4.0.0"></a>
+    <a name="4.0.0"></a>
 # [4.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@3.0.3...@cloudflare/style-container@4.0.0) (2018-07-18)
@@ -41,3 +53,3 @@
 
-    <a name="3.0.3"></a>
+  <a name="3.0.3"></a>
 ## [3.0.3](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@3.0.2...@cloudflare/style-container@3.0.3) (2018-07-15)
@@ -50,3 +62,3 @@
 
-  <a name="3.0.2"></a>
+<a name="3.0.2"></a>
 ## [3.0.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/style-container@3.0.1...@cloudflare/style-container@3.0.2) (2018-07-13)
@@ -53,0 +65,0 @@

es/createComponent.js

@@ -1,15 +0,12 @@
-import { createComponent as createFelaComponent } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import { createComponent as createFelaComponent } from 'react-fela';
+import getReactDisplayName from 'react-display-name';
 
-import getReactDisplayName from 'react-display-name'; //similar to react-fela's createComponent. However, it automatically adds PropTypes from `[type]`
-//in case that it is a React Component.
-//You should use this HOC every time when you want to use Fela in your component.
-
-var createComponent = function createComponent(rule) {
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
+function createComponent(rule) {
+  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
   var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var Component = createFelaComponent(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
-  Component.displayName = getReactDisplayName(type);
+  var Component = createFelaComponent(rule, base, typeof base !== 'string' && base.propTypes ? passThroughProps.concat(Object.keys(base.propTypes)) : passThroughProps);
+  Component.displayName = getReactDisplayName(base);
   return Component;
-};
+}
 
 export default createComponent;

index.d.ts

 declare module '@cloudflare/style-container' {
   import * as React from 'react';
-  import { variables } from '@cloudflare/style-const';
+  import { Style, FelaHtmlComponent } from 'react-fela';
+  import { variables } from '@cloudflare/style-const/src';
 
   export { ThemeProvider } from 'react-fela';
 
+  export type TThemable = { theme?: typeof variables };
+
   type DisplayNameFn = (name: string) => void;
@@ -23,9 +26,12 @@
 
-  export function createComponent<T, P = {}>(
-    rule: TRule<T & { theme?: typeof variables }>,
-    type?: string | HTMLElement | TComponent<P>,
-    passThroughProps?: string[]
-  ): React.StatelessComponent<Partial<T & P>> & {
-    setDisplayName: DisplayNameFn;
-  };
+  export function createComponent<
+    Props,
+    ComponentElem extends HTMLElement,
+    ComponentProps,
+    Tag extends keyof HTMLElementTagNameMap
+  >(
+    rule: Style<Props & TThemable>,
+    base?: Tag | FelaHtmlComponent<ComponentProps, ComponentElem>,
+    passthrough?: string[]
+  ): React.SFC<Exclude<Props, 'theme'> & ComponentProps>;
 
@@ -32,0 +38,0 @@ export function createStyledComponent<T, P = {}>(

lib/createComponent.js

@@ -14,15 +14,11 @@ "use strict";
 
-// eslint-disable-line behance/no-deprecated
-//similar to react-fela's createComponent. However, it automatically adds PropTypes from `[type]`
-//in case that it is a React Component.
-//You should use this HOC every time when you want to use Fela in your component.
-var createComponent = function createComponent(rule) {
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
+function createComponent(rule) {
+  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
   var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var Component = (0, _reactFela.createComponent)(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
-  Component.displayName = (0, _reactDisplayName.default)(type);
+  var Component = (0, _reactFela.createComponent)(rule, base, typeof base !== 'string' && base.propTypes ? passThroughProps.concat(Object.keys(base.propTypes)) : passThroughProps);
+  Component.displayName = (0, _reactDisplayName.default)(base);
   return Component;
-};
+}
 
 var _default = createComponent;
 exports.default = _default;

package.json

 {
   "name": "@cloudflare/style-container",
   "description": "Cloudflare Style Container",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

No alert changes

Improved metrics

Total package byte prevSize

100448

increased by0.33%

Lines of code

1450

increased by0.83%

No dependency changes