Привет!

Проблема в том, что сборка не учитывает зависимости по технологиям, кроме bemhtml (https://github.com/Oopscurity/oopscurity.github.io/blob/master/.enb/make.js#L67-L85), а в библиотеке oopsy активно используется зависимость по технологии js.

Пути решения два:

1. Прописать поддержку для зависимостей по технологии js полностью аналогично тому, как сделано для клиентского bemhtml.
2. В библиотеке отказаться от зависимостей по js в пользу универсальных зависимостей по блокам. В данном конкретном случае достаточно, чтобы в oopsy/common.blocks/image/image.deps.js оказалось ({ shouldDeps: 'lightbox' }) вместо того, что там написано сейчас.

PS: Пока искал причину, заметил момент, который стоит поправить: В common.blocks/preloader/preloader.js нет смысла в обработчике js inited ждать domReady, он к тому времени гарантированно наступил. Вместо этого стоит добавить прелоадеру модификатор visible и ему прямо в стилях прописать display: block, тогда можно будет изначально делать его видимым, а в нужный момент делать delMod('visible') и в обработчике с анимацией прятать.

Ну и в целом любое изменение состояния блоков удобно реализовывать через модификаторы, а не просто методы. Помимо консистентности и возможности для каждого состояния добавлять нужные стили, появится возможность подписываться на события изменения этих модификаторов из других блоков.

Доброго вечера! Большое спасибо за ответ.

Порылся в документации и make.js в bem-components. Попробовал изменить make.js проекта, добавив в него строки примерно следующего содержания:

// js
[enbBemTechs.depsByTechToBemdecl, {
    target : '?.js.bemdecl.js',
    sourceTech : 'js',
    destTech : 'js'
}],
[enbBemTechs.deps, {
    target : '?.js.deps.js',
    bemdeclFile : '?.js.bemdecl.js'
}],
[enbBemTechs.files, {
    depsFile : '?.js.deps.js',
    filesTarget : '?.js.files',
    dirsTarget : '?.js.dirs'
}],

[techs.browserJs],
[techs.fileMerge, {
    target: '?.pre.js',
    sources: ['?.browser.bemhtml.js', '?.browser.js']
}],
[techs.prependYm, { source: '?.pre.js' }],

Никакого результата не добился. Подскажите, пожалуйста, где можно почитать об этом и найти пример правильной настройки сборщика на случай, если это окажется необходимым.

Второй путь оказался значительно легче первого. Всего одна строчка и (без потери js-зависимости!) все встало, как нужно!

([
    { mustDeps: { block: 'lightbox' } }
])

Спасибо за совет насчет preloader! Еще один вопрос: каким образом можно вызвать деструктор блока? Если я понимаю верно, BEMDOM.destruct() применим только к элементам. (Во всяком случае, удалить с его помощью блок не удалось, даже если устанавливать excludeSelf в true) Точно также не удается удалить у блока модификатор js

Решение с депсами выглядит так:

git diff .enb/make.js
diff --git a/.enb/make.js b/.enb/make.js
index fee5ffc..a897b02 100644
--- a/.enb/make.js
+++ b/.enb/make.js
@@ -85,7 +85,26 @@ module.exports = function(config) {
             }],

             // js
+            [enbBemTechs.depsByTechToBemdecl, {
+                target: '?.js-js.bemdecl.js',
+                sourceTech: 'js'
+            }],
+            [enbBemTechs.mergeBemdecl, {
+                sources: ['?.bemdecl.js', '?.js-js.bemdecl.js'],
+                target: '?.js.bemdecl.js'
+            }],
+            [enbBemTechs.deps, {
+                target: '?.js.deps.js',
+                bemdeclFile: '?.js.bemdecl.js'
+            }],
+            [enbBemTechs.files, {
+                depsFile: '?.js.deps.js',
+                filesTarget: '?.js.files',
+                dirsTarget: '?.js.dirs'
+            }],
-            [techs.browserJs],
+            [techs.browserJs, {
+                filesTarget: '?.js.files'
+            }],
             [techs.fileMerge, {
                 target: '?.pre.js',
                 sources: ['?.browser.bemhtml.js', '?.browser.js']

На русский это переводится приблизительно так:

1. По зависимостям по технологиям собери bemdecl с названием ?.js-js.bemdecl.js для технологии js.
2. Смержи ?.bemdecl.js (генерируется выше с помощью bemjsonToBemdecl) с ?.js-js.bemdecl.js и запиши результат в ?.js.bemdecl.js.
3. Для полученного ?.js.bemdecl.js раскрой зависимости с учетом deps.js-файлов и запиши в ?.js.deps.js.
4. Найди на файловой системе все файлы, которые нужны для удовлетворения всех полученных на третьем шаге зависимостей. Запомни их в памяти под идентификатором ?.js.files.
5. Собери браузерный JS на основе полученного на предыдущем шаге списка файлов.

{ mustDeps: { block: 'lightbox' } }

Общий совет — не нужно использовать mustDeps там, где можно обойтись shouldDeps.

Это на самом деле абсолютное большинство случаев. В частности, если речь о JS-зависимостях с использованием модульной системы, то она сама подождет, пока проинициализируются все нужные модули, так что порядок сборки не важен.

каким образом можно вызвать деструктор блока? Если я понимаю верно, BEMDOM.destruct() применим только к элементам.

BEMDOM.destruct() удаляет БЭМ-блоки на переданных DOM-узлах, но excludeSelf как раз должен оставаться в false. Если этого не происходит, скорее всего, что-то не так с вызовом.

@Oopscurity Если коротко про ENB, то каждая технология в ENB (те, что в addTech) порождает какие-то файлы в бандле. На вход она может использовать результат работы других технологий, либо файлы технологий (js, css) из блоков. Кроме того, у многих технологий по умолчанию target и source опущены, так как общеприняты, но они есть и их можно переопределить (кроме, разве что, таких технологий, как file-provider — там нет смысла в значении по умолчанию).

Чтобы что-то начало собираться — нужно потянуть за какую-то вершину графа, это делается через addTargets, это явно ожидаемые целевые файлы в бандле (они же могут использоваться для других целевых файлов).

В итоге получается направленный граф, который можно посмотреть, запустив с флагом --graph, или на главной странице enb server.

И когда сборка запускается, ей нужно построить граф сборки, посмотреть в явные таргеты (целевые файлы), и запустить технологии с низов, спродуцировав в папку бандла еще кучу разных файлов, которые нужны неявно.