Автоматическая нарезка верстки с определенными плейсхолдерами

AlexandrBukhtatyy commented 8 years ago

Здравствуйте, имеется ли возможность прицепить какой нибудь обработчик к стандартному сборщику для нарезки блоков на отдельные файлы? если да то как првильней реализовать данную фичу?

Предистория:

Сейчас работаю с Modx и там имеется возможность создавать блоки кода - Чанки (блоки по методологии БЭМа) и шаблон страниц (Bundles). Но чанки могут в себе подключать другие чанки как в БЭМе блоки. само подключение выглядит следующим образом [[$intro? &name=George&messageCount=12]]

Задача в следующем:

делать 2 версии верстки при билде. 1я это чистая верстка для демонстрации и тд. 2я это возможность нарезать блоки на чанки и определять в них разные плейсхолдеры

Пример

BEMJSON:

{
 block:"list",
 tag: "ul",
 block_rplc:"[[!Wayfinder?  &outerTpl=`list` &RowTpl=`list__item` &activeClass=`list__item--active`]]",
 content_rplc: "[[+wf.wrapper]]",
 content:[
 {
  element:"item",
  tag:"li",
  class_add:"[[+wf.class]]",
  content_rplc: "[[+wf.linktext]]",
  content:"item1",
 },{
  element:"item",
  tag:"li",
  content:"item2",
 },{
  element:"item",
  tag:"li",
  content:"item3",
 } 
]
}

Реализован по БЭМ:

<ul class="list">
 <li class="list__item">item1</li>
 <li class="list__item">item2</li>
 <li class="list__item">item3</li>
</ul>

после нарезки получим 2 чанка list.html

<ul class="list">[[+wf.wrapper]]</ul>

list__item.html

<li class="list__item [[+wf.class]]">[[+wf.linktext]]</li>

а в бандле вместо блока list должны получить следующее:

[[!Wayfinder?  &outerTpl=`list` &RowTpl=`list__item` &activeClass=`list__item--active`]]

Предполагаемое решение:

В BEMJSON при декларировании блоков писать дополнительные поля, которые при сборке используем для нарезки блоков.

AlexandrBukhtatyy commented 8 years ago

пока знаю что bemjson-to-html делает сборку HTML!

tadatuta commented 8 years ago

Чего-то готового для этой задачи нет, но это должно быть возможно реализовать самостоятельно.

BEMJSON — это просто JS-объект, так что с ним можно проделывать любые операции, доступные для объектов (обходить вглубь и т.п.).
Для превращения любого узла в HTML достаточно вызвать функцию шаблонизатора и передать в нее узел в качестве параметра: BEMHTML.apply({ block: 'list' }) вернет <ul class="list"></ul> (при наличии необходимых шаблонов).
Логику по нарезке на отдельные файлы проще всего написать отдельным скриптом для node.js:

var fs = require('fs'),
    BEMHTML = require('./path/to/bemhtml').BEMHTML,
    BEMJSON = require('./path/to/bemjson');

walk(BEMJSON);

function walk(bemjson) {
    // логика рекурсивного обхода BEMJSON-дерева
    // в качестве примера см.
    // https://github.com/tadatuta/bemjson-to-deps/blob/master/index.js
    // https://github.com/tadatuta/create-files-by-bemjson/blob/master/index.js
    fs.writeFileSync(chunk, content);
}

AlexandrBukhtatyy commented 8 years ago

Спасибо за ответ, как что то получится непременно опубликую.

bem-site / bem-forum-content-ru