aesthetic-react - npm Package Compare versions

Comparing version 1.0.0-alpha.7 to 1.0.0-rc.0

CHANGELOG.md

@@ -11,2 +11,4 @@ # 1.0.0
 - Updated `withStyles` HOC to receive the CSS transformer function as a `cx` prop.
+- Updated `withStyles` and `withTheme` HOCs to internally use function components instead of class
+  components.
 - **[TS]** Renamed the `WithStylesProps` interface to `WithStylesWrappedProps`.
@@ -13,0 +15,0 @@ - **[TS]** Renamed the `WithThemeProps` interface to `WithThemeWrappedProps`.

esm/ThemeContext.js

 import React from 'react';
-export default React.createContext({
-  changeTheme: function changeTheme() {},
-  theme: {},
-  themeName: 'default'
-});
+export default React.createContext('');

esm/ThemeProvider.js

@@ -22,22 +22,6 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-    _defineProperty(_assertThisInitialized(_this), "ctx", void 0);
-
     _defineProperty(_assertThisInitialized(_this), "state", {
-      themeName: _this.props.aesthetic.options.theme
+      themeName: _this.props.name || _this.props.aesthetic.options.theme
     });
 
-    _defineProperty(_assertThisInitialized(_this), "changeTheme", function (themeName) {
-      var aesthetic = _this.props.aesthetic;
-      aesthetic.changeTheme(themeName);
-      _this.ctx = {
-        changeTheme: _this.changeTheme,
-        theme: aesthetic.getTheme(themeName),
-        themeName: themeName
-      };
-
-      _this.setState({
-        themeName: themeName
-      });
-    });
-
     return _this;
@@ -48,15 +32,16 @@ }
 
-  _proto.componentDidMount = function componentDidMount() {
-    var name = this.props.name;
-
-    if (name && name !== this.state.themeName) {
-      this.changeTheme(name);
-    }
-  };
-
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var name = this.props.name;
+    var _this$props = this.props,
+        aesthetic = _this$props.aesthetic,
+        name = _this$props.name,
+        propagate = _this$props.propagate;
 
     if (name && name !== prevProps.name) {
-      this.changeTheme(name);
+      if (propagate) {
+        aesthetic.changeTheme(name);
+      }
+
+      this.setState({
+        themeName: name
+      });
     }
@@ -66,12 +51,4 @@ };
   _proto.render = function render() {
-    if (!this.ctx) {
-      this.ctx = {
-        changeTheme: this.changeTheme,
-        theme: this.props.aesthetic.getTheme(this.state.themeName),
-        themeName: this.state.themeName
-      };
-    }
-
     return React.createElement(ThemeContext.Provider, {
-      value: this.ctx
+      value: this.state.themeName
     }, this.props.children);
@@ -78,0 +55,0 @@ };

esm/useStylesFactory.js

