Solid 2 уничтожил свой собственный мета-фреймворк

Solid 2.0, который сейчас находится в статусе Release Candidate, фундаментально перерабатывает асинхронные операции, интегрируя их как первоклассных граждан в реактивный граф. Это устраняет необходимость в примитиве createResource из Solid 1, позволяя таким вычислениям, как createMemo, напрямую возвращать промисы. Фреймворк теперь нативно понимает и управляет асинхронными значениями, упрощая интеграцию fetchUser или аналогичных источников данных в реактивные потоки.

Удаление createResource упрощает логику получения данных и очищает код компонентов. В Solid 1 разработчики управляли результатами createResource, что требовало повсеместных проверок на null или undefined при доступе к значениям ресурсов. Прямой возврат промисов в Solid 2 означает, что реактивный граф сам обрабатывает готовность данных, устраняя необходимость в этих проверках и позволяя компонентам работать только с обычными, определенными значениями.

Примитивы границ (boundary primitives) также были переработаны в соответствии с новой асинхронной моделью, что улучшило опыт как разработчиков, так и пользователей. Suspense заменен на границу Loading, которая отображает фоллбэки специально для случаев отсутствия начальных данных. ErrorBoundary становится Errored — это по большей части переименование с внутренними доработками, а SuspenseList теперь называется Reveal.

Такой уточненный подход к границам значительно улучшает пользовательский опыт. В отличие от других фреймворков, которые блокируют UI при потреблении промиса, в Solid 2 фреймворк потребляет промисы при их создании в графе и блокирует только там, где значение считывается. Это позволяет UI обновляться немедленно по мере готовности отдельных фрагментов данных, вместо того чтобы ждать завершения всех запросов. isPending отслеживает последующие запросы данных, не разрушая UI.

Solid 2.0 значительно улучшает опыт разработки для мутаций данных и эффектов. Новый поток мутаций представляет примитив action, который определяет четкий жизненный цикл для обновлений. В сочетании с createOptimistic и createOptimisticStore эта система обеспечивает автоматический откат UI: локальные оптимистичные изменения являются временными, исчезают в случае ошибки API и возвращают UI к авторитарному состоянию сервера.

Управление хранилищем (store) упрощается, так как прямая мутация становится поведением по умолчанию. Это изменение устраняет необходимость в функции produce и делает createMutable устаревшим, позволяя разработчикам изменять черновики хранилища напрямую. Хелпер storePath остается доступным для специфических сценариев использования в legacy-коде.

createEffect получил серьезный рефакторинг, разделившись на две отдельные функции. Первая, отслеживаемая фаза 'compute', определяет зависимости. Вторая, неотслеживаемая фаза 'apply', выполняет побочный эффект, получая вычисленное значение. Этот архитектурный сдвиг устраняет хелпер on и позволяет устанавливать опцию defer непосредственно в эффекте.

Очистка эффектов также эволюционировала. Функция apply теперь напрямую возвращает логику очистки, оптимизируя управление ресурсами. onMount был заменен на onSettled, который срабатывает только после того, как все асинхронные операции в его области видимости завершились, также возвращая свою функцию очистки. Примитив createComputed удален, его функциональность теперь покрывается createMemo или новым разделенным эффектом.

Solid 2.0 значительно упрощает синтаксис JSX, сокращая количество специфичных для фреймворка идиом. Проп classList был полностью удален; проп class теперь напрямую принимает строки, объекты или массивы. Это позволяет более интуитивно и динамически управлять стилями без необходимости ручной конкатенации строк или манипуляций с массивами.

Обработка атрибутов также стала ближе к нативному HTML. Префиксы attr: и bool:, ранее использовавшиеся для явной привязки атрибутов и логических свойств, больше не нужны. Это изменение стандартизирует объявление атрибутов, убирая слой специфичного для Solid синтаксиса для стандартных HTML-атрибутов.

Пространства имен для обработки событий, такие как on: и onCapture:, были удалены. События теперь управляются с помощью стандартных пропов в стиле camelCase, таких как onClick или onInput, что соответствует общепринятым паттернам веб-разработки. Директива use: также была заменена на стекируемые ref callbacks, предоставляющие более гибкий и компонуемый метод для кастомного поведения элементов и хуков жизненного цикла.

Рендеринг списков был упрощен. Специальный компонент Index больше недоступен, а его функциональность для списков без ключей теперь интегрирована в <For keyed={false}>. Кроме того, был представлен новый компонент Repeat для упрощения рендеринга на основе счетчика, предоставляющий декларативный способ отрисовки блока JSX заданное количество раз. Узнайте больше об этих и других изменениях в блоге Solid 2.0 RC: The Big <Reveal> - SolidJS.

Solid 2 включает в себя новый компилятор на базе Rust, построенный на высокопроизводительном проекте Oxc. Эта переработанная цепочка инструментов значительно повышает производительность сборки фреймворка. Внутренние тесты показывают скорость компиляции от 20 до более чем 350 раз выше, чем у предыдущего JavaScript-компилятора Solid 1, что напрямую означает ускорение циклов разработки и более эффективную сборку проектов.

Обновленный плагин Vite представляет мощный «start mode», предлагающий разработчикам готовую сборку приложения «из коробки». Этот режим поддерживает как клиентский рендеринг, так и полноценные возможности Server-Side Rendering (SSR). Он интегрирует ключевые функции, такие как серверные функции, непосредственно в инструментарий фреймворка, устраняя необходимость в отдельных пакетах и упрощая настройку проекта для различных целей развертывания.

Этот интегрированный и мощный инструментарий делает отдельный мета-фреймворк SolidStart излишним. Устоявшиеся соглашения SolidStart, включая его серверные функции и уровень обслуживания, были поглощены непосредственно ядром Solid или его плагином компилятора. Этот стратегический шаг консолидирует экосистему разработки, встраивая проверенные архитектурные паттерны и возможности full-stack SolidStart непосредственно в основной фреймворк, упрощая общий опыт разработчика.

Какое самое большое изменение в Solid 2.0?

Ключевая инновация заключается в том, чтобы сделать асинхронные операции первоклассной функцией реактивного графа. Это позволяет вычислениям напрямую возвращать промисы, устраняя необходимость в специальных примитивах, таких как createResource.

Прекращается ли поддержка SolidStart?

Да, SolidStart выводится из эксплуатации как отдельный мета-фреймворк. Его ключевые функции, такие как серверный рендеринг и серверные функции, были интегрированы непосредственно в основной плагин Vite для Solid 2.0 через новый «start mode».

Как Solid 2 обрабатывает получение данных без createResource?

Вычисления, такие как createMemo, теперь могут напрямую возвращать промисы. Реактивная система автоматически понимает и обрабатывает асинхронное состояние, упрощая логику получения данных и код компонентов.

Solid 2 собирается быстрее?

Да, значительно. В Solid 2 представлена новая цепочка инструментов компилятора, написанная на Rust, которая, согласно бенчмаркам, работает более чем в 20 раз быстрее, а в некоторых тестах показывает ускорение до 355 раз.

Что заменяет Suspense в Solid 2?

Граница Suspense была заменена на Loading. Loading отображает резервный контент только для первоначальной загрузки данных, в то время как последующие запросы можно отслеживать с помощью isPending без размонтирования существующего UI.