🐞 REPL for transpiling ES6 to ES5
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
styles
typings
.babelrc
.gitignore
LICENSE
README.md
cli.js
package.json
tsconfig.json
tsd.json
webpack.config.js

README.md

JScripty

A simple REPL for transpiling & executing ES6/ES7 code.

Stolen from Inspired by the excellent esbox written by Callum Locke.

Beware: This project is not intended to be used for anything productive!

I'm only using it to learn and test several frameworks and libraries [Ractive, Inferno, React & Redux]

JScripty creates a fully functional headless browser environment in the console. Although there's no browser you still have the complete DOM functionality.

Current Status

  • Compiles ES6 & ES7. [Babel presets & plugins]
  • Compiles TypeScript
  • Runs React from the console.
  • Runs Inferno from the console. [latest version 0.6.0]
  • Runs Ractive from the console.
  • Uses WebPack to create a fully operational environment for headless live testing. 😄
  • Uses jsdom to provide a complete DOM environment in the console.
  • Offers a simple REPL for direct access. [namespace jscripty]

Installation

git clone https://github.com/brakmic/JScripty.git
npm install

Running

Open two consoles.

If you're running under Windows I recommend ConEmu.

In the first console open a script with your preferred editor.

In the second console run JScripty with your preferred UI-Engine by executing

node cli.js --react

or

node cli.js --inferno

Ractive.js can run with both of them. Just append an additional --ractive flag. 😄

Now edit the file and save it to kick-off the transpile-process.

After a few moments your code will be executed and shown in the console.

REPL

There's also a simple REPL available. All functions are located inside the namespace jscripty.

node cli.js --repl

Here's an example with React.

Playing with Inferno, Ractive & React

Change some piece of code, for example a component property, and press CTRL+S. Your running Ractive, Inferno or React instances will calculate the diffs and update accordingly. With a few simple logging commands you can now trace the data flows and interactions of your components.

IDE Integration

You don't have to run JScripty in a console. For example, I configured it as an External Tool in my Visual Studio 2015.

Just go to menu Tools\External Tools and type in the following (notice: use your Node install-path)

Now you'll get a new menu option JScripty under Tools.

Create a new, blank solution and import the JScripty folder as an Existing Web Site.

First right-click the Solution itself then select following options:

Go to the root folder of your JScripty project and select it.

The import will take a few moments and in the end you should get the following project settings:

You can now select the JScripty menu option to start the watcher. Now change something in your main.js and watch the output.

Notice: Visual Studio's Output Window doesn't recognize ANSI Escape Commands which makes the clearScreen function unusable. In scripts/env/jscripty.js you can find a variable to silent the ANSI-output.

Background info

Originally, this project had used much of the code from Callum's project which is a great tool for experimenting with newest JavaScript features. However, I didn't like the slow compilation times. This is because on each save the running node instance has to restart and reload the complete environment again.

Therefore I thought it'd be much nicer to let webpack do all the heavy lifting. 😄

After some experimentation with hot-reloading, webpack-dev-server and a few other things this solution now comprises of following ingredients:

License

MIT