jscripty v2.5.3
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. :smile: - 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. :smile:
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. :smile:
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 inwebpack.config.js
to be called after each successful build - babel-loader combined with the usual presets like
es2015
,stage-0
,react
and transformers for ES7async
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
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago