Skip to content

Instantly share code, notes, and snippets.

@pokatomnik
Created June 23, 2018 23:24
Show Gist options
  • Save pokatomnik/64b58b72ed396c7c594936ed9260d1a5 to your computer and use it in GitHub Desktop.
Save pokatomnik/64b58b72ed396c7c594936ed9260d1a5 to your computer and use it in GitHub Desktop.
Bem utils for Javascript/Typescript
'use strict';
// Creates an array of truthy elements
const joinTruthy = (glue, ...args) => args.filter(arg => arg).join(glue);
// Simple bem function
export const bemUnbound = (blockName, elementName, options = {}) => [
joinTruthy('__', blockName, elementName),
...Object
.entries(options)
.reduce(
(classes, [key, enabled]) => enabled
? [
...classes,
[joinTruthy('__', blockName, elementName), key].join('--')
]
: classes, []
)
].join(' ');
// The bem function which takes BLOCK_CLASS from the prototype
export const bem = function (elementName, options) {
return bemUnbound(this.BLOCK_CLASS, elementName, options);
}
// Decorator function
export const EnableBem = (blockClass) =>
(target) => {
target.prototype.BLOCK_CLASS = blockClass;
target.prototype.bem = bem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment