Awesome GitHub RepositoriesJavaScript Transpilation

This project is a command-line tool and build toolchain used to bootstrap React web applications. It serves as a project bootstrapper and single-page application scaffold, providing a pre-configured development environment, folder structure, and build pipeline. The toolchain integrates a frontend development server with live reloading and error overlays to accelerate the iterative coding process. It handles production asset bundling by minifying code and generating hashed assets for deployment, and it includes a configuration suite for generating the service workers and web manifests required

Babel is a pluggable JavaScript compiler and transpiler that converts modern ECMAScript syntax into backwards-compatible versions of the language. It functions as an abstract syntax tree manipulator, parsing source code into a hierarchical structure to traverse and modify nodes for custom code transformations. The system utilizes a plugin-driven architecture to apply specific transformation rules and supports presets that bundle multiple plugins into named configuration groups. This enables the transformation of experimental syntax and the injection of non-global polyfills to ensure consisten

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

Rollup is an ES module bundler and JavaScript module transpiler. It functions as a build tool that combines JavaScript modules into optimized files and converts modern JavaScript and JSX into various output formats for different runtime environments. The project is distinguished by its static-analysis tree shaking engine, which removes unused code and dead exports to minimize bundle size. It also acts as a code splitting orchestrator, partitioning modules into separate chunks to optimize network requests and load times. The tool provides a hook-based plugin system for extending build logic,

This project is a web development boilerplate and starter kit providing a pre-configured foundation for creating high-performance, responsive websites. It functions as a development kit for building progressive web apps, incorporating a front-end build pipeline and responsive site templates. The kit distinguishes itself through a multi-device testing workflow that synchronizes clicks, scrolls, and form inputs across multiple browsers and devices in real-time. It also includes a dedicated setup for offline functionality using service workers and web manifests to enable native-like installation

This project is a full-stack project management web application designed for organizing work and managing project workflows. It consists of a Node.js TypeScript REST API for server-side business logic and a React component UI library for the frontend interface. The application implements a board-based task visualization system with customizable status workflows. It provides mechanisms for issue workflow management, including task prioritization and team member assignment to track responsibilities and progress. The system is built with a decoupled client-server architecture using full-stack T

react-slingshot is a JavaScript frontend boilerplate and starter kit designed to bootstrap React applications. It provides a pre-configured foundation that integrates React and Redux for state management, alongside routing and a unidirectional data flow. The project features an integrated build pipeline that handles Babel transpilation, Sass compilation, and module bundling. It includes a development environment with hot module replacement and source maps for rapid iteration, as well as production optimization tools for minifying assets and analyzing bundle size. The toolkit covers a broad s

This repository is a collection of Webpack configuration examples and JavaScript module bundler demonstrations. It provides asset pipeline tutorials and frontend build tool examples focused on resolving dependencies and merging multiple modules into optimized browser files. The project demonstrates how to configure Webpack for transforming JavaScript assets, including the use of loaders and plugins to process JSX, CSS, and images into browser-ready formats. It includes practical examples of code splitting, minification, and environment variable injection. The covered capabilities include fro

react-pxq is a React Redux boilerplate and state-driven UI framework designed for building single-page applications. It functions as a starter project template that combines a client-side routing system with global state management to synchronize data across a component hierarchy. The project implements a code-split web application architecture that uses lazy loading to reduce initial bundle sizes. It integrates a navigation system that maps URL paths to components without triggering full page reloads. The framework covers centralized state management through a global store and action-based

billboard.js is a JavaScript charting library built on D3.js that renders interactive data visualizations from a single declarative configuration object. It supports a wide range of chart types including bar, line, pie, scatter, area, spline, step, candlestick, funnel, gauge, heatmap, radar, polar, treemap, bubble, donut, and sparkline charts, and can overlay multiple chart types within a single visualization. The library offers an opt-in Canvas rendering mode for improved performance with large datasets and high-density axis displays, alongside its standard SVG-based rendering. The library d

Sucrase is a high-speed transpilation tool that compiles modern JavaScript, TypeScript, JSX, and Flow to standard JavaScript for modern runtimes. It operates as a fast alternative to Babel, using a single-pass scanner and tokenizer that strips type annotations and applies only requested syntax transforms without building an AST or performing type checking. The tool differentiates itself through a zero-type-checking pipeline that omits type checking entirely, relying on the assumption that input code is already valid for the target runtime. It uses scanner-based tokenization and single-pass co

Poi هو مجمع وحدات ومترجم أصول قابل للتوسيع وبدون تكوين لتطوير الواجهة الأمامية الحديث. يعمل كنظام بناء يحول JavaScript و JSX و CSS إلى ملفات متوافقة مع المتصفح ويجمعها في حزم واحدة لتسليم الويب. تم بناء الأداة حول بنية المكونات الإضافية التي تسمح بامتدادات مخصصة لخط أنابيب البناء وإضافة منطق معالجة الأصول المتخصص. يستخدم نظام تعيين قائم على الاتفاقية لأتمتة إعدادات البناء والمخرجات المستهدفة دون الحاجة إلى ملفات تكوين يدوية. يغطي المشروع مجموعة واسعة من قدرات التجميع، بما في ذلك تجميع إطار عمل الواجهة الأمامية، ودقة الأصول التلقائية، ومعالجة الملفات الثابتة. يستخدم تحويلات شجرة بناء الجملة المجردة لتمكين التعديل البرمجي والتجميع الخاص بإطار العمل للكود المصدري.

babel-loader هو إضافة webpack تدمج مترجم Babel في سير عمل تجميع الوحدات. يعمل كجسر يسمح بتحويل JavaScript الحديث إلى إصدارات متوافقة مع الإصدارات السابقة أثناء عملية البناء. يحسن المشروع أحجام الحزم عن طريق استبدال دوال المساعدة المكررة بمراجع إلى وقت تشغيل خارجي مشترك. لتسريع دورات التجميع اللاحقة، يستخدم ذاكرة تخزين مؤقت قائمة على نظام الملفات لتخزين الملفات المعالجة وتجنب التحويل الزائد. يدعم المحمل تعيين التكوين الخاص بالبيئة وتكوينات الهدف لتطبيق قواعد تحويل مختلفة لمنصات العميل والخادم. كما يوفر آلية لنقل بيانات تعريف التحويل مرة أخرى إلى مجمع الوحدات للمزامنة مع إضافات البناء الأخرى.

preact-cli هو واجهة سطر أوامر وخط أنابيب بناء لتهيئة وتطوير ونشر تطبيقات Preact. يعمل كأداة سقالات للمشروع تستخدم قوالب محددة مسبقًا لإنشاء هياكل الدليل الضرورية والقوالب الأساسية لتطبيقات الويب الجديدة. توفر الأداة قدرات متخصصة لإنشاء تطبيقات ويب تقدمية (PWA) عن طريق إنشاء عمال الخدمة (service workers) واستراتيجيات التخزين المؤقت للوظائف دون اتصال. كما تتضمن عارضًا مسبقًا للموقع الساكن يحول مسارات التطبيق إلى ملفات HTML أثناء عملية البناء لتحسين ظهور محرك البحث وسرعات التحميل. يغطي سير عمل التطوير الأوسع إدارة خط أنابيب الأصول، بما في ذلك تحويل JavaScript، وتجميع الوحدات، ومعالجة معالجات CSS المسبقة. كما يدير تحسين الإنتاج من خلال تقسيم الكود القائم على المسار وحقن متغيرات البيئة.

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

هذا المشروع عبارة عن دليل شامل وخارطة طريق لتطوير الواجهات الأمامية (Front-end)، مصمم لمساعدة المهندسين على إتقان المهارات والمعايير المهنية المطلوبة لتطوير الويب الحديث. يعمل كمرجع تقني لإتقان HTML وCSS وJavaScript، ويوفر مسارات تعلم مهيكلة وخارطة للكفاءات المهنية اللازمة للانتقال من مبتدئ إلى مهندس ويب محترف. يعمل المورد كدليل مصنف ونظرة عامة على نظام JavaScript البيئي. حيث يفهرس أطر العمل والمكتبات والأدوات القياسية في الصناعة، ويقدم توصيات محددة لإدارة الحالة، وأطر عمل CSS، ومولدات المواقع الساكنة. يغطي الدليل طيفاً واسعاً من كفاءات الهندسة، بما في ذلك معمارية واجهة المستخدم، وتحسين أداء الويب، وتدقيق إمكانية الوصول. كما يوفر توجيهات حول أتمتة البناء، واستراتيجيات النشر، واختيار أدوات المطورين لسير العمل المهني.

هذا المشروع هو بيئة تطوير للتحرير المباشر وقالب لمكونات React. يعمل كبداية للمشروع وقالب مصمم لتمكين تحديث مكونات React في المتصفح دون تحديث الصفحة. تركز البيئة على إعادة التحميل السريع (hot reloading) لـ React لتوفير سير عمل تطوير الواجهة الأمامية حيث تنعكس تغييرات الكود فوراً في واجهة المستخدم. يدعم هذا النماذج الأولية لواجهة المستخدم المباشرة من خلال السماح بتعديلات الأنماط ومنطق المكونات دون فقدان حالة التطبيق الحالية. يتضمن الإعداد خادم تطوير، واستبدال الوحدات، والترجمة لتسهيل التحديثات في الوقت الفعلي لحالة التطبيق والواجهة أثناء عملية البناء والاختبار.

Regenerator is a JavaScript generator transpiler and build-time code processor. It converts ECMAScript generator functions and asynchronous iteration into ES5 compatible state machines to ensure modern control flow works in legacy runtimes. The project functions as an ES5 compatibility transformer that rewrites advanced asynchronous patterns into standard JavaScript. It includes a runtime polyfill helper library to manage the iteration protocol and coordinate state transitions for the transpiled code. The tool provides capabilities for language transformation and asynchronous workflow polyfi

This is a Yeoman web application generator that creates a standardized project structure and build pipeline for modern front-end web applications. It functions as a scaffolding tool to generate folder structures and configuration files to jumpstart development. The project provides a pre-configured Gulp.js build pipeline for compiling assets, linting code, and optimizing files for production. It includes a local development server with live-reloading capabilities that automatically refreshes the browser as source files are edited. The toolset covers browser compatibility through JavaScript t