Development ware Venus - energy-coresky/air GitHub Wiki

Плагин Coresky для разработки "Венера", предназначен для подготовки красивых дизайнов страниц. В Венере имеется собственная имплементация CSS framework Tailwind на PHP. В отличие от native Tailwind, генерация утилит классов, производится с помощью мета-описаний, которые хранятся в базе данных SQLite3. Для генерации всех утилит Tailwind, используется до 200 метаописаний (строк в БД). Настройка, изменения и дополнения CSS утилит производится в веб-интерфейсе Венеры.

Интерфейс разделен на пять зон:

• слева вверху - меню инструментов и утилит
• сверху - кнопки и индикаторы области тестирования
• в середине - фрейм для тестирования дизайнов
• справа - область инструментов
• снизу - область кода, можно менять местами с областью инструментов

Подробно о классах в папке w3:

• class Venus - расширения для консольного скрипта sky
• class Vesper - считывает метаописания из БД, строит индекс с данными, генерирует классы CSS
• class Maat - содержит парсер CSS и генератор CSS из массива PHP. Содержит mixed-парсер для поиска классов Tailwind-CSS в файлах разных типов. Строит переформатированный и hightlited HTML код из массива PHP. Умеет сортировать CSS и сравнивать native Tailwind-CDN генерацию классов с генерацией Vesper
• class Maxwell - строит меню инструмента "Syntax", строит ID-индекс утилит классов CSS, находит freind-утилиты
• class Grace - движок для генерации javascript кода анимаций

Это действительно хорошая идея использовать схему Tailwind для создания красивых уникальных дизайнов страниц. Три главных достоинства: легко переделать имеющиеся компоненты дизайна под новые нужды, что обеспечит уникальность дизайна. Файлы CSS генерируются автоматически и в них будут задействованы только те CSS утилиты, которые используются в HTML. И третье: сам фреймворк открыт для развития пользователем.

Итак, в Vesper (Tailwind), CSS файлы генерируются автоматически, но ведь javascript код анимаций тоже можно генерировать автоматически! Этим и занимается класс Grace. Посмотрите HTML код компонентов на сайте https://tailwindui.com/, авторы используют текстовые описания для javascript:

    <!-- Background overlay, show/hide based on modal state!
      Entering: "ease-out duration-300"
        From: "opacity-0" To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100" To: "opacity-0" -->

Для реализации любых анимаций на сайте tailwindui.com требуется довольно простой движок Grace. Не всегда удобно использовать React. Grace использует атрибут HTML "js":

Для анимаций, также как и для генерации утилит CSS, используется простой мета-язык. Это метаописание для свитчей (одно для всех пяти вариантов):

# meta-name:
chk (el, set)
# body:
bg|circle|off|on|
0 bg-indigo-600
1 bg-gray-200 hover:bg-gray-300
.bg
0 translate-x-5
1 translate-x-0
.circle
0 opacity-0
1 opacity-100
.off
0 opacity-100
1 opacity-0
.on
var inp = el.querySelector('input');
if (!inp) // for custom HTML element
  inp = el.getRootNode().host.querySelector('input');
var $$ = parseInt(inp.value);
prev = set ? $$ : 1 - $$;
$$ = 1 - prev;
set || (inp.value = prev);
.

Grace работает по гибридной схеме: имеется простой общий движок в файле grace.js и javascript код, конкретных анимаций, который генерируется при необходимости, также как и классы CSS.

Grace также содержит функционал для создания custom элементов HTML с префиксом ve-. Свитч можно определить так:

// name: ve-switch
// body:
&|
<button js="chk-bg" onclick="gv.chk(this)" class="m-5 bg-gray-200 relative inline-block
  shrink-0 h-4 w-9 border-2 border-transparent rounded-full cursor-pointer transition-colors
  ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
  <span js="chk-circle" class="translate-x-0 absolute left-0 top-0 inline-block h-3 w-3 rounded-full bg-white
    shadow transform transition ease-in-out duration-200"></span>
</button>
.&
if ('1' == host.querySelector('input').value)
    gv.chk(host.shadowRoot.querySelector('button'), true);
.

Теперь для создания свитча на HTML странице достаточно написать:

<ve-switch><input type="hidden" name="test1" value="1"></ve-switch>

Автоматически сгенерированный CSS (тоже самое делает Tailwind), шаблоны (элементы <template>), и javascript код, можно помещать внутри тега <head> HTML страниц. Здесь интересной является мысль о возможности статического кеширования (подобно подгружаемым файлам *.css & *.js), файлов содержащих шаблоны HTML.

Движок grace.js, это довольно простой javascript код (около 120 строк, <5 kBytes), который умеет в нужные моменты времени добавлять/удалять CSS классы в/из конкретных HTML элементов для работы свойства transition. Спектр применения Grace довольно большой и позволяет реализовать JS-анимации практически для всех компонентов, представленных на сайте tailwindui. Смотрите простую презентацию-анимацию, сгенерированную, с помощью Grace/Vesper: https://coresky.net/coresky.html. Этот файл не содержит ни одной ссылки на внешние библиотеки для своей работы.

