XJT/BEMS - Xtendable js/json Transformation (BEMTREE killer) based on `Block Elem Mod State` concept

sample.xjt.js

// TOC
// Intro
// # New BEM based blocks concept — BEMS
// # New 3-step templating concept
// Example

/**
# New BEM based blocks concept — BEMS

## Нейминг: Не мода, а поле
Вместо термина "мода" (mode), используется "поле" (prop)
Ибо, какая нафиг мода (=режим), если это просто поле?

## mods
Модификаторы расщепляются на mods (view) и state

## mix
Миксы расщепляются на mix и base (наследование)
*/

/**
# New 3-step templating concept (data-data-bemjson-html)
bempriv is optional. Uses for complex blocks

                [BEMPRIV]        XJT         BEMHTML
  -- data ---------@-- data ------@-- bemjson --@-- html
      fp js code --/   xjt tpls --/   bemhtml --/
 
 
  instead of old model:
                [BEMPRIV]     BEMTREE        BEMHTML
  -- data ---------@-- bemjson --@--- bemjson --@-- html
         js code --/   bemtree --/    bemhtml --/


Clear Data aren't contain `{ block: 'foo' }`

xjt - Data JSON to BEMJSON transition tool (concept)


## Нейминг: не ctx, а data

## Доопределения и переопределения
Merge strategies
    merge: 'override',  // by entire propSet - переопределение
    merge: 'extend',    // by entire props (default) - доопределение, переопределяющее имеющиеся поля
    merge: 'deep',      // deep props scan, not workin' on arrays - глубокое доопределение

Note: Массивы не мержатся (На массивах всегда выставляется стратегия extend)
*/

// Example

// common:
[{
    // match section (block, elem, mods, elemMods)
    block: 'carousel',

    // apply (body) section (state, content, mix)
    state: { offset: 'start' }, // start|middle|end
    // gives -> [{elem:'item'..},{elem:'item'..},{elem:'item'..},,,]
    // .items <- this.data.items = [{thumb:{},title,,},,,]
    content: { mapData: '.items', elem: 'item' },
},
{
    block: 'carousel', elem: 'item',

    state: { theme: 'square' },
    url: '.thumb.url',
    title: '.title' // original data: this.data.items[i].title
}]

// deskpad:
[{
    merge: 'override', // not recomended at all
    block: 'carousel', elem: 'item',

    state: { hovered: false }, // after override: { hovered: false } (loose theme: 'square' )
}]

// desktop:
[{
    merge: 'deep',
    // matches `carousel__has-header` only
    block: 'carousel', mods: { 'has-header': true },

    content: [ { elem: 'header' }, '::content' ] // access super block prop
},
{
    merge: 'deep',
    block: 'carousel', elem: 'item',

    state: { theme: 'rect' }, // after merge: { full: true, theme: 'rect' }
    content: '.title'
}]

Q: Как отлаживать? Мы только отказались от bemhtml DSL
A: в любом месте XJT-шаблона предполагается возможным заменить короткую запись на функцию и поставить туда console.log или debugger, а затем вернуть обратно декларативную запись.

Кроме того, есть идея использовать спец-символ в строках типа '.key' для включения отладки
например: '!log!.key' будет выводить подробный лог проходящих через маппинг данных со всеми "явками и паролями"