aesthetic - npm Package Compare versions

Comparing version 3.0.0-alpha.0 to 3.0.0-alpha.1

CHANGELOG.md

@@ -20,3 +20,4 @@ # 3.0.0
   - `Adapter#transform` is now `Aesthetic#transformToClassName`.
-  - `Adapter#merge` has been removed, and now relies on `lodash` merge.
+  - `Adapter#merge` has been removed, and now relies on
+    [extend](https://github.com/justmoon/node-extend).
 - Removed the `Aesthetic` option `defaultTheme`, use `theme` option instead.
@@ -27,4 +28,6 @@ - Removed the `ThemeProvider` component, use `theme` option instead.
   - Use `Aesthetic#transformStyles` instead of `transform`.
+- Removed the `withStyles` option `styleName`. Names are now generated with a unique ID.
 - Removed `createStyleElement` helper function.
 - Removed `PropType`s exported from the index.
+- Updated the `Aesthetic` option `pure` to be enabled by default.
 - Updated `Aesthetic#registerTheme` and `Aesthetic#extendTheme` global styles to require a
@@ -31,0 +34,0 @@ definition function that returns an object, or null.

lib/Aesthetic.d.ts

@@ -78,3 +78,3 @@ /**
      */
-    transformStyles(...styles: (ClassName | NativeBlock | ParsedBlock)[]): ClassName;
+    transformStyles(...styles: (undefined | false | ClassName | NativeBlock | ParsedBlock)[]): ClassName;
     /**
@@ -88,4 +88,4 @@ * Transform the styles into CSS class names.
      */
-    withStyles<P>(styleSheet: StyleSheetDefinition<Theme, P>, options?: Partial<WithStylesOptions>): <Props extends object>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponent<Theme, Props & WithStylesWrapperProps>;
+    withStyles<P>(styleSheet: StyleSheetDefinition<Theme, P>, options?: WithStylesOptions): <Props extends object>(WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, ParsedBlock>>) => StyledComponent<Theme, Props & WithStylesWrapperProps>;
     private validateDefinition;
 }

lib/Aesthetic.js

@@ -47,3 +47,3 @@ "use strict";
 var shallowequal_1 = __importDefault(require("shallowequal"));
-var merge_1 = __importDefault(require("lodash/merge"));
+var extend_1 = __importDefault(require("extend"));
 var isObject_1 = __importDefault(require("./helpers/isObject"));
@@ -61,3 +61,3 @@ var stripClassPrefix_1 = __importDefault(require("./helpers/stripClassPrefix"));
         this.appliedGlobals = false;
-        this.options = __assign({ extendable: false, passThemeNameProp: true, passThemeProp: true, pure: false, stylesPropName: 'styles', theme: 'default', themePropName: 'theme' }, options);
+        this.options = __assign({ extendable: false, passThemeNameProp: true, passThemeProp: true, pure: true, stylesPropName: 'styles', theme: 'default', themePropName: 'theme' }, options);
         this.syntax = new UnifiedSyntax_1.default();
@@ -99,3 +99,3 @@ }
         if (globalSheet === void 0) { globalSheet = null; }
-        return this.registerTheme(themeName, merge_1.default({}, this.getTheme(parentThemeName), theme), globalSheet || this.globals[parentThemeName]);
+        return this.registerTheme(themeName, extend_1.default(true, {}, this.getTheme(parentThemeName), theme), globalSheet || this.globals[parentThemeName]);
     };
@@ -117,3 +117,3 @@ /**
         if (parentStyleName) {
-            return merge_1.default({}, this.getStyles(parentStyleName, props), styleSheet);
+            return extend_1.default(true, {}, this.getStyles(parentStyleName, props), styleSheet);
         }
@@ -193,3 +193,3 @@ return styleSheet;
             }
-            if (typeof style === 'string' || typeof style === 'number') {
+            if (typeof style === 'string') {
                 classNames.push.apply(classNames, String(style)
@@ -196,0 +196,0 @@ .split(' ')

lib/types.d.ts

@@ -70,8 +70,13 @@ /**
 export interface WithStylesWrapperProps {
+    /** Gain a reference to the wrapped component. Provided by `withStyles`. */
     wrappedRef?: React.Ref<any>;
 }
 export interface WithStylesProps<Theme, ParsedBlock> {
+    /** The ref passed through the `wrappedRef` prop. Provided by `withStyles`. */
     ref?: React.Ref<any>;
+    /** The parsed component style sheet in which rulesets can be transformed to class names. Provided by `withStyles`. */
     styles: SheetMap<ParsedBlock>;
+    /** The theme object when `passThemeProp` is true. Provided by `withStyles`. */
     theme?: Theme;
+    /** The theme name when `passThemeNameProp` is true. Provided by `withStyles`. */
     themeName?: ThemeName;
@@ -84,9 +89,16 @@ }
 export interface WithStylesOptions {
-    extendable: boolean;
-    extendFrom: string;
-    passThemeNameProp: boolean;
-    passThemeProp: boolean;
-    pure: boolean;
-    stylesPropName: string;
-    themePropName: string;
+    /** Can this component's styles be extended to create a new component. Provided by `withStyles`. */
+    extendable?: boolean;
+    /** The parent component ID in which to extend styles from. This is usually defined automatically. Provided by `withStyles`. */
+    extendFrom?: string;
+    /** Pass the theme name prop to the wrapped component. Provided by `withStyles`. */
+    passThemeNameProp?: boolean;
+    /** Pass the theme object prop to the wrapped component. 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`. */
+    stylesPropName?: string;
+    /** Name of the prop in which to pass the theme object to the wrapped component. Provided by `withStyles`. */
+    themePropName?: string;
 }
