Awesome

postxml-beml

PostXML plugin for processing BEML templates

Installation

npm i postxml-beml --save-dev

How to use

Usage

var fs = require('fs'),
   postxml = require('postxml'),
   plugin = require('postxml-beml');

var html = fs.readFileSync('input.html', 'utf8');

var opts = {
  elemPrefix: '__',
  modPrefix: '_',
  modDlmtr: '_'
};

var output = postxml(
      html,
      [
         plugin(opts)
      ]
   );

Sample

<div block="b-animals">
  <div elem="cat" mod="size:big, color:red"></div>
</div>

translated to

<div class="b-animals">
  <div class="b-animals__cat b-animals__cat_size_big b-animals__cat_color_red"></div>
</div>

Syntax reference

Blocks

<div block="animals">
  <div block="unicorn"></div>
</div>

<div class="animals">
  <div class="unicorn"></div>
</div>

Elements

<div block="animals">
  <div elem="item">
    <div elem="item-name"></div>
  </div>
</div>

<div class="animals">
  <div class="animals__item">
    <div class="animals__item-name"></div>
  </div>
</div>

Modifiers

<div block="animals">
  <div block="unicorn" mod="size:large, female"></div>
</div>

<div class="animals">
  <div class="unicorn inicorn_size_large unicorn_female"></div>
</div>

Mixes

<div block="animals">
  <div elem="item" mix="block:unicorn, mod: [large, female]">
    <div block="unicorn" elem="photo"></div>
    <div elem="item-name"></div>
  </div>
</div>

<div class="animals">
  <div class="animals__item unicorn unicorn_large unicorn_female">
    <div class="unicorn__photo"></div>
    <div class="animals__item-name"></div>
  </div>
</div>

For complex values you can use pseudo JSON syntax:

<div block="unicorn" mix="block:animals, elem:item, mod:{size:large,gender:female}"></div>
<div block="unicorn" mix="{block:b-mix-1}, {block:b-mix-2, mod:[mod1, mod2]}"></div>

<div class="unicorn animals__item animals__item_size_large animals__item_gender_female"></div>
<div class="unicorn b-mix-1 b-mix-2 b-mix-2_mod1 b-mix-2_mod_2"></div>

Licence

MIT