merge-props - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// Note: this is all miserably bad TypeScript, but the compiler
+// can’t quite make sense of what’s going on here yet. I think
+// the type assertions I’m making make sense, but the compiler
+// just can’t infer it. The inputs and outputs are useful, though,
+// so I think it’s still worthwhile to be written in TypeScript.
+function pushProp(target, key, value) {
+    if (key === 'className') {
+        target.className = [target.className, value].join(' ').trim();
+    }
+    else if (key === 'style') {
+        target.style = __assign({}, target.style, value);
+    }
+    else if (typeof value === 'function') {
+        var oldFn_1 = target[key];
+        target[key] = oldFn_1 ? function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            oldFn_1.apply(void 0, args);
+            value.apply(void 0, args);
+        } : value;
+    }
+    else if (!(key in target)) {
+        target[key] = value;
+    }
+    else {
+        throw new Error("Didn\u2019t know how to merge prop '" + key + "'. " +
+            "Only 'className', 'style', and event handlers are supported");
+    }
 }
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./mergeProps"));
-var mergeProps_1 = require("./mergeProps");
-exports.default = mergeProps_1.mergeProps;
+module.exports = function mergeProps() {
+    var props = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        props[_i] = arguments[_i];
+    }
+    if (props.length === 1) {
+        return props[0];
+    }
+    return props.reduce(function (merged, ps) {
+        for (var key in ps) {
+            pushProp(merged, key, ps[key]);
+        }
+        return merged;
+    }, {});
+};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "merge-props",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Merges className, style, and DOM event handlers for React elements",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "jest --coverage",
     "build": "tsc",
-    "prepublish": "npm run test && npm run build"
+    "prepare": "npm run test && npm run build"
   },
@@ -11,0 +12,0 @@ "repository": {

README.md

@@ -1,2 +0,2 @@
-# merge-props [![Build Status](https://travis-ci.org/andrewbranch/merge-props.svg?branch=master)](https://travis-ci.org/andrewbranch/merge-props) [![codecov](https://codecov.io/gh/andrewbranch/merge-props/branch/master/graph/badge.svg)](https://codecov.io/gh/andrewbranch/merge-props)
+# merge-props [![Build Status](https://travis-ci.org/andrewbranch/merge-props.svg?branch=master)](https://travis-ci.org/andrewbranch/merge-props) [![codecov](https://codecov.io/gh/andrewbranch/merge-props/branch/master/graph/badge.svg)](https://codecov.io/gh/andrewbranch/merge-props) [![npm](https://img.shields.io/npm/v/merge-props.svg)](https://www.npmjs.com/package/merge-props) ![size](https://img.shields.io/bundlephobia/minzip/merge-props.svg)
 
@@ -9,2 +9,8 @@ Merges React `className`, `style`, and DOM event handlers (`onClick`, `onFocus`, `on{LiterallyEveryEvent}`) by the following rules:
 
+## Installation
+
+```
+npm install merge-props
+```
+
 ## Example usage
@@ -11,0 +17,0 @@

src/index.ts

@@ -1,4 +0,52 @@
-export * from './types';
-export * from './mergeProps';
-import { mergeProps } from './mergeProps';
-export default mergeProps;
+import { MergeableProps } from './types';
+
+// Note: this is all miserably bad TypeScript, but the compiler
+// can’t quite make sense of what’s going on here yet. I think
+// the type assertions I’m making make sense, but the compiler
+// just can’t infer it. The inputs and outputs are useful, though,
+// so I think it’s still worthwhile to be written in TypeScript.
+
+function pushProp<K extends keyof MergeableProps>(
+  target: MergeableProps,
+  key: K,
+  value: MergeableProps[K]
+): void {
+  if (key === 'className') {
+    target.className = [target.className, value].join(' ').trim();
+  } else if (key === 'style') {
+    target.style = { ...target.style, ...(value as React.CSSProperties) };
+  } else if (typeof value === 'function') {
+    const oldFn = target[key] as Function | undefined;
+    target[key] = oldFn ? (...args: any[]) => {
+      oldFn(...args);
+      (value as Function)(...args);
+    } : value;
+  } else if (!(key in target)) {
+    target[key] = value;
+  } else {
+    throw new Error(
+      `Didn’t know how to merge prop '${key}'. ` +
+      `Only 'className', 'style', and event handlers are supported`
+    );
+  }
+}
+
+/**
+ * Merges sets of props together:
+ *  - duplicate `className` props get concatenated
+ *  - duplicate `style` props get shallow merged (later props have precedence for conflicting rules)
+ *  - duplicate functions (to be used for event handlers) get called in order from left to right
+ * @param props Sets of props to merge together. Later props have precedence.
+ */
+export = function mergeProps<T extends MergeableProps>(...props: T[]): Required<T> {
+  if (props.length === 1) {
+    return props[0] as Required<T>;
+  }
+
+  return props.reduce((merged, ps) => {
+    for (const key in ps) {
+      pushProp(merged, key as keyof MergeableProps, ps[key]);
+    }
+    return merged;
+  }, {}) as any;
+}

tsconfig.json

@@ -9,4 +9,5 @@ {
     "noUnusedParameters": true,
-    "esModuleInterop": true,
-    "sourceMap": true
+    "esModuleInterop": false,
+    "sourceMap": true,
+    "declaration": true,
   },
@@ -13,0 +14,0 @@ "include": [

New alerts

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

Improved metrics

Total package byte prevSize

19212

increased by18.04%

Lines of code

232

increased by1.31%

Number of lines in readme file

127

increased by4.96%

Worsened metrics

Number of package files

13

decreased by-7.14%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes