Чем препроцессить в HTML сокращения?

Question

[ImagineTables]

Была библиотека, которая помимо основной функции умела в рантайме препроцессить такой текст:

<div #my-div .card.info></div>

И превращать его в такой:

<div id="my-div" class="card info"></div>

Весьма удобно. Хотелось бы перенести этот препроцессинг в CI/CD (модуль Node.js — норм). А если будут ещё плюшки, особенно настраиваемые, тем лучше.

Что взять за основу? Есть готовое решение, или придётся курить куда-нибудь в сторону ANTLR (не имел с ним дел)?

Comments

[Mors Clamor]

Emmet?

[ImagineTables]

Mors Clamor, а его можно использовать без Action'ов, т.е. не как плагин к редактору, а как библиотеку, которой подаётся на вход строка, и она возвращает другую? Мне хотелось бы хранить исходники в сокращённом виде, а разворачивать их во время билда.

[Антон Антон]

ImagineTables, а зачем?

[Александр Васильев]

Pug?

[FeST1VaL]

А можно все же пояснительную бригаду, а для чего?

[alexalexes]

Мне интересно, как автор предполагает сокращать какие-нибудь атрибуты фреймворков, например, Vue директивы v-if, v-for, v-on и т.д. Не одной же html статикой будешь сыт.

[Алексей Уколов]

alexalexes, да даже в одной html статике почти все остальные атрибуты нужно будет писать полностью. Получится усложнение инфраструктуры только ради того, чтобы не писать id= и class=.

[ImagineTables]

alexalexes, существует много применений HTML, в принципе несовместимых с Vue.

Алексей Уколов, во-первых, есть набор кусков разметки, которые хотелось бы перенести без изменений, во-вторых, было написано: «если будут ещё плюшки, особенно настраиваемые, тем лучше».

[Иван Волков]

FeST1VaL, у меня вот тоже первым вопросом в голове стало, сразу после прочтения поста))

ImagineTables реально - А ЗАЧЕМ тебе это?) и - ЧТО ЭТО ВООБЩЕ за дурацкая структура документа?
от куда ты нарыл этот кусок кода, блин?)) может оно там для компилятора/препроцессора так и нужно, блин!))

возьми обычный, нормальный Total Commander, в нём - Поиск > "с текстом", туда забей свои непонятные - "#my-div .card.info", и по всем файлам что найдёт, открой по быстрому в Sublime каком, там CTRL + H, заполни поля Find и Replace и тыкни - Replace All
Всё!)

но вот - не факт, что ты ЭТИМ - лучшее всё ж сделаешь, блин...
и - не факт, что у тебя есть доступ к исхдникам, а ты это на ходу в реалтайме хочешь делать...
но ты ж - нифига не объясняешь в своей постановке вопроса, детской...

к примеру, если это какой-нибудь PHP, то сделай что-нибудь аля:
$str = str_replace('#my-div .card.info', 'id="my-div" class="card info"', $str);

[ImagineTables]

Иван Волков, FeST1VaL, ну что значит «дурацкая»? Её использовали раньше (не знаю, как сейчас) внутри своих десктопных продуктов в Symantec и ещё нескольких больших проектах. Я это знаю абсолютно точно.

[Dmitry Bay]

ImagineTables, так вот, чтобы что? сохранить пару кб?

[ImagineTables]

Dmitry Bay, а YAML, по-вашему, придумали чтобы что? «сохранить пару кб»? Нет, это сделали, чтобы добиться бо́льшей выразительности. (Кстати, мне не кажется, что у разработчиков YAML это получилось, и если кому-то не нравится такой синтаксис HTML, пусть на здоровье пишет обычный).

Человек, с подачи которого в Symantec и ещё нескольких крупных компаниях использовали этот синтаксис, объяснил его популярность примерно так: когда пишешь тонны разметки, эти и другие мелочи очень помогают. Очевидно, что задающие эти вопросы люди не пишут тонны разметки, а значит они её генерируют из исполняемого кода. Ещё, поди, и вперемешку, как это у них водится. Я своё мнение об этом подходе оставлю при себе, а тут напишу (последний раз): HTML используется не только во фронтенде.

[Иван Волков]

ImagineTables, эй, человек! тебе тут ВСЕ поголовно говорят, что ЭТО - Дурость!
тебе подсказали, КАК сделать и НЕ ДУРИТЬ головы ни себе, ни тем, кто твоей хрени потом возможно коснётся и будет ещё и дальше голову дурить - "А ХРЕНЛИ ТУТ ТАК СДЕЛАНО БЫЛО ВООБЩЕ О_О"

ты продолжаешь ЗАЧЕМ-ТО стоять и дальше на своём, блин...
при этом ещё и приговаривая - "У чуваков, не получилось сделать Норм!"
ВСЁ у них ПЛУСИЛОСЬ! https://www.google.com/search?q=%D0%B7%D0%B0%D1%87...

если хочешь и дальше юзать этот Yaml и у тебя ВСЁ Норм с ним уже работает - ОСТАВЬ БЛИН ТАК!
и не дури головы ни себе, ни людям больше! ;)

[ImagineTables]

Иван Волков, из любопытства посмотрел ваши комментарии на Хабре. Многое стало понятно.

Answer 1

[Пума Тайланд]

posthtml — под такой трансформ он буквально и создан. emmet тут не то, он работает с аббревиатурами (div#id.class) без угловых скобок. В posthtml пишешь плагин через tree.walk(), который переносит #id → id, .class → class. ANTLR оверкилл.

Comments

[ImagineTables]

То, что надо, большое спасибо.

[Пума Тайланд]

рад что подошло)