simple-merge-class-names 1.0.10 → 2.0.1

package/README.md

@@ -7,12 +7,16 @@ A straightforward utility for merging CSS class names in `React + Tailwind` and
 -   [Installation](#installation)
     -   [Install Prettier With VSCode (Most Recommended)](#install-prettier-with-vscode-most-recommended)
 -   [Usage](#usage)
+
     -   [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)
+-   [Testing](#testing)
+-   [Source Code](#source-code)
 -   [Why the Mismatch Between Exported Function and Package Name?](#why-the-mismatch-between-exported-function-and-package-name)
 -   [Where This Package Excels](#where-this-package-excels)
--   [Source Code](#source-code)
-    -   [Argument Handling](#argument-handling)
--   [Testing](#testing)
+
 -   [Production Considerations](#production-considerations)
 -   [License](#license)
 
@@ -89,15 +93,29 @@ function MyComponent() {
     -   Replaces single quotes with double quotes.
     -   Neatly arranges each class name on a new line.
 
-## Why the Mismatch Between Exported Function and Package Name?
+## Argument Handling
 
-I wanted to name the package as `mergeClassNames` to reflect the single exported function, but the NPM Package Registry does not allow capital letters, only lower case and dash characters.
+`mergeClassNames` only accepts **_non-empty string values_**, everything else like empty strings (`""`), `null`, `undefined`, numbers, objects and arrays is _ignored_. This ensures stricter and predictable output.
 
-In addition there was already a package named `merge-class-names` but it is no longer maintained (and the developer recommends `clsx` instead).
+### Breaking Changes From Version 1.X.X
 
-## Where This Package Excels
+In pervious versions, arguments that were not strings were implicitly converted to strings by the JavaScript engine.
 
-While similar packages exist (`clsx`) with better features and potentially improved performance, `simple-merge-class-names` focuses on being very straightforward and easy to reason about, as defined in its source code.
+## Testing
+
+This project uses `Vitest` as the test runner for fast, modern testing.
+
+#### Run All Testing Once
+
+```bash
+pnpm test
+```
+
+#### Run Tests In Watch Mode
+
+```bash
+pnpm test:watch
+```
 
 ## Source Code
 
@@ -106,39 +124,34 @@ While similar packages exist (`clsx`) with better features and potentially impro
  * mergeClassNames - A straightforward utility for merging CSS class names in React + Tailwind, and other JavaScript projects.
  ...
  */
-const isDefined = (val) => val !== undefined && val !== null;
+
+const isTypeString = (val) => typeof val === "string";
 
 const isNotEmptyString = (val) => val !== "";
 
 export const mergeClassNames = (...args) => {
-    const space = " ";
-    const values = args.filter(
-        (val) => isDefined(val) && isNotEmptyString(val)
-    );
-    const className = values.join(space);
-    return className;
-};
-```
+    const space = "\x20"; // " "; ASCII code for single space character;
 
-### Argument Handling
+    const stringsOnly = args.filter((val) => isTypeString(val));
 
-`mergeClassNames` accepts multiple arguments but filters out `null`, `undefined`, and empty strings (`""`). Remaining values are either strings or are _implicitly converted_ to strings by the JavaScript engine, then joined with spaces to produce the final class name string.
+    const trimmed = stringsOnly.map((val) => val.trim());
 
-### Testing
+    const nonEmpty = trimmed.filter((val) => isNotEmptyString(val));
 
-This project uses `Vitest` as the test runner for fast, modern testing.
+    const className = nonEmpty.join(space);
+    return className;
+};
+```
 
-#### Run All Testing Once
+## Why the Mismatch Between Exported Function and Package Name?
 
-```bash
-pnpm test
-```
+I wanted to name the package as `mergeClassNames` to reflect the single exported function, but the NPM Package Registry does not allow capital letters, only lower case and dash characters.
 
-#### Run Tests In Watch Mode
+In addition there was already a package named `merge-class-names` but it is no longer maintained (and the developer recommends `clsx` instead).
 
-```bash
-pnpm test:watch
-```
+## Where This Package Excels
+
+While similar packages exist (`clsx`) with better features and potentially improved performance, `simple-merge-class-names` focuses on being very straightforward and easy to reason about, as defined in its source code.
 
 ## Production Considerations
 
@@ -148,4 +161,6 @@ If you are considering this package for production, you might also want to look
 
 This project is licensed under the AGPL-3.0 License. See `LICENSE.txt` for full details.
 
+---
+
 Enjoy 😉

package/mergeClassNames.js

@@ -37,15 +37,19 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-const isDefined = (val) => val !== undefined && val !== null;
+const isTypeString = (val) => typeof val === "string";
 
 const isNotEmptyString = (val) => val !== "";
 
 export const mergeClassNames = (...args) => {
-    const space = " ";
-    const values = args.filter(
-        (val) => isDefined(val) && isNotEmptyString(val)
-    );
-    const className = values.join(space);
+    const space = "\x20"; // " "; ASCII code for single space character;
+
+    const stringsOnly = args.filter((val) => isTypeString(val));
+
+    const trimmed = stringsOnly.map((val) => val.trim());
+
+    const nonEmpty = trimmed.filter((val) => isNotEmptyString(val));
+
+    const className = nonEmpty.join(space);
     return className;
 };

package/package.json

@@ -1,38 +1,38 @@
-{
-    "name": "simple-merge-class-names",
-    "version": "1.0.10",
-    "description": "Example usage: <div className = {mergeClassNames('flex', 'flex-col')}/>",
-    "main": "mergeClassNames.js",
-    "exports": "./mergeClassNames.js",
-    "files": [
-        "package.json",
-        "mergeClassNames.js",
-        "LICENSE.txt",
-        "README.md"
-    ],
-    "scripts": {
-        "test": "vitest",
-        "test:watch": "vitest --watch",
-        "test:ui": "vitest --ui"
-    },
-    "keywords": [
-        "merge",
-        "class-names-merger",
-        "utility",
-        "react",
-        "tailwindcss"
-    ],
-    "author": "Abdullah Fatota",
-    "license": "AGPL-3.0",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/new-AF/simple-merge-class-names.git"
-    },
-    "bugs": {
-        "url": "https://github.com/new-AF/simple-merge-class-names/issues"
-    },
-    "homepage": "https://github.com/new-AF/simple-merge-class-names",
-    "devDependencies": {
-        "vitest": "^3.2.3"
-    }
-}
+{
+    "name": "simple-merge-class-names",
+    "version": "2.0.1",
+    "description": "Example usage: <div className = {mergeClassNames('flex', 'flex-col')}/>",
+    "main": "mergeClassNames.js",
+    "exports": "./mergeClassNames.js",
+    "files": [
+        "package.json",
+        "mergeClassNames.js",
+        "LICENSE.txt",
+        "README.md"
+    ],
+    "scripts": {
+        "test": "vitest",
+        "test:watch": "vitest --watch",
+        "test:ui": "vitest --ui"
+    },
+    "keywords": [
+        "merge",
+        "class-names-merger",
+        "utility",
+        "react",
+        "tailwindcss"
+    ],
+    "author": "Abdullah Fatota",
+    "license": "AGPL-3.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/new-AF/simple-merge-class-names.git"
+    },
+    "bugs": {
+        "url": "https://github.com/new-AF/simple-merge-class-names/issues"
+    },
+    "homepage": "https://github.com/new-AF/simple-merge-class-names",
+    "devDependencies": {
+        "vitest": "^3.2.3"
+    }
+}