Enb-bemify-templates NPM

enb-bemify-templates

An ENB tech which compiles BH and BEMXJST templates to the javascript BEM module definitions.

Description

This tech takes provided BH, BEMHTML or BEMTREE template files, and converts it to the ES2015 javascript code. Export name for templates and type must be specified in the required options exportName and type accordingly.

For example, we have next template files:

    bh.match('block', (ctx) => {
        ctx.tag('h1');
        ctx.content({
            elem: 'hello-text',
            message: ctx.message
        })
    })

BEMHTML

    block('block').elem('hello-text')(
        tag()('strong'),
        content((ctx) => {
            return ctx.message
        })
    )

BEMTREE

    block('block')(
        extend()({
            'ctx.msg': 'Hello world!!!'
        })
    )

This files will be compiled to the templates files contained the next code:

    modules.define("templates__bh", [], (_provide) => {
        _provide(function (exported){
            return exported
        },({
            default: (BH) => {
                const bh = BH
                bh.match('block', (ctx) => {
                    ctx.tag('h1');
                    ctx.content({
                        elem: 'hello-text',
                        message: ctx.message
                    })
                })
            }
        }))
    })

BEMHTML

    modules.define("templates__bemhtml", [], (_provide) => {
        _provide(function (exported){
            return exported
        },({
            default: () => {
                block('block').elem('hello-text')(
                    tag()('strong'),
                    content((ctx) => {
                        return ctx.message
                    })
                )
            }
        }))
    })

BEMTREE

    modules.define("templates__bemtree", [], (_provide) => {
        _provide(function (exported){
            return exported
        },({
            default: () => {
                block('block')(
                    extend()({
                        'ctx.msg': 'Hello world!!!'
                    })
                )
            }
        }))
    })

Usage

If you want to use this tech in your project, you should to:

Firstly install this tech from the npm repository,

    npm install --save-dev enb-bemify-templates

Next configure your tech into the .enb/enb-make.js file for needed template types:

    //.enb/enb-make.js
    nodeConfig.addTechs(require('enb-bemify-templates'), {
        target: '?.bh.js',
        suffixes: ['bh.js'],
        exportName: "BH",
        type: "BH"        
    })

    nodeConfig.addTechs(require('enb-bemify-templates'), {
        target: '?.bemhtml.js',
        suffixes: ['bemhtml.js'],
        exportName: "BEMHTML",
        type: "BEMHTML"        
    })

    nodeConfig.addTechs(require('enb-bemify-templates'), {
        target: '?.bemtree.js',
        suffixes: ['bemtree.js'],
        exportName: "BEMTREE",
        type: "BEMTREE"        
    })