Переход с Chakra UI

При переносе интерфейсного кода с Chakra UI на SvelteKit необходимо учитывать принципиальные различия между библиотеками и подходами к построению компонентов. Chakra UI ориентирован на React и предоставляет набор готовых компонентов с системами стилей через пропсы, в то время как в SvelteKit UI libs акцент делается на декларативность Svelte и реактивность состояний.

1. Компонентная архитектура и синтаксис

В Chakra UI компоненты создаются как JSX-элементы с пропсами для управления стилями и поведением. Например, <Button colorScheme="blue" size="md">Click me</Button>.

В SvelteKit UI libs используется Svelte-синтаксис с прямой привязкой свойств через реактивные переменные и слотами для вложенного контента:

<script>
  import { Button } from '@sveltekit/ui';
  let color = 'blue';
  let size = 'md';
</script>

<Button {color} {size}>
  Click me
</Button>

Ключевое отличие: стили и состояния управляются через реактивные переменные Svelte, а не через пропсы React.

2. Работа с системами стилей

Chakra UI использует style props, которые позволяют управлять отступами, цветами и типографикой через атрибуты компонента. SvelteKit UI libs предлагает более декларативный подход: компоненты могут принимать классы, объекты стилей или использовать встроенные CSS-переменные.

Пример адаптации отступов:

Chakra UI:

<Box p={4} m={2} bg="gray.100">Content</Box>

SvelteKit UI libs:

<Box style="padding: 1rem; margin: 0.5rem; background-color: var(--gray-100);">
  Content
</Box>

Также возможно подключение готовых утилит для Tailwind-подобной стилизации.

3. Управление состояниями компонентов

В Chakra UI большинство интерактивных состояний обрабатывается через пропсы (isDisabled, isLoading) и хук useState. В SvelteKit UI libs реактивность достигается напрямую через переменные Svelte:

<script>
  import { Button } from '@sveltekit/ui';
  let isLoading = false;

  function handleClick() {
    isLoading = true;
    setTimeout(() => isLoading = false, 2000);
  }
</script>

<Button on:click={handleClick} disabled={isLoading}>
  {#if isLoading}Loading...{/if}
  {#if !isLoading}Submit{/if}
</Button>

4. Слоты и композиция компонентов

SvelteKit UI libs активно использует слоты для вложения контента, что позволяет создавать более гибкую композицию компонентов. В Chakra UI часто приходится использовать проп children и дополнительную обертку:

<Card>
  <CardHeader>
    <h2>Title</h2>
  </CardHeader>
  <CardBody>
    <p>Content goes here</p>
  </CardBody>
</Card>

Слоты делают структуру компонента более наглядной и легко управляемой, а также упрощают повторное использование вложенных блоков.

5. Система темизации и глобальные стили

Chakra UI использует контекстную систему темизации (ThemeProvider). В SvelteKit UI libs настройка темы выполняется через глобальные CSS-переменные или через store, который управляет состоянием темы приложения:

<script>
  import { theme } from '@sveltekit/ui/stores';
  function toggleTheme() {
    theme.update(current => current === 'light' ? 'dark' : 'light');
  }
</script>

<Button on:click={toggleTheme}>Toggle Theme</Button>

Глобальные стили можно подключать через app.css или <style global> в корневом компоненте.

6. Модальные, уведомления и интерактивные элементы

SvelteKit UI libs предоставляет готовые компоненты для модальных окон, уведомлений и тултипов. Их использование отличается от Chakra UI отсутствием необходимости оборачивать компоненты в провайдеры состояния. Все взаимодействия обрабатываются через реактивные переменные и события.

Пример модального окна:

<script>
  import { Modal, Button } from '@sveltekit/ui';
  let isOpen = false;
</script>

<Button on:click={() => isOpen = true}>Open Modal</Button>

<Modal bind:open={isOpen}>
  <h2>Modal Title</h2>
  <p>Modal content goes here.</p>
  <Button on:click={() => isOpen = false}>Close</Button>
</Modal>

7. Переход с Chakra UI Hooks на реактивные переменные Svelte

Chakra UI использует хуки вроде useDisclosure для управления видимостью компонентов. В SvelteKit UI libs этот паттерн заменяется простыми реактивными переменными:

Chakra UI:

const { isOpen, onOpen, onClose } = useDisclosure();

SvelteKit UI libs:

let isOpen = false;
function onOpen() { isOpen = true; }
function onClose() { isOpen = false; }

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

8. Анимации и переходы

В Chakra UI анимации обычно добавляются через CSS или сторонние библиотеки. SvelteKit UI libs интегрирует анимации напрямую через встроенные транзишены и анимации Svelte, что позволяет плавно менять состояние компонентов:

<script>
  import { fade } from 'svelte/transition';
  let visible = false;
</script>

<Button on:click={() => visible = !visible}>Toggle</Button>

{#if visible}
  <div transition:fade>
    Animated Content
  </div>
{/if}

9. Практика миграции

  • Шаг 1: Определить ключевые компоненты Chakra UI, которые используются в проекте.
  • Шаг 2: Найти соответствующие компоненты в SvelteKit UI libs.
  • Шаг 3: Переписать JSX в Svelte-синтаксис с использованием слотов и реактивных переменных.
  • Шаг 4: Настроить темы и глобальные стили через CSS-переменные или store.
  • Шаг 5: Проверить интерактивные состояния и анимации, заменив хуки на реактивные переменные и транзишены Svelte.

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

Оглавление