Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A browser-based live coding environment.
JavaScript CSS Other

Add babel polyfills to core_deps

Summary
Some of the javascript that babel contains calls to new classes/functions
in the ES6 (ES2015) standard library, e.g. Set.  In order to use these
features efficiently we should use the "runtime" option which include includes
polyfills for the features being used.  Unforutunately, this requires module
loading support which the live-editor code base doesn't have yet.  For now,
include the entire polyfill.

Test Plan:
- npm test (running tests in the browser would give a false positive b/c Chrome already supports Set)

Auditors: pamela, john
latest commit 3b7818825e
@kevinb7 kevinb7 authored
Failed to load latest commit information.
build Add babel polyfills to core_deps
css Adds in a new document mode and textarea editor.
demos Adds in a new document mode and textarea editor.
external Change the timeout used by the LoopProtector at the start/end of the …
images Changed location of images
js Loading all images/sounds whose names appear in a string.
sounds New sounds for "retro" sound set for getSound
tests Loading all images/sounds whose names appear in a string.
testutil Use LoopProtector's callback for all infinite loop tests.
tmpl Fix images paths in .handlebars templates so that they work in the demo.
utils Cleanup lint errors picked up when updating substate in webapp
.arcconfig Add back the "userChangedCode" event, for bingo'ing an badge'ing purp…
.arclint add default .arclint file
.gitignore Remove need for symlinks entirely.
.gitmodules Round font sizes to the nearest tenth.
.travis.yml use th same version of node.js on travis-js
LICENSE Added LICENSE
README.md update the `git submodule update` command
babel-plugin.js Prevent babel from killing the watcher
bower.json bump deps and rebuild because some of the deps had 2 space tabs becau…
build-paths.json Add babel polyfills to core_deps
check.js fix the suggested command for checkout out submodules
gulpfile.js Prevent gulp watcher from running tests
lint_blacklist.txt Use LoopProtector's callback for all infinite loop tests.
package.json Set file permissions on build/js files to 644 after each build.

README.md

Live Code Editor

This is the live coding environment developed for the Khan Academy Computer Programming curriculum. It gives learners an editor on the left (either ACE or our Blocks-based drag-and-drop editor) and an output on the right (either JS+ProcessingJS, HTML, or SQL).

You can find various demos in the demos/ directory, and start playing immediately with the simple demo:

Running

In order to run live-editor locally you'll have run a local web server. If you have python installed this can be accomplished by running the following command from the live-editor folder:

python -m SimpleHTTPServer

You should see the following console output:

Serving HTTP on 0.0.0.0 port 8000 ...

Open up a browser and navigate to http://0.0.0.0:8000/demos/simple.

Building

You can use the pre-built copies of everything inside the build/ directory. If you wish to make some changes and re-build the library from scratch you'll need to install some dependencies:

git submodule update --init --recursive
npm install
bower install

# Build the Ace editor files (This is usually *not* needed)
cd bower_components/ace
npm install
node Makefile.dryice.js -nc

At this point you can make a fresh build, using Gulp:

gulp
# Or if not installed globally:
node_modules/gulp/bin/gulp.js

If you have an issue with "this.merge" is undefined, then rm -rf node_modules/gulp-handlebars/node_modules/handlebars.

Testing

The tests are in the /tests folder. They use Mocha/Chai/Sinon. Gulp typically runs the tests when relevant files change, but you can explicitly run the tests with:

node_modules/gulp/bin/gulp.js test

Please add tests whenever possible for any change that you make or propose.

How you can help

We have many open issues here. The top priority are those marked as regressionbug, since those are things that used to work. After that, the ones marked as browserbug may be the easiest to take on, and there are also plain old bugs. All the issues are tagged according to their environment, pjs, webpage, sql, or if they're generally about the ACE editor, editor. There are also a few bugs specifically about the demo pages, since those can get behind, and requests for more tests, since we can always use more of those!

Some aspects of the editor are in subrepos with their own issue trackers, like structuredjs and structuredblocks, so be sure to poke around those and see if they're more up your bug-fixing alley.

There are also a handful of ideas floating here from our community. You are welcome to take them on, but it's possible we won't merge them if we worry about their effect on the programming experience on Khan Academy, like if they may introduce backwards compatibilities or performance regressions.

We have no full-time resource working on the editing environment right now, so we will do pull requests when we find ourselves with time between other projects. We thank you for your contribution, even if we may be slow to acknowledge it at times. :)

How it works

For a deep dive into the components of the LiveEditor, read this wiki.

You can also watch these talks that the team has given about the editor:

Something went wrong with that request. Please try again.