react-bem-helper - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

index.js

 var assign = require('object-assign');
 
-function pushArray(array, newElements) {
-  Array.prototype.push.apply(array, newElements);
-}
-
 function isObject(obj) {
@@ -25,6 +21,3 @@ var type = typeof obj;
 function objectToArray(object) {
-  var keys   = Object.keys(object);
-  var output = [];
-
-  keys.forEach(function(key) {
+  return Object.keys(object).reduce(function(array, key) {
     var predicate = object[key];
@@ -37,7 +30,7 @@
     if (predicate) {
-      pushArray(output, stringToArray(key));
+      return array.concat(stringToArray(key));
+    } else {
+      return array;
     }
-  });
-
-  return output;
+  }, []);
 }
@@ -50,3 +43,3 @@
     return list.reduce(function (array, string) {
-      return array.concat(stringToArray(string));
+      return !!string ? array.concat(stringToArray(string)) : array;
     }, []);
@@ -91,24 +84,15 @@ } else if (isObject(list)) {
 
-      var rootName;
-      if (element) {
-        rootName = blockName + '__' + element;
-      } else {
-        rootName = blockName;
-      }
+      var rootName = element ? blockName + '__' + element : blockName;
+      var className = [rootName]
+        .concat(listToArray(modifiers).map(function(modifier) {
+          return rootName + modifierDelimiter + modifier;
+        }))
+        .concat(listToArray(extraClassNames))
+        .join(' ')
+        .trim();
 
-      // Always include the root name first
-      var classNames = [rootName];
-
-      // Push on modifiers list and extraClassNames list
-      pushArray(classNames, listToArray(modifiers).map(function(modifier) {
-        return rootName + modifierDelimiter + modifier;
-      }));
-      pushArray(classNames, listToArray(extraClassNames));
-
-      var classNameString = classNames.join(' ').trim();
-
       if (outputIsString) {
-        return classNameString;
+        return className;
       } else {
-        return { className: classNameString };
+        return { className: className };
       }
@@ -115,0 +99,0 @@ };

package.json

 {
   "name": "react-bem-helper",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "allows you to easily add BEM-style element and modifier classes to React elements, while hopefully making it easier to scan.",
@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

 # React BEM helper
-[![npm version](https://badge.fury.io/js/react-bem-helper.svg)](http://badge.fury.io/js/react-bem-helper)
+[![npm version](https://badge.fury.io/js/react-bem-helper.svg)](http://badge.fury.io/js/react-bem-helper) [![Build Status](https://travis-ci.org/marcohamersma/react-bem-helper.svg?branch=master)](https://travis-ci.org/marcohamersma/react-bem-helper)
 
@@ -92,2 +92,13 @@ A helper making it easier to name React.js components according to [BEM conventions](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). It removes the repetition from writing the component name multiple times for elements and elements with modifier classes on them.
 
+#### Constructor options
+| Name                     | Type      | Default  | Description                                    |
+|--------------------------|-----------|----------|------------------------------------------------|
+| `name`                   | `string`  | Required | The name of the BEM block.                     |
+| `prefix`                 | `string`  | `''`     | A prefix for the block name.                   |
+| [`modifierDelimiter`][1] | `string`  | `'--'`   | The separator between element name and modifier name.|
+| [`outputIsString`][2]    | `boolean` | `false`  | Whether to return an object or a plain string from the helper.|
+
+[1]: #modifier-delimiter--default-bem-naming-scheme
+[2]: #output-as-string
+
 ### Using the helper
@@ -111,2 +122,15 @@ When executed, the helper returns an object with a `className` property. When the helper is called without any arguments, its value will consist of the block name (prefixed if applicable)
 
+#### Parameters
+| Name             | Type                                    | Default  | Description              |
+|------------------|-----------------------------------------|----------|--------------------------|
+| [`element`][3]   | `string`                                | `''`     | The name of the BEM element.|
+| [`modifiers`][4] | `string` or `string[]` or `object` (\*) | `''`     | A set of BEM modifiers.  |
+| [`extra`][5]     | `string` or `string[]` or `object` (\*) | `''`     | A set of plain, non-BEM classes. |
+
+[3]: #element
+[4]: #modifiers
+[5]: #extra-classes
+
+**(\*)** _These parameters can be either strings, array of strings, or an object whose keys will be applied if their values are evaluated as truthy (booleans or functions returning booleans). If any of the strings contain spaces, these will be split up._
+
 #### Alternate Syntax
@@ -116,21 +140,14 @@ The bemHelper supports up to three arguments: `element`, `modifiers`, and `extra` classes, although _an object containing any of these parameters is also supported:_
 ```jsx
-var React     = require('react'),
-    BEMHelper = require('react-bem-helper');
+function element() {
+  var options = {
+    element:   'element',
+    modifiers: 'modifier',
+    extra:     'extra'
+  };
 
-var classes = new BEMHelper('componentName');
-
-module.exports = React.createClass({
-  render: function() {
-    var options = {
-      element:   'element',
-      modifiers: 'modifier',
-      extra:     'extra'
-    };
-
-    return (
-      <div {...classes(options)} />
-    );
-    // Returns <div className='componentName__element componentName__element--modifier extra'/>
-  }
-});
+  return (
+    <div {...classes(options)} />
+  );
+  // Returns <div className='componentName__element componentName__element--modifier extra'/>
+};
 ```
@@ -137,0 +154,0 @@

No alert changes

Improved metrics

Number of lines in readme file

309

increased by5.82%

Worsened metrics

Total package byte prevSize

72258

decreased by-12.3%

Number of package files

11

decreased by-26.67%

Lines of code

221

decreased by-50.56%

No dependency changes