TL;DR
Nano Kit теперь предлагает официальные адаптеры для Svelte, включая работу со stores, роутингом и SSR. Это даёт разработчикам лёгковесную альтернативу крупным state-менеджерам без потери функциональности. В статье разберём практические кейсы интеграции.
Введение: зачем ещё один state-менеджер?
В экосистеме Svelte уже присутствуют решения вроде Svelte Stores и SvelteKit, но Nano Kit предлагает уникальный компромисс:
- Размер bundle сопоставим с Nano Stores (~2KB gzipped)
- DX (Developer Experience) уровня крупных решений
- Полноценная поддержка SSR из коробки
npm install @nano-kit/svelte-adapter
Основная часть: разбираем адаптеры
Stores: от Svelte к Nano Kit
Традиционный Svelte store:
<script>
import { writable } from 'svelte/store';
const count = writable(0);
</script>
<button on:click={() => $count += 1}>
Clicks: {$count}
</button>
Эквивалент на Nano Kit:
<script>
import { createStore } from '@nano-kit/svelte-adapter/store';
const count = createStore(0);
</script>
<!-- API остаётся идентичным -->
Ключевое отличие — поддержка middleware:
const logger = (store) => (next) => (action) => {
console.log('dispatching', action);
return next(action);
};
const store = createStore(0, [logger]);
Роутинг: SvelteKit vs Nano Router
Nano Router предлагает более декларативный подход:
<script>
import { Router, Route } from '@nano-kit/svelte-adapter/router';
</script>
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<!-- Динамические параметры -->
<Route path="/users/:id" component={UserProfile} />
</Router>
Преимущества перед SvelteKit:
- Изоморфная навигация (работает и в SSR, и в CSR)
- Поддержка lazy-loading через динамические импорты
- Минимальный overhead (1.5KB против 15KB у SvelteKit)
SSR: гидрация без боли
Проблема классической гидрации в Svelte — дублирование инициализации состояний. Nano Kit решает это через сериализацию:
// server.js
import { renderToString } from '@nano-kit/svelte-adapter/ssr';
import App from './App.svelte';
const { html, state } = await renderToString(App);
// Клиентская часть
import { hydrate } from '@nano-kit/svelte-adapter/ssr';
hydrate(App, { target: document.getElementById('app'), state });
Практическое применение
Оптимизация большого приложения
Рассмотрим миграцию с Redux на Nano Kit:
- Уменьшение bundle size на 40-60%
- Упрощение middleware-цепочки
- Нативная поддержка Svelte-реактивности
// Было (Redux)
const store = configureStore({
reducer: rootReducer,
middleware: [thunk, logger]
});
// Стало (Nano Kit)
const store = createStore(initialState, [thunk, logger]);
Тестирование
Nano Kit предлагает встроенные утилиты для тестирования:
import { createTestStore } from '@nano-kit/svelte-adapter/testing';
test('should increment counter', () => {
const store = createTestStore(0);
store.dispatch(increment());
expect(store.getState()).toBe(1);
});
Заключение
Nano Kit не стремится заменить SvelteKit, но предлагает альтернативу для случаев, когда нужен:
- Минималистичный стейт-менеджмент
- Кастомный роутинг без оверхэда
- Полный контроль над процессом гидрации
Для старта достаточно установить пакет и попробовать на pet-проекте — порог входа значительно ниже, чем у аналогичных решений.