@@ -6,14 +6,14 @@ import React, { useContext, useState, useLayoutEffect } from 'react';
 export default function useStylesFactory(aesthetic) {
-  return function useStyles(styleSheet, customName) {
-    if (customName === void 0) {
-      customName = 'Component';
+  return function useStyles(styleSheet, options) {
+    if (options === void 0) {
+      options = {};
     }
 
+    var _options = options,
+        customName = _options.styleName;
     var dir = useContext(DirectionContext);
+    var themeName = useContext(ThemeContext);
 
-    var _useContext = useContext(ThemeContext),
-        themeName = _useContext.themeName;
-
     var _useState = useState(function () {
-      var name = customName + "-" + uuid();
+      var name = customName || "Component-" + uuid();
       aesthetic.registerStyleSheet(name, styleSheet);
@@ -24,3 +24,3 @@ return name;
 
-    var options = {
+    var params = {
       dir: dir,
@@ -30,3 +30,3 @@ name: styleName,
     };
-    var sheet = aesthetic.createStyleSheet(styleName, options);
+    var sheet = aesthetic.createStyleSheet(styleName, params);
     useLayoutEffect(function () {
@@ -41,3 +41,3 @@ aesthetic.flushStyles(styleName);
 
-      return aesthetic.transformStyles(styles, options);
+      return aesthetic.transformStyles(styles, params);
     };
@@ -44,0 +44,0 @@

esm/useThemeFactory.js

@@ -5,7 +5,5 @@ import React, { useContext } from 'react';
   return function useTheme() {
-    var _useContext = useContext(ThemeContext),
-        themeName = _useContext.themeName;
-
+    var themeName = useContext(ThemeContext);
     return aesthetic.getTheme(themeName);
   };
 }

esm/withStylesFactory.js

@@ -5,14 +5,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import React from 'react';
+import React, { useContext } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import uuid from 'uuid/v4';
-import DirectionContext from './DirectionContext';
+import useStylesFactory from './useStylesFactory';
 import ThemeContext from './ThemeContext';
 export default function withStylesFactory(aesthetic) {
+  var useStyles = useStylesFactory(aesthetic);
   return function withStyles(styleSheet, options) {
@@ -32,4 +27,2 @@ if (options === void 0) {
         passThemeProp = _options$passThemePro === void 0 ? aesthetic.options.passThemeProp : _options$passThemePro,
-        _options$pure = _options.pure,
-        pure = _options$pure === void 0 ? aesthetic.options.pure : _options$pure,
         _options$stylesPropNa = _options.stylesPropName,
@@ -42,142 +35,51 @@ stylesPropName = _options$stylesPropNa === void 0 ? aesthetic.options.stylesPropName : _options$stylesPropNa,
       var styleName = baseName + "-" + uuid();
-      var Component = pure ? React.PureComponent : React.Component;
       aesthetic.registerStyleSheet(styleName, styleSheet, extendFrom);
 
-      var WithStyles = function (_Component) {
-        _inheritsLoose(WithStyles, _Component);
+      function WithStyles(_ref) {
+        var _extraProps;
 
-        function WithStyles(props) {
-          var _this;
+        var wrappedRef = _ref.wrappedRef,
+            props = _objectWithoutPropertiesLoose(_ref, ["wrappedRef"]);
 
-          _this = _Component.call(this, props) || this;
+        var themeName = useContext(ThemeContext);
 
-          _defineProperty(_assertThisInitialized(_this), "createStyleSheet", function (mount) {
-            if (mount === void 0) {
-              mount = false;
-            }
+        var _useStyles = useStyles(styleSheet, {
+          styleName: styleName
+        }),
+            styles = _useStyles[0],
+            cx = _useStyles[1];
 
-            var _this$props = _this.props,
-                dir = _this$props.dir,
-                themeName = _this$props.themeName;
-            var opts = {
-              dir: dir,
-              name: styleName,
-              theme: themeName
-            };
-            var state = {
-              options: opts,
-              styles: aesthetic.createStyleSheet(styleName, opts)
-            };
+        var extraProps = (_extraProps = {}, _extraProps[cxPropName] = cx, _extraProps[stylesPropName] = styles, _extraProps.ref = wrappedRef, _extraProps);
 
-            if (mount) {
-              return state;
-            }
+        if (passThemeProp) {
+          extraProps[themePropName] = aesthetic.getTheme(themeName);
+        }
 
-            _this.setState(state, function () {
-              aesthetic.flushStyles(styleName);
-            });
+        return React.createElement(WrappedComponent, _extends({}, props, extraProps));
+      }
 
-            return state;
-          });
+      hoistNonReactStatics(WithStyles, WrappedComponent);
+      WithStyles.displayName = "withStyles(" + baseName + ")";
+      WithStyles.styleName = styleName;
+      WithStyles.WrappedComponent = WrappedComponent;
 
-          _defineProperty(_assertThisInitialized(_this), "transformStyles", function () {
-            for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-              styles[_key] = arguments[_key];
-            }
-
-            return aesthetic.transformStyles(styles, _this.state.options);
-          });
-
-          _this.state = _this.createStyleSheet(true);
-          return _this;
+      WithStyles.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
+        if (extendOptions === void 0) {
+          extendOptions = {};
         }
 
-        var _proto = WithStyles.prototype;
-
-        _proto.componentDidMount = function componentDidMount() {
-          aesthetic.flushStyles(styleName);
-        };
-
-        _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-          var _this$props2 = this.props,
-              dir = _this$props2.dir,
-              themeName = _this$props2.themeName;
-
-          if (dir !== prevProps.dir || themeName !== prevProps.themeName) {
-            this.createStyleSheet();
+        if ("production" !== process.env.NODE_ENV) {
+          if (!extendable) {
+            throw new Error(baseName + " is not extendable.");
           }
-        };
-
-        _proto.render = function render() {
-          var _extraProps;
-
-          var _this$props3 = this.props,
-              dir = _this$props3.dir,
-              themeName = _this$props3.themeName,
-              wrappedRef = _this$props3.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props3, ["dir", "themeName", "wrappedRef"]);
-
-          var extraProps = (_extraProps = {}, _extraProps[cxPropName] = this.transformStyles, _extraProps[stylesPropName] = this.state.styles, _extraProps.ref = wrappedRef, _extraProps);
-
-          if (passThemeProp) {
-            extraProps[themePropName] = aesthetic.getTheme(themeName);
-          }
-
-          return React.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithStyles;
-      }(Component);
-
-      var WithStylesConsumer = function (_React$Component) {
-        _inheritsLoose(WithStylesConsumer, _React$Component);
-
-        function WithStylesConsumer() {
-          return _React$Component.apply(this, arguments) || this;
         }
 
-        WithStylesConsumer.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
-          if (extendOptions === void 0) {
-            extendOptions = {};
-          }
+        return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
+          extendFrom: styleName
+        }))(WrappedComponent);
+      };
 
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(baseName + " is not extendable.");
-            }
-          }
-
-          return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(WrappedComponent);
-        };
-
-        var _proto2 = WithStylesConsumer.prototype;
-
-        _proto2.render = function render() {
-          var _this2 = this;
-
-          return React.createElement(ThemeContext.Consumer, null, function (theme) {
-            return React.createElement(DirectionContext.Consumer, null, function (dir) {
-              return React.createElement(WithStyles, _extends({}, _this2.props, {
-                dir: dir,
-                themeName: theme.themeName
-              }));
-            });
-          });
-        };
-
-        return WithStylesConsumer;
-      }(React.Component);
-
-      _defineProperty(WithStylesConsumer, "displayName", "withStyles(" + baseName + ")");
-
-      _defineProperty(WithStylesConsumer, "styleName", styleName);
-
-      _defineProperty(WithStylesConsumer, "WrappedComponent", WrappedComponent);
-
-      hoistNonReactStatics(WithStylesConsumer, WrappedComponent);
-      return WithStylesConsumer;
+      return WithStyles;
     };
   };
 }

esm/withThemeFactory.js

@@ -1,3 +0,1 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -7,5 +5,3 @@
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-import React from 'react';
+import React, { useContext } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -20,4 +16,2 @@ import ThemeContext from './ThemeContext';
     var _options = options,
-        _options$pure = _options.pure,
-        pure = _options$pure === void 0 ? aesthetic.options.pure : _options$pure,
         _options$themePropNam = _options.themePropName,
@@ -27,58 +21,20 @@ themePropName = _options$themePropNam === void 0 ? aesthetic.options.themePropName : _options$themePropNam;
       var baseName = WrappedComponent.displayName || WrappedComponent.name;
-      var Component = pure ? React.PureComponent : React.Component;
 
-      var WithTheme = function (_Component) {
-        _inheritsLoose(WithTheme, _Component);
+      function WithTheme(_ref) {
+        var _extraProps;
 
-        function WithTheme() {
-          return _Component.apply(this, arguments) || this;
-        }
+        var wrappedRef = _ref.wrappedRef,
+            props = _objectWithoutPropertiesLoose(_ref, ["wrappedRef"]);
 
-        var _proto = WithTheme.prototype;
+        var themeName = useContext(ThemeContext);
+        var extraProps = (_extraProps = {}, _extraProps[themePropName] = aesthetic.getTheme(themeName), _extraProps.ref = wrappedRef, _extraProps);
+        return React.createElement(WrappedComponent, _extends({}, props, extraProps));
+      }
 
-        _proto.render = function render() {
-          var _extraProps;
-
-          var _this$props = this.props,
-              themeName = _this$props.themeName,
-              wrappedRef = _this$props.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props, ["themeName", "wrappedRef"]);
-
-          var extraProps = (_extraProps = {}, _extraProps[themePropName] = aesthetic.getTheme(themeName), _extraProps.ref = wrappedRef, _extraProps);
-          return React.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithTheme;
-      }(Component);
-
-      var WithThemeConsumer = function (_React$Component) {
-        _inheritsLoose(WithThemeConsumer, _React$Component);
-
-        function WithThemeConsumer() {
-          return _React$Component.apply(this, arguments) || this;
-        }
-
-        var _proto2 = WithThemeConsumer.prototype;
-
-        _proto2.render = function render() {
-          var _this = this;
-
-          return React.createElement(ThemeContext.Consumer, null, function (theme) {
-            return React.createElement(WithTheme, _extends({}, _this.props, {
-              themeName: theme.themeName
-            }));
-          });
-        };
-
-        return WithThemeConsumer;
-      }(React.Component);
-
-      _defineProperty(WithThemeConsumer, "displayName", "withTheme(" + baseName + ")");
-
-      _defineProperty(WithThemeConsumer, "WrappedComponent", WrappedComponent);
-
-      hoistNonReactStatics(WithThemeConsumer, WrappedComponent);
-      return WithThemeConsumer;
+      hoistNonReactStatics(WithTheme, WrappedComponent);
+      WithTheme.displayName = "withTheme(" + baseName + ")";
+      WithTheme.WrappedComponent = WrappedComponent;
+      return WithTheme;
     };
   };
 }

