Awesome GitHub RepositoriesComponent Compilers

This project is a high-performance compiler written in Rust that transpiles TypeScript and ECMAScript into compatible JavaScript code. It functions as a TypeScript transpiler, a JavaScript minifier, and a JavaScript bundler. The system distinguishes itself through a WebAssembly plugin host that allows the execution of custom transformation rules without modifying the core binary. It also provides specialized compilation for React source code to improve runtime performance and reduce execution overhead. The broader capability surface includes source-to-source compilation, type annotation stri

Million is a framework-level enhancement designed to optimize the performance of user interfaces by reducing overhead in component reconciliation. It functions as a build-time compiler that transforms components into lightweight, efficient code to accelerate rendering and minimize the runtime work required for interface updates. The project distinguishes itself by replacing standard reconciliation logic with a specialized virtual DOM implementation. Through static analysis and a build-step utility, it identifies and optimizes component trees, allowing for granular updates that target only mod

Mitosis is a cross-framework compiler that transforms a single JSX-based source into native components for multiple frontend libraries simultaneously. It functions as a multi-target UI library builder, allowing developers to maintain a single source of truth for design systems while generating production-ready code for diverse environments including React, Vue, Angular, and Svelte. The system operates by parsing unified component code into an intermediate JSON representation, which serves as the foundation for all downstream framework generators. This architecture utilizes a visitor-based tra

Tamagui is a cross-platform user interface framework designed to build high-performance, themeable applications that share logic and styling across web and mobile environments. It functions as a comprehensive design system orchestrator, providing a collection of type-safe components that compile to optimized atomic CSS for the web and native code for mobile platforms. By utilizing a build-time compiler, the framework eliminates runtime overhead, ensuring consistent visual output and interaction behavior regardless of the target platform. The framework distinguishes itself through its advanced

React is a JavaScript library for building user interfaces through the composition of modular, self-contained components. It employs a declarative programming model where developers describe the desired visual state, and the library automatically manages the underlying document updates and state synchronization. By utilizing a virtual representation of the document, it calculates and applies minimal changes to the browser, ensuring efficient rendering even in complex applications. The library distinguishes itself through a sophisticated scheduling system that manages rendering work in increme

Vue Native is a framework that compiles Vue.js single-file components into React Native primitives, enabling developers to build native iOS and Android applications using Vue syntax. At its core, it provides a build-time compiler that transforms Vue components into React components, while hooking Vue's dependency-tracking reactivity system into React's component lifecycle to trigger re-renders when observed data changes. The framework wraps React Native's native module bridge so Vue components can access device APIs through Vue's reactivity system, and maps Vue's component syntax to React Nat

Laravel Mix est un outil de build frontend et un wrapper de configuration pour Webpack qui simplifie le regroupement (bundling) des assets JavaScript, TypeScript et CSS. Il fonctionne comme un exécuteur de tâches et un gestionnaire d'assets statiques, fournissant une interface simplifiée pour compiler les fichiers sources en assets de production optimisés. Le projet se distingue par une API fluide qui abstrait les configurations de bundling complexes en appels de méthodes lisibles par l'humain. Il inclut des pipelines spécialisés pour transformer les composants Vue et React en JavaScript compatible avec les navigateurs et offre un système pour le préfixage automatique des vendeurs et la compilation de feuilles de style. L'outil couvre un large éventail de capacités, incluant le préprocesseur CSS, l'optimisation des bundles JavaScript et la gestion des fichiers statiques. Il gère les exigences de production via le cache busting basé sur le hash et l'extraction de bibliothèques tierces. Pendant le développement, il fournit une surveillance des changements de fichiers et une synchronisation de l'état du navigateur pour automatiser le workflow de recompilation.

