bem / bem-sdk Goto Github PK

View Code? Open in Web Editor NEW

85.0 22.0 26.0 2.18 MB

BEM SDK packages

Home Page: https://en.bem.info/toolbox/sdk/

JavaScript 100.00%

bem naming decl deps bundle cell config entity-name graph walk

bem-sdk's People

Contributors

Stargazers

Watchers

bem-sdk's Issues

Add `csswizardry` preset

Preset support convention by Harry Roberts.

//`bemLikeNaming` is equal `customNaming`
var bemLikeNaming = new bemNaming.BEMNaming('csswizardry');
var customNaming = new bemNaming.BEMNaming({
    elem: '__',
    mod: '--'        
});

Add `typeOf` method

It seems that the is* methods are not always convenient.

Useful if you want to check an entity once.
Inconvenient if you want to use switch logic.

typeOf(str)

bemNaming.typeOf('block');           // block
bemNaming.typeOf('block__elem');     // elem
bemNaming.typeOf('block_mod');       // blockMod
bemNaming.typeOf('block__elem_mod'); // elemMod

typeOf(obj)

bemNaming.typeOf({ block: 'block' });                               // block
bemNaming.typeOf({ block: 'block', elem: 'elem' });                 // elem
bemNaming.typeOf({ block: 'block', modName: 'mod' });               // blockMod
bemNaming.typeOf({ block: 'block', elem: 'elem', modName: 'mod' }); // elemMod

How you can use this method:

switch (bemNaming.typeOf(entity)) {
    case 'block':    /*...*/ break;
    case 'elem':     /*...*/ break;
    case 'blockMod': /*...*/ break;
    case 'elemMod':  /*...*/ break;
}

or:

var type = bemNaming.typeOf(entity);

if (type === 'block') {
    return val1;
}

if (type === 'elem') {
    return val2;
}

return val3;

Add `isBlock` method

Spec:

naming.isBlock('block');                             // true
naming.isBlock('block__elem');                       // false

naming.isBlock({ block: 'block' });                  // true
naming.isBlock({ block: 'block', elem: 'elem' });    // false

i-locale__promo.ru

We have i-locale__promo.ru element, which builds in ENB, but bem-naming is fails to parse it.

//cc @dench

Add dist

rewrite lib/bem-naming.js as es6 module
add compiled module for development dist/bem-naming.dev.js
add source maps for development dist/bem-naming.dev.js.map
move minified version to dist/bem-naming.js
bower & npm main should refer to dist/bem-naming.js.

Support baseless (BEViS) naming

Since there are:

https://github.com/azproduction/b_ (which does it in similar way)
https://github.com/bem/bh/pull/134/files — support is already in BH 4.0

etc.

Add shortcut modifiers naming convention

Please add shortcut modifiers naming convention like .blockName__elName.-mod_val ie class="blockName__elName -mod_val"
This format is used by us at iDeus: https://github.com/ideus-team/guidelines/blob/master/frontend/bem.md and some foreign developers: http://viget.com/extend/bem-sass-modifiers

Consider !hasOwnProperty('modVal') as `true`

wordPattern contains only small letters

This pattern contains only small english letters. Is this expected to be so?

The Mod Field

I think we should use the mod name instead of modName with modVal.

Now:

{ block: 'button', modName: 'size', modVal: 's' },
{ block: 'button', modName: 'disabled', modVal: true }

Need:

{ block: 'button', mod: { name: 'size', val: 's' } },
{ block: 'button', mod: 'disabled' }

Why?

The record will be easier for boolean modifiers.
There will be less confusion with the { block: 'button', modName: 'size', modVal: false }.
The modifier is always described by one field.
It will be easier to define the type of entity.

What about linter / checker of BEM structure of CSS code ?

Hi, is there some tooling for checking the structure of CSS code following BEM approach and having and some warnings if there are errors?

Thanks a lot

Provide a way to support custom modifier separator

like block__elem_mod!!!val

For now it's impossible to do.

Purpose is using for Harry Roberts' notation: block__elem--mod_val.

True Global

Now to provide bemNaming to global scope using this:

(function (global) {

})(this);

In NodeJS this link to module.exports, but not in global variables.

For browsers need use window variable.

(function (global) {

})(typeof window !== "undefined" ? window : global);

Simplify API: custom naming convention

Now we need use BEMNaming class to create instance.

var BEMNaming = bemNaming.BEMNaming;
var myNaming = new BEMNaming({ elem: '__', mod: '--' }); 

myNaming.parse('block__elem--mod');

The bemNaming can be function that returns a BEMNaming instance.

var myNaming = bemNaming({ elem: '__', mod: '--' });

myNaming.parse('block__elem--mod');

Provide delimiters

Inspired by Pull Request #46

bemNaming.delims.elem // __
                      //    2 underscores
bemNaming.delims.mod  // _  
                      //    1 underscore

Cache create of custom naming

actual:

bemNaming({ elem: '__', mod: '--' }); // create instance of BEMNaming
bemNaming({ elem: '__', mod: '--' }); // create instance of BEMNaming

expected:

bemNaming({ elem: '__', mod: '--' }); // create instance of BEMNaming
bemNaming({ elem: '__', mod: '--' }); // get instance from previous step

BemEntityName object

The parse method should return BemEntityName object.

It will allow use helpers of BemEntityName.

const parse = require('naming').parse;

const entityName = parse('button_disabled');

entityName.id; // button_disabled
entityName.type; // mod

entityName.isEqual({ block: 'button' }); // false
entityName.belongsTo({ block: 'button' }); // true

The stringify method should support BemEntityName object to consistency.

Return originalNaming if no opts passed

stringify: return `undefined` if impossible to stringify BEM notation

now need use try..catch:

try {
    var str = bemNaming.stringify({ elem: 'elem' });
} catch(e) { /* ... */ }

it will be easier to check for an empty string:

var str = bemNaming.stringify({ elem: 'elem' });

if (str) {
    /* ... */ 
}

Add doc about notation of mods

Provide common presets

It is necessary to add preset option to constructor:

import bemNaming from 'bem-naming';

const naming = bemNaming('two-dashes');

Possible values:

origin (by default) — Yandex convention (block__elem_mod_val)
two-dashes — Harry Roberts convention (block__elem--mod_val)

Implement BEMJSON notation

Will be very helpful if there will be full BEMJSON support:

bemNaming.stringify({block: 'page', mods: {type: 'inner'}, mix: {block: 'page-404', elem: 'content', elemMods: {type: 'any'}}});
// page page_type_inner page-404__content_type_any

Functions not working without context

How to reproduce?

var stringifyEntity = require('bem-naming').stringify;

stringifyEntity({ block: 'button', modName: 'size', modVal: 's' });

// Uncaught TypeError: Cannot read property 'modDelim' of undefined

Remove deprecated `BEMNaming` field

BEMNaming class it used to create instance.

var BEMNaming = bemNaming.BEMNaming,
    myNaming = new BEMNaming({ elem: '__', mod: '--' }); 

myNaming.parse('block__elem--mod');

Why this module parses BEM identifier modificator and value as modName and modVal, but not as mod and val? (for example deps uses mod and val notation - http://bem.info/tools/bem/bem-tools/depsjs/)

Update `harry-roberts` tests

http://cssguidelin.es/#bem-like-naming

parse returns undefined

В таких случаях

block_mod_mod_val

получаем undefined.

Я видел такое именование для картинок, например, такой файл

block_mod_modVal_blah.svg

или

block_mod_modVal__blah.png

throw error if detect not valid string

// now
bemNaming.isBlock('') // throw

// need
bemNaming.isBlock('') // false

Remove deprecated options

elemSeparator
modSeparator
literal

Move typeOf methods to `bem-entity-name` package

add typeOf method to BemEntityName: We can use type field in BemEntityName instance.
remove typeOf method.

Changelog for v1.0.0

Add `isElem` method

Spec:

naming.isBlock('block');                             // false
naming.isBlock('block__elem');                       // true

naming.isBlock({ block: 'block' });                  // false
naming.isBlock({ block: 'block', elem: 'elem' });    // true

Doc: Add note about impossibility of elems or elems

Add doc about Harry Roberts naming convention

Split into small modules

API

parse(str: string [, ({ delims: {elem, mod: { name, val }}, wordPattern } | string)])
stringify(obj: object | BemEntityName [, ({ delims: {elem, mod: { name, val }}, wordPattern } | string)])

Examples

const parse = require('@bem/naming.parse');
const stringify = require('@bem/naming.stringify');

parse('button__text'); // BemEntityName { block: 'button', text: 'text' }
stringify({ block: 'button', text: 'text' }); // 'button__text'

parse('button--disable', 'two-dashes'); // BemEntityName { block: 'button', mod: 'disable' }
stringify({ block: 'button', mod: 'disabled' }, 'two-dashes'); // 'button--disabled'

Add docs for `validate` method

Add `validate` method

Spec:

naming.validate('block__elem');   // true
naming.validate('block^_^elem');  // false

Update API

Changes:

rename elemSeparator to elem
rename modSeparator to mod
use wordPattern instead of literal

How to use original naming:

var original = new bemNaming.BEMNaming({
    elem: '__',
    mod: '_',
    wordPattern: '[a-z0-9]+(-[a-z0-9]+)*'
});

// or 

var original = new bemNaming.BEMNaming();

// or 

var original = bemNaming;

How to use convention by Harry Roberts :

var bemLike = new bemNaming.BEMNaming({
    elem: '__',
    mod: '--'
});

// or

var bemLike = new bemNaming.BEMNaming({
    elem: '__',
    mod: '--',
    wordPattern: '[a-z0-9]+(-[a-z0-9]+)*'
});

// or

var bemLike = new bemNaming.BEMNaming({
    mod: '--'
});

How use custom naming:

var custom = new bemNaming.BEMNaming({
    elem: '-',
    mod: '--',
    wordPattern: '[a-zA-Z0-9]+'
});

Add license

Bind methods to naming object

['b1__e1', 'b1_m1_v1'].map(bemNaming.parse);

should work.

Add `isMod` methods

isElemMod(str | obj) — modifier of element only
isBlockMod(str | obj) — modifier of block only

bem / bem-sdk Goto Github PK

bem-sdk's People

Contributors

Stargazers

Watchers

Forkers

bem-sdk's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs