aesthetic - npm Package Compare versions

Comparing version 3.0.0-alpha.5 to 3.0.0-rc.0

CHANGELOG.md

@@ -36,3 +36,3 @@ # 3.0.0
 - Updated `Aesthetic#registerTheme` and `Aesthetic#extendTheme` global styles to require a
-  definition function that returns an object, or null.
+  definition function that returns an object.
 - Moved `Aesthetic#constructor` options to the 1st argument.
@@ -55,3 +55,3 @@ - Moved `Aesthetic#extendTheme` theme name to 1st argument, and parent theme name to 2nd argument
     `fontFamily`.
-- Dropped support for local at-rules being definef within a global stylesheet (via theme global
+- Dropped support for local at-rules being defined within a global stylesheet (via theme global
   styles). This includes `@fallbacks`, `@media`, `@supports`, and `@selectors`.
@@ -65,4 +65,4 @@ - Child combinators (`> li`), advanced pseudos (`:not(:nth-child(n))`), and advanced attributes
 
-- Added new `Aesthetic` option `theme` to denote the currently active theme.
-- Updated `withStyles` to use `getDerivedStateFromProps` for better performance.
+- Added `Aesthetic` option `theme` to denote the currently active theme.
+- Added `Aesthetic#withTheme` HOC factory to gain access to the active theme object.
 - DOM styles are now flushed on mount to properly support server-side rendering.
@@ -69,0 +69,0 @@ - Global styles now have access to the current theme object.

lib/Aesthetic.d.ts

@@ -7,3 +7,3 @@ /**
 import UnifiedSyntax from './UnifiedSyntax';
-import { ClassName, StyleName, ThemeName, StyleSheet, StyleSheetDefinition, SheetMap, StyledComponentClass, WithStylesOptions, WithStylesProps, WithStylesWrapperProps, GlobalSheetDefinition } from './types';
+import { ClassName, GlobalSheetDefinition, SheetMap, StyledComponentClass, StyleName, StyleSheet, StyleSheetDefinition, ThemeName, WithStylesOptions, WithStylesProps, WithStylesWrapperProps, WithThemeOptions, WithThemeProps, WithThemeWrapperProps } from './types';
 export interface AestheticOptions {
@@ -22,3 +22,3 @@ extendable: boolean;
     globals: {
-        [themeName: string]: GlobalSheetDefinition<Theme>;
+        [themeName: string]: GlobalSheetDefinition<Theme, any>;
     };
@@ -30,3 +30,3 @@ options: AestheticOptions;
     styles: {
-        [styleName: string]: StyleSheetDefinition<Theme>;
+        [styleName: string]: StyleSheetDefinition<Theme, any>;
     };
@@ -51,3 +51,3 @@ syntax: UnifiedSyntax<NativeBlock>;
      */
-    extendTheme(themeName: ThemeName, parentThemeName: ThemeName, theme: Partial<Theme>, globalSheet?: GlobalSheetDefinition<Theme>): this;
+    extendTheme<T>(themeName: ThemeName, parentThemeName: ThemeName, theme: Partial<Theme>, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
     /**
@@ -73,7 +73,7 @@ * Flush parsed styles and inject them into the DOM.
      */
-    registerTheme(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme>): this;
+    registerTheme<T>(themeName: ThemeName, theme: Theme, globalSheet?: GlobalSheetDefinition<Theme, T>): this;
     /**
      * Set multiple style declarations for a component.
      */
-    setStyles(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme>, extendFrom?: StyleName): this;
+    setStyles(styleName: StyleName, styleSheet: StyleSheetDefinition<Theme, any>, extendFrom?: StyleName): this;
     /**
@@ -88,7 +88,10 @@ * Transform the list of style declarations to a list of class name.
     /**
-     * Wrap a React component with an HOC that handles the entire styling, converting,
-     * and transforming process.
+     * Wrap a React component with an HOC that injects the defined stylesheet as a prop.
      */
-    withStyles(styleSheet: StyleSheetDefinition<Theme>, options?: WithStylesOptions): <Props extends object>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
+    withStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, options?: WithStylesOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponentClass<Theme, Props & WithStylesWrapperProps>;
+    /**
+     * Wrap a React component with an HOC that injects the current theme object as a prop.
+     */
+    withTheme(options?: WithThemeOptions): <Props extends object = {}>(WrappedComponent: React.ComponentType<Props & WithThemeProps<Theme>>) => React.ComponentClass<Props & WithThemeWrapperProps, any>;
     private validateDefinition;
 }

lib/Aesthetic.js

@@ -43,2 +43,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable max-classes-per-file, react/no-multi-comp */
 var react_1 = __importDefault(require("react"));
@@ -60,3 +61,3 @@ var v4_1 = __importDefault(require("uuid/v4"));
         this.appliedGlobals = false;
-        this.options = __assign({ extendable: false, passThemeProp: true, pure: true, stylesPropName: 'styles', theme: 'default', themePropName: 'theme' }, options);
+        this.options = __assign({ extendable: false, passThemeProp: false, pure: true, stylesPropName: 'styles', theme: 'default', themePropName: 'theme' }, options);
         this.syntax = new UnifiedSyntax_1.default();
@@ -111,3 +112,3 @@ }
         var styleDef = this.styles[styleName];
-        var styleSheet = styleDef ? styleDef(this.getTheme()) : {};
+        var styleSheet = styleDef(this.getTheme());
         // Merge from parent
@@ -162,3 +163,2 @@ if (parentStyleName) {
         if (extendFrom === void 0) { extendFrom = ''; }
-        this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
         if (extendFrom) {
@@ -175,2 +175,3 @@ if (process.env.NODE_ENV !== 'production') {
         }
+        this.styles[styleName] = this.validateDefinition(styleName, styleSheet, this.styles);
         return this;
@@ -210,4 +211,3 @@ };
     /**
-     * Wrap a React component with an HOC that handles the entire styling, converting,
-     * and transforming process.
+     * Wrap a React component with an HOC that injects the defined stylesheet as a prop.
      */
@@ -256,3 +256,3 @@ Aesthetic.prototype.withStyles = function (styleSheet, options) {
                 };
-                WithStyles.displayName = "withAesthetic(" + baseName + ")";
+                WithStyles.displayName = "withStyles(" + baseName + ")";
                 WithStyles.styleName = styleName;
@@ -266,2 +266,34 @@ WithStyles.WrappedComponent = WrappedComponent;
     };
+    /**
+     * Wrap a React component with an HOC that injects the current theme object as a prop.
+     */
+    Aesthetic.prototype.withTheme = function (options) {
+        if (options === void 0) { options = {}; }
+        var aesthetic = this;
+        var _a = options.pure, pure = _a === void 0 ? this.options.pure : _a, _b = options.themePropName, themePropName = _b === void 0 ? this.options.themePropName : _b;
+        return function withThemeFactory(WrappedComponent) {
+            var baseName = WrappedComponent.displayName || WrappedComponent.name;
+            var Component = pure ? react_1.default.PureComponent : react_1.default.Component;
+            var WithTheme = /** @class */ (function (_super) {
+                __extends(WithTheme, _super);
+                function WithTheme() {
+                    return _super !== null && _super.apply(this, arguments) || this;
+                }
+                WithTheme.prototype.render = function () {
+                    var _a;
+                    var _b = this.props, wrappedRef = _b.wrappedRef, props = __rest(_b, ["wrappedRef"]);
+                    var extraProps = (_a = {},
+                        _a[themePropName] = aesthetic.getTheme(),
+                        _a.ref = wrappedRef,
+                        _a);
+                    return react_1.default.createElement(WrappedComponent, __assign({}, props, extraProps));
+                };
+                WithTheme.displayName = "withTheme(" + baseName + ")";
+                WithTheme.WrappedComponent = WrappedComponent;
+                return WithTheme;
+            }(Component));
+            hoist_non_react_statics_1.default(WithTheme, WrappedComponent);
+            return WithTheme;
+        };
+    };
     Aesthetic.prototype.validateDefinition = function (key, value, cache) {
@@ -268,0 +300,0 @@ if (process.env.NODE_ENV !== 'production') {

lib/types.d.ts

@@ -51,4 +51,10 @@ /**
 };
+export declare type ComponentBlockNeverize<T> = T extends string ? string : {
+    [K in keyof T]: K extends keyof ComponentBlock ? ComponentBlock[K] : never;
+};
 export declare type StyleSheet = SheetMap<ClassName | ComponentBlock>;
-export declare type StyleSheetDefinition<Theme> = ((theme: Theme) => StyleSheet) | null;
+export declare type StyleSheetNeverize<T> = {
+    [K in keyof T]: ComponentBlockNeverize<T[K]>;
+};
+export declare type StyleSheetDefinition<Theme, T> = (theme: Theme) => T extends any ? StyleSheet : StyleSheet & StyleSheetNeverize<T>;
 export declare type GlobalSheet = {
@@ -69,3 +75,22 @@ '@charset'?: string;
 };
-export declare type GlobalSheetDefinition<Theme> = ((theme: Theme) => GlobalSheet) | null;
+export declare type GlobalSheetNeverize<T> = {
+    [K in keyof T]: K extends keyof GlobalSheet ? GlobalSheet[K] : never;
+};
+export declare type GlobalSheetDefinition<Theme, T> = ((theme: Theme) => GlobalSheet & GlobalSheetNeverize<T>) | null;
+export interface WithThemeWrapperProps {
+    /** Gain a reference to the wrapped component. Provided by `withTheme`. */
+    wrappedRef?: React.Ref<any>;
+}
+export interface WithThemeProps<Theme> {
+    /** The ref passed through the `wrappedRef` prop. Provided by `withTheme`. */
+    ref?: React.Ref<any>;
+    /** The theme object. Provided by `withTheme`. */
+    theme: Theme;
+}
+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 WithStylesWrapperProps {
@@ -105,3 +130,3 @@ /** Gain a reference to the wrapped component. Provided by `withStyles`. */
     WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, any>>;
-    extendStyles(styleSheet: StyleSheetDefinition<Theme>, extendOptions?: Omit<WithStylesOptions, 'extendFrom'>): StyledComponentClass<Theme, Props>;
+    extendStyles<T>(styleSheet: StyleSheetDefinition<Theme, T>, extendOptions?: Omit<WithStylesOptions, 'extendFrom'>): StyledComponentClass<Theme, Props>;
 }

lib/UnifiedSyntax.d.ts

@@ -8,2 +8,3 @@ /**
 import { ComponentBlock, FontFace, GlobalSheet, Keyframes, Properties, StyleSheet } from './types';
+export declare const SELECTOR: RegExp;
 export declare type Handler = (...args: any[]) => void;
@@ -10,0 +11,0 @@ export default class UnifiedSyntax<NativeBlock extends object> {

lib/UnifiedSyntax.js

@@ -26,3 +26,3 @@ "use strict";
 var Sheet_1 = __importDefault(require("./Sheet"));
-var SELECTOR = /^((\[[a-z-]+\])|(::?[a-z-]+))$/iu;
+exports.SELECTOR = /^((\[[a-z-]+\])|(::?[a-z-]+))$/iu;
 var UnifiedSyntax = /** @class */ (function () {
@@ -316,3 +316,3 @@ function UnifiedSyntax() {
             }
-            else if ((key.includes(',') || !key.match(SELECTOR)) && !inAtRule) {
+            else if ((key.includes(',') || !key.match(exports.SELECTOR)) && !inAtRule) {
                 throw new Error("Advanced selector \"" + key + "\" must be nested within an @selectors block.");
@@ -319,0 +319,0 @@ }

package.json

 {
   "name": "aesthetic",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-rc.0",
   "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
@@ -30,8 +30,8 @@ "keywords": [
     "@types/hoist-non-react-statics": "^3.0.1",
-    "@types/react": "^16.7.18",
+    "@types/react": "^16.7.20",
     "@types/uuid": "^3.4.4",
-    "csstype": "^2.6.0",
+    "csstype": "^2.6.1",
     "extend": "^3.0.2",
     "hoist-non-react-statics": "^3.2.1",
-    "utility-types": "^3.2.1",
+    "utility-types": "^3.4.1",
     "uuid": "^3.3.2"
@@ -47,3 +47,3 @@ },
   },
-  "gitHead": "97f09056e29d37a438711bf45b754724e0185502"
+  "gitHead": "536107ce214791580e65f3f30c9e285f73fbb024"
 }

README.md

@@ -15,3 +15,3 @@ # Aesthetic
 import React from 'react';
-import withStyles, { WithStylesProps, classes } from '../path/to/aesthetic';
+import withStyles, { WithStylesProps, css } from '../path/to/aesthetic';
 
@@ -24,3 +24,3 @@ export type Props = {
   return (
-    <button type="button" className={classes(styles.button)}>
+    <button type="button" className={css(styles.button)}>
       {children}
@@ -48,4 +48,2 @@ </button>
 
-Aesthetic requires React as a peer dependency.
-
 ```
@@ -52,0 +50,0 @@ yarn add aesthetic react

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

Improved metrics

Total package byte prevSize

73771

increased by4.58%

Lines of code

1423

increased by4.48%

Worsened metrics

Number of lines in readme file

55

decreased by-3.51%

Dependency changes

• Updated@types/react@^16.7.20

• Updatedcsstype@^2.6.1

• Updatedutility-types@^3.4.1