Рефакторинг существующего кода

Carbon Components Svelte — это библиотека пользовательских интерфейсов, реализующая компоненты IBM Carbon Design System с использованием Svelte. Основная цель при работе с этой библиотекой — улучшение структуры кода, повышение его читаемости и снижение дублирования за счёт переиспользуемых компонентов.

Для начала необходимо установить библиотеку и подключить базовые стили:

npm install carbon-components-svelte
import 'carbon-components-svelte/css/all.css';

После подключения стилей и компонентов можно использовать их в проекте. Например, компонент кнопки:

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<Button kind="primary" on:click={() => console.log('Clicked')}>
  Нажми меня
</Button>

Организация компонентов и переиспользуемость

При рефакторинге существующего кода важно выделять повторяющиеся UI-блоки в отдельные Svelte-компоненты. Это снижает дублирование и упрощает поддержку.

Пример выделения формы с полями ввода в отдельный компонент:

<!-- InputForm.svelte -->
<script>
  import { TextInput, Button } from 'carbon-components-svelte';
  export let onSubmit;
  let inputValue = '';
</script>

<form on:submit|preventDefault={() => onSubmit(inputValue)}>
  <TextInput bind:value={inputValue} labelText="Введите значение" />
  <Button type="submit" kind="primary">Отправить</Button>
</form>

Использование в основном компоненте:

<InputForm onSub mit={value => console.log(value)} />

Работа с состоянием и реактивными данными

Svelte обеспечивает реактивность через переменные и $: декларации. При рефакторинге важно избегать состояния, привязанного к DOM напрямую, вместо этого использовать реактивные переменные:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let isChecked = false;

  $: status = isChecked ? 'Включено' : 'Выключено';
</script>

<Checkbox bind:checked={isChecked} labelText="Активировать" />
<p>{status}</p>

Обработка событий и пользовательские события

Carbon Components Svelte поддерживает стандартные DOM-события, а также позволяет создавать кастомные события для передачи данных из дочерних компонентов:

<!-- ChildComponent.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function handleClick() {
    dispatch('customClick', { message: 'Данные из дочернего компонента' });
  }
</script>

<Button on:click={handleClick}>Отправить событие</Button>
<!-- ParentComponent.svelte -->
<ChildComponent on:customClick={event => console.log(event.detail.message)} />

Использование слотов для гибкой кастомизации

Для компонентов Carbon, таких как карточки или панели, Svelte-слоты позволяют вставлять любое содержимое, сохраняя стили и структуру:

<Card>
  <h3 slot="title">Заголовок карточки</h3>
  <p slot="content">Содержимое карточки можно менять динамически</p>
  <Button slot="footer" kind="secondary">Действие</Button>
</Card>

Это позволяет строить универсальные компоненты, которые можно использовать в разных местах приложения.

Управление стилями и темами

Carbon Components Svelte поддерживает стандартные CSS-переменные и классы для тем. Рефакторинг кода часто включает переход от inline-стилей к CSS-переменным, что облегчает поддержку и изменения дизайна:

:root {
  --cds-background: #f4f4f4;
  --cds-text-primary: #161616;
}

.card-custom {
  background-color: var(--cds-background);
  color: var(--cds-text-primary);
  padding: 1rem;
}
<Card class="card-custom">
  <p>Пример кастомного стиля</p>
</Card>

Оптимизация производительности

При работе с Carbon Components важно минимизировать ререндеринг компонентов. Использование bind: и реактивных выражений позволяет Svelte отслеживать изменения данных и обновлять только необходимые части DOM.

Для списков и таблиц рекомендуется использовать #each с уникальными ключами:

{#each items as item (item.id)}
  <DataTableRow {item} />
{/each}

Это предотвращает полное пересоздание DOM-элементов при изменении данных и ускоряет работу интерфейса.

Модульность и структура проекта

Эффективный рефакторинг подразумевает разделение проекта на модули:

  • components/ — отдельные переиспользуемые UI-блоки
  • containers/ — компоненты, объединяющие логику и несколько UI-компонентов
  • stores/ — глобальные и локальные состояния
  • utils/ — вспомогательные функции и константы

Такой подход облегчает тестирование, поддержку и масштабирование приложения.

Этот подход к использованию Carbon Components Svelte в сочетании с принципами модульного дизайна, реактивности и переиспользуемости компонентов обеспечивает чистый, поддерживаемый и производительный код.

Оглавление