simple-merge-class-names 2.0.3 → 3.0.0

package/README.md

@@ -11,7 +11,11 @@ A straightforward utility for merging CSS class names in `React + Tailwind` and
     -   [Workflow To Minimize Typing Strain](#workflow-to-minimize-typing-strain)
 
 -   [Argument Handling](#argument-handling)
+
     -   [Breaking Changes From Version 1.X.X](#breaking-changes-from-version-1xx)
+
+    -   [Console Warning for Invalid Arguments](#console-warning-for-invalid-arguments)
+
 -   [Testing](#testing)
 -   [Source Code](#source-code)
 -   [Misc.](#misc)
@@ -103,6 +107,18 @@ function MyComponent() {
 
 In pervious versions, arguments that were not strings were implicitly converted to strings by the JavaScript engine.
 
+### Console Warning for Invalid Arguments
+
+Invalid arguments are not silently ignored, as they may indicate a deeper issue. A single warning is logged to the developer console whenever these arguments are passed and ignored.
+
+Example output:
+
+```plaintext
+[mergeClassNames] Warning: invalid arguments were provided and were ignored:
+    - Expected all arguments to be strings, but got 4 non-string values: [(1/4): (undefined) of type "undefined", (2/4): (test) of type "object", (3/4): ([object Object]) of type "object", (4/4): (null) of type "object"].
+    - Expected 0 empty strings, but got 2.
+```
+
 ## Testing
 
 This project uses `Vitest` as the test runner for fast, modern testing.

package/mergeClassNames.d.ts

@@ -1 +1 @@
-export declare const mergeClassNames: (...args: unknown[]) => string;
+export declare const mergeClassNames: (...args: string[]) => string;

package/mergeClassNames.js

@@ -39,17 +39,65 @@
 
 const isTypeString = (val) => typeof val === "string";
 
-const isNotEmptyString = (val) => val !== "";
+const isNonEmptyString = (val) => val !== "";
+
+const partition = (array, keepPredicate) => {
+    const keep = [];
+    const ignore = [];
+    for (const element of array) {
+        (keepPredicate(element) ? keep : ignore).push(element);
+    }
+    return [keep, ignore];
+};
 
 export const mergeClassNames = (...args) => {
-    const space = "\x20"; // " "; ASCII code for single space character;
+    const space = "\x20"; // ASCII code for a single space character (" "), decimal 32
+
+    const [strings, nonStrings] = partition(args, isTypeString);
+
+    const trimmed = strings.map((val) => val.trim());
+
+    const [nonEmptyStrings, emptyStrings] = partition(
+        trimmed,
+        isNonEmptyString
+    );
+
+    const className = nonEmptyStrings.join(space);
+
+    /* Don't silently ignore invalid input, explicitly disclose them as it indicate a bigger problem */
+    const warn = [];
+
+    /* "Expected all arguments to be strings ..." */
+    if (nonStrings.length > 0) {
+        const join = ", ";
+        const count = nonStrings.length;
+        const formatGotArray = (element, index) =>
+            `(${index + 1}/${count}): (${element}) of type "${typeof element}"`;
+        const message = nonStrings.map(formatGotArray).join(join);
+
+        warn.push(
+            `Expected all arguments to be strings, but got ${count} non-string values: [${message}].`
+        );
+    }
 
-    const stringsOnly = args.filter((val) => isTypeString(val));
+    /* "Expected 0 empty strings ..." */
+    if (nonEmptyStrings.length > 0) {
+        const count = emptyStrings.length;
+        warn.push(`Expected 0 empty strings, but got ${count}.`);
+    }
 
-    const trimmed = stringsOnly.map((val) => val.trim());
+    /* Full Warn Message */
+    if (warn.length > 0) {
+        const newline = "\n";
+        const prefix = "\t" + "- ";
+        const message = warn.map((text) => `${prefix}${text}`).join(newline);
 
-    const nonEmpty = trimmed.filter((val) => isNotEmptyString(val));
+        console.warn(
+            "[mergeClassNames] Warning: invalid arguments were provided and were ignored:",
+            newline,
+            message
+        );
+    }
 
-    const className = nonEmpty.join(space);
     return className;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "simple-merge-class-names",
-    "version": "2.0.3",
+    "version": "3.0.0",
     "description": "A straightforward utility for merging CSS class names in React + Tailwind and JavaScript projects.",
     "exports": {
         ".": {