BEM-helper system for Pug (Jade)
-
Checking for mixes and modifiers of current block or element within the template
Via npm:
npm install --save pbem
As an example of basic usage, see the demo. You can run the demo by command in this module directory:
npm run demo
And rendered template will be displayed in the terminal. Also you can run this command from your app directory:
node -e 'require("pbem/demo")'
Create a namespace. Each namespace contains the custom settings.
-
Object
config
— Object with params:-
String
templateExt
— Template file name extension. Defaut.pug
-
String
viewsDir
— Directory for main templates. Defaultpath.join(process.cwd(), 'views')
-
String
blocksDir
— Blocks directory. Defaultpath.join(process.cwd(), 'views/blocks')
-
String
elementDelimiter
— Block-element delimiter. Default__
-
String
modifierDelimiter
— (Block|element)-modifier delimiter. Default_
-
String
modifierValueDelimiter
— Modifier-value delimiter. Default_
-
String
vordsDelimiter
— Words delimiter in modifier name and value. Default_
-
Object
pugOptions
— Pug options -
Object
beautify
— Beautify options (works ifconfig.pugOptions.pretty === true
)
@returns
Object
namespace
-
const pbem = require('pbem');
const mainScope = pbem({
viewsDir: __dirname + '/views',
blocksDir: __dirname + '/views/blocks',
pugOptions: {
pretty: true
}
});
Precompile all templates in namespace.
@returns
Object
namespace
Create a main template as an instance of class
Template
.
-
String
name
— Template file name without extension -
Object
options
— Template options with params:-
Object
locals
— Data for rendering -
Boolean
debug
— Debug mode. All private properties and methods will be available in propertyprivates
of Template instance
-
const mainScope = require('pbem')({
viewsDir: __dirname + '/views'
});
// __dirname + '/views/index.pug'
let indexTemplate = mainScope.createTemplate('index');
// Render template and return as string
indexTemplate.toString();
const pug = require('pug');
const pbem = require('pbem');
const scope = pbem({
blocksDir: __dirname + 'views/blocks'
}).precompile();
const separateTemplate = pug.compileFile(__dirname + 'views/page.pug');
let renderedSeparateTemplate = separateTemplate({
block: scope.createBlock
});
This API is available in templates.
Available in main template, Block template and Element template.
Alias of method Template.prototype.createBlock()
-
String
name
— Template file name without extension -
Object
options
— Template options with params:-
Object
mods
— Modifiers. Values must bestring
ortrue
-
Array,
mixes
— Mixes.Mixes format must be:
let mixes = [ // Add two CSS classes: block-1, block-1_modifier_value1 ['block-1', {modifier: 'value1'}], // block-2, block-2__element-2, block-2__element-2_modifier_value2 ['block-2', 'element-2', {modifier: 'value2'}] ];
or
let mixes = [ {block: 'block-1', element: 'element-1', mods: { ... }}, {block: 'block-2', mods: { ... }} ];
-
Object
data
— HTML data-attributeslet data = { // Equal data-ajax-url="/posts/100500" ajaxUrl: '/posts/100500' };
-
Object
attributes
— Other HTML attributes -
Object
locals
— Data for rendering -
Boolean
debug
— Debug mode. All private properties and methods will be available in propertyprivates
of Template instance
@returns
Block
instance. -
Available in Block template and Element template.
Alias of method Block.prototype.createElement()
in Block template or
alias of method Element.prototype.createElement()
in Element template.
-
String
name
— Element name (part of template file name) -
Object
options
— Template options like options ofblock()
@returns
Element
instance.
Available in Block template and Element template.
Compile HTML attributes of current BEM-entity:
div&attributes( attributes() )
http://jade-lang.com/reference/attributes/
Adds locals
There is in the Template
, Block
,
Element
pbem.createTemplate('index')
.local('var1', 'value1')
.local('var2', 'value2');
!= block('header').local('title', post.title);
!= block('content').local({text: post.content, date: post.date});
Adds one or many modifiers, attributes or data-attributes
There is in the Block
,
Element
. Also used, as in the previous case.
Adds one or many mixes
Add one mix:
!= block('header').mix('article', 'info', {compact: true})
One mix or many mixes:
// As one or many arguments
.mix(['block-1', {mod1: true}], ['block-2', 'element-2', {mod2: 'value'}], ...)
.mix({block: 'block', element: 'element', mods: { ... }}, ...)
// As Array
.mix([{block: 'block-1'}, ['block-2', 'element-2', {mod2: true}], ...])
Checks a modifier of current block/element
//- Converse type of value to Boolean
isMod('modifier')
//- Strict comparison
isMod('modifier', 'value')
Get modifier value
if isMod('theme')
| This theme name is #{mod('theme')}