@@ -97,3 +109,3 @@ export interface StyledComponent<Theme, Props> extends React.ComponentClass<Props> {
     WrappedComponent: React.ComponentType<Props & WithStylesProps<Theme, any>>;
-    extendStyles(styleSheet: StyleSheetDefinition<Theme, Props>, extendOptions?: Partial<Omit<WithStylesOptions, 'extendFrom'>>): StyledComponent<Theme, Props>;
+    extendStyles(styleSheet: StyleSheetDefinition<Theme, Props>, extendOptions?: Omit<WithStylesOptions, 'extendFrom'>): StyledComponent<Theme, Props>;
 }

package.json

 {
   "name": "aesthetic",
-  "version": "3.0.0-alpha.0",
-  "description": "Aesthetic is a powerful React library for styling components through the use of adapters.",
+  "version": "3.0.0-alpha.1",
+  "description": "Aesthetic is a powerful type-safe React library for styling components through the use of adapters.",
   "keywords": [
@@ -20,3 +20,3 @@ "aesthetic",
   ],
-  "repository": "https://github.com/milesj/aesthetic/tree/master/packages/aesthetic",
+  "repository": "https://github.com/milesj/aesthetic/tree/master/packages/core",
   "license": "MIT",
@@ -29,9 +29,10 @@ "main": "./lib/index.js",
   "dependencies": {
+    "@types/extend": "^3.0.0",
     "@types/hoist-non-react-statics": "^3.0.1",
-    "@types/react": "^16.7.7",
+    "@types/react": "^16.3.0",
     "@types/shallowequal": "^0.2.3",
     "@types/uuid": "^3.4.4",
     "csstype": "^2.5.7",
+    "extend": "^3.0.2",
     "hoist-non-react-statics": "^3.1.0",
-    "lodash": "^4.17.11",
     "shallowequal": "^1.1.0",
@@ -46,3 +47,3 @@ "uuid": "^3.3.2"
   },
-  "gitHead": "f0862dad56c2f32e3ce7fcf689e4f256dc1e700c"
+  "gitHead": "fa1be93a833e449cdddc8545d4fec9782dde9d74"
 }

README.md

@@ -5,14 +5,17 @@ # Aesthetic
 
-Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using style
-objects, importing stylesheets, or simply referencing external class names. Simply put, Aesthetic is
-an abstraction layer that utilizes higher-order-components for the compilation of styles via
-third-party libraries, all the while providing customizability, theming, and a unified syntax.
+Aesthetic is a powerful type-safe React library for styling components, whether it be CSS-in-JS
+using style objects, importing stylesheets, or simply referencing external class names. Simply put,
+Aesthetic is an abstraction layer that utilizes higher-order-components for the compilation of
+styles via third-party libraries, all the while providing customizability, theming, and a unified
+syntax.
 
-```javascript
+```tsx
 import React from 'react';
-import PropTypes from 'prop-types';
-import { StylesPropType } from 'aesthetic';
-import withStyles, { classes } from '../path/to/styler';
+import withStyles, { WithStylesProps, classes } from '../path/to/aesthetic';
 
-function Button({ children, styles }) {
+export type Props = {
+  children: React.ReactNode;
+};
+
+function Button({ children, styles }: Props & WithStylesProps) {
   return (
@@ -25,7 +28,2 @@ <button type="button" className={classes(styles.button)}>
 
-Button.propTypes = {
-  children: PropTypes.node.isRequired,
-  styles: StylesPropType.isRequired,
-};
-
 export default withStyles(({ unit }) => ({
@@ -51,5 +49,5 @@ button: {
 ```
-npm install aesthetic react --save
+yarn add aesthetic react
 // Or
-yarn add aesthetic react
+npm install aesthetic react
 ```
@@ -56,0 +54,0 @@

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74415

increased by1.79%

Lines of code

1347

increased by0.9%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

11

increased by10%

Number of lines in readme file

55

decreased by-3.51%

Dependency changes

• + Added@types/extend@^3.0.0

• + Addedextend@^3.0.2

• + Added@types/extend@3.0.4(transitive)

• + Addedextend@3.0.2(transitive)

• - Removedlodash@^4.17.11

• - Removedlodash@4.17.21(transitive)

• Updated@types/react@^16.3.0