kjs-box: добавляем ленивые модули, ресурсы с типизацией и модели представления в React-проекты на Kotlin

[artptr86]

Громоздкий React Redux

В целом да, от него и в JS-мире отказываются. Он просто взлетел изначально на хайпе, когда ничего более адекватного толком не было.

[Turansky]

1. Невозможность легко создавать подгружаемые по необходимости модули

Seskar (https://github.com/turansky/seskar?tab=readme-ov-file#seskar) позволяет делать такое. Lazy functions, lazy components, web workers поддерживаются.
Начиная с Kotlin 2.0 доступна `per-file` компиляция, что позволяет наиболее эффективно паковать бандлы. Плюс не нужно создавать лишние подпроекты.

[andrew_k_21_12]

Спасибо, посмотрел предложенные варианты. Режим per-file-компиляции и работающие на его основе реализации были мной упущены, потому что в большей степени искал готовые решения до начала работы над проектом, а Kotlin 2.0.0 был выпущен уже в мае 2024.

Компиляция с опцией per-file, если верно понял, будет выдавать по одному JS-файлу на каждый Kotlin-файл, однако полученные JS-ники не будут знать о том, что какой-то из них должен подгружаться ленивым образом. Соответственно в финальном бандле все отдельно скомпилированные файлы всё равно склеятся в один единственный.

Чтобы избежать подобной склейки, нужно либо добавлять какие-то пометки для компилируемых функций и потом (например, на этапе сборки webpack'ом) их модифицировать для переделки на ленивый импорт, либо же сразу компилировать такие функции соответствующим образом — как понял, Seskar делает второе.

Попробовал Seskar в небольшом тестовом проекте. Страницу с issues в репозитории не нашёл, поэтому отпишусь здесь:

1. Нужная зависимость для использования @Lazy и LazyFunction не указана в README.md. В принципе о ней достаточно быстро догадываешься, но, возможно, её стоит упомянуть, потому что плагин io.github.turansky.seskar её сам не добавляет.

2. Вот такой пример не соберётся с ошибкой "Invalid filter specification for seskar.gradle.plugin.LazyModuleReader":

// ExampleClass.kt
class ExampleClass {
    suspend fun callLazyFunction() {
        exampleLazyFunction()
    }
}
val exampleLazyFunction = LazyFunction { "example" }

// main.kt
suspend fun main() {
    ExampleClass().callLazyFunction()
}

3. Только одна @Lazy-функция возможна в файле. Большее количество также скомпилируется, но по вызову одной из функций автоматически подгрузится содержимое и всех остальных. Похоже, это следствие работы per-file.

4. Если есть, например, две @Lazy-функции в разных файлах, которые используют один и тот же класс, то этот класс будет скопирован в каждую из ленивых функций (в каждый из соответствующих им JS-файлов на выходе). Было бы здорово, если бы используемые в нескольких ленивых функциях исходники выделялись в отдельную ленивую подгрузку, чтобы избежать подобного дублирования. В kjs-box это работает с таким же дублированием.

Очевидно, что подход без создания отдельных подпроектов гораздо удобнее и гибче. Если буду возвращаться к kjs-box, попробую переехать в нём на Seskar.