richgilbank / scratch-js Goto Github PK
View Code? Open in Web Editor NEWRun ES6, CoffeeScript and LiveScript on any page from Chrome's DevTools!
License: MIT License
Run ES6, CoffeeScript and LiveScript on any page from Chrome's DevTools!
License: MIT License
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).
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...
Enable or allow user to opt-in for experimental (es7) features (for babel).
I think the session (buffer) should persist when closing devTools and reopening it (or when browser crashes, etc.)
The CSS is in desperate need of a build process. I'd like to bring in Sass, Stylus, or similar to clean it up a bit.
A great feature is having the option to name and save multiple snippets of code.
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.
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.
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
.
ie CoffeeScript, TypeScript, Dart, etc...
Per feedback on the chrome store listing itself, it would be cool to have the return value from the executed transpiled code logged so it doesn't have to be done manually with console.log
s.
Currently any iframes injected after DOM Ready aren't reflected in the panel.
It seems like the code is saved in synced Chrome storage, yet the settings are saved in localStorage. Seems like an odd choice.
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 π
Per discussion here: https://github.com/richgilbank/ES6-Repl-Chrome-Extension/pull/8/files#r19537329
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).
Cmd+Enter
works on Mac, but Ctrl+Enter
is ineffective here under Linux (probably Windows too).
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.
Because reasons.
#24
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?
Looks like this is the main project for in-browser compiling: https://github.com/niutech/typescript-compile
Install via WebStore fails when trying to unpack extension.
Windows 8.1 64-bit, Chrome 40
It'd be nice if the output pane stayed open for the next time I open up DevTools.
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.
To display the output from 6to5, Traceur, etc
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.
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.
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 π!
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.
Work to add 6to5 support through a toggle or button. Would love this option and have referenced so in here.
Also possibly updating the output panel on a debounced keypress for live feedback
]
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
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.
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?
Most likely via https://github.com/kanaka/clojurescript
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 :)
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.