Feast
Экспериментальный шаблонизатор на основе xhtml-синтаксиса с конвертацией в vdom (citojs).
Установка и запуск локального сервера
cd feast
npm i --save-dev feast feast-dev
— установка необходимых пакетовnode ./node_modules/feast-dev/index.js --feast-demo
— запуск сервера: http://localhost:2015/- Подробнее о fesat-dev
Настройка IDE / Подсветка кода / Language Injection
Работа из консоли
./node_modules/feast/bin/assist create-block --name={name} --path=path/to/feast/blocks/
ES2015+ (+ @decorators)
;; @ { // ... } // Читый ES2015+ (без декоратора) // Опции // Методы;
TypeScript + TSX
;; @<ButtonProps> { return <button remit-click="tap"> <Icon/> text </button> ; } { // ... }
Анимация
Базовые теги
- fn:if
- fn:choose: fn:when и fn:otherwise
- fn:for
- fn:value и короткий синтакиси
{...}
- fn:attr
- fn:add-class
- fn:match
- fn:apply-match
Базовые атрибуты
Модификаторы
-
События
BEM
CSS Modules
Создание блока
button.html — шаблон
{attrs.text}
button.js — описание поведения блока
Полное описание методов feast.Block
;;; Block;
fn:if
Условные оператор.
test
— любое javascript выражение
Поздравляем! <!-- ИЛИ --> Wow!
fn:if animated
Анимированные if
.
test
— любое javascript выражениеanimated
илиanimated="slide"
Поздравляем! <!-- ↓ первый frame ↓ -->Поздравляем! <!-- ↓ анимация ↓ -->Поздравляем!
fn:transition
Анимация вложенного контента:
name
— название эффекта (optional)appear
— добавить аниация на изначальный рендер (optional)
Фазы
-
Изначальный рендер (appear)
- Первый frame:
fx[-name]-appear-enter
- Анимация:
fx[-name]-appear-enter-active fx[-name]-appear-enter-to
- Первый frame:
-
Добавление элемента
- Первый frame:
fx[-name]-enter
- Анимация:
fx[-name]-enter-active fx[-name]-enter-to
- Первый frame:
-
Удаление элемента
- Первый frame:
fx[-name]-leave
- Анимация:
fx[-name]-leave-active fx[-name]-leave-to
- Первый frame:
Wow! <!-- ↓ первый frame ↓ -->Wow! <!-- ↓ анимация ↓ -->Wow!
fn:choose
Блок ветвления.
Привет, {attrs.userName}! Авторизуйтесь!
fn:for
Перебор массива или объекта.
ВАЖНО: У всех рутовых элементов внутри fn:for
должен быть задан уникальный key
-атрибут
data
— массив или объект (любое javascript выражение)as
— название переменной очередного элемент массива (опционально)key
— индекс или ключ (опционально)filter
— функция фильтрации списка, на вход получает два элемента:as
иkey
(опционально)cached
— vdom-кеширование по ключу (опционально)
{item.text}
fn:value
Вывести любое javascript выражение
output
— режим выводаraw
— «как есть»text
— обычный текст (по умолчанию)
Привет attrs.username!
или короткий синтаксис
Привет {attrs.username}!
Чтобы вывести смивол {
и }
используйте экранирование \{
.
fn:attr
Заменить или установить атрибут родительского элементу
name
— названиеvalue
— значениеtest
— любое javascript выражение (опционально)
...
fn:add-class
Добавить css-класс родительскому элементу
name
— название класса (через пробел)test
— любое javascript выражение (опционально)
...
fn:match и fn:apply-match
Определение и использование подшаблона.
fn:match
name
— имя подшаблонаargs
— названия аргументов через запятую, которые будут переданны вmatch
отapply-match
(опционально)
fn:apply-match
name
— имя вызываемого подшаблонаargs
— аргументы через запятую, которые нужно передать вmatch
(опционально)
notify.html
Использование:
Заголовок Какое-то содержание
id
Доступ к вложеному feast.Block
по уникальному id
var App = feastBlock;
ref
Доступ к вложеному HTMLElement
по уникальному ref
var Form = feastBlock;
on-event
Подписаться на DOM-событие
remit:event
Преобразование DOM-события в пользовательское
var Btn = feastBlock;
Всплытие remit:event
remit
-событий
Правильный способ организации всплытия var SubscribeForm = feastBlock; var App = feastBlock;
Модификаторы значения и выражения
Сигнатура
{ // применяем модицикацию return newValue;}
Пример
; feastBlock;
Модификаторы события
Это инструмент, позволяющий на этапе подписки на событие применить к нему разные методы или фильтрацию, например по названию клавиши или её коду:
<!-- Перехватываем `enter`, отменяем действие по умолчанию и останавливаем всплытие -->
- Модификатор события
prevent
— отменить действие по умолчаниюstop
— остановить всплытие
- Фильтрация по
- Названию клавиши
enter
esc
tab
left
right
up
down
spacebar
shift
ctrl
alt
XXXXX
— произвольныйkeyCode
- Зажатой клавише
alt-pressed
ctrl-pressed
shift-pressed
meta-pressed
- Кнопке мыши
left-btn
right-btn
- Названию клавиши
Расширение
// on-click.my-modifier="..."feastvdomeventModifiers'my-modifier' = { if // Отменяем исполнение слушателя события return false; }; // Добавляем имя клавишиfeastvdomeventModifiersKEYSq = 'Q'; // да-да, сначало в нижнем, потом верхнем регистре
use:mixin
Использовать примеси на стадии компиляции.
feasttags$mixins'form-element' = { attrsname = '{attrs.name}'; attrstype = '{attrs.type || "text"}'; attrstabindex = '{attrs.index}'; attrsplaceholder = '{attrs.placeholder}'; attrsrequired = '{attrs.required}'; // и так далее}; var Inp = feastBlock;
bem:mod
name
— название модификатораvalue
— значение модикатора (опционально)test
— условие добавления модификатора (любое javascript выражение, опционально)
<!-- ИЛИ --> <!-- увы, но так можно добавить только один модификатор -->
bem:elem
Спец. атрибут для BEM-именования элементов (только плоское именование, никаких элемент элемента).
... ...
CSS Modules
Для работы используйте feast/src/require-css.js
require;
feast-css
; console; // -jdy73jk
feast-css: expose
Обеспечивает доступ к классом из внешнего css
/* expose {form, container as formContainer} from "../form/form.css" */
feast.Block
// Описание блока; ;; // только если нужна модульность для CSS (уникальные имена CSS-селекторов) // Используемые блоки; Block; // Использование; const block = 'attr-bool': false; // Рендер блокаblock; // Уничтожить блокblock; // генерируем событие `destroy`, на которое можно подписаться через `on`
Методы
- get(attrName:
string
):*
— получить значение атрибута - set(attrName:
string
, value:*
):void 0
— изменить значение атрибута - set(attributes:
object
):void 0
— изменить значения атрибутов - is(attrName:
string
):boolean
— проверить значение атрибута на истинность - invert(attrName:
string
):boolean
— инвертировать значение атрибута - on(name:
string
, fn:function
) — подписаться на событие блока - off(name:
string
, fn:function
) — отписаться от события блока - broadcast(name:
string
[, details:*
, [, originalEvent:Event
]) — распространить событие вверх по vdom-дереву (т.е. дереву блоков) - $on(target:
HTMLElement
, eventName:string
, handle:string|function
) — подписаться на DOM событие - $off(target:
HTMLElement
[, eventName:string
[, handle:string|function
]]) — отписаться от DOM события или событий - one(target:
HTMLElement
[, eventName:string
[, handle:string|function
]]) - setTemplateMatch(name:
string
, match:Function
) — установить функцию отвечающую заapply-match
WebStorm / Language Injection
- Официальная документация
- Editor > Language Injection > *click* [+] > XML Attributes Injection
- name:
feast-keywords
- Language > ID:
JavaScript
- XML Tag > Local name:
if|for|when|var|add-class|attr|match|mod|apply-match
- XML Attrbiute > Local name:
test|data|as|key|args
- Editor > Language Injection > *click* [+] > XML Attributes Injection
- name:
feast-interpolation-in-html
- Language > ID:
JavaScript
- XML Attrbiute > Local name:
[a-zA-Z-]+
- Advanced > Value pattern:
\{(.*?)\}
- Editor > Language Injection > *click* [+] > XML Attributes Injection
- name:
feast-interpolation-in-feast
- Language > ID:
JavaScript
- XML Tag > Local name:
mod|add-class|attr
- XML Tag > Local namespace:
bem|fn
- XML Attrbiute > Local name:
name|value
- Advanced > Value pattern:
\{(.*?)\}
- Editor > Language Injection > *click* [+] > XML Tag Injection
- name:
feast-value
- Language > ID:
JavaScript
- XML Tag > Local name:
value