@x51215 апр 2019 в 05:13

Компилятор Ангуляр в 200 строчек кода

3 мин

5.1K

Angular * JavaScript * TypeScript *

+13

Комментарии 10

@alexs0ff 15 апр 2019 в 05:59

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

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

@x512 15 апр 2019 в 06:09

Я, конечно, присматривался к различным шаблонизаторам, но ряд причин побудил написать своё
1) Хотелось именно Angular синтакс из-за перспективы делать в будущем компиляцию на Ivy, чтобы в случае такого перехода не сломалась обратная совместимость
2) Размер — ряд шаблонизаторов, которые я смотрел (Blaze, Handlebars) имели размер > 50Kb
3) Асинхронность — возможность вставлять в шаблон данные из RxJs Observable, например, грузить картинки по HTTP

@alexs0ff 15 апр 2019 в 06:35

Ivy

Оффтоп и ИМХО, но у меня на него пока скепсис.
разработчики уже в который раз рендеринг меняют для angular? 3 или 4. Так по мне, пока лучше пускай переживет несколько версий, и только потом можно будет на него полагаться.

@tuxi 15 апр 2019 в 08:14

Такие вещи уже 15 лет делаются на XSLT, там из коробки и инклюд шаблонов в шаблон есть, и возможность предварительной компиляции шаблонов есть, и одинаково легко как на серверной стороне делаются, так и на клиентской. Что то типа такого

 <data>
  <project>MySuperProject</project>
  <userName>Roman</userName>
  <role>admin</role>
  <projectLink>https://example.com/my-super-projectproject</projectLink>
 </data>

 <xsl:template name="letter">
  <body>
   Добрый день! Проект
   <xsl:value-of select="./project"/>
   доступен по ссылке
   <a href="{./projectLink}">3D проект вашего заказа</a>
   <xsl:if test="./role = 'admin'">
    <div>
     Для редактирования проекта пройдите по ссылке
     <a href="{./projectLink}?mode=edit">Редактировать</a>
    </div>
   </xsl:if>
  </body>
 </xsl:template>

Само собой, есть богатый инструмент для создания выборок, агрегации, проверок условий и прочая прочая

@x512 15 апр 2019 в 08:21

Классная вещь! а может она работать не только со данными — объектами, но и вызывать функции, втч асинхронные? К, примеру, мне нужно в отчёт картинку сгенерить или диаграмму и параметры этой картинки или диаграммы я только в шаблоне указываю, возможности предварительно нагенерировать все варианты картинок, сами понимаете, нет.

@tuxi 15 апр 2019 в 08:25

Никто не мешает скрестить ее с js :) xslt выполнит свою часть преобразования данных в нужный формат, а JS обеспечит ее нужными данными

@x512 15 апр 2019 в 08:29

В том, то и прикол, что данные нужны в момент преобразования, а не после. К примеру, условие нужно или нет отображать эту картинку в принципе может браться из настроек по HTTP запросу. Т.е. для гибкости в моём случае нужно, чтобы любая часть шаблона вычислялась произвольным выражением. В этом и плюс Ангуляра, что у него везде в условиях, циклах итп вставляется кусок JS. А что это за кусок — обращение к данным или сложные функции — по барабану!

@tuxi 15 апр 2019 в 08:31

Все решаемо, используем «и в хвост в и гриву», и с проверкой прав, и

помимо графиков

есть и кучу изображений делаем.

@x512 15 апр 2019 в 08:35

А ссылочку на JS библиотеку, где это решено, дадите?

@tuxi 15 апр 2019 в 08:37

Не дам, у нас свое родное :)

Зарегистрируйтесь на Хабре, чтобы оставить комментарий