Compose Broadcast
5.9K subscribers
375 photos
95 videos
619 links
Все о Jetpack Compose и Compose Multiplatform

По сотрудничеству - @ab_manager
Download Telegram
JetBrains исследует Compose HTML для Server-Side Rendering (SSR)

Frederik Pietzko из JetBrains решил проверить идею: что если Compose-компоненты рендерить в HTML на сервере, а не только в canvas/JS. В Compose добавляется обычная функция с типами:

@Composable
fun Card(title: String, count: Int) {
Div({ classes("card") }) {
H3 { Text(title) }
Span { Text(count.toString()) }
}
}


Идея — добавить функции Compose HTML renderToString / renderToBytes, чтобы один раз прогнать composition и получить строку HTML. Без браузера, без DOM, без recomposition и effects (как классический SSR). Пока речь идет только про JVM тартег

Мне нравится направление. Если Compose HTML получит нормальный серверный рендер, у Kotlin наконец появится шанс на type-safe fullstack без ухода в JS-фреймворки. Пока же это просто интересный разговор, который стоит почитать.

🔗 Источник

#Compose #ComposeHTML #Kotlin #SSR
⚙️ mediaQuery в Compose: один вызов вместо кучи WindowSizeClass + posture + input

Официально появился mediaQuery — лямбда, которая смотрит на текущий UiMediaScope и возвращает boolean. Внутри можно проверять:
👉 windowWidth / windowHeight
👉 windowPosture (Tabletop, Book, Flat)
👉 pointerPrecision (Fine → Coarse → Blunt → None)
👉 keyboardKind (Physical / Virtual / None)
👉 hasCamera / hasMicrophone
👉 viewingDistance (Near / Medium / Far)

Включается одним флагом при запуске приложения:
ComposeUiFlags.isMediaQueryIntegrationEnabled = true


Для размеров, которые дёргаются часто, лучше использовать derivedMediaQuery (обёртка над derivedStateOf):
// Composable code
val narrowerThanMedium by derivedMediaQuery {
windowWidth < WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND.dp
}
val narrowerThanExpanded by derivedMediaQuery {
windowWidth < WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND.dp
}
when {
narrowerThanMedium -> SinglePaneLayout()
narrowerThanExpanded -> TwoPaneLayout()
else -> ThreePaneLayout()
}


Самый чистый кейс — foldable в tabletop:
// Composable code
if (mediaQuery { windowPosture == UiMediaScope.Posture.Tabletop }) {
TabletopLayout()
} else {
FlatLayout()
}


Это API не замена WindowSizeClass, но удобный единый вход для всего, что меняется в рантайме. Если пишете адаптив под foldable / desktop / TV — возьмите на заметку. Пока не перенесли в Compose Multiplatform.

Документация Media Query API

#Compose #JetpackCompose #Adaptive #UI #Android
Please open Telegram to view this post
VIEW IN TELEGRAM
🐱 Адаптивный UI в Compose Multiplatform через набор простый функций

KitFlow — небольшая KMP-либа, которая показывает, как можно держать адаптив в одном месте.

Главная идея — Adaptive.value():
val padding = Adaptive.value(
sm = 12.dp,
md = 16.dp,
lg = 20.dp,
tab = 24.dp,
desktop = 28.dp
)


То же самое для высоты кнопки, ширины карточки, scale шрифта, Boolean, цветов, любых кастомных значений. Есть Adaptive.layoutValue() (по текущей ширине, включая split-screen и resize) и Adaptive.onOrientationChange для портрета/ландшафта.

Подключать как зависимость я не рекомендую. Всё, что там есть, легко реализовать самому, и тогда получаешь полную гибкость под свой дизайн-систем и breakpoints. А вот разобрать реализацию и вдохновиться будет полезно, особенно если пишешь shared UI под Android + iOS + Desktop + Web. Я еще для себя делал расширение в зависимости от таргет платформы.

#Compose #CMP #Adaptive #UI
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Compose Multiplatform 1.12.0: AI агент наконец видит, что написал

Вышел стабильный CMP 1.12.0.

Главное в релизе - MCP в Compose Desktop Hot Reload 1.2.0. Раньше агент правил @Composable вслепую: не знал, прошёл ли reload, что на экране, не упало ли. Теперь есть сервер с нормальными тулами. Поднимается таской, в .mcp.json достаточно hotMcpServer:

{
"mcpServers": {
"compose-hot-reload": {
"command": "./gradlew",
"args": ["--no-daemon", "--quiet", "--console=plain", "hotMcpServer"]
}
}
}


Много фиксов и улучшений для Desktop, Web, iOS. Еще отдельно расскажу постами в @compose_broadcast

🔗 Полный список изменений

#Compose #CMP #Desktop #AI
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Новый выбор текста Compose 1.12 — SelectionContainer и SelectionState API

В Compose 1.12 у SelectionContainer появился hoisted-state: SelectionState. Раньше весь механизм выделения был спрятан внутри текстовых полей. Теперь же стало возможно:
👉 читать выбранный текст реактивно
👉 выделять программно: всё / диапазон / по словам
👉 сбрасывать выделение
👉 искать цитату по всему контейнеру, даже если она размазана по нескольким Text

// Один SelectionState нельзя шарить между несколькими SelectionContainer
val state = rememberSelectionState()

SelectionContainer(state = state) {
Text("Text to be selected...")
}

val selectedTexts : List<AnnotatedString> = state.selectedTexts
Text("Выбрано символов: ${selectedTexts.sumOf { it.text.length }}")


