1. Архитектура
Сюда попадают изменения публичного API инициализации (createCds), DI через provide/inject, точек входа и общих принципов работы фреймворка.
Библиотека переписана на новую архитектуру (JSX, propsFactory, composables / hooks)
✨ NEW — внутренняя архитектура CDS 4 переписана с нуля. На публичный API компонентов это, как правило, не влияет, но меняет способ расширения библиотеки и пути «глубоких» импортов.
Было (CDS 3):
// 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):
// 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):
// 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):
// 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):
// 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):
<!-- 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):
// CDS 3 — locale: TAvailableLocale | ILocale (по умолчанию строка 'ru')
import { createCds } from '@central-design-system/components';
app.use(createCds({
locale: 'ru',
}));Стало (CDS 4):
// 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.