This is the JS tooling which powers the https://www.typescriptlang.org/play/
It is more or less vanilla DOM-oriented JavaScript with as few dependencies as possible. Originally based on the work by Artem Tyurin but now it's diverged far from that fork.
The playground library sits above the TypeScript sandbox, and provides features like:
- The code samples support
- The navigation bars, and compiler flags UI
- The sidebar plugin infrastructure for showing JS/DTS/etc
- The export to Code Sandbox/TS AST Viewer/etc features
When deciding where to add a feature to the TypeScript playground, consider if it would be useful to anyone showing TypeScript in a REPL. If yes, add it to the playground and expose a function for this library to use. For example Automatic Type Acquisition is a feature which lives in the sandbox and not the playground.
The Playground supports a set of query inputs from the URL. The hash is used to reflect the code:
#code/PRA- A base64 and zipped version of the code which should live in the editor#src/The%20code- URLEncoded way to have the code for the editor#example/generic-functions- Grab the code from an example with the id generic-functions
Or to trigger some action by default:
#show-examples- When the app is loaded, show the examples popover#show-whatisnew- When the app is loaded, show the examples popover
Then queries tend to be about changing the state of the Playground setup from the default:
-
?ts=3.9.2- Sets the TypeScript version, the list of supported versions is in these two json files.There are two special cases for the
tsoption:ts=Nightlywhere it will switch to most recently the nightly version.ts=devwhere it uses your local developer's build of TypeScript (docs coming later)
-
?flag=value- Any compiler flag referenced in can be set from a query -
?useJavaScript=true- Tells the Playground to treat the editor's code as a JS file instead of a TS one -
?install-plugin=npm-module- Checks to see if there is an installed playground plugin of that name, and if not offers to install it in a modal.