Awesome GitHub RepositoriesDerived State

React هي مكتبة JavaScript لبناء واجهات المستخدم تعتمد على معمارية قائمة على المكونات وتدفق بيانات أحادي الاتجاه.

Solid is a declarative JavaScript framework for building user interfaces through fine-grained reactivity. By utilizing a compile-time template transformation process, it converts JSX into direct DOM manipulation instructions, eliminating the need for a virtual tree. This architecture allows the framework to track dependencies at the individual element level, ensuring that state changes trigger surgical updates to the interface. The framework distinguishes itself through its isomorphic rendering pipeline, which shares reactive logic across server and client environments to support both initial

This is a foundational project structure for building scalable web applications using React. It provides a standardized directory structure and build tools to accelerate the bootstrapping of new projects, featuring a Redux architecture for predictable state management through unidirectional data flow and an immutable store. The project is distinguished by a command-line interface for generating standardized components, containers, and routes from predefined templates. It implements an offline-first framework using service workers to enable progressive web app functionality, alongside a compon

Vuex is a centralized state management library for Vue.js applications. It provides a single source of truth for application data, ensuring consistent state across a component tree through a reactive data store. The system organizes the global state tree into independent, namespaced modules to prevent naming collisions and maintain code organization. It distinguishes between synchronous mutations for predictable state transitions and asynchronous actions for handling complex operations. The library includes cached getters for derived state, store lifecycle hooks for mutation interception, an

This project is a headless UI table library and state manager for building data grids. It functions as a type-safe logic engine that manages table state and data grid behavior without providing pre-defined styles or HTML markup. The library employs a headless pattern, separating internal logic and state from visual presentation. By providing hooks rather than styled components, it allows developers to maintain full control over the markup, styles, and interaction behavior of their tables. The core engine covers complex datagrid implementation, including the management of sorting, filtering,

Jotai is a state management library for React applications that utilizes an atomic model to handle data. It organizes application state into small, independent units called atoms, which automatically track dependencies and trigger granular updates to components. By building state through these composable primitives, the library ensures that only the necessary parts of an application re-render when data changes. The library distinguishes itself through its flexible approach to state composition and asynchronous data handling. It integrates promises directly into the state model, allowing devel

Leptos is a full-stack Rust web framework designed for building reactive applications that share logic and types between the server and the browser. It provides a comprehensive toolkit for developing web interfaces where specific DOM nodes update automatically in response to changes in underlying reactive signals, rather than re-rendering entire component trees. The framework distinguishes itself through a fine-grained reactivity model that tracks dependencies at the individual data point level. It utilizes compile-time template transformation to convert declarative HTML-like syntax into opti

Recoil is an atomic state management framework and library for React. It functions as a state container that breaks application data into independent units called atoms to minimize unnecessary component re-renders. The system integrates with React hooks to provide a reactive state store. It utilizes a graph-based approach to data flow, employing a dependency graph to track relationships between state units and propagate updates automatically. The library coordinates global state across complex component trees, enabling independent components to communicate and share data without manual prop

Reselect is a state management optimization tool and memoization utility designed to minimize redundant calculations and UI re-renders. It functions as a library for creating memoized selectors that derive specific data from a state store. The library implements input-based memoization and recursive selector composition to create a hierarchy of derived data dependencies. It ensures reference-stable result caching and provides custom equality checking to determine when a cache should be invalidated. The project covers capabilities for derived data computation, frontend performance optimizatio

Reselect is a memoized selector framework and state selector library designed to optimize performance in Redux applications. It provides a system for computing derived data from a state store and caching the results to prevent unnecessary user interface re-renders. The library functions as a state transformation pipeline, allowing multiple selectors to be composed into chains. This enables the creation of complex data transformation pipelines where the output of one memoized selector serves as the input for another. The framework focuses on input-based memoization and referential equality ch

