Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

borschik:include относительно блока. Правильное раскрытие путей #32

Open
voischev opened this issue Jan 21, 2015 · 17 comments

Comments

@voischev
Copy link

Во всех наших проектах мы вставляем SVG в шаблоны. SVG бывает очень развесистым и переводить его в «строку» руками не очень удобно и быстро.

Мы попробовали вставлять SVG через /*borschik:include:…..*/, но в той схеме сборки, что реализована сейчас, нужно путь к файлу указывать относительно банда, а не блока.

Хочется как то так:

block('link').mod('theme', 'instagram').content()('borschik:include:link_theme_instagram.svg');

Думаю это интересное решение для вставки чего-то в шаблон. У нас есть возможность использовать один SVG файл для блока в шаблоне, в css и в js через такую конструкцию, кажется совершенно неправильным думать о пути к файлу из вне блока.

@tx44
Copy link

tx44 commented Feb 4, 2015

Нужная фича, плюсуюсь.

@voischev
Copy link
Author

сс @blond что скажешь? Очень надо

@blond
Copy link
Member

blond commented Apr 28, 2015

Кажется, что использовать borschik и что-то знать про него xjst-based технологии не должны.

Но кейс вполне годный. Кроме того, наверника, существует ещё ряд годных кейсов про предобработку шаблонов перед компиляцией.

Есть какие-то предложения?

Можно, например, сделать опцию process, которая будет принимать функцию-callback. Запускаться она будет после чтения каждого файла.

@awinogradov
Copy link

Я бы все таки думал в сторону инклюда. Это понятно и удобно. @blond зачем функция? Может типо includeCtx('path/to/file.svg') ?

@voischev
Copy link
Author

Ну у нас частый кейс — фризить картинки которые вставляются в шаблонах <img src="path/to/file.png"/> (ну или { block : 'image', url : 'path/to/file.png' }, как хотите:)). Мы прокидывали функцию борщика в VM что бы оно работало. Но круто было бы что бы прям из коробки работало.
В принципе можно даже инлайнить картинки в стили в base64 прям в шаблонах

@awinogradov
Copy link

base64 увеличивает вес svg, а при инклюде даже запроса нет и есть dom

@voischev
Copy link
Author

@verybigman я там не про svg. Вообще вот такой кейс

{
    block : 'super-bkg',
    attrs : { style : 'background: url(' + borcshik.link('pach/to/image.png') + ');' }
}

Хотя да это уже не про include, а про link

@qfox
Copy link
Contributor

qfox commented May 30, 2015

Можно, например, сделать опцию process, которая будет принимать функцию-callback. Запускаться она будет после чтения каждого файла.

технологии специальные бы уже сделали, которые смогут подготавливать файлы...

@voischev
Copy link
Author

👍

@blond
Copy link
Member

blond commented May 30, 2015

технологии специальные бы уже сделали, которые смогут подготавливать файлы...

Какое у них должно быть API?

@qfox
Copy link
Contributor

qfox commented May 30, 2015

@blond я вижу это так:

level1/
  block1/
    block.techA
    block.techB
level2/
  block/
    block.techA
bundles/
  bundle/
    bemdecl: block techA
  • Case 1: препроцессим techA и провайдим дальше (например, stylus, less, coffee, etc.)
  • Case 2: постпроцессим techA (в т.ч. после препроцесса) и провайдим дальше
  • Case 3: из techA и techB делаем techC и после провайдим как реальный файл дальше

Т.е. нечто близкое к gulp.src(...).pipe

Все 3 кейса могут выполняться в любом порядке до того, что сейчас делает ENB.

В ENB можно будет просто склеить подготовленные кусочные файлы — drastically уменьшим кол-во и упростим ENB технологии.

p.s. Это все очень близко к gulp и поэтому мб. стоит не выдумывать велосипедов и добить deps-резолвер модульный.
Технически, получается что-то такое:

gulp.src(...).pipe(...).pipe(...) → bemSourceTarget
bemBuild.run() → destTarget1, destTarget2, etc. destTargetN
destTargetN.pipe(...).pipe(...)

Штука, которая покрывает все обозримые кейсы.

p.s. Может быть из file-provider сделать хитрый гульпообразный мундштук, который будет покрывать какие-то кейсы?

@qfox
Copy link
Contributor

qfox commented May 30, 2015

@blond вар.2 на идее «вместо file-provider» соберем гульпохрень:
Внутри себя оно будет кешировать, принимать на вход наборы функций-преобразователей и конфигов и само будет читать файлы и препроцессить, если заданы функции. Условно это может быть так:

enb.addFilter('techA', function (node, src) {
  // node — блок на уровне
  return src.replace('__', '--'); // тут можно промис вернуть
});
enb.addProvider('techC', ['techA', 'techB'], function (node, srcA, srcB) { // или 
  // node — тот же блок на уровне,
  // и возвращает файл levels/block/block.techC,
  // который не существует на диске
  // можно еще наколдовать, чтобы он запускал это, только если файла нет
  return vowFs.readFile(node.path + this.tech)
    .catch(function (err) { return srcA + srcB; });
});

Вообще, этому место, по логике, в ядре, но ты ж говорил, что коммиты в ядро ENB это плохо, но может попробуем покрыть тестами, а затем повырезаем хардкод, сделаем это внутри ENB и щелкнем мажорную версию?

@voischev
Copy link
Author

предложение чумавое)

@voischev
Copy link
Author

voischev commented Sep 1, 2015

В какой версии ждать?

@qfox
Copy link
Contributor

qfox commented Sep 1, 2015

Когда ядро покроем тестами — будет гипотетическая возможность это делать. Т.е., точно не раньше.

@voischev
Copy link
Author

voischev commented Sep 1, 2015

@zxqfox ты классный

@qfox
Copy link
Contributor

qfox commented Aug 10, 2016

Я вот смотрю на этот issue и не пойму почему оно в enb-bemxjst?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants