11 repository-uri
Build-step utilities that analyze and optimize component trees to minimize runtime work.
Distinct from React Components: Distinct from React Components: focuses on the compilation and optimization of the component tree rather than the components themselves.
Explore 11 awesome GitHub repositories matching user interface & experience · Component Compilers. Refine with filters or upvote what's useful.
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
Transforms React source code and applies compiler optimizations to improve runtime performance.
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
Analyzes and optimizes component trees at build-time to minimize runtime work and improve frame rates.
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
Transforms a single JSX-based source into native components for multiple frontend frameworks and libraries simultaneously.
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
Optimizes component trees by replacing nested wrappers with direct native primitives during the build process.
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
Optimizes rendering performance by controlling the inclusion of functions in automatic memoization.
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
Transforms Vue single-file components into React components at build time using a custom compiler pipeline.
Laravel Mix este un instrument de build pentru frontend și un wrapper de configurare pentru Webpack care simplifică împachetarea (bundling) activelor JavaScript, TypeScript și CSS. Funcționează ca un task runner și manager de active statice, oferind o interfață simplificată pentru a compila fișierele sursă în active optimizate pentru producție. Proiectul se distinge prin furnizarea unui API fluent care abstractizează configurațiile complexe de bundling în apeluri de metode ușor de citit. Include pipeline-uri specializate pentru transformarea componentelor Vue și React în JavaScript compatibil cu browserul și oferă un sistem pentru prefixarea automată a vendorilor și compilarea foilor de stil. Instrumentul acoperă o gamă largă de capabilități, inclusiv preprocesarea CSS, optimizarea bundle-urilor JavaScript și gestionarea fișierelor statice. Gestionează cerințele de producție prin cache busting bazat pe hash și extracția bibliotecilor de vendor. În timpul dezvoltării, oferă monitorizarea modificărilor fișierelor și sincronizarea stării browserului pentru a automatiza fluxul de lucru de recompilare.
Converts Vue and React component files into browser-compatible JavaScript using dedicated compilation commands.
react-live is a suite of tools for in-browser React transpilation, live editing, and interactive documentation. It provides a React component for building live playgrounds where source code is transpiled and rendered in real time, accompanied by a live code editor that offers syntax highlighting and immediate visual feedback. The project enables the creation of living documentation by embedding editable React code examples alongside their rendered output. It supports the execution of editable markup or functional components, allowing users to modify code and observe the resulting behavior ins
Converts React JSX and component source code into executable JavaScript directly within the browser.
Acest proiect este o implementare a React Server Components, oferind o arhitectură de componente full-stack care îmbină randarea pe partea de server cu interactivitatea pe partea de client. Permite dezvoltarea aplicațiilor web unde componentele doar pentru server pentru preluarea datelor și componentele interactive pentru client coexistă în cadrul aceluiași arbore de componente. Sistemul se concentrează pe orchestrarea datelor server-client, permițând execuția funcțiilor de server și a mutațiilor bazei de date peste limita rețelei. Se distinge printr-o arhitectură de componente hibridă care mută execuția componentelor pe server pentru a reduce dimensiunile bundle-urilor de client și a îmbunătăți timpii de încărcare inițiali. Proiectul acoperă o gamă largă de capabilități, inclusiv preluarea asincronă a datelor cu suspense, memoizarea automată a componentelor și optimizarea randării pe partea de server. Include, de asemenea, instrumente pentru gestionarea stării complexe, coordonarea încărcării activelor pentru a preveni deplasările de layout și construirea de aplicații cross-platform pentru web și mobil. Instrumentele pentru dezvoltatori sunt furnizate pentru a detecta componentele impure, a analiza dependențele modulelor și a inspecta ierarhiile componentelor în timpul dezvoltării.
Provides compiler directives to selectively opt-out specific components from automatic build-time memoization optimizations.
Vuera is a compatibility layer and interoperability bridge designed to enable shared rendering between Vue and React. It provides a set of wrappers that allow components from one framework to be embedded and rendered inside the other. The project focuses on cross-framework component integration, allowing for the coexistence of both frameworks within a single project. This supports the use of shared UI libraries across different ecosystems and enables incremental migration between Vue and React. The system handles the transfer of nested elements by mapping slots and children properties betwee
Passes nested elements and children between Vue and React components while maintaining structural layout and slots.
Acest proiect este o colecție de componente de interfață accesibile și reutilizabile, construite pentru framework-ul Svelte. Funcționează ca o implementare completă a unui sistem de design, oferind un set de instrumente standardizat pentru construirea de interfețe utilizator responsive și incluzive, care respectă limbajul de design stabilit și ghidurile de accesibilitate. Biblioteca se distinge printr-o integrare profundă cu framework-ul Svelte, utilizând transformări bazate pe compilator pentru a optimiza randarea componentelor și sincronizarea stării reactive. Dispune de un sistem robust de gestionare a temelor care aplică stiluri vizuale prin proprietăți CSS personalizate, permițând schimbarea dinamică a temelor la runtime. În plus, biblioteca folosește randarea bazată pe portaluri pentru elementele UI flotante, asigurându-se că overlay-urile rămân neobstrucționate de constrângerile containerelor părinte. Suita de componente acoperă o gamă largă de cerințe de interfață, inclusiv gestionarea tabelelor de date structurate, construirea dinamică a formularelor cu validare integrată și containere de layout responsive. Oferă, de asemenea, utilitare specializate pentru urmărirea breakpoint-urilor de ecran, gestionarea persistenței stării aplicației și livrarea notificărilor către utilizator prin sisteme inline sau modale. Biblioteca este concepută pentru a susține fluxuri de lucru eficiente prin eliminarea stilurilor neutilizate și optimizarea livrării activelor în timpul procesului de build.
Optimizes component rendering by transforming templates into imperative code during the build process.