lib/ThemeContext.d.ts

 import React from 'react';
-import { ThemeContextShape } from './types';
-declare const _default: React.Context<ThemeContextShape>;
+declare const _default: React.Context<string>;
 export default _default;
 //# sourceMappingURL=ThemeContext.d.ts.map

lib/ThemeContext.js

@@ -10,8 +10,4 @@ "use strict";
 
-var _default = _react.default.createContext({
-  changeTheme: function changeTheme() {},
-  theme: {},
-  themeName: 'default'
-});
+var _default = _react.default.createContext('');
 
 exports.default = _default;

lib/ThemeProvider.d.ts

 import React from 'react';
-import { ThemeContextShape, ThemeProviderProps, ThemeProviderState } from './types';
+import { ThemeProviderProps, ThemeProviderState } from './types';
 export default class ThemeProvider extends React.PureComponent<ThemeProviderProps, ThemeProviderState> {
-    ctx?: ThemeContextShape;
     state: {
         themeName: string;
     };
-    componentDidMount(): void;
     componentDidUpdate(prevProps: ThemeProviderProps): void;
-    changeTheme: (themeName: string) => void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=ThemeProvider.d.ts.map

lib/ThemeProvider.js

@@ -30,22 +30,6 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "ctx", void 0);
-
     _defineProperty(_assertThisInitialized(_this), "state", {
-      themeName: _this.props.aesthetic.options.theme
+      themeName: _this.props.name || _this.props.aesthetic.options.theme
     });
 
