Создание кастомных builders

Кастомные builders в контексте SvelteKit UI представляют собой мощный инструмент для создания повторно используемых компонентов с настраиваемой логикой и стилями. Они позволяют объединять шаблоны компонентов, реактивные состояния и интеграцию с внешними библиотеками UI в единую структуру, которая легко расширяется и поддерживается.

Структура кастомного builder

1. Базовый шаблон компонента

Каждый builder начинается с базового компонента Svelte. Важно соблюдать реактивность и минимизацию побочных эффектов:

<script lang="ts">
  export let props: Record<string, any> = {};
  let internalState = {};
</script>

<div class="builder-container">
  <slot {internalState}></slot>
</div>

<style>
  .builder-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
</style>

Ключевые моменты:

Использование export let props для передачи настроек извне.
Создание internalState для хранения локальной логики.
<slot> для передачи вложенного контента с возможностью использования внутреннего состояния.

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

В SvelteKit UI важна реактивность компонентов. Для кастомного builder можно создавать реактивные свойства, которые автоматически обновляют DOM при изменении состояния:

<script lang="ts">
  import { writable } from 'svelte/store';

  export let initialCount = 0;
  const count = writable(initialCount);

  $: doubled = $count * 2;

  function increment() {
    count.update(n => n + 1);
  }
</script>

<button on:click={increment}>
  Увеличить: {$count} (Дважды: {doubled})
</button>

Особенности:

Использование writable для реактивных значений, которые можно наблюдать из других компонентов.
Вычисляемые свойства через $: для автоматического пересчета.
Методы управления состоянием (increment) внутри builder делают компонент самодостаточным.

Параметризация и расширяемость

Кастомные builders должны быть максимально настраиваемыми. Для этого используют props с дефолтными значениями и объекты конфигурации:

export interface ButtonBuilderProps {
  label?: string;
  color?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

export let config: ButtonBuilderProps = {
  label: 'Кнопка',
  color: 'primary',
  size: 'md'
};

Использование параметров в шаблоне:

<button class={`btn ${config.color} ${config.size}`}>
  {config.label}
</button>

Важные моменты:

Внешние props можно комбинировать с локальными состояниями для более сложных сценариев.
Дефолтные значения позволяют создавать универсальные builders без необходимости ручного задания всех параметров.

Интеграция с библиотеками UI

Кастомные builders в SvelteKit часто интегрируются с существующими UI-библиотеками, такими как TailwindCSS, Radix UI, Shadcn UI.

Пример интеграции с TailwindCSS для динамической стилизации кнопки:

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
  export let rounded: boolean = false;
</script>

<button class={`px-4 py-2 font-semibold 
                ${variant === 'primary' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-black'}
                ${rounded ? 'rounded-full' : 'rounded-md'}`}>
  <slot>Кнопка</slot>
</button>

Принципы:

Использование классов Tailwind для быстрой стилизации.
Динамическая генерация классов через условные выражения.
Возможность передачи кастомных слотов для добавления иконок или текстовых элементов.

Создание цепочек builders

Одной из сильных сторон кастомных builders является возможность объединения нескольких компонентов в цепочку, где один builder управляет состоянием или стилями для других:

<!-- ParentBuilder.svelte -->
<script lang="ts">
  import ButtonBuilder from './ButtonBuilder.svelte';
  let theme = 'primary';
</script>

<div class="flex gap-2">
  <ButtonBuilder {theme}>Кнопка 1</ButtonBuilder>
  <ButtonBuilder theme="secondary">Кнопка 2</ButtonBuilder>
</div>

Ключевые преимущества:

Централизованное управление состоянием и темами.
Повторное использование одного builder в разных частях UI.
Легкая настройка через props и слоты без дублирования кода.

Тестирование и типизация

Использование TypeScript с кастомными builders улучшает поддержку и предотвращает ошибки при передаче props:

export interface InputBuilderProps {
  placeholder?: string;
  value?: string;
  onChange?: (val: string) => void;
}

Тестирование компонентов можно выполнять через Vitest или Playwright, проверяя реактивность и корректное отображение слотов.