simple-merge-class-names 6.0.5 → 6.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +24 -24
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -34,7 +34,7 @@ A straightforward utility for merging CSS class names in _React & Tailwind_ and
34
34
 
35
35
  ## Production Considerations
36
36
 
37
- When developing this package I prioritized _code readability_, _strict input handling_, and _improved developer experience_, as such **_performance_** and **_features_** were not the guiding factor. Therefore if you are considering this package for production, you might also want to look into `clsx`: [https://www.npmjs.com/package/clsx](https://www.npmjs.com/package/clsx)
37
+ In developing this package, I prioritized _code readability_, _strict input handling_, and _enhanced developer experience_. Consequently, **performance** and **_features_** were not the primary focus. If you are considering this package for production, you may also want to explore `clsx`: [https://www.npmjs.com/package/clsx](https://www.npmjs.com/package/clsx).
38
38
 
39
39
  ## Installation
40
40
 
@@ -141,31 +141,31 @@ mergeClassNames: (...args: (string | false)[]) => string;
141
141
  mergeClassNamesDebugger: (...args: (string | false)[]) => string;
142
142
  ```
143
143
 
144
- For both `mergeClassNames` and `mergeClassNamesDebugger` they always return a string.
144
+ Both `mergeClassNames` and `mergeClassNamesDebugger` always return a string.
145
145
 
146
- - If no inputs were provided e.g. `mergeClassNames()` or were invalid `mergeClassNames(undefined, " ")` then an _empty string_ is returned `""`
146
+ - If no inputs are provided (e.g. `mergeClassNames()`) or if invalid inputs are given (e.g. `mergeClassNames(undefined, " ")`), an _empty string_ is returned: `""`.
147
147
 
148
- ## Accepted Arguments
148
+ ## Acceptable Arguments
149
149
 
150
150
  `mergeClassNames(...args)` and `mergeClassNamesDebugger(...args)` only accept the following arguments:
151
151
 
152
- - **Strings that are not empty, and are not whitespace** (for example: `"app"`, `"min-h-dvh"`, `" grid "`)
152
+ - **Strings that are not empty, and are not whitespace** (e.g. `"app"`, `"min-h-dvh"`, `" grid "`)
153
153
 
154
154
  - The boolean value **`false`**
155
155
 
156
- Everything else is an _invalid argument_ that will be _ignored_, and cause a _warning_ to be logged, these argument types include:
156
+ Any other input is considered an invalid argument and will be ignored, resulting in a matching warning being logged. Invalid argument types include:
157
157
 
158
- - _empty strings_ (`""`),
159
- - _whitespace combinations_ (e.g. `"\n"`, `" \n\t "`, etc...),
158
+ - _Empty strings_ (`""`),
159
+ - _Whitespace combinations_ (e.g. `" "`, `"\n"`, `" \n\t "`, etc...),,
160
160
  - `null`,
161
161
  - `undefined`,
162
- - _numbers_,
163
- - _objects_,
164
- - _arrays_
162
+ - _Numbers_,
163
+ - _Objects_,
164
+ - _Arrays_
165
165
 
166
166
  ## Console Warning
167
167
 
168
- Whenever invalid arguments are passed to `mergeClassNames` they are _not silently ignored_ because this can cause a lot of subtle bugs in the future and compound technical debt. Therefore a `console.warn` is printed in the _Developer Console_ to alert of the potentially deeper issue that requires rectifying. Example:
168
+ Whenever invalid arguments are passed to `mergeClassNames`, they are not silently ignored, as this can lead to subtle bugs and increase technical debt. Instead, a `console.warn` is shown in the _Developer Console_ to notify the developer of a potentially deeper issue that requires attention. For example:
169
169
 
170
170
  ```plaintext
171
171
  [mergeClassNames] Warning: invalid arguments were provided and ignored:
@@ -190,15 +190,15 @@ Whenever invalid arguments are passed to `mergeClassNames` they are _not silentl
190
190
 
191
191
  ## Conditionally Include Class Names
192
192
 
193
- To conditionally include a class name, use the
193
+ To conditionally include a class name, use the _conditional operator_ as follows:
194
194
 
195
- - _Conditional operator_ `condition ? "class-name" : false` with `false` as the fallback value to maintain a clear and warning-free code.
195
+ - `condition ? "class-name" : false`, with `false` serving as the fallback value to ensure clear and warning-free code.
196
196
 
197
- This is because `false` will never cause the function to print a warning.
197
+ This approach is effective because `false` will never result in a warning from the function.
198
198
 
199
- **Important**: Avoid using the
199
+ **Important**: Avoid using the _short-circuit implicit syntax_ like this:
200
200
 
201
- - _Short-circuit implicit syntax_ `condition && "class-name"` because it can produce falsy values like `0`, `""`, `undefined`, `null`, which will cause warnings to be logged.
201
+ - `condition && "class-name"`, as it can produce falsy values such as `0`, `""`, `undefined`, and `null`, which will lead to warnings being logged.
202
202
 
203
203
  ```jsx
204
204
  import { mergeClassNames } from "simple-merge-class-names";
@@ -244,14 +244,14 @@ const MyComponent = () => {
244
244
 
245
245
  `mergeClassNamesDebugger` is a drop-in replacement for `mergeClassNames` but with the added _benefit_ that it will activate the built-in **_debugger_** inside browsers like _FireFox_, _Chrome_, _Safari_ and even _VS Code_ if configured properly.
246
246
 
247
- This built-in JavaScript feature gained wide-spread support from major browsers around 2012, so you are getting this feature for free with minimal effort, all you have to do are 2 things:
247
+ This built-in JavaScript feature gained wide-spread support from major browsers around 2012, allowing you to access it with minimal effort. To utilize it, simply follow these two steps:
248
248
 
249
- 1. Simply **_Open the Browser's Developer Tools_**, this tells the JavaScript engine that the Debugger is _enabled_.
250
- 2. **_Replace_** `mergeClassNames` with **`mergeClassNamesDebugger`** _without_ changing any of the argument provided.
249
+ 1. **_Open the Browser's Developer Tools_** to inform the JavaScript engine that the debugger is _enabled_.
250
+ 2. **_Replace_** `mergeClassNames` with **`mergeClassNamesDebugger`** _without_ altering any of the provided arguments.
251
251
 
252
- _When the Debugger is enabled (i.e. *Browser's Developer Tools* is open) and an invalid argument like `undefined` or `" "` is passed to `mergeClassNamesDebugger`, then the JavaScript engine will automatically pause execution and highlight the invalid argument. You simply have to select the offending component (`Container.jsx` in this case) from the Call Stack._
252
+ _When the debugger is enabled (i.e. *Browser's Developer Tools* is open) and an invalid argument such as `undefined` or `" "` is passed to `mergeClassNamesDebugger`, the JavaScript engine will automatically pause execution and highlight the invalid argument. You simply need to select the offending component (e.g. `Container.jsx`) from the Call Stack._
253
253
 
254
- When the Debugger is active, it should look like this screenshot (in _FireFox_):
254
+ When the debugger is active, it will appear as shown in this screenshot (in _Firefox_):
255
255
 
256
256
  ![Firefox Debugger automatically paused execution when undefined was passed to mergeClassNamesDebugger](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/debugger.png)
257
257
 
@@ -336,9 +336,9 @@ export const mergeClassNamesDebugger = (...args) =>
336
336
 
337
337
  ### Motivation
338
338
 
339
- This package aims to improve code readability and developer experience in `React & Tailwind` projects by enforcing strict input handling. It logs warnings for invalid arguments, helping developers catch and fix underlying issues _early_.
339
+ This package aims to improve code readability and developer experience in _React & Tailwind_ projects by enforcing strict input handling. It logs warnings for invalid arguments, helping developers catch and fix underlying issues _early_.
340
340
 
341
- In addition while writing class names as separate strings may seem tedious, the [workflow](#workflow-to-minimize-typing-strain) reduces friction and the overall process results in more readable and maintainable code than using single long strings:
341
+ While writing class names as separate strings may seem tedious, the [workflow](#workflow-to-minimize-typing-strain) reduces friction and the overall process results in more readable and maintainable code in contrast to using single long strings:
342
342
 
343
343
  ```jsx
344
344
  const MyComponent = () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "simple-merge-class-names",
3
- "version": "6.0.5",
3
+ "version": "6.0.7",
4
4
  "description": "A straightforward utility for merging CSS class names in React + Tailwind and JavaScript projects.",
5
5
  "exports": {
6
6
  ".": {