Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Snakeskin (https://javascript.ru/forum/project/35057-snakeskin.html)

kobezzza 30.11.2013 16:15

На самом деле, для вызова любой функции (а шаблон - это простая функция) можно использовать простой вывод, аля:
{this.header.tpl(name, 'ещё параметр')}


Но дело в том, что на все такие выводы по умолчанию ставится фильтр html, который экранирует всякие вредные сущности:)

По сути
{this.header.tpl(name, 'ещё параметр')|!html}

и
{call this.header.tpl(name, 'ещё параметр')}


эквивалентны, т.к. фильтр !html отменяет действие html, но с call как то получше выглядит

nerv_ 15.12.2013 13:54

Оказывается, так нельзя:
<script type="text/x-snakeskin-template" id="templates">
    <!-- msg -->
    {template app.templates.test(data)}
        <div></div>
    {/template}
</script>

на комменты ругается, если я правильно понял

kobezzza 15.12.2013 14:18

Цитата:

Сообщение от nerv_ (Сообщение 286698)
Оказывается, так нельзя:
<script type="text/x-snakeskin-template" id="templates">
    <!-- msg -->
    {template app.templates.test(data)}
        <div></div>
    {/template}
</script>

на комменты ругается, если я правильно понял

Вне декларации шаблона можно юзать лишь некоторые директивы: cut, save, объявление супер-глобальный переменных и комментарии snakeskin (/* ... */ и ///), т.е.

<script type="text/x-snakeskin-template" id="templates">
    /*
     * Мой супер шаблон
     */
    {template app.templates.test(data)}
        <div></div>
    {/template}
</script>


Однако в след версии я планирую добавить возможность комментов, которые не вырезаются парсером, а вставляются в JS, для того чтобы делать анотации для GCC.

А зачем тебе понадобилось вне шаблона что-то делать и как ты это планировал потом использовать?

nerv_ 15.12.2013 14:31

Цитата:

Сообщение от kobezzza
А зачем тебе понадобилось вне шаблона что-то делать и как ты это планировал потом использовать?

Планирую внутри одного
<script type="text/x-snakeskin-template" id="templates">
   ...
</script>

использовать много шаблонов. Хотел добавить комментарии к каждому из них. Воспользуюсь таким синтаксисом:
Цитата:

Сообщение от kobezzza (Сообщение 286705)
<script type="text/x-snakeskin-template" id="templates">
    /*
     * Мой супер шаблон
     */
    {template app.templates.test(data)}
        <div></div>
    {/template}
</script>

спасибо :) Жаль, только, что IDE его не подсвечивает, в отличии от html комментариев.

kobezzza 15.12.2013 14:35

Цитата:

Сообщение от nerv_ (Сообщение 286709)
Планирую внутри одного
<script type="text/x-snakeskin-template" id="templates">
   ...
</script>

использовать много шаблонов. Хотел добавить комментарии к каждому из них. Воспользуюсь таким синтаксисом:

спасибо :) Жаль, только, что IDE его не подсвечивает, в отличии от html комментариев.

Лучше создавай отдельные файлики, компиль (или настрой автокомпиляцию с файл вотчером - это очень просто) и подключай как простые скрипты, но дело твоё:)
http://screencast.com/t/iU7AgM6jvjaj

***

А по поводу подсветки, в WebStorm можно создать новый формат данных и задать ему подсветку, я так и сделал (но тут надо выносить шаблоны в отдельный файлики).

ЗЫ: Если очень нужно, я могу добавит в парсер лексему XML комментариев, как комментарий ВНЕ декларации шаблона, это будет не сложно.

nerv_ 15.12.2013 14:59

Цитата:

Сообщение от kobezzza
Лучше создавай отдельные файлики, компиль (или настрой автокомпиляцию с файл вотчером - это очень просто) и подключай как простые скрипты

Так и планировал, но пока в процессе разработки все лежит в куче, дабы быстро править. Компилит в браузере.

За видео спасибо :)

Цитата:

Сообщение от kobezzza
или настрой автокомпиляцию с файл вотчером - это очень просто

можно ссылку?

Цитата:

Сообщение от kobezzza
А по поводу подсветки, в WebStorm можно создать новый формат данных и задать ему подсветку, я так и сделал (но тут надо выносить шаблоны в отдельный файлики).

не знал

Цитата:

Сообщение от kobezzza
ЗЫ: Если очень нужно, я могу добавит в парсер лексему XML комментариев, как комментарий ВНЕ декларации шаблона, это будет не сложно.

обойдусь )

kobezzza 15.12.2013 15:15

Цитата:

Сообщение от nerv_ (Сообщение 286724)
можно ссылку?

Ну разумеется если ты юзаешь вебшторм. А так:

1) npm i -g snakeskin
2) Затем создаёшь новый тип данных в шторме (FileTypes)
3) Потом создаёшь новый вотчер (File Watchers) и настраиваешь его

У меня параметры такие:
Program: C:\Users\kobez_000\AppData\Roaming\npm\snakeskin.c md
Arguments: -s $FileName$ -o $FileNameWithoutExtension$.ss.js
Working Directory: $FileDir$
Output Path: $FileNameWithoutExtension$.ss.js

Если компилишь шаблоны под ноду, то также нужно поставить флаг -n

PS: Вместе со след версией выпущу плагин для grunt

nerv_ 18.12.2013 21:33

kobezzza, отлично, спасибо :)

kobezzza 22.12.2013 21:15

Сегодня потратил день, на сортировку скопившихся "хотелок" от новой версии Snakeskin и утвердил следующее:

1) Директива
{super}
- для безопасной подстановки тела родительского блока или прототипа в указанное место в дочернем.

2) Поддержка параметров для директивы proto
Я долго думал над этой фичей, т.к. сама суть прототипов - это "мягкая" декомпозиция шаблона, с поддержкой механизма наследования и безопасной работой, т.е. замена пресловутых вызовов других шаблонов в шаблоне. В общем получается, что сейчас прототипы могут очень ограниченно выполнять свою функцию, т.к. не хватает двух вещей: параметров и поддержки рекурсии. Ожидаемый синтаксис будет таким:

{template foo(param)}
	{proto icon(%iconName)}
		{param} - {%iconName}
	{end}
	
	{apply icon('foo')}
{end}


Разумеется, старый синтаксис прототипов (без указания параметров) останется рабочим.

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

4) Директива для конструкции switch-case-default
5) Директивы {return} {break} и {continue} для прерывания в теле директив циклов и прерывания общего шаблона (return)

6) Директива-хэлпер для безопасной работы с атрибутами узлов:

<input {attr 'type', 'text'} />


7) Декларация прототипов вне тела шаблона:

/// Прототип getIcon добавится в конец шаблона foo
{proto foo->getIcon}
      ...
{end}


8) Поддержка JSDoc комментариев: комментарии вида /** ... */ не будут вырезаться из шаблона и будут вставлены в конечный JS, чтобы можно было использовать их при дальнейшем сжатии с помощью GCC.

В остальном будут исправления ошибок и различные доработки.
Завтра приступаю к реализации.

nerv_ 26.12.2013 00:49

Здорово, но большинство опций я вряд ли буду использовать. Это уже для продвинутых "юзеров" :)


Часовой пояс GMT +3, время: 12:07.