Any TDF

Ein gemeinsames Designsystem. Drei frameworknative mobile Komponentenbibliotheken.

STDF für Svelte • RTDF für React • VTDF für Vue

STDF • RTDF • VTDF

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

Any TDF ist ein Mobile-First-Komponentensystem für Svelte, React und Vue. Die drei Bibliotheken teilen Produktverhalten, visuelle Sprache, Themes, Sprachdaten, öffentliche Typen, Dokumentationsstruktur und Regeln zur Barrierefreiheit, bewahren jedoch das Renderingmodell und die Kompositionsmuster des jeweiligen Frameworks.

Es ist weder ein Cross-Framework-Wrapper noch eine einzelne, hinter Adaptern verborgene Runtime. STDF stellt Svelte-Komponenten, Snippets, Actions und Transitions bereit; RTDF bietet React-Komponenten, Props, Renderfunktionen, Hooks und Provider; VTDF liefert Vue-Komponenten, Slots, Events und Composables.

• 60 abgestimmte mobile Komponenten mit frameworknativen APIs und vorhersehbarem Verhalten.
• Ein gemeinsames Tailwind-CSS-Themesystem mit Dark Mode, Laufzeitwechsel, eigenen Themes und wiederverwendbaren semantischen Farben.
• Mehr als 60 integrierte Sprachpakete sowie chinesische und englische Anleitungen, API-Referenzen und Komponentenbeispiele.
• TypeScript-zentrierte Paketexporte, SSR, bedarfsgesteuerte Imports und gemeinsames Barrierefreiheitsverhalten.
• Native Svelte-Motion-Semantik mit entsprechenden Motion-Paketen für React und Vue.
• Einheitlicher Projektgenerator, SVG-Sprite- und Markdown-Plugins, Offline-AI-Skills und VS-Code-Erweiterung.
• Vertrags-, Paket-, Routen-, Browser- und visuelle Prüfungen halten die drei Implementierungen synchron.

Die neue Komponentengeneration wird derzeit auf npm unter dem Tag alpha veröffentlicht. Die beiden Vite-Plugins verwenden den stabilen Tag latest.

Erstelle interaktiv ein TypeScript-Projekt:

bun create any-tdf@alpha

Framework und Vorlage können auch direkt angegeben werden:

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

Der Generator bietet Vite- und SvelteKit-Vorlagen, TypeScript, Tailwind CSS oder UnoCSS, mehrere Icon-Strategien, integrierte Icon-Bibliotheken sowie Konfigurationen für einzelne oder mehrere Themes. Alle Optionen stehen in der create-any-tdf-Referenz.

So fügst du eine Komponentenbibliothek zu einer bestehenden Anwendung hinzu:

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

Installiere nur die Zeile für dein Framework. Jedes Paket installiert seine gemeinsamen Any-TDF-Runtime-Abhängigkeiten automatisch. Stylesheet-Imports, Theme-Konfiguration, Komponenten und Migrationsanleitungen findest du auf der jeweiligen Website.

Alle öffentlichen npm-Pakete dieses Monorepos sind nachfolgend aufgeführt. Die Badges am Anfang der README zeigen die veröffentlichte Version jedes Pakets.

Die gemeinsame Schicht hat bewusst einen engen Verantwortungsbereich. @any-tdf/common verwaltet wiederverwendbare Zustandsableitung, Themes, Sprach- und SVG-Daten, Typen sowie kleine Plattformhilfen. STDF, RTDF und VTDF verwenden diese Verträge, rendern aber mit den Primitiven ihres jeweiligen Frameworks.

Diese Trennung bietet:

• Vertraute Komponentensyntax, Events, Slots, Children und Kompositionsmuster in jedem Framework.
• Einheitliche Komponentenfunktionen, Benennung, Themes, Sprachverhalten und mobile Interaktionen.
• Unabhängige npm-Pakete, Dokumentationsseiten, Demos, Versionshinweise und Framework-Aktualisierungen.
• Keinen Cross-Framework-Renderer und keine zusätzliche Kompatibilitäts-Runtime im Anwendungscode.

Any TDF for VS Code bietet Hover-Dokumentation und Komponenten-API-Vervollständigung für STDF, RTDF und VTDF. Sie erkennt die nächste package.json, aktiviert nur die passende Bibliothek, versteht Svelte-, JSX-, TSX- und Vue-Dateien und zeigt chinesische oder englische API-Dokumentation an.

Quellcode, Paketierungs- und Veröffentlichungsprüfungen der Erweiterung werden in diesem Monorepo gepflegt. So erstellst du eine lokale VSIX:

bun run --filter stdf-vscode-extension package

Frameworkspezifische Skills bündeln Komponentenreferenzen, Themes, Internationalisierung, Scaffolding, Icon-Strategien und Skripte zur Theme-Generierung für KI-Coding-Agenten. Sie werden im Quellrepository gepflegt und bewusst nicht auf npm veröffentlicht.

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

Das Repository verwendet Bun Workspaces, Turborepo, Changesets und eine einzige Lockdatei im Stammverzeichnis. Für die Entwicklung werden Bun und Node.js verwendet. Installiere Abhängigkeiten nur vom Repository-Stammverzeichnis aus.

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

Starte das Any-TDF-Portal oder Website und Demo eines Frameworks gemeinsam:

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

Häufig verwendete repositoryweite Befehle:

• apps: Dokumentationsseiten, Komponenten-Demos und gemeinsamer Site-Code.
• packages: gemeinsamer Kern, Frameworkbibliotheken, Vite-Plugins, Motion- und Confetti-Runtimes mit paketlokaler Dokumentation, AI Skills und create-any-tdf.
• content: generierte STDF-, RTDF- und VTDF-Komponenten und Anleitungen.
• extensions: die Any-TDF-Erweiterung für VS Code.
• scripts: repositoryweite Werkzeuge für Generierung, Prüfung, Paketierung und Veröffentlichung.

Nutze GitHub Issues für reproduzierbare Fehler und Funktionswünsche sowie GitHub Discussions für Fragen, Vorschläge und Implementierungsideen. Beiträge zu Komponenten, Dokumentation, Werkzeugen, Tests, Beispielen und Übersetzungen sind willkommen.

Die vollständige Liste findest du im Mitwirkenden-Diagramm.

Vielen Dank an sbscan, MuGuiLin und yuedanlabs für die Unterstützung.

Any TDF wird unter der MIT-Lizenz veröffentlicht.

Die Daten werden wöchentlich über die öffentlichen GitHub- und npm-APIs aktualisiert. Der Trendverlauf wird ab dem ersten Any TDF Snapshot aufgebaut.