#Compose
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Compose Remote добрался до первой Альфы. Это реализация BDUI (верстка приходит с сервера) на основе Compose от Google!

💬 Нужно ли оно вам?

#Compose #Android #Remote #BDUI
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Compose Multiplatform 1.12.0 вышел, а tvOS в списке поддерживаемых платформ как не было, так и нет: Android, iOS, macOS, Windows, Linux, веб. Дыру закрывает compose-tvos, и интересен он не столько самим tvOS, сколько приёмом.

Плагин через ComponentMetadataRule подвешивает available-at вариант с tvOS-klib к официальному org.jetbrains.compose.*. Дальше решает штатный variant resolution Gradle: tvOS-таргет забирает форк, а iOS/Android/Desktop продолжают резолвить артефакт JetBrains.

Отдельно перехватывается маркер плагина через pluginManagement.resolutionStrategy.eachPlugin, чтобы работала упаковка Compose Resources.

// settings.gradle.kts
plugins {
id("dev.sajidali.compose-tvos") version "1.3.0"
}


Всё, dependencies {} не меняешь. Приём годится далеко за пределами tvOS: так же можно подсунуть свою пересборку любой чужой библиотеки, у которой не хватает таргета.

⚠️ Под капотом форк 15 групп библиотек Compose и AndroidX, опубликованный одним человеком. Автор прямо пишет, что тянет его ровно настолько, насколько нужно для собственного приложения: ни обязательств, ни расписания релизов. Держать compose.runtime и compose.ui в проде из такого источника решение уровня «мы понимаем, на что подписались». Форк сейчас держит линию 1.12, но догонять апстрим ему придётся руками

Смотреть стоит ради механики. Тащить в прод - явным фанатам поддержки tvOS из CMP.

#Compose #ComposeMultiplatform #KMP #Gradle
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚙️ Анимация смены чисел на Compose. Как сделали тут

#Compose #Анимация
Please open Telegram to view this post
VIEW IN TELEGRAM
🐱 compose-recomposition-highlighter - отслеживание статистики рекомпозиций в Android

Следит за теми Composable где проведете инициализацию
@Composable
fun UserProfileCard(user: User) {
Card(
modifier = Modifier
.fillMaxWidth()
// Attach highlighter
.recompositionHighlighter("UserProfileCard")
) {
Text(text = user.name)
}
}


#Compose
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Aurora Developers
🚀 Вышла новая альфа-версия адаптации CMP для ОС Аврора (v0.0.5)

Прошёл квартал — а значит, вышла новая альфа-версия адаптации CMP для ОС Аврора. Рассказываем, что изменилось.

🛠 Инструментарий разработчика

- Плагин для IntelliJ IDEA для быстрого старта
- Автопринятие разрешений при запуске приложений
- Возможность указать дополнительные файлы при сборке RPM

Расширение возможностей фреймворка

- Создания обложек приложения используя Compose
- Открытие URI с системным диалогом выбора приложения
- Поддержка ориентаций приложения
- Новая библиотека адаптивных иконок ОС Аврора
- Полная поддержка экранной клавиатуры — предиктивный ввод и автокоррекция

🚗 Аврора автомобильная

- Поддержка обложек/виджетов
- Улучшена стабильность работы фреймворка

📱 Референсные приложения

- Новое демо-приложение «Погода»
- Темплейт для быстрого старта разработки
- Обновление всех демострационных приложений

Качество и стабильность

- Исправления и общая стабилизация фреймворка

Новая версия уже доступна для разработчиков.
Пробуйте прямо сейчас — все примеры и API в документации.

👉 Документация

Проект по адаптации CMP для ОС Аврора продолжает развиваться как открытый проект на mos.hub — присоединяйтесь к разработке, чтобы внести свой вклад и повлиять на будущее фреймворка. Мы открыты к вашему коду и экспертизе. Только #ВМЕСТЕ мы сможем сделать инструмент максимально полезным для всего сообщества.

👉 Репозиторий
⚙️ Compose Web можно выложить как офлайн-приложение

В Issue CMP-10781 в официальном баг-трекере CMP Константин Цховребов расписал рецепт офлайн-приложения Compose Web: после Gradle-задачи wasmJsBrowserDistribution отдельная задача (исходный код в issue) копирует статику, вычисляет SHA-256 по путям и содержимому и генерирует service-worker.js.

Что получается на практике:
👉 index.html, JS, Wasm и Compose Resources кладутся в Cache Storage
👉 SW перехватывает только эти файлы
👉 запросы к API идут в сеть как обычно
👉 новая сборка меняет версию кэша и удаляет старый

Ограничения:
👉 cache.addAll() падает, если не скачался хотя бы один файл из списка
👉 source maps тоже попадают в кэш, если не отфильтровать
👉 новая версия подхватится только при следующем запуске

Это не официальная задача в плагине CMP и не «PWA из коробки», а лишь рецепт, который вполне может стать частью официального плагина в будущем.

#Compose #CMP #Wasm
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚙️ Вышел Compose HotSwan 2.0.0 - Hot Reload для Android, iOS и Desktop. В новой версии прокачали движок определения изменений.

Полезно как для людей, так и для разработки с AI агентами, так как не приходится прокликивать приложение до экрана при каждых изменениях, что экономит токены.

💰Решение платное - 5$/месяц, есть триал на 2 недели.

💬 Если кто уже пробовал - делитесь опытом в комментариях

#Compose #CMP #Android #Desktop #iOS
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
В Compose 1.13 появится полноценный Blur для контента через Modifier

#Compose