@bem/naming - npm Package Compare versions

Comparing version 2.0.0-2 to 2.0.0-3

CHANGELOG.md

@@ -151,2 +151,42 @@ Changelog
 
+#### The `bem-naming` constructor signature for custom-naming was changed ([#160]).
+
+`{ elem: '…', mod: '…' }` → `{ delims: { elem: '…', mod: '…' } }`
+
+**API v1.x.x**
+
+```js
+const bemNaming = require('bem-naming');
+
+const myNaming = bemNaming({
+    elem: '-',
+    mod: { name: '--', val: '_' }
+    wordPattern: '[a-zA-Z0-9]+'
+});
+
+myNaming.parse('block--mod_val'); // { block: 'block'
+                                  //   modName: 'mod',
+                                  //   modVal: 'val' }
+```
+
+**API v2.x.x**
+
+```js
+const bemNaming = require('@bem/naming');
+
+const myNaming = bemNaming({
+    delims: {
+        elem: '-',
+        mod: { name: '--', val: '_' }
+    },
+    wordPattern: '[a-zA-Z0-9]+'
+});
+
+myNaming.parse('block--mod_val'); // BemEntityName
+                                  // { block: 'block',
+                                  //   mod: { name: 'mod', val: 'val' } }
+```
+
+[#160]: https://github.com/bem-sdk/bem-naming/pull/160/files
+
 ### NPM
@@ -172,2 +212,8 @@
 
+### Presets
+
+* Added react preset (@yeti-or [#161]).
+
+[#161]: https://github.com/bem-sdk/bem-naming/pull/161
+
 ### Performance
@@ -174,0 +220,0 @@

index.js

@@ -13,2 +13,12 @@ 'use strict';
 /**
+ * Delims of bem entity, elem and/or mod.
+ *
+ * @typedef {Object} Delims
+ * @param {String} [elem='__']      Separates element's name from block.
+ * @param {String|Object} [mod='_'] Separates modifiers from blocks and elements.
+ * @param {String} [mod.name='_']   Separates name of modifier from blocks and elements.
+ * @param {String} [mod.val='_']    Separates value of modifier from name of modifier.
+ */
+
+/**
  * Creates namespace with methods which allows getting information about BEM entity using string as well
@@ -18,6 +28,3 @@ * as forming string representation based on naming object.
  * @param {Object} [options]              Options.
- * @param {String} [options.elem=__]      Separates element's name from block.
- * @param {String|Object} [options.mod=_] Separates modifiers from blocks and elements.
- * @param {String} [options.mod.name=_]   Separates name of modifier from blocks and elements.
- * @param {String} [options.mod.val=_]    Separates value of modifier from name of modifier.
+ * @param {Delims} [options.delims]       Defines delims for bem entity.
  * @param {String} [options.wordPattern]  Defines which symbols can be used for block, element and modifier's names.
@@ -128,3 +135,3 @@ * @return {Object}
  * @param {Object} options - user options
- * @returns {{delims: Object, wordPattern: String}}
+ * @returns {{delims: Delims, wordPattern: String}}
  */
@@ -149,7 +156,8 @@ function init(options) {
     const defaultModDelims = defaultDelims.mod;
-    const mod = options.mod || defaultDelims.mod;
+    const optionsDelims = options.delims || {};
+    const mod = optionsDelims.mod || defaultDelims.mod;
 
     return {
         delims: {
-            elem: options.elem || defaultDelims.elem,
+            elem: optionsDelims.elem || defaultDelims.elem,
             mod: typeof mod === 'string'
@@ -169,3 +177,3 @@ ? { name: mod, val: mod }
  *
- * @param {Object} delims      Separates block names, elements and modifiers.
+ * @param {Delims} delims      Separates block names, elements and modifiers.
  * @param {String} wordPattern Defines which symbols can be used for block, element and modifier's names.
@@ -172,0 +180,0 @@ * @returns {RegExp}

lib/presets/index.js

@@ -5,3 +5,4 @@ 'use strict';
     origin: require('./origin'),
+    react: require('./react'),
     'two-dashes': require('./two-dashes')
 };

package.json

 {
   "name": "@bem/naming",
-  "version": "2.0.0-2",
+  "version": "2.0.0-3",
   "description": "Manage naming of BEM entities",
@@ -5,0 +5,0 @@ "license": "MPL-2.0",

README.md

@@ -33,11 +33,17 @@ bem-naming
 
+**Parse**
 ```js
 const bemNaming = require('@bem/naming');
+
+bemNaming.parse('button__text'); // BemEntityName { block: 'button', elem: 'text' }
+```
+
+**Stringify**
+```js
+const bemNaming = require('@bem/naming');
 const BemEntityName = require('@bem/entity-name');
 
-bemNaming.parse('button__text'); // { block: 'button', elem: 'text' }
-
 const entityName = new BemEntityName({ block: 'button', mod: 'checked' });
 
-bemNaming.stringify(entityName); // button_checked
+bemNaming.stringify(entityName); // String 'button_checked'
 ```
@@ -52,2 +58,3 @@
 * [Harry Roberts' naming convention](#harry-roberts-naming-convention)
+* [React naming convention](#react-naming-convention)
 * [Custom naming convention](#custom-naming-convention)
@@ -134,2 +141,27 @@ * [API](#api)
 
+React naming convention
+-----------------------
+
+According to this convention elements are delimited with one hyphen (`-`), modifiers are delimited by one underscore (`_`), and values of modifiers are delimited by one underscore (`_`).
+
+You can explore this convention at [bem-react-components](https://github.com/bem/bem-react-components).
+
+Example:
+
+```js
+const reactNaming = require('@bem/naming')('react');
+
+reactNaming.parse('block-elem');    // BemEntityName { block: 'block', elem: 'elem' }
+reactNaming.parse('block_mod_val'); // BemEntityName { block: 'block',
+                                    //                 mod: { name: 'mod', val: 'val' } }
+
+reactNaming.stringify({
+    block: 'block',
+    elem: 'elem',
+    mod: 'mod'
+});
+
+// ➜ block-elem_mod
+```
+
 Custom naming convention
@@ -146,4 +178,6 @@ ------------------------
 const myNaming = bemNaming({
-    elem: '-',
-    mod: { name: '--', val: '_' }
+    delims: {
+        elem: '-',
+        mod: { name: '--', val: '_' }
+    },
     wordPattern: '[a-zA-Z0-9]+'   // because element and modifier's separators include
@@ -153,10 +187,14 @@ });                               // hyphen in it, we need to exclude it from block,
 
-myNaming.parse('block--mod_val'); // { block: 'block',
+myNaming.parse('block--mod_val'); // BemEntityName
+                                  // { block: 'block',
                                   //   mod: { name: 'mod', val: 'val' } }
 
-myNaming.stringify({              // 'blockName-elemName--simpleElemMod'
+const BemEntityName = require('@bem/entity-name');
+
+myNaming.stringify(new BemEntityName({
     block: 'blockName',
     elem: 'elemName',
     mod: 'simpleElemMod'
-});
+});                               // 'blockName-elemName--simpleElemMod'
+
 ```
@@ -167,3 +205,3 @@
 
-* [bemNaming({ elem, mod, wordPattern })](#bemnaming-elem-mod-wordpattern-)
+* [bemNaming({ delims: {elem, mod}, wordPattern })](#bemnaming-elem-mod-wordpattern-)
 * [parse(str)](#parsestr)
@@ -175,11 +213,12 @@ * [stringify(obj)](#stringifyobj)
 
-### bemNaming({ elem, mod, wordPattern })
+### bemNaming({ delims: {elem, mod}, wordPattern })
 
-Parameter     | Type     | Description                                                                       | Default
---------------|----------|-----------------------------------------------------------------------------------|----------------------------------------
-`elem`        | `string` | Separates element's name from block.                                              | `__`
-`mod`         | `string`, `{ name: string, val: string }` | Separates modifier from block or element.        | `_`
-`mod.name`    | `string` | Separates a modifier name from a block or an element.                             | `_`
-`mod.val`     | `string` | Separates the value of a modifier from the modifier name.                         | Default as the value of the `mod.name`.
-`wordPattern` | `string` | Defines which characters can be used in names of blocks, elements, and modifiers. | `[a-z0-9]+(?:-[a-z0-9]+)*`
+Parameter         | Type     | Description                                                                       | Default
+------------------|----------|-----------------------------------------------------------------------------------|----------------------------------------
+`delims`          | `object` | Defines delimeters for elem and/or mods                                           |
+`delims.elem`     | `string` | Separates element's name from block.                                              | `__`
+`delims.mod`      | `string`, `{ name: string, val: string }` | Separates modifier from block or element.        | `_`
+`delims.mod.name` | `string` | Separates a modifier name from a block or an element.                             | `_`
+`delims.mod.val`  | `string` | Separates the value of a modifier from the modifier name.                         | Default as the value of the `mod.name`.
+`wordPattern`     | `string` | Defines which characters can be used in names of blocks, elements, and modifiers. | `[a-z0-9]+(?:-[a-z0-9]+)*`
 
@@ -186,0 +225,0 @@ ### parse(str)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52733

increased by5.39%

Number of package files

9

increased by12.5%

Lines of code

195

increased by8.94%

Number of lines in readme file

279

increased by16.25%

No dependency changes