Any TDF

Единая дизайн-система. Три нативные библиотеки мобильных компонентов для разных фреймворков.

STDF для Svelte • RTDF для React • VTDF для Vue

STDF • RTDF • VTDF

English • 简体中文 • 繁體中文 • 日本語 • 한국어 • Español • Русский • Français • Deutsch • Italiano

Any TDF — система мобильных компонентов для Svelte, React и Vue. Три библиотеки используют общее поведение, визуальный язык, темы, локализации, публичные типы, структуру документации и правила доступности, сохраняя модель рендеринга и способы композиции каждого фреймворка.

Это не межфреймворковая обёртка и не единая среда выполнения, скрытая за адаптерами. STDF предоставляет компоненты, сниппеты, действия и переходы Svelte; RTDF — компоненты, свойства, функции рендеринга, хуки и провайдеры React; VTDF — компоненты, слоты, события и composables Vue.

• 60 согласованных мобильных компонентов с нативными API фреймворков и предсказуемым поведением.
• Общая система тем Tailwind CSS с тёмным режимом, переключением во время работы, пользовательскими темами и переиспользуемыми семантическими цветами.
• Более 60 встроенных локализаций, а также руководства, справочники API и примеры компонентов на китайском и английском языках.
• Экспорт пакетов с приоритетом TypeScript, поддержка SSR, импорт по требованию и общие правила доступности.
• Нативная семантика анимации Svelte и соответствующие пакеты анимации для React и Vue.
• Единый генератор проектов, плагины SVG-спрайтов и Markdown, автономные AI Skills и расширение VS Code.
• Контрактные, пакетные, маршрутные, браузерные и визуальные проверки, поддерживающие согласованность трёх реализаций.

Семейство компонентов нового поколения сейчас опубликовано в npm с тегом alpha. Два плагина Vite используют стабильный тег latest.

Создайте TypeScript-проект в интерактивном режиме:

bun create any-tdf@alpha

Или явно выберите фреймворк и стартовый шаблон:

bun create any-tdf@alpha my-app -f svelte -t sktt -b lucide
bun create any-tdf@alpha my-app -f react -t vrtt -b phosphor
bun create any-tdf@alpha my-app -f vue -t vrtt -b tabler

Генератор предоставляет шаблоны Vite и SvelteKit, TypeScript, Tailwind CSS или UnoCSS, несколько стратегий значков, встроенные библиотеки значков и настройку одной или нескольких тем. Все параметры описаны в полном справочнике create-any-tdf.

Чтобы добавить библиотеку компонентов в существующее приложение:

bun add stdf@alpha svelte tailwindcss
bun add rtdf@alpha react react-dom tailwindcss
bun add vtdf@alpha vue tailwindcss

Установите только строку для своего фреймворка. Каждый пакет автоматически устанавливает общие зависимости среды выполнения Any TDF. Инструкции по импорту стилей, настройке тем, компонентам и миграции доступны на сайте соответствующей библиотеки.

Ниже перечислены все публичные npm-пакеты, поддерживаемые в этом Monorepo. Актуальная версия каждого пакета отображается на значках в начале этого README.

Общий слой намеренно имеет узкую область ответственности. @any-tdf/common содержит переиспользуемое вычисление состояния, темы, локализации, SVG-данные, типы и небольшие платформенные утилиты. STDF, RTDF и VTDF используют эти контракты, но выполняют рендеринг собственными примитивами фреймворков.

Такое разделение даёт пользователям:

• Привычный синтаксис компонентов, событий, слотов, дочерних элементов и композиции в каждом фреймворке.
• Согласованные возможности и названия компонентов, темы, локализации и мобильные взаимодействия.
• Независимые npm-пакеты, сайты документации, Demo, примечания к выпускам и обновления фреймворков.
• Отсутствие межфреймворкового рендерера или дополнительной среды совместимости в коде приложения.

Any TDF for VS Code предоставляет всплывающую документацию и автодополнение API компонентов для STDF, RTDF и VTDF. Расширение определяет ближайший package.json, активирует только соответствующую библиотеку, распознаёт файлы Svelte, JSX, TSX и Vue и может показывать документацию API на китайском или английском языке.

Исходный код расширения хранится в этом Monorepo, а проверки сборки пакета и публикации выполняются в CI. Чтобы собрать локальный VSIX:

bun run --filter stdf-vscode-extension package

Skills для каждого фреймворка содержат справочники компонентов, рекомендации по темам и интернационализации, инструкции по созданию проектов, стратегии значков и скрипты генерации тем для AI-агентов программирования. Они поддерживаются вместе с исходным репозиторием и намеренно не публикуются в npm.

• stdf-skill
• rtdf-skill
• vtdf-skill

Репозиторий использует Bun Workspaces, Turborepo, Changesets и единый корневой lock-файл. Для разработки используются Bun и Node.js. Устанавливайте зависимости только из корня репозитория.

bun install --frozen-lockfile
bun run check
bun run test
bun run build
bun run verify

Запустите портал Any TDF либо сайт и Demo выбранного фреймворка вместе:

bun run dev:any-tdf
bun run dev:stdf
bun run dev:rtdf
bun run dev:vtdf

Полезные команды для всего репозитория:

• apps: сайты документации, Demo компонентов и общий код сайтов.
• packages: общее ядро, библиотеки компонентов для фреймворков, плагины Vite, среды анимации и Confetti с документацией внутри пакетов, AI Skills и create-any-tdf.
• content: сгенерированные материалы компонентов и руководств STDF, RTDF и VTDF.
• extensions: расширение Any TDF для VS Code.
• scripts: общие утилиты генерации, проверки, упаковки и выпуска.

Используйте GitHub Issues для воспроизводимых ошибок и запросов функций, а GitHub Discussions — для вопросов, предложений и идей реализации. Мы приветствуем вклад в компоненты, документацию, инструменты, тесты, примеры и переводы.

Полный список доступен на графике участников.

Благодарим sbscan, MuGuiLin и yuedanlabs за поддержку проекта.

Any TDF распространяется по лицензии MIT.

Данные еженедельно обновляются через публичные API GitHub и npm. История трендов накапливается с первого снимка Any TDF.