В продолжение темы серверного HTML рендеринга на Kotlin.
Если вы не читали статью, кратко напомню о чём речь: я написал небольшой можно сказать фреймворк для генерации HTML на стороне сервера на Kotlin. И поддержку строготипизированных routes для удобного создания ендпоинтов, ссылок на них и форм. Теперь Spring Views можно создавать на Kotlin и по крайней мере в моих проектах (а один из них очень большой - сотни отдельных страниц и десятки виджетов) это дало мне огромное удобство, уверенность, безопасность, рефакторо-пригодность, простое версионирование и переиспользование кода, например, теперь я точно не сделаю опечатку в URI или имени параметра и не смогу передать неверный тип данных на endpoint.
Одна из проблем которые до недавнего времени была в связи с использованием данного фреймворка - это CSS-стили. Приходилось либо инлайнить стили непосредственно для HTML элемента, либо мейнтейнить огромный (или несколько поменьше) CSS файл без возможности внятно следить за старыми более неиспользуемыми классами и селекторами. Кто создавал большие CSS файлы знает о чём я говорю - со временем количество классов накапливается и вычистить их не задев чего-то всё ещё нужного очень сложно. Вот так приходилось работать с CSS стилями раньше:
DIV("css-class-name") {...}
// или
DIV {
style("color: red;")
+"Hello World"
}В принципе жить можно, но хотелось чего-нибудь:
что-то на подобии Styled-Components из ReactJS, но так же на Kotlin
по возможности поддержку JVM hot-reload в режиме отладки
как следствие кода на Kotlin - иметь возможность всегда отслеживать зависимости и удалять более неиспользующиеся CSS-правила.
Долго думал как это получше сделать, и пока что первая версия получила вот такой синтаксис:
@Component // Spring @Component
object MyCssClass : CssClass({
style = "color: black;"
hover = """
color: red;
text-decoration: underline;
"""
})
...
A(MyCssClass) {
href(SomeUsefulRoute(param = 1))
+"Click me"
}То есть объявляем object который будет нести информацию о CSS свойствах элемента. И далее просто используем его в тех же местах где раньше можно было указать css-class-name. CssClass поддерживает массу "псевдоклассов" типа hover, active, firstOfType, before, after и так далее, так же можно добавлять media брейкпоинты и всякие другие штуки. Вот более насыщенный пример:
@Component
object Container : CssClass({
style = "padding: 25px;"
hover = "background: #eee;"
add(">a", "color: green;")
add(">a:hover", "text-decoration: underline;")
media("max-width: 991px") {
style = "padding: 10px;"
}
})
Вы наверняка заметили двойные скобочки ({...}) - в конструктор я передаю функцию-инициализатор стилей. Это нужно для того, чтобы в дебаг режиме JVM можно было на лету менять свойства CSS класса без перезапуска приложения: код который генерирует сам css-файл может быть запущен в режиме dev-mode, когда на каждый запрос файла будут выполнены все функции-инициализаторы ещё раз и файл будет собран заново.
Если по какой-то причине вам не нравится object - можно просто объявить class и использовать его:
@Component
class Container : CssClass({...})
...
DIV(Container::class) { ... }Теперь в проекте порядок с CSS стилями - нет давно умерших, всегда можно найти точки использования, стили лежат рядом с виджетами и т.п.
Смотрите исходники тут. Фидбэк приветствуется, всем хорошего дня.