Effector news

@effector/reflect 10.1.0 ✨ Новая фича: mapProps const Hello = reflect({ view: Greeting, bind: { // ... }, mapProps: { label: { source: $user, fn: (user, props) => `${props.title} ${user.name}`, }, }, }); Спасибо @olovyannikov_frontend за пуллик! 📚 Документация: https://reflect.effector.dev/docs/reflect#deriving-props-with-mapprops

effector-eslint-plugin v0.19.0 ✨ Новое правило: enforce-exhaustive-useUnit-destructuring – требует деструктурировать все юниты, переданные в useUnit. Теперь стало значительно сложнее потерять юниты в компоненте и избежать лишних подписок. Вошло в пресет react - спасибо @olovyannikov_frontend за реализацию! 🛠️ Улучшены enforce-store-naming-convention и enforce-effect-naming-convention – теперь проверяются не только простые объявления, но и различные binding контексты (деструктуризация, параметры функций) 🪄 Исправлено no-units-spawn-in-render – теперь корректно подсвечивает factory.createModel() из effector-factorio внутри рендера 🪄 Улучшена работа mandatory-scope-binding – правило подсвечивает только потенциальные вызовы юнитов, теперь будет меньше ложных срабатываний 📚 Документация • Changelog 🔗

Коммунити, принес вам потрогать очередную дата-фетчилку для эффектора. Паритет с farfetched, фичи, которых не хватало, effect-based. Принимаются предложения, улучшения и все такое Постарался закрыть максимально потребностей) + девтулы, кодмод для миграции с фф, скилл для AI Нейрослоп из доки не вычищал пока, сделаем это ближе к релизу, если он случится :) https://olovyannikov.github.io/effector-refetch/

Мы с Эдвардом залетели на стрим, рассказываем про произошедшую историю https://t.me/holyjs_channel/1381

🚀 effector-tanstack-query v1.0.0-rc.1 — RC перед стабильной 1.0 Адаптер из 0.1.1 оброс фичами. Замораживаем API, собираем фидбэк. 🛟 SSR с Next.js App Router • useSuspenseQuery / useSuspenseQueries теперь работают в RSC-проходе — server HTML рендерится с prefetched-данными, никакого Suspense-flash'a • Новые примитивы: prefetchQueries + HydrationBoundary • Полный гайд по SSR 📦 Новые API • createQueries — реактивные семейства запросов из Store<TItem[]> • useQueries / useSuspenseQueries — tuple фабрик или семейство • Cache-actions — cancel/remove/reset как декларативные events • useIsFetching / useIsMutating— глобальные индикаторы 🤝 Миграция с @tanstack/react-query • QueryClientCompatProvider — обе либы делят один QueryClient, мигрируй компонент-за-компонентом 🧪 Покрытие тестами • CI прогоняет матрицу React 18 / 19 × Next 15 / 16 на Node 22 / 24 • SSR-concurrency: 1000 параллельных renderToString на каждый push — гарантия что данные между запросами не утекают • Effector поддерживается с версии 23+ npm install @effector-tanstack-query/core@rc @effector-tanstack-query/react@rc Хочется фидбэка — особенно от SSR, мигрирующих и тех кто работает с динамическими списками. До 1.0 можно ломать API безболезненно. Отдельное спасибо @domosedov за баг-репорты 🙏 Нашёл проблему — заводи issue на GitHub или пиши в личку @raineliani. Залетайте 👇 🔗 Репо · 📚 Дока · 🧪 Примеры

Конфликты и примирения Многие наверняка знают, что у нас в экосистеме недавно произошел крупный конфликт с Эдвардом, автором argon router и reform Long story short: с обеих сторон мы произнесли слова которые потом очень захотелось откатить обратно но уже поздно Начали возникать вопросы о будущем экосистемы и развитию в целом Мы поговорили и помирились 🫶 Прояснили ситуацию, все признали свои ошибки (мы все в конце концов не идеальны) Эдвард в итоге будет продолжать развивать свой проект, но это только сделает нас всех крепче: раньше было однозначно, декларативность === эффектор. Но ведь изначальные идеи же глубже и не принадлежат эффектору per se, то что zustand-like проектов много, а эффектор уникальный как снежинка - это была временная аномалия. То есть да, Эдвард будет делать свой проект со своим видением, но мы по прежнему разделяем идеи друг друга, то есть по итогам конфликта, для тех кому импонирует концепция но почему либо не устраивает реализация, теперь есть альтернативный подход. Есть даже идеи как сохранить совместимость для пользователей reform, подробности в посте от Эдварда Ну и разумеется со своей стороны обязательно отметим что мы действительно замедлялись в развитии и все претензии в этом плане были полностью обоснованы. Будем возвращаться к своему старому темпу релизов (рекорд эффектора - публикация багфикса спустя три минуты после репорта). Это был жесткий урок и мы его услышали 🫡 Отдельное спасибо Илье @olovyannikov_frontend как главному драйверу примирения 🤗 А ещё обязательно посмотрите доклад Эдварда на holyjs, ввиду дальнейших событий он смотрится ещё интереснее 😃 Резюмируя, из любого конфликта нужно выходить с общей пользой, мы полагаем что у нас получилось А вы как думаете?

☄️ @effector/router v1.0.0 release candidate Новый роутер основан на идеях и коде atomic-router и argon-router. А так как последние уже не поддерживаются, то effector core team приняли решение о переносе проекта в организацию effector. Чтобы перевести свой проект, нужно заменить зависимости предыдущего роутера на @effector/router@v1.0.0-rc.0 и @effector/router-react@v1.0.0-rc.0. Кроме этого, из ломающих изменений сейчас необходимо использовать historyAdapter(history) или queryAdapter(history) для router.setHistory(). https://router.effector.dev/core/adapters.html До полноценного релиза важно получить фидбек и истории переезда. В том числе, чтобы написать полноценный Migration Guide. Репозиторий: https://github.com/effector/router Документация: https://router.effector.dev 🧡

🚀 effector-tanstack-query v0.1.1 — выложили биндинги TanStack Query для effector Цель проекта - снизить порог входа в экосистему effector и упростить миграцию команд, уже сидящих на react-query. Внутри — тонкий адаптер: ничего не переписывает, просто пробрасывает наружу. Observer-поля (`data`, isPending, …) становятся Store, действия (`refetch`, mutate, …) — EventCallable. Store в queryKey сам триггерит рефетч. Что уже умеет: - 📦 queries / mutations / infinite - 🔄 реактивная пагинация, зависимые запросы, polling, инвалидация - ↩️ оптимистичные апдейты с откатом - ⏳ Suspense + ErrorBoundary - 🌐 SSR на Next.js App Router До 1.0 очень хочется фидбека: что неудобно в API, чего не хватает, Найти и пофиксить баги. А так же цель - вычитать доку и код Залетайте 👇 🔗 Репо: github.com/ilyaagarkov/effector-tanstack-query 📚 Дока: ilyaagarkov.github.io/effector-tanstack-query 🧪 Примеры: github.com/ilyaagarkov/effector-tanstack-query/tree/master/examples

Когда опенсорс это часть работы Не так давно наша кодовая база на effector на рабочем проекте стала расти с бОльшей скоростью и, конечно, сильно влиять на легаси код. Таким образом в огромных компонентах где смешаны бизнес-логика, ui-стейт, выполнение сайд-эффектов, преобразования данных, мемоизация итп, и туда стал проникать useUnit из effector. useUnit - хук (в случае реакта), который связывает модель со вьюшкой. Если передан стор, то он подписывает компонент на этот стор и обновляет компонент, если стор изменился. Если переданы события или эффекты, то useUnit гарантированно вызовет это событие/эффект в нужной области (scope). useUnit умеет "батчить" апдейты - если компонент подписан на несколько сторов/событий, то он дождется всех изменений и применит из разом, но только в том случае, если используется один useUnit. const Component = () => { const [user, products] = useUnit([$userStore, $productsStore]) } Если используется несколько useUnit, то магии не случится, и каждое обновление будет вызывать обновление (ререндер) компонента. const Component = () => { const [products] = useUnit([$productsStore]) const [user] = useUnit([$userStore]) } Очевидно – лучше меньше ререндеров, чем больше :) Но как нам контроллировать количество вызовов этого самого useUnit? Особенно в большой кодовой базе в больших компонентах? Вариант А – руками. Ходить по всей кодовой базе, менять самостоятельно вызовы, бить по рукам разработчиков, которые по каким-то причинам не соблюдают такое простое правило. Вариант Б – заиметь статический анализатор, который укажет на проблему и попробует пофиксить её автоматически. По этому пути я и пошел - написал правило для eslint-плагина effector'a, которое парсит вызовы useUnit и мержит их, если возможно, или подсвечивает warning с ошибкой, которая сообщает, что лучше так не делать. Хорошо, множественные useUnit устранили, но что если: - Мы использовали в компоненте какой-то store, но теперь он нам не нужен. Мы его удалили по месту использования, но забыли удалить из useUnit const Component = () => { // Используем $user, но не используем $products const [user] = useUnit([$user, $products]); return <UserCard id={user.id} /> } В таком случае подписка сохранится - если $products поменяется, то компонент тоже обновится. Неприятно. Для этого кейса тоже можно написать ESLint-правило! Парсим вызов useUnit (или его алиасов, если используете), смотрим на то, что было деструктурировано и сравниваем с аргументами, которые передали. Если аргумент есть, а деструктурированного вызова нет - сообщаем об этом пользователю. https://github.com/effector/eslint-plugin/pull/175

effector-eslint-plugin 0.18.0 https://github.com/effector/eslint-plugin/releases/tag/v0.18.0 Ключевые изменения • Поддержка ESLint v10: плагин обновлён для работы с текущей мажорной версией ESLint. Поддержка ESLint v8 и v9 сохранена. Спасибо @kireevmp • Новое правило: no-units-spawn-in-render: помогает не создавать юниты внутри рендера Реакт-компонентов, где это может приводить к багам. Теперь входит в пресет react. Спасибо @AlexandrHoroshih! • mandatory-scope-binding: улучшена обработка кейсов с юнионами в типах. Cпасибо @kireevmp!

Ребят, всем привет! Доделал кандидата на рантайм динамических моделей (не до конца, но часть API уже готова) отметьтесь те, кто хочет посмотреть и потрогать, что там нового) Мне очень нужен фидбек чтобы починить баги и (возможно) узнать о каких-то специфичных хотелках

Документация эффектора вновь доступна в РФ без ВПН 🎉 Мы сделали зеркало документации на CDN внутри России https://ru.effector.dev Отдельная ссылка из-за нюансов работы CDN, но главное что теперь наконец-то можно вновь пользоваться документацией без проблем Пока что не очень понятно, как это должно работать с точки зрения SEO, например как показать пользователю что ему стоит перейти на зеркало при открытии ссылки, но мы что-нибудь придумаем 😌 Ожидайте в скором времени зеркала для документации всех проектов экосистемы, всё для вас 😊

И тут, как гром среди ясного неба — argon-router@0.12 ⚡ @argon-router/paths ✨ Появилась функция convertPath — она преобразует путь argon-router в формат, совместимый с express (path-to-regexp). Полезно для интеграций и серверной логики. @argon-router/core / @argon-router/react Pathless-пути Теперь можно объявлять пути без URL с инициализацией в стиле atomic-router Вложенные роутеры Поддержка роутеров как суб-путей внутри корневых History adapter 🔌 Прямая инициализация с history убрана в пользу historyAdapter. Это позволило реализовать query router, который работает как обычный, но хранит состояние в query, а также писать собственные адаптеры без ограничений на тип history. React-хуки Добавлены useLink, useOpenedView и useIsOpened Outlet 🧱 Outlet позволяют рендерить наследуемые (вложенные) пути. registerRoute Добавлена функция для регистрации роутов @argon-router/react-native 📱 Новый пакет для интеграции с react-navigation, самой популярной навигационной библиотекой в мире React Native. Отдельное спасибо @eduSat_space 💙 — благодаря донату документация стабильно работает с начала декабря. P.S изменений было много, если будут баги — вы знаете что делать Документация GitHub

https://youtube.com/live/vy0xDD_q674?feature=share Итак, друзья, 4 выпуск подкаста TekTok, где тяжеловесы индустрии делятся своим видением будущего фронтенда и технологий. Сегодня у нас в гостях — Дима Zerobias, автор Effector — одного из самых мощных и элегантных стейт-менеджеров современности. Мы говорим о том, почему Effector — это не просто альтернатива Redux, а целая философия построения реактивных систем. Обсуждаем, куда движется фронтенд, что ждёт разработчиков в эпоху ИИ, почему зарплаты падают, где заканчивается фронтенд и начинается инженерия, а также почему многие популярные библиотеки вроде Redux или Zustand — это всего лишь игрушки по сравнению с продуманной архитектурой Effector. #frontend #react #effector

