jscripty

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:

• require-from-string module for loading changed scripts as a string
• a simple asynchronous file reload function in webpack.config.js to be called after each successful build
• babel-loader combined with the usual presets like es2015, stage-0, react and transformers for ES7 async syntax.
• on-build webpack plugin to reload the rebuilt scripts.
• isomorphic-fetch to execute web requests.
• es6-promise polyfill to provide a globally available Promise API.
• React directly from the console.
• Inferno directly from the console.
• Ractive directly from the console.
• TypeScript
• REPL

License

MIT