-    _defineProperty(_assertThisInitialized(_this), "changeTheme", function (themeName) {
-      var aesthetic = _this.props.aesthetic;
-      aesthetic.changeTheme(themeName);
-      _this.ctx = {
-        changeTheme: _this.changeTheme,
-        theme: aesthetic.getTheme(themeName),
-        themeName: themeName
-      };
-
-      _this.setState({
-        themeName: themeName
-      });
-    });
-
     return _this;
@@ -56,15 +40,16 @@ }
 
-  _proto.componentDidMount = function componentDidMount() {
-    var name = this.props.name;
-
-    if (name && name !== this.state.themeName) {
-      this.changeTheme(name);
-    }
-  };
-
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var name = this.props.name;
+    var _this$props = this.props,
+        aesthetic = _this$props.aesthetic,
+        name = _this$props.name,
+        propagate = _this$props.propagate;
 
     if (name && name !== prevProps.name) {
-      this.changeTheme(name);
+      if (propagate) {
+        aesthetic.changeTheme(name);
+      }
+
+      this.setState({
+        themeName: name
+      });
     }
@@ -74,12 +59,4 @@ };
   _proto.render = function render() {
-    if (!this.ctx) {
-      this.ctx = {
-        changeTheme: this.changeTheme,
-        theme: this.props.aesthetic.getTheme(this.state.themeName),
-        themeName: this.state.themeName
-      };
-    }
-
     return _react.default.createElement(_ThemeContext.default.Provider, {
-      value: this.ctx
+      value: this.state.themeName
     }, this.props.children);
@@ -86,0 +63,0 @@ };

lib/types.d.ts

 import React from 'react';
-import Aesthetic, { ClassNameTransformer, Direction, SheetMap, StyleName, StyleSheetDefinition, ThemeName, TransformOptions } from 'aesthetic';
+import Aesthetic, { ClassNameTransformer, Direction, SheetMap, StyleName, StyleSheetDefinition, ThemeName } from 'aesthetic';
 import { Omit } from 'utility-types';