react-live est une suite d'outils pour la transpilation React dans le navigateur, l'édition en direct et la documentation interactive. Elle fournit un composant React pour construire des terrains de jeu (playgrounds) en direct où le code source est transpilé et rendu en temps réel, accompagné d'un éditeur de code en direct qui offre une coloration syntaxique et un retour visuel immédiat. Le projet permet la création de documentation vivante en intégrant des exemples de code React modifiables aux côtés de leur sortie rendue. Il prend en charge l'exécution de balisage modifiable ou de composants fonctionnels, permettant aux utilisateurs de modifier le code et d'observer le comportement résultant instantanément. Le système inclut des capacités pour le rendu de composants dynamiques, la transpilation de code en temps réel et l'injection de dépendances globale. Il dispose également de mécanismes de gestion des erreurs pour détecter et afficher les erreurs de compilation, de syntaxe et d'exécution sans faire planter l'application.

Ce projet est une implémentation de React Server Components, fournissant une architecture de composants full-stack qui mélange le rendu côté serveur avec l'interactivité côté client. Il permet le développement d'applications web où les composants côté serveur uniquement pour la récupération de données et les composants clients interactifs coexistent au sein d'un seul arbre de composants. Le système se concentre sur l'orchestration des données serveur-client, permettant l'exécution de fonctions serveur et de mutations de base de données à travers la limite réseau. Il se distingue par une architecture de composants hybride qui déplace l'exécution des composants vers le serveur pour réduire la taille des bundles clients et améliorer les temps de chargement initiaux. Le projet couvre une large gamme de capacités, y compris la récupération de données asynchrone avec suspense, la mémoïsation automatique des composants et l'optimisation du rendu côté serveur. Il inclut également des outils pour gérer l'état complexe, coordonner le chargement des actifs pour éviter les décalages de mise en page, et construire des applications multiplateformes pour le web et le mobile. L'outillage de développement est fourni pour détecter les composants impurs, analyser les dépendances des modules et inspecter les hiérarchies de composants pendant le développement.

Vuera est une couche de compatibilité et un pont d'interopérabilité conçu pour permettre un rendu partagé entre Vue et React. Il fournit un ensemble de wrappers qui permettent aux composants d'un framework d'être intégrés et rendus à l'intérieur de l'autre. Le projet se concentre sur l'intégration de composants inter-frameworks, permettant la coexistence des deux frameworks au sein d'un même projet. Cela prend en charge l'utilisation de bibliothèques d'interface utilisateur partagées à travers différents écosystèmes et permet une migration incrémentale entre Vue et React. Le système gère le transfert d'éléments imbriqués en mappant les slots et les propriétés enfants entre les deux frameworks. Il gère également l'échange de composants et le mappage de contenu pour maintenir les mises en page structurelles.

Ce projet est une collection de composants d'interface accessibles et réutilisables conçus pour le framework Svelte. Il fonctionne comme une implémentation complète de système de design, fournissant une boîte à outils standardisée pour construire des interfaces utilisateur réactives et inclusives qui respectent les directives de design et d'accessibilité établies. La bibliothèque se distingue par une intégration profonde avec Svelte, utilisant des transformations basées sur le compilateur pour optimiser le rendu des composants et la synchronisation de l'état réactif. Elle dispose d'un système de gestion de thèmes robuste qui applique des styles visuels via des propriétés personnalisées CSS, permettant un changement de thème dynamique à l'exécution. De plus, la bibliothèque utilise un rendu basé sur des portails pour les éléments d'interface flottants afin de garantir que les superpositions ne soient pas obstruées par les contraintes des conteneurs parents. La suite de composants couvre un large éventail de besoins d'interface, y compris la gestion de tableaux de données structurés, la construction de formulaires dynamiques avec validation intégrée et des conteneurs de mise en page réactifs. Elle fournit également des utilitaires spécialisés pour suivre les points de rupture d'écran, gérer la persistance de l'état de l'application et envoyer des notifications utilisateur via des systèmes en ligne ou modaux. La bibliothèque est conçue pour soutenir des workflows de développement efficaces en élaguant les styles inutilisés et en optimisant la livraison des assets lors du processus de build.