This project is a comprehensive guide to architectural patterns and design techniques for building modular user interfaces with React. It focuses on structuring component hierarchies, implementing state management patterns, and decoupling services to ensure applications remain maintainable and scalable. The collection emphasizes strategies for dependency injection and the separation of business logic from presentation layers. It provides detailed approaches for utilizing containers, higher-order components, and module registries to isolate external services and third-party libraries from the

This project is a technical reference for implementing static typing in applications built with React and Redux. It provides a comprehensive guide for establishing type-safe state management, focusing on the configuration of stores, actions, and reducers using TypeScript type inference and unions. The guide covers architectural patterns for defining props, generic components, and higher-order components with strict type definitions. It also provides methods for managing ambient type configurations and augmenting third-party modules to resolve missing or incorrect TypeScript definitions. The

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

Valtio is a proxy-based state management library and reactive state engine that provides a mutable state store. It allows application state to be updated through direct object mutations rather than immutable patterns, using JavaScript proxies to track changes and trigger updates. For React applications, it includes a synchronization hook that ensures components re-render only when the specific properties they access are modified. The system supports reactive data derivation through computed properties that automatically update when their underlying dependencies change. It maintains reactivity

This project is a state management framework for Angular applications that provides a predictable state container. It implements a Redux-style architecture using a centralized store, managing global and local application data through an observable-based data flow of actions and reducers. The framework includes a specialized entity management tool for organizing and synchronizing server-side data collections within client-side stores. It also provides a reactive store system that integrates state updates with Angular signals for change detection and includes debugging mechanisms for time-trave

re-frame هو إطار عمل وظيفي لبناء تطبيقات الصفحة الواحدة (SPA) باستخدام ClojureScript. يوفر قاعدة بيانات مركزية غير قابلة للتغيير تعمل كمصدر وحيد للحقيقة لحالة التطبيق بالكامل، مما يفرض تدفق بيانات أحادي الاتجاه صارم حيث تؤدي الأحداث إلى تغييرات في الحالة وتحديثات لاحقة للعرض. يتميز إطار العمل برسم بياني تفاعلي للإشارات وخط أنابيب (pipeline) وسيط يعتمد على المعترضات (interceptors). من خلال التعامل مع منطق التطبيق كسلسلة من الأحداث القائمة على البيانات والآثار الجانبية التصريحية، فإنه يفصل منطق الأعمال عن طبقة العرض. تسمح هذه البنية للمطورين بإدارة تغييرات الحالة المعقدة والعمليات الخارجية من خلال دوال نقية، مما يضمن تنفيذ الآثار الجانبية بواسطة مترجم منفصل بدلاً من الاستدعاءات الإلزامية. يتضمن النظام مجموعة شاملة من الإمكانيات لإدارة بنية التطبيق، بما في ذلك اشتقاق البيانات التفاعلي، ومطابقة العرض القائمة على الاشتراكات، وإدارة الحالة القائمة على الأحداث. يدعم سير عمل التطوير المتقدم مثل تتبع الأحداث، وحفظ نقاط فحص الحالة، والقدرة على محاكاة الآثار الجانبية للاختبار المعزول. تم تصميم المشروع للتكامل مع React، مستفيداً من مطابقة DOM الافتراضي لتحديث واجهات المستخدم بكفاءة. يوفر مجموعة قوية من الأدوات للتعامل مع الاهتمامات المتقاطعة، وإدارة رسوم بيانية معقدة لتدفق البيانات، وتنسيق العمليات غير المتزامنة ضمن خط أنابيب أحداث متسلسل وقابل للتنبؤ.

