FormidableLabs/react-live
React Live
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.
Features
- Code Execution Playgrounds - Builds web-based environments combining a code editor with real-time React execution and visual feedback.
- React Component Simulators - Provides a live browser environment that renders React components with automatic reloads for instant visual feedback.
- Code Editors - Ships an embedded code editing interface with syntax highlighting for real-time modification of React components.
- Real-Time Code Evaluation - Implements immediate evaluation of transpiled code fragments to provide instant visual feedback without a full page reload.
- Code Editors - Ships a text editor with syntax highlighting and real-time execution for previewing React components.
- JavaScript Transpilation - Provides a lightweight browser-based transpiler to convert JSX and modern JavaScript into executable code in real time.
- Dynamic Runtime Evaluation - Implements a pipeline that evaluates raw text strings as executable JavaScript modules at runtime.
- Component Documentation Sandboxes - Provides a framework for embedding editable, live code examples within component documentation.
- React Transpilation - Converts React JSX and component source code into executable JavaScript directly within the browser.
- Dynamic Component Rendering - Transpiles source code and renders components in real time using custom globals and type definitions.
- Interactive Documentation Frameworks - Provides a framework for building technical documentation that integrates interactive, editable React code components.
- Interactive Coding Tutorials - Enables the creation of interactive tutorials where learners modify React code and see instant visual results.
- Syntax and Variable Error Detection - Detects invalid code during live editing and provides customizable error messages to guide the user.
- Execution Context Injections - Allows injecting external libraries and variables into the transpiled code's execution context for dependency referencing.
- Editor Scope Provisions - Provides a system for passing external variables or libraries into the editor scope for use within live code.
- Error Boundaries - Ships a component that intercepts runtime and compilation errors to prevent the application from crashing during live editing.
- Live Compilation Diagnostics - Detects syntax or runtime errors in provided code and displays descriptive messages to the user instantly.
- React Component Sandboxes - Offers an isolated sandbox for rapidly iterating on React UI elements without a full build cycle.
- Visual Feedback Systems - Provides a system for immediate visual feedback in a preview window as the user edits the source code.
- Execution Error Captures - Captures and renders errors encountered during the transpilation or execution of live code.