@@ -11,7 +11,2 @@ export interface DirectionProviderProps {
 }
-export interface ThemeContextShape {
-    changeTheme: (theme: ThemeName) => void;
-    theme: unknown;
-    themeName: ThemeName;
-}
 export interface ThemeProviderProps {
@@ -21,2 +16,3 @@ aesthetic: Aesthetic<any, any, any>;
     name?: ThemeName;
+    propagate?: boolean;
 }
@@ -26,4 +22,5 @@ export interface ThemeProviderState {
 }
-export interface WithThemeContextProps {
-    themeName: ThemeName;
+export interface UseStylesOptions {
+    /** Custom name for the component being styled. */
+    styleName?: string;
 }
@@ -41,11 +38,5 @@ export interface WithThemeWrapperProps {
 export interface WithThemeOptions {
-    /** Render a pure component instead of a regular component. Provided by `withTheme`. */
-    pure?: boolean;
     /** Name of the prop in which to pass the theme object to the wrapped component. Provided by `withTheme`. */
     themePropName?: string;
 }
-export interface WithStylesContextProps {
-    dir: Direction;
-    themeName: ThemeName;
-}
 export interface WithStylesWrapperProps {
@@ -65,6 +56,2 @@ /** Gain a reference to the wrapped component. Provided by `withStyles`. */
 }
-export interface WithStylesState<ParsedBlock> {
-    options: TransformOptions;
-    styles: SheetMap<ParsedBlock>;
-}
 export interface WithStylesOptions {
@@ -79,4 +66,2 @@ /** Name of the prop in which to pass the CSS class name transformer function. Provided by `withStyles`. */
     passThemeProp?: boolean;
-    /** Render a pure component instead of a regular component. Provided by `withStyles`. */
-    pure?: boolean;
     /** Name of the prop in which to pass styles to the wrapped component. Provided by `withStyles`. */
@@ -87,3 +72,3 @@ stylesPropName?: string;
 }
-export interface StyledComponentClass<Theme, Props> extends React.ComponentClass<Props> {
+export interface StyledComponentClass<Theme, Props> extends React.FunctionComponent<Props> {
     displayName: string;
@@ -90,0 +75,0 @@ styleName: StyleName;

lib/useStylesFactory.d.ts

 import Aesthetic, { ClassNameTransformer, StyleSheetDefinition, SheetMap } from 'aesthetic';
+import { UseStylesOptions } from './types';
 /**
  * Hook within a component to provide a style sheet.
  */
-export default function useStylesFactory<Theme extends object, NativeBlock extends object, ParsedBlock extends object | string = NativeBlock>(aesthetic: Aesthetic<Theme, NativeBlock, ParsedBlock>): <T>(styleSheet: StyleSheetDefinition<Theme, T>, customName?: string) => [SheetMap<ParsedBlock>, ClassNameTransformer<NativeBlock, ParsedBlock>, string];
+export default function useStylesFactory<Theme extends object, NativeBlock extends object, ParsedBlock extends object | string = NativeBlock>(aesthetic: Aesthetic<Theme, NativeBlock, ParsedBlock>): <T>(styleSheet: StyleSheetDefinition<Theme, T>, options?: UseStylesOptions) => [SheetMap<ParsedBlock>, ClassNameTransformer<NativeBlock, ParsedBlock>, string];
 //# sourceMappingURL=useStylesFactory.d.ts.map

lib/useStylesFactory.js

@@ -19,14 +19,14 @@ "use strict";
 function useStylesFactory(aesthetic) {
-  return function useStyles(styleSheet, customName) {
-    if (customName === void 0) {
-      customName = 'Component';
+  return function useStyles(styleSheet, options) {
+    if (options === void 0) {
+      options = {};
     }
 
+    var _options = options,
+        customName = _options.styleName;
     var dir = (0, _react.useContext)(_DirectionContext.default);
+    var themeName = (0, _react.useContext)(_ThemeContext.default);
 
-    var _useContext = (0, _react.useContext)(_ThemeContext.default),
-        themeName = _useContext.themeName;
-
     var _useState = (0, _react.useState)(function () {
-      var name = customName + "-" + (0, _v.default)();
+      var name = customName || "Component-" + (0, _v.default)();
       aesthetic.registerStyleSheet(name, styleSheet);
@@ -37,3 +37,3 @@ return name;
 
-    var options = {
+    var params = {
       dir: dir,
@@ -43,3 +43,3 @@ name: styleName,
     };
-    var sheet = aesthetic.createStyleSheet(styleName, options);
+    var sheet = aesthetic.createStyleSheet(styleName, params);
     (0, _react.useLayoutEffect)(function () {
@@ -54,3 +54,3 @@ aesthetic.flushStyles(styleName);
 
-      return aesthetic.transformStyles(styles, options);
+      return aesthetic.transformStyles(styles, params);
     };
@@ -57,0 +57,0 @@

lib/useThemeFactory.js

@@ -16,7 +16,5 @@ "use strict";
   return function useTheme() {
-    var _useContext = (0, _react.useContext)(_ThemeContext.default),
-        themeName = _useContext.themeName;
-
+    var themeName = (0, _react.useContext)(_ThemeContext.default);
     return aesthetic.getTheme(themeName);
   };
 }

lib/withStylesFactory.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -13,3 +13,3 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
-var _DirectionContext = _interopRequireDefault(require("./DirectionContext"));
+var _useStylesFactory = _interopRequireDefault(require("./useStylesFactory"));
 
@@ -20,2 +20,4 @@ var _ThemeContext = _interopRequireDefault(require("./ThemeContext"));
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -25,9 +27,4 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function withStylesFactory(aesthetic) {
+  var useStyles = (0, _useStylesFactory.default)(aesthetic);
   return function withStyles(styleSheet, options) {
@@ -47,4 +44,2 @@ if (options === void 0) {
         passThemeProp = _options$passThemePro === void 0 ? aesthetic.options.passThemeProp : _options$passThemePro,
-        _options$pure = _options.pure,
-        pure = _options$pure === void 0 ? aesthetic.options.pure : _options$pure,
         _options$stylesPropNa = _options.stylesPropName,
@@ -57,142 +52,51 @@ stylesPropName = _options$stylesPropNa === void 0 ? aesthetic.options.stylesPropName : _options$stylesPropNa,
       var styleName = baseName + "-" + (0, _v.default)();
-      var Component = pure ? _react.default.PureComponent : _react.default.Component;
       aesthetic.registerStyleSheet(styleName, styleSheet, extendFrom);
 
-      var WithStyles = function (_Component) {
-        _inheritsLoose(WithStyles, _Component);
+      function WithStyles(_ref) {
+        var _extraProps;
 
-        function WithStyles(props) {
-          var _this;
+        var wrappedRef = _ref.wrappedRef,
+            props = _objectWithoutPropertiesLoose(_ref, ["wrappedRef"]);
 
-          _this = _Component.call(this, props) || this;
+        var themeName = (0, _react.useContext)(_ThemeContext.default);
 
-          _defineProperty(_assertThisInitialized(_this), "createStyleSheet", function (mount) {
-            if (mount === void 0) {
-              mount = false;
-            }
+        var _useStyles = useStyles(styleSheet, {
+          styleName: styleName
+        }),
+            styles = _useStyles[0],
+            cx = _useStyles[1];
 
-            var _this$props = _this.props,
-                dir = _this$props.dir,
-                themeName = _this$props.themeName;
-            var opts = {
-              dir: dir,
-              name: styleName,
-              theme: themeName
-            };
-            var state = {
-              options: opts,
-              styles: aesthetic.createStyleSheet(styleName, opts)
-            };
+        var extraProps = (_extraProps = {}, _extraProps[cxPropName] = cx, _extraProps[stylesPropName] = styles, _extraProps.ref = wrappedRef, _extraProps);
 
-            if (mount) {
-              return state;
-            }
+        if (passThemeProp) {
+          extraProps[themePropName] = aesthetic.getTheme(themeName);
+        }
 
-            _this.setState(state, function () {
-              aesthetic.flushStyles(styleName);
-            });
+        return _react.default.createElement(WrappedComponent, _extends({}, props, extraProps));
+      }
 
-            return state;
-          });
+      (0, _hoistNonReactStatics.default)(WithStyles, WrappedComponent);
+      WithStyles.displayName = "withStyles(" + baseName + ")";
+      WithStyles.styleName = styleName;
+      WithStyles.WrappedComponent = WrappedComponent;
 
-          _defineProperty(_assertThisInitialized(_this), "transformStyles", function () {
-            for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-              styles[_key] = arguments[_key];
-            }
-
-            return aesthetic.transformStyles(styles, _this.state.options);
-          });
-
-          _this.state = _this.createStyleSheet(true);
-          return _this;
+      WithStyles.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
+        if (extendOptions === void 0) {
+          extendOptions = {};
         }
 
-        var _proto = WithStyles.prototype;
-
-        _proto.componentDidMount = function componentDidMount() {
-          aesthetic.flushStyles(styleName);
-        };
-
-        _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-          var _this$props2 = this.props,
-              dir = _this$props2.dir,
-              themeName = _this$props2.themeName;
-
-          if (dir !== prevProps.dir || themeName !== prevProps.themeName) {
-            this.createStyleSheet();
+        if ("production" !== process.env.NODE_ENV) {
+          if (!extendable) {
+            throw new Error(baseName + " is not extendable.");
           }
-        };
-
-        _proto.render = function render() {
-          var _extraProps;
-
-          var _this$props3 = this.props,
-              dir = _this$props3.dir,
-              themeName = _this$props3.themeName,
-              wrappedRef = _this$props3.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props3, ["dir", "themeName", "wrappedRef"]);
-
-          var extraProps = (_extraProps = {}, _extraProps[cxPropName] = this.transformStyles, _extraProps[stylesPropName] = this.state.styles, _extraProps.ref = wrappedRef, _extraProps);
-
-          if (passThemeProp) {
-            extraProps[themePropName] = aesthetic.getTheme(themeName);
-          }
-
-          return _react.default.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithStyles;
-      }(Component);
-
-      var WithStylesConsumer = function (_React$Component) {
-        _inheritsLoose(WithStylesConsumer, _React$Component);
-
-        function WithStylesConsumer() {
-          return _React$Component.apply(this, arguments) || this;
         }
 
-        WithStylesConsumer.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
-          if (extendOptions === void 0) {
-            extendOptions = {};
-          }
+        return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
+          extendFrom: styleName
+        }))(WrappedComponent);
+      };
 
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(baseName + " is not extendable.");
-            }
-          }
-
-          return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(WrappedComponent);
-        };
-
-        var _proto2 = WithStylesConsumer.prototype;
-
-        _proto2.render = function render() {
-          var _this2 = this;
-
-          return _react.default.createElement(_ThemeContext.default.Consumer, null, function (theme) {
-            return _react.default.createElement(_DirectionContext.default.Consumer, null, function (dir) {
-              return _react.default.createElement(WithStyles, _extends({}, _this2.props, {
-                dir: dir,
-                themeName: theme.themeName
-              }));
-            });
-          });
-        };
-
-        return WithStylesConsumer;
-      }(_react.default.Component);
-
-      _defineProperty(WithStylesConsumer, "displayName", "withStyles(" + baseName + ")");
-
-      _defineProperty(WithStylesConsumer, "styleName", styleName);
-
-      _defineProperty(WithStylesConsumer, "WrappedComponent", WrappedComponent);
-
-      (0, _hoistNonReactStatics.default)(WithStylesConsumer, WrappedComponent);
-      return WithStylesConsumer;
+      return WithStyles;
     };
   };
 }

lib/withThemeFactory.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
  */
-export default function withThemeFactory<Theme extends object, NativeBlock extends object, ParsedBlock extends object | string = NativeBlock>(aesthetic: Aesthetic<Theme, NativeBlock, ParsedBlock>): (options?: WithThemeOptions) => <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithThemeWrappedProps<Theme>>) => React.ComponentClass<Props & WithThemeWrapperProps, any>;
+export default function withThemeFactory<Theme extends object, NativeBlock extends object, ParsedBlock extends object | string = NativeBlock>(aesthetic: Aesthetic<Theme, NativeBlock, ParsedBlock>): (options?: WithThemeOptions) => <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithThemeWrappedProps<Theme>>) => React.FunctionComponent<Props & WithThemeWrapperProps>;
 //# sourceMappingURL=withThemeFactory.d.ts.map

lib/withThemeFactory.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -15,3 +15,3 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -22,4 +22,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
 function withThemeFactory(aesthetic) {
@@ -32,4 +30,2 @@ return function withTheme(options) {
     var _options = options,
-        _options$pure = _options.pure,
-        pure = _options$pure === void 0 ? aesthetic.options.pure : _options$pure,
         _options$themePropNam = _options.themePropName,
@@ -39,58 +35,20 @@ themePropName = _options$themePropNam === void 0 ? aesthetic.options.themePropName : _options$themePropNam;
       var baseName = WrappedComponent.displayName || WrappedComponent.name;
-      var Component = pure ? _react.default.PureComponent : _react.default.Component;
 
-      var WithTheme = function (_Component) {
-        _inheritsLoose(WithTheme, _Component);
+      function WithTheme(_ref) {
+        var _extraProps;
 
-        function WithTheme() {
-          return _Component.apply(this, arguments) || this;
-        }
+        var wrappedRef = _ref.wrappedRef,
+            props = _objectWithoutPropertiesLoose(_ref, ["wrappedRef"]);
 
-        var _proto = WithTheme.prototype;
+        var themeName = (0, _react.useContext)(_ThemeContext.default);
+        var extraProps = (_extraProps = {}, _extraProps[themePropName] = aesthetic.getTheme(themeName), _extraProps.ref = wrappedRef, _extraProps);
+        return _react.default.createElement(WrappedComponent, _extends({}, props, extraProps));
+      }
 
-        _proto.render = function render() {
-          var _extraProps;
-
-          var _this$props = this.props,
-              themeName = _this$props.themeName,
-              wrappedRef = _this$props.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props, ["themeName", "wrappedRef"]);
-
-          var extraProps = (_extraProps = {}, _extraProps[themePropName] = aesthetic.getTheme(themeName), _extraProps.ref = wrappedRef, _extraProps);
-          return _react.default.createElement(WrappedComponent, _extends({}, props, extraProps));
-        };
-
-        return WithTheme;
-      }(Component);
-
-      var WithThemeConsumer = function (_React$Component) {
-        _inheritsLoose(WithThemeConsumer, _React$Component);
-
-        function WithThemeConsumer() {
-          return _React$Component.apply(this, arguments) || this;
-        }
-
-        var _proto2 = WithThemeConsumer.prototype;
-
-        _proto2.render = function render() {
-          var _this = this;
-
-          return _react.default.createElement(_ThemeContext.default.Consumer, null, function (theme) {
-            return _react.default.createElement(WithTheme, _extends({}, _this.props, {
-              themeName: theme.themeName
-            }));
-          });
-        };
-
-        return WithThemeConsumer;
-      }(_react.default.Component);
-
-      _defineProperty(WithThemeConsumer, "displayName", "withTheme(" + baseName + ")");
-
-      _defineProperty(WithThemeConsumer, "WrappedComponent", WrappedComponent);
-
-      (0, _hoistNonReactStatics.default)(WithThemeConsumer, WrappedComponent);
-      return WithThemeConsumer;
+      (0, _hoistNonReactStatics.default)(WithTheme, WrappedComponent);
+      WithTheme.displayName = "withTheme(" + baseName + ")";
+      WithTheme.WrappedComponent = WrappedComponent;
+      return WithTheme;
     };
   };
 }

package.json

 {
   "name": "aesthetic-react",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-rc.0",
   "description": "React hooks, composers, and more for styling components with Aesthetic.",
@@ -24,3 +24,3 @@ "keywords": [
     "@types/react": "*",
-    "aesthetic-utils": "^2.0.0-alpha.6",
+    "aesthetic-utils": "^2.0.0-rc.0",
     "direction": "^1.0.3",
@@ -33,3 +33,3 @@ "hoist-non-react-statics": "^3.3.0",
   "peerDependencies": {
-    "aesthetic": "^3.0.0",
+    "aesthetic": "^4.0.0-alpha.0",
     "react": "^16.6.0"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "8a8e92b75a056555209a0690098d0fa855fd1cf3"
+  "gitHead": "fffc4bd0af4e34bc4efceb1d39f2a3dbf3b58545"
 }

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

43957

decreased by-21.73%

Lines of code

631

decreased by-29.5%

Dependency changes

• + Added@babel/runtime@7.25.6(transitive)

• + Addedaesthetic@4.1.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedrtl-css-js@1.16.1(transitive)

• - Removed@types/extend@3.0.4(transitive)

• - Removed@types/hoist-non-react-statics@3.3.5(transitive)

• - Removed@types/react@16.14.61(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removed@types/uuid@3.4.13(transitive)

• - Removedaesthetic@3.5.1(transitive)

• Updatedaesthetic-utils@^2.0.0-rc.0