Programming Experience Toolkit

A kinder JavaScript experience

Programming Experience Toolkit (PXT) is a framework for creating special-purpose programming experiences for beginners, especially focused on computer science education. PXT's underlying programming language is a subset of TypeScript (leaving out JavaScript dynamic features).

The main features of PXT are:

• a Blockly-based code editor along with converter to the text format
• an ACE-based text editor with enhanced, robust auto-completion and auto-correction
• extensibility support to define new blocks in TypeScript
• an ARM Thumb machine code emitter
• a command-line package manager

Running a target from localhost

Install the pxt command line tool (only need to do it once):

npm install -g pxt

Now, let's say you want to install microbit target:

mkdir mymicrobit
cd mymicrobit
pxt target microbit
pxt serve

The last command will open default browser and point it to http://localhost:3232/

The pxt target microbit is essentially the same as mkdir node_modules; npm install pxt-microbit plus setting up pxtcli.json file to point to the target.

In future, you just need to run pxt serve. You can also run npm update to upgrade the target and PXT.

Build

First, install Node (http://nodejs.org/). Then install the following:

npm install -g jake
npm install -g tsd

To build the PXT command line tools:

tsd reinstall
npm install
jake

Then install the pxt command line tool (only need to do it once):

npm install -g pxt

After this you can run pxt from anywhere within the build tree.

To start the local web app server do pxt serve within the root directory of build tree (where this file sits) and then browse to http://localhost:3232

Icons

There is a number of custom icons (to use in addition to http://semantic-ui.com/elements/icon.html) in the svgicons/ directory. These need to be 1000x1000px. Best start with an existing one. To see available icons go to http://localhost:3232/icons.html (this file, along with icons.css containing the generated WOFF icon font, is created during build).

If you're having trouble with display of the icon you created, try:

npm install -g svgo
svgo svgicons/myicon.svg

TODOs

package mgr + compiler

• image literals

• code in top-level scope

• only compile what's needed

• don't emit unused global vars

• testFiles: [ ... ] in yelm.json

• class methods

• constructors

• disallow direct references to class members (cannot copy JS semantics)

• optional arguments

• default arguments

• +=, -= etc

• += on strings

• proper caching for x.f++, x.f += ... etc

• function f() {...}; control.inBackground(f) in local scope

• function f() {...}; control.inBackground(f) in global scope

• //% shim=... weight=... help=... etc insteaf of {shim:...}

• bit operators (&, |, etc)

• use "(x + y) | 0" etc instead of "x + y" in simulator

• do not generate empty action bodies for shim

• check on compiler performance (1000ms on lang-test0)

• forever() seems to have issues

• skip unreferenced globals when initilized with literal

• foo${bar}baz

• x ? a : b

• x as T support

• check on ("foo" + true)

• simulator at sim-microbit.kindscript.net

• ptr-<username>-* as the main way publishing packages

• lambdas returning values (maybe just works?)

• clear variables when they get out of scope to limit memory usage

• allow use of floating point for non-native targets

• do not DECR no-closure functions

• after uninstall pouch db throws 404 after reload

• in simulator currResume start loop() in nextTick

• in JS emitter - limit stack height

• in JS emitter - generate pause every 1000 loop iterations or so

• >= in formatter becomes > =

• expose simulator errors in web app

• implement .hex file cache in browser

• implement .hex file cache in CLI

• deal with C++ enums

• deal with C++ classes

• enum support without enumval= (esp for non-hex targets)

• switch() statement support

• % operator

• error for 'shim:foo' (ie. shim=true)

• lib compile mode - no reachability, test shims

• inline assembly

• move target definition from pxt.json to pxtarget.json

Bigger items

• generate .d.ts from .cpp
• generate .d.ts from simulator code
• debugger hooks
• auto-fix of parenthesis
• integrate TD converter
• think about package versioning (semver?)

Maybe

• virtual methods
• 3-way merge upon sync
• class field initializers (?)
• support Enum.X + 0 etc ?

web app

• make blocks output file read only
• do not type-check while auto-completing
• scroll completion window with keyboard
• indent when entering first character on a line
• save source in hex
• Save json
• Drag and drop load
• Link up simulator
• Flag to hide from TS auto completion (eg: set sprite property with enum)
• add markdown processor for docs
• help for specific arguments
• stepping debugger
• attaching runtime warning to specific lines of code or block

converter from TD to TS (different repo)

• multi-line strings into backtick literals
• use bit operators for bits.XYZ
• fish out {shim:...} and friends
• {hints:...} -> @param x Blah, eg: 100, 200 (?)
• async is flipped
• use expr as Type not <Type> expr

License

MIT