richgilbank / scratch-js Goto Github PK

Run ES6, CoffeeScript and LiveScript on any page from Chrome's DevTools!

License: MIT License

JavaScript 67.61% HTML 17.93% CSS 14.46%

scratch-js's Introduction

Scratch JS

What is it?

It's a Chrome DevTools extension (available here) that allows you to execute ES6/ES2015 code in the context of the page you're viewing, as though it were the standard DevTools console.

Also available for Opera

How do I use it?

Once you familiarize yourself with some of the concepts and features of ES6/ES2015, install the extension. You'll then notice the Scratch JS tab inside DevTools (⌘-⌥-i on a Mac, ctrl-⇧-i on a PC). You can toggle console visibility with esc, and code can be executed either by clicking the Run it button, or using ⌘-↩ on a Mac, ctrl-↩ on a PC.

How does it work?

It uses one of two engines to transpile ES6/ES2015 to good-old-fashioned ES5: Google's Traceur and Babel. Select which one you want to use from the Settings panel. If there's a feature you want to use that isn't working, check the compatibility table under those 2 columns to see if it's been implemented yet.

But why?

Both Traceur and Babel already have their own REPLs. Why make a Chrome extension? For me it was just the convenience of being able to read a blog about a new feature or syntax and try it right there while I'm reading the article. Pop open the DevTools on the side of the page and give'r.

Contributing and local development

To get it running locally, you'll need to clone the repo, install gulp and other project dependencies, then run the gulp task:

git clone [email protected]:richgilbank/Scratch-JS.git && cd Scratch-JS
npm install
npm start

You'll then need to install it locally in Chrome. Go to the URL chrome://extensions and select "Developer mode", then click "Load unpacked extension..." and select the root directory of the project.

The gulp task will reload the panel every time you make a change to a file in the panel directory.

Happy development!

=========================

Traceur is released under an Apache 2.0 license and Babel is released under MIT. They belong to their respective owners.

Everything else here is MIT.

scratch-js's People

Contributors

Stargazers

Watchers

scratch-js's Issues

Inject traceur-runtime into the execution context

Currently, some of Traceur's more complex features, generators for one, don't work because they require the traceur runtime in order to execute (under the $traceurRuntime namespace).

Warn when transformation fails?

When I make a syntax error, nothing visually happens. Thanks kinda sad as many people will be playing around with ES6 syntax, and want to know it when they do wrong things.

Instead of staying silent I'd suggest to let the user know something, preferably by also indicating the line number, or at least forwarding the error to console.error() so they know their script didn't execute.

Really nice tool @richgilbank 👍!

Make error messages less obtrusive

Instead of showing the error messages within the code (and moving everything around), perhaps just have a fixed error message bar at the bottom of the editor?

Add babel polyfil

Ran into an issue trying to play around with iterables.

When you use the spread operator on an iterable babel attempts to use Array.from to convert the iterable but Array.from is only available in the firefox browser. It would be cool if the polyfil was included or be enable-able so that we can play around with these features not yet in modern browsers.

Add a build system

Things are big enough that this is really necessary. Livereload and a file structure are the big requirements here, but it would be nice to be able to write in ES6 with https://www.npmjs.com/package/gulp-6to5 or similar.
cc: @hemanth @tessalt since you're not watching the repo 😜

Option to run plain vanilla JS

Latest versions of (Chrome i.e Canary) have a good support of ES2015: 82%.

Would be useful if the transpilers can be disabled and run vanilla js... yes the console exists but it is limited in terms of code coloring, multi line formatting, closing brackets, etc, so having ScratchJS as a code/console tester tool for plain JS would be great.

UI Update

I added the UI that exists in a pretty heavy-handed sort of way. Would be great to be able to toggle between light/dark themes, control Traceur settings and more from some sort of menu overlay. All this would then be saved through chrome.storage to keep defaults for an account across devices.

"Run it" keyboard shortcut should work on non-Mac platforms

Cmd+Enter works on Mac, but Ctrl+Enter is ineffective here under Linux (probably Windows too).

Add support of running in context of page iframe

Some people forced to use iframes on their pages and for now I don't see a way how to be able easily run JS in context of main's page iframe.

Is it possible to add feature of explicitly selecting context on which the script should run?

NPMify codemirror

Because reasons.
#24

Firefox version

Add 6to5 Support

Work to add 6to5 support through a toggle or button. Would love this option and have referenced so in here.

