Skip to content
This page is not translated yet — the Russian text is shown.Open the Russian version

1. Архитектура ​

Сюда попадают изменения публичного API инициализации (createCds), DI через provide/inject, точек входа и общих принципов работы фреймворка.

Библиотека переписана на новую архитектуру (JSX, propsFactory, composables / hooks) ​

✨ NEW — внутренняя архитектура CDS 4 переписана с нуля. На публичный API компонентов это, как правило, не влияет, но меняет способ расширения библиотеки и пути «глубоких» импортов.

Было (CDS 3):

ts
// CDS 3 — SFC на <template>, пропсы inline, композаблы в composable/ (ед. ч.)
import { createCds, components, directives, plugin, utils } from '@central-design-system/components';
import { useTheme } from '@central-design-system/components'; // из ./composable
import { CdsTransitionFade } from '@central-design-system/components'; // из ./transitions

Стало (CDS 4):

ts
// CDS 4 — компоненты на JSX defineRender + propsFactory,
// композаблы в composables/ (мн. ч.), низкоуровневые примитивы в hooks/
import { createCds, utils } from '@central-design-system/components';
import { useTheme } from '@central-design-system/components';   // из ./composables
import { CdsTransitionFade } from '@central-design-system/components'; // из ./transitions
import { createContext, useResizeObserver } from '@central-design-system/components'; // ./hooks

// Внутри пакета — alias @cds/* (@cds/composables/useTheme, @cds/core, @cds/utils)

Действие: для обычного использования компонентов миграция не требуется. Если вы импортировали внутренние сущности напрямую — учтите: каталог composable/ переименован в composables/, добавлен слой hooks/. Namespace utils и плоские экспорты transitions (CdsTransitionFade, …) сохранены как в CDS 3; убран только корневой реэкспорт plugin. Пропсы компонентов теперь собираются фабриками propsFactory (@cds/core), рендер — через defineRender(() => <jsx/>).

createCds: новые опции defaults, blueprint, goTo, aliases ​

✨ NEW — фабрика createCds получила новые подсистемы конфигурации. Все они аддитивны — существующий вызов createCds() продолжает работать.

Было (CDS 3):

ts
// CDS 3 — ICdsOptions: components, directives, icons, illustrations,
//         display, theme, cssGrid, ssr, locale, teleport
import { createCds } from '@central-design-system/components';

app.use(createCds({
  theme: { defaultTheme: 'light' },
  locale: 'ru',
}));

Стало (CDS 4):

ts
// CDS 4 — добавлены defaults, blueprint, goTo, aliases
import { createCds } from '@central-design-system/components';

app.use(createCds({
  // Глобальные дефолты пропсов компонентов.
  // Локально переопределяются компонентом <CdsDefaultsProvider>.
  defaults: {
    global: { rounded: 'md' },
    CdsButton: { variant: 'soft' },
  },
  // Пресет конфигурации: базовый набор опций, поверх которого мержится остальное.
  blueprint: { theme: { defaultTheme: 'light' } },
  // Подсистема программной прокрутки (composable useGoTo).
  goTo: { duration: 300, offset: 0 },
}));

Действие: миграция не требуется. Новое: defaults задаёт глобальные значения пропсов (переопределяются компонентом CdsDefaultsProvider и composable useDefaults); blueprint — пресет опций, на который накладывается остальная конфигурация (mergeDeep(blueprint, rest)); goTo — программная прокрутка через useGoTo; aliases — регистрация компонентов-алиасов. Символы DI: DefaultsSymbol, GoToSymbol, IconSymbol (см. src/cds.ts).

Глобальная опция createCds({ teleport }) удалена ​

⚠️ BREAKING — глобальная конфигурация телепорта всплывающих компонентов (teleport → TeleportSymbol) убрана из createCds. Цель телепорта теперь задаётся per-component через пропсы attach / contained.

Было (CDS 3):

ts
// CDS 3 — глобально для всех оверлеев (модалки, тултипы, меню, тосты)
import { createCds } from '@central-design-system/components';

app.use(createCds({
  teleport: {
    target: document.getElementById('app')!,
    contained: false,
    root: false,
    containerClassName: 'cds-overlay-container',
  },
}));

Стало (CDS 4):

html
<!-- CDS 4 — цель телепорта указывается на конкретном компоненте -->
<CdsModal v-model="modal" attach="#app">…</CdsModal>
<CdsTooltip contained text="Подсказка">…</CdsTooltip>

Действие: удалить опцию teleport из createCds(). Там, где нужен нестандартный контейнер телепорта, задать проп attach (boolean | string | Element) или contained на самих оверлейных компонентах (CdsOverlay и производные: CdsModal, CdsTooltip, CdsMenu, CdsDrawer и т. д.). Поиск: grep -rn "teleport" src/ в местах вызова createCds.

Опция locale стала объектом LocaleOptions (+ RTL) ​

⚠️ BREAKING — в CDS 3 locale принимал строку ('ru') или объект ILocale. В CDS 4 это объект LocaleOptions & RtlOptions с полем locale, сообщениями, fallback и настройкой RTL.

Было (CDS 3):

ts
// CDS 3 — locale: TAvailableLocale | ILocale (по умолчанию строка 'ru')
import { createCds } from '@central-design-system/components';

app.use(createCds({
  locale: 'ru',
}));

Стало (CDS 4):

ts
// CDS 4 — locale: LocaleOptions & RtlOptions
import { createCds } from '@central-design-system/components';

app.use(createCds({
  locale: {
    locale: 'ru',
    fallback: 'en',
    messages: { /* переопределения строк */ },
    rtl: { ar: true },
  },
}));

Действие: заменить строковое значение locale: 'ru' на объект locale: { locale: 'ru' }. Полный набор полей: locale, fallback, messages, decimalSeparator, adapter, rtl (см. LocaleOptions / RtlOptions в src/composables/useLocale/internal/useLocale.types.ts). Доступ в рантайме — через composable useLocale. Поиск: grep -rn "createCds" src/ и проверить поле locale.