TS 4.1 & Gatsby & Yarn update

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-2.1.1.cjs
+yarnPath: .yarn/releases/yarn-2.3.3.cjs

docs/New TypeScript Version.md

@@ -4,25 +4,6 @@ We'll use 3.9.0 as the example. Note this looks long because there's a lot of ex
 
 ### Beta
 
-##### Playground
-
-To add a new version for folks to be able to use
-
-- Create a tag for [3.9.0-beta](https://github.com/orta/make-monaco-builds) in `orta/make-monaco-builds` against the current master.
-- Push that tag, then check the [GitHub Actions section](https://github.com/orta/make-monaco-builds/actions) ([Here's 3.9.0's](https://github.com/orta/make-monaco-builds/runs/546571003?check_suite_focus=true))
-
-Then it needs to be added to the dropdown, you can find it here: [`packages/playground/src/index.ts`](https://github.com/microsoft/TypeScript-website/blob/v2/packages/playground/src/index.ts)
-
-```ts
-const allVersions = [
-  "3.9.0-beta",
-  ...sandbox.supportedVersions.filter(f => !notWorkingInPlayground.includes(f)),
-  "Nightly",
-]
-```
-
-_There is a space for this to be automated away entirely in the future, there is enough data in the site's sourcecode to derive this._
-
 ##### Site
 
 The website uses one version of TypeScript which you can find in the root `package.json` inside the `resolutions` field. It's always a specific version, so change the version to:
@@ -37,6 +18,8 @@ Then run `yarn install`.
 
 That will update all of the site to use 3.9.0 for building. Run `yarn build` to see if any of the website's code broke.
 
+You might see issues with yarn patching TypeScript, if so, try run: `yarn set version latest` first to update to the latest yarn.
+
 ##### New Handbook Docs
 
 You might have a new reference doc to add, they live in [`packages/documentation/copy`](https://github.com/microsoft/TypeScript-website/blob/v2/packages/documentation/copy). You can ignore languages other than `en`. The folder structure is only for your reference and has no bearing on the site navigation. Each markdown document needs a header like:

package.json

@@ -2,20 +2,7 @@
   "private": true,
   "name": "root",
   "workspaces": [
-    "packages/create-typescript-playground-plugin",
-    "packages/typescript-vfs",
-    "packages/ts-twoslasher",
-    "packages/shiki-twoslash",
-    "packages/gatsby-remark-shiki-twoslash",
-    "packages/community-meta",
-    "packages/documentation",
-    "packages/handbook-epub",
-    "packages/sandbox",
-    "packages/playground",
-    "packages/playground-examples",
-    "packages/tsconfig-reference",
-    "packages/twoslash-webworker",
-    "packages/typescriptlang-org"
+    "packages/*"
   ],
   "engines": {
     "node": ">=13"
@@ -34,7 +21,7 @@
   "resolutions": {
     "@types/react": "16.9.17",
     "node-gyp": "5.1.0",
-    "typescript": "4.0.2",
+    "typescript": "4.1.0-beta",
     "prettier": "^2.0.2"
   },
   "jest": {
@@ -43,15 +30,15 @@
     ]
   },
   "scripts": {
-    "bootstrap": "yarn workspaces foreach -v -a --exclude root run bootstrap && BOOTSTRAPPING=true yarn workspaces foreach -v -a --exclude root run build",
+    "bootstrap": "yarn workspaces foreach -v -t --exclude root run bootstrap && BOOTSTRAPPING=true yarn workspaces foreach -v -t --exclude root run build",
     "start": "concurrently -p \"[{name}]\" -n \"BUILD,SITE\" -c \"bgBlue.bold,bgMagenta.bold\" \"node watcher.js\" \"yarn workspace typescriptlang-org start\" --kill-others",
     "start-twoslash": "concurrently -p \"[{name}]\" -n \"BUILD,SITE\" -c \"bgBlue.bold,bgMagenta.bold\" \"node watcher.js\" \"yarn workspace typescriptlang-org start-twoslash\" --kill-others",
-    "build": "yarn workspaces foreach -v -a --exclude root --exclude typescriptlang-org run build",
+    "build": "yarn workspaces foreach -v -t --exclude root --exclude typescriptlang-org run build",
     "build-site": "yarn workspace typescriptlang-org build",
     "compile": "yarn workspace typescriptlang-org tsc",
     "update-snapshots": "yarn workspace typescriptlang-org update-snapshots",
     "clean": "yarn workspace typescriptlang-org gatsby clean",
-    "test": "CI=true yarn workspaces foreach -v -a  --exclude root run test"
+    "test": "CI=true yarn workspaces foreach -v -t --exclude root run test"
   },
   "dependencies": {
     "@types/express": "^4.17.6",

packages/create-typescript-playground-plugin/template/CONTRIBUTING.md

@@ -21,7 +21,7 @@ Roughly:
 
 ### Sandbox
 
-The plugins are passed copies of the TypeScript sandbox, which is a high level API wrapper to the [`monaco-editor`](https://microsoft.github.io/monaco-editor/). You can learn more about the sandbox on [the TypeScript website](http://www.typescriptlang.org/v2/dev/sandbox/
+The plugins are passed copies of the TypeScript sandbox, which is a high level API wrapper to the [`monaco-editor`](https://microsoft.github.io/monaco-editor/). You can learn more about the sandbox on [the TypeScript website](http://www.typescriptlang.org/dev/sandbox/
 
 #### Rollup
 
@@ -50,9 +50,9 @@ This module should be deployed to npm when you would like the world to see it, t
 For example, this is how you can handle getting the URL for a CSS file which is included in your `dist` folder:
 
 ```ts
-const isDev = document.location.host.includes('localhost')
-const unpkgURL = 'https://unpkg.com/typescript-playground-presentation-mode@latest/dist/slideshow.css'
-const cssHref = isDev ? 'http://localhost:5000/slideshow.css' : unpkgURL
+const isDev = document.location.host.includes("localhost")
+const unpkgURL = "https://unpkg.com/typescript-playground-presentation-mode@latest/dist/slideshow.css"
+const cssHref = isDev ? "http://localhost:5000/slideshow.css" : unpkgURL
 ```
 
 ### Post-Deploy

packages/documentation/copy/en/handbook-v2/Basics.md

@@ -345,6 +345,7 @@ Let's take a look at what happens when we compile with `tsc`:
 
 ```ts twoslash
 // @showEmit
+// @target: es5
 function greet(person: string, date: Date) {
   console.log(`Hello ${person}, today is ${date.toDateString()}!`);
 }
@@ -396,18 +397,18 @@ function greet(person, date) {
 greet("Maddison", new Date());
 ```
 
-> While the default target is ES3, the great majority of current browsers support ES5.
-> Most developers can therefore safely specify ES5 or even ES2016 as a target, unless compatibility with certain ancient browsers is important.
+> While the default target is ES3, the great majority of current browsers support ES2015.
+> Most developers can therefore safely specify ES2015 or above as a target, unless compatibility with certain ancient browsers is important.
 
 ## Strictness
 
 Different users come to TypeScript looking for different things in a type-checker.
-Some people are looking for a more loose opt-in experience which can help validate only some parts of our program and get decent tooling.
+Some people are looking for a more loose opt-in experience which can help validate only some parts of their program, and still have decent tooling.
 This is the default experience with TypeScript, where types are optional, inference takes the most lenient types, and there's no checking for potentially `null`/`undefined` values.
 Much like how `tsc` emits in the face of errors, these defaults are put in place to stay out of your way.
 If you're migrating existing JavaScript, that might be a desirable first step.
 
-In contrast, a lot of users prefer to have TypeScript validate as much as it can off the bat, and that's why the language provides strictness settings as well.
+In contrast, a lot of users prefer to have TypeScript validate as much as it can straight away, and that's why the language provides strictness settings as well.
 These strictness settings turn static type-checking from a switch (either your code is checked or not) into something closer to a dial.
 The farther you turn this dial up, the more TypeScript will check for you.
 This can require a little extra work, but generally speaking it pays for itself in the long run, and enables more thorough checks and more accurate tooling.
@@ -429,5 +430,5 @@ Turning on the `noImplicitAny` flag will issue an error on any variables whose t
 ### `strictNullChecks`
 
 By default, values like `null` and `undefined` are assignable to any other type.
-This can make writing some code easier, but forgetting to handle `null` and `undefined` is the cause of countless bugs in the world - even in other languages!
+This can make writing some code easier, but forgetting to handle `null` and `undefined` is the cause of countless bugs in the world - some consider it a [billion dollar mistake](https://www.youtube.com/watch?v=ybrQvs4x0Ps)!
 The `strictNullChecks` flag makes handling `null` and `undefined` more explicit, and _spares_ us from worrying about whether we _forgot_ to handle `null` and `undefined`.

packages/documentation/copy/en/reference/JSX.md

@@ -25,13 +25,15 @@ Additionally the output will have a `.jsx` file extension.
 The `react` mode will emit `React.createElement`, does not need to go through a JSX transformation before use, and the output will have a `.js` file extension.
 The `react-native` mode is the equivalent of `preserve` in that it keeps all JSX, but the output will instead have a `.js` file extension.
 
-| Mode           | Input     | Output                       | Output File Extension |
-| -------------- | --------- | ---------------------------- | --------------------- |
-| `preserve`     | `<div />` | `<div />`                    | `.jsx`                |
-| `react`        | `<div />` | `React.createElement("div")` | `.js`                 |
-| `react-native` | `<div />` | `<div />`                    | `.js`                 |
+| Mode           | Input     | Output                                            | Output File Extension |
+| -------------- | --------- | ------------------------------------------------- | --------------------- |
+| `preserve`     | `<div />` | `<div />`                                         | `.jsx`                |
+| `react`        | `<div />` | `React.createElement("div")`                      | `.js`                 |
+| `react-native` | `<div />` | `<div />`                                         | `.js`                 |
+| `react-jsx`    | `<div />` | `_jsx("div", {}, void 0);`                        | `.js`                 |
+| `react-jsxdev` | `<div />` | `_jsxDEV("div", {}, void 0, false, {...}, this);` | `.js`                 |
 
-You can specify this mode using either the `--jsx` command line flag or the corresponding option in your [tsconfig.json](/docs/handbook/tsconfig-json.html) file.
+You can specify this mode using either the `--jsx` command line flag or the corresponding option [`jsx` in your tsconfig.json](/tsconfig#jsx) file.
 
 > \*Note: You can specify the JSX factory function to use when targeting react JSX emit with `--jsxFactory` option (defaults to `React.createElement`)
 
@@ -128,12 +130,14 @@ interface FooProp {
   Y: number;
 }
 
-declare function AnotherComponent(prop: {name: string});
+declare function AnotherComponent(prop: { name: string });
 function ComponentFoo(prop: FooProp) {
   return <AnotherComponent name={prop.name} />;
 }
 
-const Button = (prop: {value: string}, context: { color: string }) => <button />
+const Button = (prop: { value: string }, context: { color: string }) => (
+  <button />
+);
 ```
 
 Because a Function Component is simply a JavaScript function, function overloads may be used here as well:
@@ -422,23 +426,10 @@ class MyComponent extends React.Component<Props, {}> {
 <MyComponent foo={0} />; // error
 ```
 
-## Factory Functions
-
-The exact factory function used by the `jsx: react` compiler option is configurable. It may be set using either the `jsxFactory` command line option, or an inline `@jsx` comment pragma to set it on a per-file basis. For example, if you set `jsxFactory` to `createElement`, `<div />` will emit as `createElement("div")` instead of `React.createElement("div")`.
-
-The comment pragma version may be used like so (in TypeScript 2.8):
+### Configuring JSX
 
-```ts
-import preact = require("preact");
-/* @jsx preact.h */
-const x = <div />;
-```
-
-emits as:
-
-```ts
-const preact = require("preact");
-const x = preact.h("div", null);
-```
+There are multiple compiler flags which can be used to customize your JSX, which work as both a compiler flag and via inline per-file pragmas. To learn more see their tsconfig reference pages:
 
-The factory chosen will also affect where the `JSX` namespace is looked up (for type checking information) before falling back to the global one. If the factory is defined as `React.createElement` (the default), the compiler will check for `React.JSX` before checking for a global `JSX`. If the factory is defined as `h`, it will check for `h.JSX` before a global `JSX`.
+- [`jsxFactory`](/tsconfig/#jsxFactory)
+- [`jsxFragmentFactory`](/tsconfig/#jsxFragmentFactory)
+- [`jsxImportSource`](/tsconfig/#jsxImportSource)

packages/documentation/copy/en/reference/Type Compatibility.md

@@ -128,11 +128,11 @@ enum EventType {
 interface Event {
   timestamp: number;
 }
-interface MouseEvent extends Event {
+interface MyMouseEvent extends Event {
   x: number;
   y: number;
 }
-interface KeyEvent extends Event {
+interface MyKeyEvent extends Event {
   keyCode: number;
 }
 
@@ -141,13 +141,13 @@ function listenEvent(eventType: EventType, handler: (n: Event) => void) {
 }
 
 // Unsound, but useful and common
-listenEvent(EventType.Mouse, (e: MouseEvent) => console.log(e.x + "," + e.y));
+listenEvent(EventType.Mouse, (e: MyMouseEvent) => console.log(e.x + "," + e.y));
 
 // Undesirable alternatives in presence of soundness
 listenEvent(EventType.Mouse, (e: Event) =>
-  console.log((e as MouseEvent).x + "," + (e as MouseEvent).y)
+  console.log((e as MyMouseEvent).x + "," + (e as MyMouseEvent).y)
 );
-listenEvent(EventType.Mouse, ((e: MouseEvent) =>
+listenEvent(EventType.Mouse, ((e: MyMouseEvent) =>
   console.log(e.x + "," + e.y)) as (e: Event) => void);
 
 // Still disallowed (clear error). Type safety enforced for wholly incompatible types

packages/documentation/copy/en/release-notes/TypeScript 4.0.md

@@ -91,12 +91,11 @@ const r2 = tail([...myTuple, ...myArray] as const);
 
 The second change is that rest elements can occur anywhere in a tuple - not just at the end!
 
-```ts twoslash
+```ts
 type Strings = [string, string];
 type Numbers = [number, number];
 
 type StrStrNumNumBool = [...Strings, ...Numbers, boolean];
-//   ^?
 ```
 
 Previously, TypeScript would issue an error like the following:
@@ -109,12 +108,11 @@ But with TypeScript 4.0, this restriction is relaxed.
 
 Note that in cases when we spread in a type without a known length, the resulting type becomes unbounded as well, and all the following elements factor into the resulting rest element type.
 
-```ts twoslash
+```ts
 type Strings = [string, string];
 type Numbers = number[];
 
 type Unbounded = [...Strings, ...Numbers, boolean];
-//   ^?
 ```
 
 By combining both of these behaviors together, we can write a single well-typed signature for `concat`:

packages/gatsby-remark-shiki-twoslash/package.json

@@ -13,6 +13,7 @@
   ],
   "scripts": {
     "start": "tsdx watch",
+    "bootstrap": "yarn build",
     "prepublishOnly": "yarn build",
     "build": "tsdx build",
     "test": "tsdx test",

packages/playground-examples/package.json

@@ -4,6 +4,7 @@
   "license": "MIT",
   "version": "1.0.0",
   "scripts": {
+    "bootstrap": "yarn build",
     "build": "node scripts/generateTOC.js && node scripts/copyFiles.js",
     "test": "echo 'NOOP'"
   }

packages/playground/package.json

@@ -13,6 +13,9 @@
     "build": "tsc",
     "test": "jest"
   },
+  "dependencies": {
+    "typescript-sandbox": "0.1.0"
+  },
   "devDependencies": {
     "@types/jest": "^25.1.3",
     "jest": "*",

packages/playground/src/createConfigDropdown.ts

@@ -125,6 +125,8 @@ export const updateConfigDropdownForCompilerOptions = (sandbox: Sandbox, monaco:
     const map = compilerIDToMaps[flagID]
     // @ts-ignore
     const realValue = map[currentValue]
+    if (!realValue) return
+
     // @ts-ignore
     for (const option of input.children) {
       option.selected = option.value.toLowerCase() === realValue.toLowerCase()

packages/playground/src/exporter.ts

@@ -252,7 +252,7 @@ ${codify(stringifiedCompilerOptions, "json")}
     } else {
       ui.showModal(
         body,
-        document.getElementById("exports-drpdown")!,
+        document.getElementById("exports-dropdown")!,
         "Issue too long to post automatically. Copy this text, then click 'Create New Issue' to begin.",
         {
           "Create New Issue": "https://github.com/Microsoft/TypeScript/issues/new",
@@ -265,15 +265,19 @@ ${codify(stringifiedCompilerOptions, "json")}
 
   async function copyAsMarkdownIssue() {
     const markdown = await makeMarkdown()
-    ui.showModal(markdown, document.getElementById("exports-drpdown")!, "Markdown Version of Playgrund Code for GitHub Issue")
+    ui.showModal(
+      markdown,
+      document.getElementById("exports-dropdown")!,
+      "Markdown Version of Playgrund Code for GitHub Issue"
+    )
     return false
   }
 
   function copyForChat() {
     const query = sandbox.createURLQueryWithCompilerOptions(sandbox)
     const fullURL = `${document.location.protocol}//${document.location.host}${document.location.pathname}${query}`
     const chat = `[Playground Link](${fullURL})`
-    ui.showModal(chat, document.getElementById("exports-drpdown")!, "Markdown for chat")
+    ui.showModal(chat, document.getElementById("exports-dropdown")!, "Markdown for chat")
     return false
   }
 
@@ -286,10 +290,17 @@ ${codify(stringifiedCompilerOptions, "json")}
 
     const code = "```\n" + preview + "\n```\n"
     const chat = `${code}\n[Playground Link](${fullURL})`
-    ui.showModal(chat, document.getElementById("exports-drpdown")!, "Markdown code")
+    ui.showModal(chat, document.getElementById("exports-dropdown")!, "Markdown code")
     return false
   }
 
+  function exportAsTweet() {
+    const query = sandbox.createURLQueryWithCompilerOptions(sandbox)
+    const fullURL = `${document.location.protocol}//${document.location.host}${document.location.pathname}${query}`
+
+    document.location.assign(`http://www.twitter.com/share?url=${fullURL}`)
+  }
+
   return {
     openProjectInStackBlitz,
     openProjectInCodeSandbox,
@@ -298,5 +309,6 @@ ${codify(stringifiedCompilerOptions, "json")}
     copyForChat,
     copyForChatWithPreview,
     openInTSAST,
+    exportAsTweet,
   }
 }

packages/playground/src/index.ts

@@ -12,7 +12,7 @@ import {
   createDragBar,
   setupSidebarToggle,
 } from "./createElements"
-import { runWithCustomLogs, clearLogs } from "./sidebar/runtime"
+import { runWithCustomLogs } from "./sidebar/runtime"
 import { createExporter } from "./exporter"
 import { createUI } from "./createUI"
 import { getExampleSourceCode } from "./getExample"

packages/playground/src/sidebar/showErrors.ts

@@ -15,6 +15,7 @@ export const showErrors: PluginFactory = (i, utils) => {
     // @ts-ignore
     const playground: Playground = window.playground
 
+    if (!playground) return
     if (playground.getCurrentPlugin().id !== "errors") return
 
     // Bail early if there's nothing to show