Remove potential race condition

Per discussion here: https://github.com/richgilbank/ES6-Repl-Chrome-Extension/pull/8/files#r19537329

pressing ] switches from ES6Repl tab to the console tab (azerty keyboard)

] is reached with Alt Gr+) on my keyboard, and it automatically switches tab view instead of writing this character. I have to copy/paste it for the moment

Use npm or bower for traceur deps

Add LiveScript

http://livescript.net/#installation

Re-bind execution contexts when they change

Currently any iframes injected after DOM Ready aren't reflected in the panel.

Scratch JS ver. 0.0.20 is not compatible with Chrome ver. 46

Hi, unfortunately this extension doesn't work in Chrome Version 46.0.2490.71 m. OS: Windows 10
I'm not able to write write code as well as run it.
I would be grateful for Your support. Thx.

Add autocompletion where available

It would be great for the editor to be able to autocomplete the names of properties, function names, variables, etc. Not sure how this would work with each of the transpilers though.

Save session to localStorage

I think the session (buffer) should persist when closing devTools and reopening it (or when browser crashes, etc.)

"Run it" hotkey for non-mac computers

As far as I can see, there's no hotkey for the "Run it" button in Windows/Linux machines.

It'd be nice to have Ctrl+Enter as a shortcut for "Run it" in non-mac platforms.

Add multiple other transformers

ie CoffeeScript, TypeScript, Dart, etc...

Move package.json to root dir

Save settings in Chrome Storage

It seems like the code is saved in synced Chrome storage, yet the settings are saved in localStorage. Seems like an odd choice.

UI issues

As the CodeMirror editor grows with its contents, the "Run it" button becomes unclickable as it is below the editor.
The editor's size does not update when resizing the DevTools

Saving multiple snippets of code

A great feature is having the option to name and save multiple snippets of code.

Add TypeScript

Looks like this is the main project for in-browser compiling: https://github.com/niutech/typescript-compile

Transformers version?

I think transformers should note version, such as CoffeeScript is 1.8 or 1.9?

Opera version?

Any chance you’d be willing to upload this to https://addons.opera.com/en/developer/upload/, so that Opera users can enjoy your extension too?

You probably don’t even have to change the code.

Add intellisense

wouldn't that be a cool feature having intellisense like console provides ?
Default Console has awesome feature. As soon as you add DOT to the object it provides all the available properties and functions of that object.

I am sorry if this functionality already exist. help me finding out that :)

Make light theme's line height the same as the dark theme

Rename Project?

The project includes more of a "scratchpad" feel to it and not necessarily specific to ES6 (because of the addition of the different compilers) or a Repl. Suggestions...

Open in new window?

Thoughts on the option to open the scratchpad in a new tab/window instead of just working out of a devtools tab? May be nice to have the option of using the current devtools tab or hitting a chrome extension bookmark button which would open a new tab.

Syntax highlighting for ES6

Throw errors

When an error occurs, it silently fails:

Upgrade babel

The version of babel distributed in the extension is out of date. For example, the following simple code does not work:

this.baz = "123"
let foo = s => s + this.baz
console.log(foo('abc'))

results in:

"use strict";

undefined.baz = "123";
var foo = function (s) {
  return s + undefined.baz;
};
console.log(foo("abc"));

Recent versions of babel correctly assign the this reference to the enclosing scope.

Delay loading files until visible

AFAICT you're loading in all the js files as soon as DevTools loads.

Can you bring them in lazily to not affect the load of the rest?

Cannot install packaged extension

Install via WebStore fails when trying to unpack extension.

Windows 8.1 64-bit, Chrome 40

Add ClojureScript

Most likely via https://github.com/kanaka/clojurescript

Esc key doesn't open the console the first time

It seems CodeMirror calls preventDefault() on keyboard events, which is preventing them from making their way to devtools' handlers. As a result, when CodeMirror is in focus, hitting esc doesn't open the console the first time. Hitting it again, however, will (since it loses focus).

Add "High compliancy" mode

Please add "High compliancy" mode as in Babel (checkbox here https://babeljs.io/repl/). Currently this ES6 code

if (true) {
  console.log(typeof value);  // ReferenceError!  
  let value = "blue";         // Temporal Dead Zone
}

is transpiled to

"use strict";

if (true) {
  console.log(typeof value);  // ReferenceError!
  var value = "blue";         // Temporal Dead Zone
}

and does not throw ReferenceError.