Skip to content

💽 An online REPL based on Babel for transpiling next generation JavaScript in real-time

License

Notifications You must be signed in to change notification settings

devDigestOfficial/transpilyzer-online-repl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Transpilyzer Logo

Transpilyzer Online REPL

Transpilyzer Online REPL is used for transpiling next generation JavaScript code into a backwards compatible version of JavaScript in real-time.

Check out the deployed site

📦 Core Packages

  1. Frontend - React
  2. Code Editor - Codemirror
  3. Real-time Frontend Transpiler - Babel/Standalone
  4. Styling - Bootstrap
  5. Miscellaneous - Lodash

💎 Transpiling Code Once The User Stops Typing

Without adding a transpilation delay feature in the application, the error message / output is displayed immediately while you are still typing. This is introduces bad User Experience (UX). So to fix this, the debounce method provided by lodash was used. This allows you to execute some code after a certain number of milliseconds has passed. Therefore in this application, the conversion/transpile function is called after 1000 milliseconds (after 1 second has passed) once user stops typing.

⚡ Features

  1. Transpilation of modern JavaScript to backward compatible JavaScript
  2. TypeScript transpilation support
  3. React (JSX) transpilation support
  4. Light Mode and Night Mode
  5. Error display upon invalid syntax
  6. Remember unsaved changes even when you exit the browser (Code autosave)

⚙️ Running Locally

At the root of your project run npm i and npm start to start the application.

UI

Light Mode

Light Theme

Night Mode

Night Theme

About

💽 An online REPL based on Babel for transpiling next generation JavaScript in real-time

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published