Easy-peasy هي مكتبة لإدارة حالة React وإطار عمل مكتوب (Typed) يوفر مخزناً مركزياً لإدارة حالة التطبيق العالمية. تعمل كمخزن حالة غير قابل للتغيير ومنظم حالة غير متزامن، مما يضمن سلامة النوع من البداية إلى النهاية لتعريفات الحالة، والإجراءات، والقيم المشتقة. تتميز المكتبة بتحويل بناء جملة التغيير المباشر إلى تحديثات غير قابلة للتغيير لتبسيط إدارة البيانات المتداخلة. تتضمن آلية لحفظ شجرة الحالة في التخزين وإعادة ترطيبها أثناء عملية تمهيد التطبيق، مع القدرة على تعليق واجهة المستخدم حتى اكتمال إعادة الترطيب. يغطي إطار العمل العديد من مجالات القدرات، بما في ذلك تنظيم استدعاءات API غير المتزامنة مع العرض المتفائل وحساب الحالة المشتقة المخزنة مؤقتاً. كما يوفر أدوات لإدارة التحديثات غير العاجلة والوصول إلى المخزن خارج مكونات React.

هذا هو موقع التوثيق الشامل لإطار عمل JavaScript التقدمي Vue 2. وهو بمثابة مرجع فني ودليل تطوير لبناء واجهات مستخدم تفاعلية وتطبيقات الصفحة الواحدة. يوفر الموقع مرجعاً مفصلاً لـ JavaScript API ودليل مكونات الويب. ويغطي تنفيذ البنى القائمة على المكونات، وإدارة الحالة التفاعلية، واستخدام DOM افتراضي لمزامنة حالة التطبيق مع المتصفح. تشرح الوثائق الإمكانيات بما في ذلك التوجيه من جانب العميل، ومعالجة DOM التعريفية، وتحسينات بناء الواجهة الأمامية مثل العرض من جانب الخادم وتجميع القوالب المسبق. كما تشرح نهج إطار العمل لمزامنة الحالة، ودورات حياة المكونات، واستخدام التوجيهات المخصصة. يتم الحفاظ على المحتوى كمجموعة من البرامج التعليمية والمواصفات، مع تحرير الوثائق عبر Markdown.

mobx-react هي مكتبة توفر روابط حالة لربط مكونات React بحالة MobX القابلة للملاحظة. تعمل كمزامن حالة مكون، مما يضمن أن عناصر واجهة المستخدم تعيد العرض تلقائياً فقط عندما تتغير البيانات الملاحظة المحددة التي تستهلكها. يُمكّن المشروع بنية حالة مفككة عن طريق نقل منطق الأعمال وحالة المجال إلى مخازن مستقلة، وفصل إدارة البيانات عن شجرة مكونات React. يسهل توزيع الحالة العالمية عبر تسلسلات هرمية عميقة للمكونات باستخدام المزودين والسياق لتجنب تمرير الدعائم يدوياً. تغطي المكتبة مجموعة واسعة من بدائيات إدارة الحالة، بما في ذلك المجموعات القابلة للملاحظة، والتحديثات القائمة على الإجراءات، واشتقاق الحالة المحسوب. توفر مساعدات تكامل واجهة المستخدم لكل من المكونات الفئوية والوظيفية، إلى جانب تحسينات الأداء لدقة إعادة عرض المكونات ومنع تسرب الذاكرة أثناء العرض من جانب الخادم. تم تنفيذ المشروع بلغة TypeScript.

connected-react-router هي أداة مزامنة تربط حالة React Router وسجل المتصفح بمتجر Redux. تقوم الأداة بتعيين معلومات التوجيه ومعلمات URL في شجرة حالة عالمية، مما يمكن التطبيق من إدارة التنقل من خلال تدفق بيانات أحادي الاتجاه. تسمح المكتبة بتشغيل التنقل عن طريق إرسال الإجراءات بدلاً من استدعاء طرق السجل الحتمية. يتيح هذا النهج القائم على البرمجيات الوسيطة بدء تحديثات URL من منطق الأعمال أو العمليات غير المتزامنة. يقوم النظام بمزامنة الموقع الحالي، والهاش، ومعلمات البحث في الحالة العالمية للوصول إليها عبر المكونات. من خلال تخزين تغييرات التوجيه داخل شجرة الحالة، يدعم النظام تكامل الحالة غير القابلة للتغيير والقدرة على تصحيح أخطاء التنقل من خلال السفر عبر تاريخ المسارات.