javascript.lol - the javascript repl with superpowers!
An in-browser javascript repl with flow based prototyping, dynamic module imports and much more!
Get started with some of the examples below or visit the app directly at javascript.lol
The app is currently in alpha so expect the odd issue here and there and feel free to raise an issue. I'm planning to open source the code at some point depending on whether people decide to use the app so stay tuned!
- Dynamic npm module/package imports using skypack. Any imported package (that isn't reliant on Node.JS API's) will be preoptimized by skypack for browser use!
- Top level async await
- Repl mode - Prototype code and see the results instantly without having to download packages on your local machine
- Transformer mode - Define a list of individual code snippets to be exectued sequentially on the input
- Portable and client sided - Every change you make will be saved in the url so you can bookmark transformers or snippets and revisit them with ease or share them with friends/colleagues
- Highly configurable via options
- Intellisense support
- Dark mode
- View only mode so you can distribute your data transformers for less technical users to use (for data normalisation, etc)
- Multiple transformers/repl's in a single instance
- Community transformer bundles - Maybe have community shared transformer bundles and popular ones can be imported? This is open to discussion
The best way to learn how to use the app is to dig straight into some examples. Please feel free to raise an MR if you feel some better examples could be featured here!
- Repl Multiple Package Imports with top level async/await
- Transformer Simple loosly defined JSON to YAML converter
- Transformer Demonstrating all possible code signatures for a tranformer code block
- Transformer Parse JSON -> Pick Attributes -> Query String
Please refer to the usage guide below and raise any issues in this github repository.
Packages are imported through the packages section of the app and are accessible via the repl or transformer code blocks through their alias (which will default to the package name if not provided).
The app has two states, repl mode and transformer mode.
Repl mode is what it says on the tin, an in-browser javascript repl with superpowers!
Transformers are a set of nodes that are executed sequentially. Each transformer receives the result of the previous transformer and applies its code block to the input. It's the equivalent of pipeing in functional libraries like ramda.
You can drag transformers to change their order. They are executed in order from top to bottom.
Please refer to the credits on the javascript.lol app! (work in progress).