classed-components - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

dist/classNames.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const classNames = require("classnames");
-const isTemplateString = (classes) => {
-    return Array.isArray(classes) && classes.hasOwnProperty('raw');
-};
-exports.processClasses = (classes, props, templateStringPlaceholders = []) => {
+exports.processClasses = void 0;
+const classnames_1 = require("classnames");
+const isTemplateString = (classes) => (Array.isArray(classes) && Object.prototype.hasOwnProperty.call(classes, 'raw'));
+const processClasses = (classes, props, templateStringPlaceholders = []) => {
     if (isTemplateString(classes)) {
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
         return processAsTemplateString(classes, props, templateStringPlaceholders);
     }
     if (typeof classes === 'function') {
-        return exports.processClasses(classes(props), props);
+        return (0, exports.processClasses)(classes(props), props);
     }
     if (Array.isArray(classes)) {
-        return classes.map(classesValue => exports.processClasses(classesValue, props));
+        return classes.map((classesValue) => (0, exports.processClasses)(classesValue, props));
     }
     return classes;
 };
-const preparePlaceholders = (templateStringPlaceholders, props) => {
-    return templateStringPlaceholders.map(placeholder => {
-        return classNames(exports.processClasses(placeholder, props));
-    });
-};
+exports.processClasses = processClasses;
+const preparePlaceholders = (templateStringPlaceholders, props) => (templateStringPlaceholders.map((placeholder) => (0, classnames_1.default)((0, exports.processClasses)(placeholder, props))));
 const compileClassnames = (placeholders, classes) => {
@@ -25,0 +22,0 @@ const className = placeholders.reduce((acc, placeholder, i) => acc + classes[i] + placeholder, '');

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const classNames = require("classnames");
+exports.classed = void 0;
+const classnames_1 = require("classnames");
 const react_1 = require("react");
 const classNames_1 = require("./classNames");
 const tags_1 = require("./tags");
-const tagDisplayName = (tag) => typeof tag === 'string' ? tag : tag.displayName || tag.name;
-const createClassed = (tag) => {
-    return (classes, ...placeholders) => {
-        const Hoc = (props) => {
-            const className = classNames(classNames_1.processClasses(classes, props, placeholders), props.className);
-            const propsToForward = tags_1.filterPropsToForward(tag, props);
-            return react_1.createElement(tag, Object.assign({}, propsToForward, { className }));
-        };
-        Hoc.displayName = `Classed(${tagDisplayName(tag)})`;
-        return Hoc;
-    };
+const tagDisplayName = (tag) => (typeof tag === 'string' ? tag : tag.displayName || tag.name);
+const createClassed = (tag) => (classes, ...placeholders) => {
+    const Hoc = (0, react_1.forwardRef)((props, ref) => {
+        const className = (0, classnames_1.default)((0, classNames_1.processClasses)(classes, props, placeholders), props.className);
+        const propsToForward = (0, tags_1.filterPropsToForward)(tag, props);
+        return (0, react_1.createElement)(tag, Object.assign(Object.assign({}, propsToForward), { ref, className }));
+    });
+    Hoc.displayName = `Classed(${tagDisplayName(tag)})`;
+    return Hoc;
 };
-tags_1.tags.forEach(tagName => {
+tags_1.tags.forEach((tagName) => {
     createClassed[tagName] = createClassed(tagName);
@@ -21,0 +20,0 @@ });

dist/tags.d.ts

 import { ElementType } from 'react';
 import { HTMLBasicElement } from './types';
 export declare const tags: HTMLBasicElement[];
-export declare const filterPropsToForward: (tag: ElementType<any>, props: object) => {
-    [x: string]: any;
-    [x: number]: any;
+export declare const filterPropsToForward: (tag: ElementType, props: object) => {
+    [k: string]: any;
 };

dist/tags.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterPropsToForward = exports.tags = void 0;
 const is_prop_valid_1 = require("@emotion/is-prop-valid");
@@ -140,6 +141,6 @@ exports.tags = [
 ];
-const isAnHtmlBasicElement = (tag) => typeof tag === 'string' && exports.tags.includes(tag);
+const isAnHtmlBasicElement = (tag) => (typeof tag === 'string' && exports.tags.includes(tag));
 const forwardAll = Symbol('Forward all props');
-const getShouldForwardProp = (tag) => isAnHtmlBasicElement(tag) ? is_prop_valid_1.default : forwardAll;
-exports.filterPropsToForward = (tag, props) => {
+const getShouldForwardProp = (tag) => (isAnHtmlBasicElement(tag) ? is_prop_valid_1.default : forwardAll);
+const filterPropsToForward = (tag, props) => {
     const shouldForwardProp = getShouldForwardProp(tag);
@@ -151,1 +152,2 @@ if (shouldForwardProp === forwardAll) {
 };
+exports.filterPropsToForward = filterPropsToForward;

dist/types.d.ts

 import { ComponentType, ElementType, FC } from 'react';
 import { Classes, ClassesValueArray } from './classNames';
-declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 declare type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
@@ -11,3 +10,2 @@ declare type PropsOf<Tag extends React.ComponentType<any>> = Tag extends React.FC<infer Props> ? Props & React.Attributes : Tag extends React.ComponentClass<infer Props> ? (Tag extends new (...args: any[]) => infer Instance ? Props & React.ClassAttributes<Instance> : never) : never;
 export declare type HTMLBasicElement = keyof JSX.IntrinsicElements;
-export declare type Tag = ElementType;
 declare type CreateClassedComponentFrom<Props> = <ExtraProps>(classes: Classes<ExtraProps & Props>, ...placeholders: ClassesValueArray<ExtraProps & Props>) => FCWithClassNameOptional<ExtraProps & Props>;
@@ -156,2 +154,3 @@ declare type CreateClassedComponentFromHtmlBasicElement<Tag extends HTMLBasicElement, Props extends JSX.IntrinsicElements[Tag] = JSX.IntrinsicElements[Tag]> = CreateClassedComponentFrom<Props>;
 export declare type CreateClassedComponent = BaseCreateClassed & ClassedTags;
+export declare type Tag = ElementType;
 export {};

package.json

 {
   "name": "classed-components",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "CSS Classes for the component age. Apply your Css with the power of Javascript.",
@@ -28,7 +28,8 @@ "keywords": [
     "watch": "yarn run build -- -w",
-    "lint": "tslint -p tsconfig.json",
-    "pretty": "yarn run lint --fix",
+    "lint": "eslint --ignore-path .gitignore --ext .ts --ext .tsx .",
+    "lint:fix": "yarn lint --fix",
+    "typecheck": "tsc --noEmit",
     "check": "tsc --noEmit && yarn run lint",
     "test": "jest",
-    "coverage": "yarn run test --coverage --coverageReporters=text-lcov | coveralls",
+    "test:coverage": "yarn run test --coverage",
     "test-watch": "jest --watch",
@@ -40,19 +41,21 @@ "prepare": "yarn run build",
   "devDependencies": {
-    "@types/classnames": "^2.2.7",
-    "@types/jest": "^24.0.13",
-    "@types/react": "^16.8.17",
-    "@types/react-test-renderer": "^16.8.1",
-    "coveralls": "^3.0.3",
-    "gitmoji-changelog": "^1.1.0",
-    "jest": "^24.8.0",
-    "react": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
-    "ts-jest": "^24.0.2",
-    "tslint": "^5.16.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "typescript": "^3.5.1"
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.34",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/parser": "^5.3.0",
+    "coveralls": "^3.1.1",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb-typescript": "^15.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "gitmoji-changelog": "^2.2.1",
+    "jest": "^27.3.1",
+    "react": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.4.4"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^0.7.3",
-    "classnames": "^2.2.6"
+    "@emotion/is-prop-valid": "^1.1.0",
+    "classnames": "^2.3.1"
   },
@@ -59,0 +62,0 @@ "peerDependencies": {

README.md

 # classed-components <!-- omit in toc -->
 
-[![npm](https://img.shields.io/npm/v/classed-components.svg)](https://www.npmjs.com/package/classed-components) 
-[![npm](https://img.shields.io/npm/dt/classed-components.svg)](https://www.npmjs.com/package/classed-components) 
-[![Coverage Status](https://coveralls.io/repos/github/mathieutu/classed-components/badge.svg?branch=master)](https://coveralls.io/github/mathieutu/classed-components?branch=master) 
-[![Build Status](https://travis-ci.org/mathieutu/classed-components.svg?branch=master)](https://travis-ci.org/mathieutu/classed-components)
+[![npm](https://img.shields.io/npm/v/classed-components.svg)](https://www.npmjs.com/package/classed-components)
+[![npm](https://img.shields.io/npm/dt/classed-components.svg)](https://www.npmjs.com/package/classed-components)
+[![Coverage Status](https://coveralls.io/repos/github/mathieutu/classed-components/badge.svg?branch=main)](https://coveralls.io/github/mathieutu/classed-components?branch=main)
+[![Build Status](https://github.com/mathieutu/classed-components/actions/workflows/test.yml/badge.svg)](https://github.com/mathieutu/classed-components/actions/workflows/test.yml)
 
@@ -14,3 +14,3 @@
 
-![screenshot](./screenshot.png)
+![screenshot](./.github/assets/screenshot.png)
 
@@ -30,2 +30,3 @@ **✨ Features:**
 ## Table of contents <!-- omit in toc -->
+- [- Thanks](#--thanks)
 - [Installation](#installation)
@@ -44,3 +45,3 @@ - [Usage](#usage)
 - [Contributing](#contributing)
-  
+- [Thanks](#thanks)
 ------
@@ -236,3 +237,3 @@
 
-If you want to add some props to manage your styling, you can type them by setting the first generic of the function. 
+If you want to add some props to manage your styling, you can type them by setting the first generic of the function.
 
@@ -247,6 +248,6 @@ ```tsx
 
-![Typescript: Autocompletion in function](docs/ts_function.png)
-![Typescript: Autocompletion in JSX](docs/ts_jsx.png)
-![Typescript: Adding props: Autocompletion in function](docs/ts_add_props_function.png)
-![Typescript: Adding props: Autocompletion in JSX](docs/ts_add_props_jsx.png)
+![Typescript: Autocompletion in function](.github/assets/ts_function.png)
+![Typescript: Autocompletion in JSX](.github/assets/ts_jsx.png)
+![Typescript: Adding props: Autocompletion in function](.github/assets/ts_add_props_function.png)
+![Typescript: Adding props: Autocompletion in JSX](.github/assets/ts_add_props_jsx.png)
 
@@ -320,4 +321,4 @@
 
-Many thanks to actual and future [contributors](https://github.com/mathieutu/classed-components/graphs/contributors), 
+Many thanks to actual and future [contributors](https://github.com/mathieutu/classed-components/graphs/contributors),
 to [@emotion-js](https://github.com/emotion-js/emotion) for their great work about styling components,
-and particular thanks to [@mephju](https://github.com/mephju) for letting this package having the already reserved `classed-component` name on npm.  
+and particular thanks to [@mephju](https://github.com/mephju) for letting this package having the already reserved `classed-component` name on npm.

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

Number of lines in readme file

319

increased by0.31%

Worsened metrics

Total package byte prevSize

28520

decreased by-4.14%

Dev dependency count

15

increased by15.38%

Number of package files

11

decreased by-8.33%

Lines of code

375

decreased by-1.06%

Dependency changes

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/is-prop-valid@0.7.3(transitive)

• - Removed@emotion/memoize@0.7.1(transitive)

• Updated@emotion/is-prop-valid@^1.1.0

• Updatedclassnames@^2.3.1