Adds support for dev builds of TS

Author: orta

packages/playground/README.md

@@ -3,7 +3,7 @@
 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](https://github.com/agentcooper/typescript-play) but now it's pretty far from that fork.
+work by [Artem Tyurin](https://github.com/agentcooper/typescript-play) but now it's diverged far from that fork.
 
 ## Architecture
 
@@ -17,3 +17,29 @@ The playground library sits above the [TypeScript sandbox](../Sandbox), and prov
 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.
+
+## Link Syntax
+
+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](https://typescript.azureedge.net/indexes/pre-releases.json) [json](https://typescript.azureedge.net/indexes/releases.json) files.
+
+  There are two special cases for the `ts` option:
+
+  - `ts=Nightly` where it will switch to most recently the nightly version.
+  - `ts=dev` where 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.

packages/typescriptlang-org/src/templates/play.tsx

@@ -41,23 +41,28 @@ const Play: React.FC<Props> = (props) => {
     window.react = React
     // @ts-ignore - for React-based plugins
     window.reactDOM = ReactDOM
-    // @ts-ignore - so that plugins etc can use local functions
+    // @ts-ignore - so that plugins etc can use i8n
     window.i = i
 
     const getLoaderScript = document.createElement('script');
     getLoaderScript.src = withPrefix("/js/vs.loader.js");
     getLoaderScript.async = true;
     getLoaderScript.onload = () => {
       const params = new URLSearchParams(location.search)
-      // nothing || Nightly -> next || original ts param
+      // nothing || Nightly -> next || original ts param which should be a release of monaco
       const supportedVersion = !params.get("ts") ? undefined : params.get("ts") === "Nightly" ? "next" : params.get("ts")
       const tsVersion = supportedVersion || playgroundReleases.versions.sort().pop()
 
+      // Because we can reach to localhost ports from the site, it's possible for the locally built compiler to 
+      // be hosted and to power the editor with a bit of elbow grease.
+      const useLocalCompiler = tsVersion === "dev"
+      const urlForMonaco = useLocalCompiler ? "http://localhost:5615/dev/vs" : `https://typescript.azureedge.net/cdn/${tsVersion}/monaco/dev/vs`
+
       // @ts-ignore
       const re: any = global.require
       re.config({
         paths: {
-          vs: `https://typescript.azureedge.net/cdn/${tsVersion}/monaco/min/vs`,
+          vs: urlForMonaco,
           "typescript-sandbox": withPrefix('/js/sandbox'),
           "typescript-playground": withPrefix('/js/playground'),
           "unpkg": "https://unpkg.com/",