Skip to content

Commit

Permalink
release v1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
d8corp committed Aug 14, 2021
1 parent 2879964 commit a6f1592
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 20 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## v1.2

### v1.2.0 [![14.08.2021](https://img.shields.io/date/1628932414)](https://github.com/d8corp/watch-state/tree/v1.2.0)

- updated readme
- added linting

## v1.1

### v1.1.3 [![13.08.2021](https://img.shields.io/date/1628806723)](https://github.com/d8corp/watch-state/tree/v1.1.3)
Expand Down
58 changes: 41 additions & 17 deletions lib/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
[![minzipped size](https://img.shields.io/bundlephobia/minzip/html-classes)](https://bundlephobia.com/package/html-classes)
[![downloads](https://img.shields.io/npm/dm/html-classes.svg)](https://www.npmtrends.com/html-classes)
[![changelog](https://img.shields.io/badge/Changelog-⋮-brightgreen)](https://changelogs.xyz/html-classes)
[![license](https://img.shields.io/npm/l/html-classes)](https://github.com/d8corp/html-classest/blob/master/LICENSE)
[![license](https://img.shields.io/npm/l/html-classes)](https://github.com/d8corp/html-classes/blob/master/LICENSE)

Simple converter from `any` type to `string` of **HTML classes**.

[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)

[![stars](https://img.shields.io/github/stars/d8corp/html-classes?style=social)](https://github.com/d8corp/html-classes)
[![watchers](https://img.shields.io/github/watchers/d8corp/html-classes?style=social)](https://github.com/d8corp/html-classes)

Expand Down Expand Up @@ -36,7 +38,7 @@ Or you can use [minified file](https://github.com/d8corp/html-classes/blob/maste

## Usage

##### String
### String

Any string value provides as is.
```javascript
Expand All @@ -47,7 +49,7 @@ classes('test1', 'test2')
// 'test1 test2'
```

##### Array
### Array

Any array spreads like the `flat` method of an array.
```javascript
Expand All @@ -57,27 +59,42 @@ classes(['test'])
classes(['test1', 'test2'])
// 'test1 test2'

classes(['test1', ['test2']], 'test3')
classes(
[
'test1',
['test2'],
],
'test3',
)
// 'test1 test2 test3'
```

##### Object
### Object

The key of the object will be used as a class when the value equals true.
```javascript
classes({test: true})
classes({
test: true,
})
// 'test'

classes({test1: true, test2: 1, test3: NaN})
classes({
test1: true,
test2: 1,
test3: NaN,
})
// 'test1 test2'

classes({test1: () => true, test2: () => false})
classes({
test1: () => true,
test2: () => false,
})
// 'test1'
```

> The last example works that 'cause of the next definition.
##### Function
### Function

Any function will be called.
```javascript
Expand All @@ -87,32 +104,38 @@ classes(() => 'test')
classes(() => ['test1', 'test2'])
// 'test1 test2'

classes(() => ({test1: () => () => true, test2: () => () => false}))
classes(() => ({
test1: () => () => true,
test2: () => () => false,
}))
// 'test1'
```

##### Class
### Class

Any instance of class will be handled the same as an object.
```javascript
class Custom {
test1 () {
return true
}

test2 () {
return false
}

get test3 () {
return true
}

field = true
}

classes(new Custom())
// 'field'
```

##### Other
### Other

Any other type will be ignored.
```javascript
Expand All @@ -125,10 +148,10 @@ classes(0) // ''
classes(-1) // ''
classes(1) // ''
classes(NaN) // ''
classes(Symbol('test')) // ''
classes(Symbol()) // ''
```

##### ES6
## ES6

For the [ES6](https://github.com/d8corp/html-classes/blob/master/lib/es6.js) version, you can use iterable functionality.
If the type can be iterable then `html-classes` goes through values.
Expand All @@ -139,13 +162,14 @@ classes(new Set(['test1', 'test2']))
classes(new Map([
['test1', false],
['', 'test2'],
[undefined, null]
[undefined, null],
]))
// 'test1 test2'

class Test {
*[Symbol.iterator] () {
* [Symbol.iterator] () {
let i = 0

while (i++ < 3) {
yield `test${i}`
}
Expand All @@ -156,7 +180,7 @@ classes(new Test())
// 'test1 test2 test3'
```

##### Alternatives
## Alternatives

- [classnames](https://www.npmjs.com/package/classnames)
- [merge-class-names](https://www.npmjs.com/package/merge-class-names)
Expand Down
2 changes: 1 addition & 1 deletion lib/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html-classes",
"version": "1.1.3",
"version": "1.2.0",
"description": "Combine html classes",
"main": "index.js",
"module": "es6.js",
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html-classes",
"version": "1.1.3",
"version": "1.2.0",
"description": "Combine html classes",
"main": "index.js",
"module": "es6.js",
Expand Down

0 comments on commit a6f1592

Please sign in to comment.