Приходите на стрим с IT Камасутра через пол часа

Кто искал работу? С мест сообщают: Йоу, йоу! Ищем фронтендера в команду Space307 (https://space307.team/). Мы — международная финтех-компания полного цикла. В нашей команде 280+ сотрудников в области разработки и маркетинга. За 10 лет мы прошли путь от стартапа до компании, которая запускает масштабные продукты на международный рынок. Чем предстоит заниматься: > Разрабатывать и поддерживать внутренние продукты компании > Прорабатывать задачи совместно с UX-специалистами и бэкенд-разработчиками > Разрабатывать функционал и обеспечивать высокое качество кода > Участвовать в проектировании архитектуры приложений > Проводить и проходить code review Мы ждём, что ты: > Умеешь абстрактно мыслить > Имеешь от четырёх лет коммерческого опыта в продуктовой компании и от одного года коммерческого опыта работы с Effector > Уверенно владеешь TypeScript и понимаешь SemVer > Работаешь с React и знаешь как добиваться минимального количества рендеров > Пишешь юнит-тесты и понимаешь зачем это делаешь > Самостоятельный, но чувствуешь когда лучше спросить совет > Можешь работать в продуктовой команде единственным фронтенд-разработчиком или с напарниками Стек: > TypeScript, React, Effector, Vitest, grlt-hub Что тебя ждёт в Space307: > Удалёнка без границ. Работай откуда угодно, начинай день, когда удобно — до 12:00 (GMT+3). > Достойная зарплата. Следим за рынком и делаем всё, чтобы спейсовцы были оценены справедливо. Оплата: мы договариваемся об удобном формате для кандидата в зависимости от его локации. > Много движа. Мастер-классы, тимбилдинги, тусовки, корпоративы — выбирай, что по душе. > Поддержка твоего здоровья. Компенсация спорта, инвентаря и возможность оформить медицинскую страховку > Рост и развитие. Обучение, конференции — за наш счёт. > Иностранные языки и хобби для души. Прокачивай навыки и занимайся любимым делом. > Настоящая команда. Честный фидбэк, поддержка и общий драйв. 📌 Откликайся на вакансию по ссылке (https://space307.team/frontend-developer) Или пиши ректуреру @innafedotova9

@effector/next@0.7.2 🔧 - Починили работу сторов с кастомными сериализаторами в @effector/next Спасибо @domosedov за баг-репорт! ❤️

Всем привет! @movpushmov осенью выступает на HolyJS с докладом «Почему вам (скорее всего) нужен эффектор». Поговорим о том, почему во фронтенде всё сложнее управлять состоянием и какие трудности это создаёт. Покажет, чем Effector отличается от других инструментов и как он помогает проще решать даже запутанные задачи. Будем рады видеть вас на докладе!

Видео: Effector + Next.js Участник сообщества сделал видео по интеграции эффектора и next js 🔥 Рассмотрел такие темы как установка SID, создание фабрик, получение данных на строне серевера(SSR), серверные функции, Suspense Все благодарности автору @domosedov 👍