Анимация обычно стартует с запуском функции gv.start(el, $js, $$, listen, prev);. Часто установка переменных, которые передаются в параметрах вызова этой функции, происходит автоматически, исходя из мета-описания анимации в базе данных. Описание параметров:

• el - топ элемент в дереве элементов, где происходит анимация. Часто передается прямо, с помощью this или находится с помощью let el = document.querySelector(id);
• $js - js объект (хеш) с тремя уровнями глубины, всегда генерируется автоматически на основе данных мета-описания. Ключи первого уровня - указатели на HTML элементы, где нужно удалить/добавить Vesper-CSS классы. Ключи второго уровня - номера состояний анимации "0, 1, 2, ..". Третий уровень - непосредственно список классов, которые нужно добавить или удалить.
• $$ - активное состояние анимации - целочисленные значения 0, 1, 2, и т.д. Классы, соответствующие этому состоянию, будут добавлены.
• listen - слушатели. Если указан элемент с end:hidden, обычно корректирующий код писать не нужно - после окончания transition на этом элементе для $$==0, - будет добавлен класс hidden в top-элемент. Класс hidden, также автоматически удаляется для $$==1. Часто бывает нужно добавить слушателя при клике в любом месте документа:

listen.click = () => {
        gv.menu(id, 0); // hide menu
};

• prev - предыдущее состояние анимации - число как и в $$, или 'twin'. Классы будут удалены, но если первым символом класса указан ! (восклицательный знак), - такой класс не будут затронут. Специальное значение twin - устанавливается автоматически, для классов с двумя состояниями (0, 1), когда указано end:hidden. В этом случае prev = 1 - $$.

Мета описание для всех 42-х CSS-утилит Tailwind "Grid Column Start / End":

# MetaName: col #grid
# for Menu: 2col span-start-end
# body:
auto|span-full|start-auto|end-auto|@num
grid-column: auto
.auto
grid-column: 1 / -1
.span-full
grid-column-start: auto
.start-auto
grid-column-end: auto
.end-auto
span-~num!=: span {0} / span {0}|start-~num!=-start: {0}|end-~num!=-end: {0}
grid-column{@}
.@num

На самом деле, под ~num! подразумевается обработка функцией, так что возможно сгенерировать утилит намного больше чем 42. Vesper построен так, что полностью реализует утилиты Tailwind но не ограничивает наборы при использовании чисел в утилитах или дробей в утилитах. В Vesper можно использовать, например класс w-33/34 для width: 97.058823%; без использования arbitrary value.

В описании выше, MetaName состоит из двух слов разделенных пробелом. Второе слово, начинается с #. Это значит, что первая строка "тела" содержит перечисление с явным указанием кода составляющих. Перечисление делается через |, а окончание каждого описания указывается, когда первым символом в строке указана точка с последующим именем описания. В перечислении последнее слово @num, начинается с @, - это означает перечисление с подстановками. В первой строке - также варианты, разделенные |. До символа равно, то что в имени класса, а после равно - замена-прототип в генерируемом коде. Если первое и второе совпадает, можно указывать только первое, без символа =. Подстановка вариантов перечисления в коде вставляется вместо {@}. А вариативная часть, заменяет в коде {0}. В данном случае это функция ~num!. Но в вариативной части, может использоваться и статический список, например ^spacing. Вариативная часть может быть составной, как например в метаописании для всех утилит "top/right/bottom/left":

# MetaName: -@trbl ^a+^+~f
# Menu: #2inset/TRBL 0-
# body:
top|right|bottom|left
{@}: {0}

Здесь вариативная часть состоит из трех частей, соединенных через +: ^a+^+~f. ^a - auto auto, ^ - короткий алиас для ^spacing, ~f - фракции. Тоже что и ~numf, но num можно не писать, чтобы сделать термин коротким. Имеет значение первый символ и последний. ~ означает числа, а f - фракции.

Установите пустое приложение Coresky framework - hole с продуктами и Venus. Добавьте путь к скрипту sky в переменную окружения PATH системы. Консольные команды Venus можно запускать в том числе из директорий самой Venus, это удобно:

# Тестирование генерации Vesper:
>sky venus tw "absolute dark:top-0"
.absolute {
  position: absolute;
}
:is(.dark .dark\:top-0) {
  top: 0px;
}
# Выдать главный индекс:
sky venus iv > index
# Выдать индекс c ID:
sky venus iv 1 > index-id
# Выдать меню инструмента Syntax:
sky venus im > menu

Для основной генерации Vesper, используется упрощенный индекс без ID. А для нахождения friend классов CSS - индекс с ID, это нужно для работы веб-интерфейса Венеры.