Updates the site for 4.6 (microsoft#2288)

* Removes the .js files from the tsconfig reference

* Wrapup for 4.6

* Adjust twoslash inlay provider to use the new Monaco API for that

* Manual monaco keycode change - fixes microsoft#2267

* Better markdown fix

* Type update for another monaco keycode

* Drops the node12 example from module because it doesn't work on prod

* Note the twoslash cache

* Add tests

Co-authored-by: Mateusz Burzyński <[email protected]>

Author: orta

docs/New TypeScript Version.md

@@ -20,6 +20,8 @@ That will update all of the site to use 3.9.0 for building. Run `yarn build` to
 
 You might see issues with yarn patching TypeScript, if so, try run: `yarn set version latest` first to update to the latest yarn.
 
+Then empty the twoslash cache: `rm node_modules/.cache/twoslash`.
+
 ##### 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

@@ -23,7 +23,7 @@
     "@types/react": "16.9.17",
     "@types/estree": "0.0.46",
     "node-gyp": "5.1.0",
-    "typescript": "4.5.0-beta",
+    "typescript": "4.6.2",
     "tslib": "2.1.0",
     "prettier": "^2.0.2",
     "shelljs": "0.8.4",

packages/create-typescript-playground-plugin/template/package.json

@@ -26,7 +26,7 @@
     "@rollup/plugin-typescript": "^3.0.0",
     "@types/react": "^16.9.23",
     "concurrently": "^5.1.0",
-    "monaco-editor": "^0.29.1",
+    "monaco-editor": "^0.32.1",
     "node-fetch": "^2.6.0",
     "rollup": "^1.31.0",
     "serve": "^11.3.0",

packages/documentation/copy/en/project-config/Compiler Options.md

@@ -305,7 +305,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#allowUnreachableCode'>--allowUnreachableCode</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td><p><code>undefined</code></p>
+  <td>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -316,7 +316,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#allowUnusedLabels'>--allowUnusedLabels</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td><p><code>undefined</code></p>
+  <td>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -339,7 +339,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#assumeChangesOnlyAffectDirectDependencies'>--assumeChangesOnlyAffectDirectDependencies</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -406,7 +406,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#declarationDir'>--declarationDir</a></code></td>
   <td><p><code>string</code></p>
 </td>
-  <td><p>n/a</p>
+  <td>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -439,7 +439,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#disableReferencedProjectLoad'>--disableReferencedProjectLoad</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -461,7 +461,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#disableSolutionSearching'>--disableSolutionSearching</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -472,7 +472,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#disableSourceOfProjectReferenceRedirect'>--disableSourceOfProjectReferenceRedirect</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -516,7 +516,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#emitDecoratorMetadata'>--emitDecoratorMetadata</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -538,18 +538,18 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#exactOptionalPropertyTypes'>--exactOptionalPropertyTypes</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
-<p>Differentiate between undefined and not present when type checking.</p>
+<p>Interpret optional property types as written, rather than adding <code>undefined</code>.</p>
 </td></tr>
 
 <tr class='even' name='experimentalDecorators'>
   <td><code><a href='/tsconfig/#experimentalDecorators'>--experimentalDecorators</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -560,7 +560,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#explainFiles'>--explainFiles</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -615,7 +615,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#importsNotUsedAsValues'>--importsNotUsedAsValues</a></code></td>
   <td><p><code>remove</code>, <code>preserve</code>, or <code>error</code></p>
 </td>
-  <td>
+  <td><p><code>remove</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -791,7 +791,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
 
 <tr class='even' name='moduleResolution'>
   <td><code><a href='/tsconfig/#moduleResolution'>--moduleResolution</a></code></td>
-  <td><p><code>classic</code> or <code>node</code></p>
+  <td><p><code>classic</code>, <code>node</code>, <code>node12</code>, or <code>nodenext</code></p>
 </td>
   <td><ul><li><p><code>Classic</code> if <a href="#module"><code>module</code></a> is <code>AMD</code>, <code>UMD</code>, <code>System</code> or <code>ES6</code>/<code>ES2015</code>,</p>
 </li><li><p>Matches if <a href="#module"><code>module</code></a> is <code>node12</code> or <code>nodenext</code>,</p>
@@ -861,7 +861,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#noFallthroughCasesInSwitch'>--noFallthroughCasesInSwitch</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -877,14 +877,14 @@ tsc app.ts util.ts --target esnext --outfile index.js
 </li></ul></td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
-<p>Enable error reporting for expressions and declarations with an implied <code>any</code> type..</p>
+<p>Enable error reporting for expressions and declarations with an implied <code>any</code> type.</p>
 </td></tr>
 
 <tr class='even' name='noImplicitOverride'>
   <td><code><a href='/tsconfig/#noImplicitOverride'>--noImplicitOverride</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -973,7 +973,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#noUncheckedIndexedAccess'>--noUncheckedIndexedAccess</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -1006,7 +1006,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#out'>--out</a></code></td>
   <td><p><code>string</code></p>
 </td>
-  <td><p>n/a</p>
+  <td>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -1017,7 +1017,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#outDir'>--outDir</a></code></td>
   <td><p><code>string</code></p>
 </td>
-  <td><p>n/a</p>
+  <td>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -1028,7 +1028,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#outFile'>--outFile</a></code></td>
   <td><p><code>string</code></p>
 </td>
-  <td><p>n/a</p>
+  <td>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -1073,7 +1073,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#preserveSymlinks'>--preserveSymlinks</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td><p>n/a</p>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -1084,7 +1084,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#preserveValueImports'>--preserveValueImports</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description even"><td colspan="3">
@@ -1095,7 +1095,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#preserveWatchOutput'>--preserveWatchOutput</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td><p>n/a</p>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -1275,7 +1275,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
   <td><code><a href='/tsconfig/#stripInternal'>--stripInternal</a></code></td>
   <td><p><code>boolean</code></p>
 </td>
-  <td>
+  <td><p><code>false</code></p>
 </td>
 </tr>
 <tr class="option-description odd"><td colspan="3">
@@ -1306,7 +1306,7 @@ tsc app.ts util.ts --target esnext --outfile index.js
 
 <tr class='even' name='target'>
   <td><code><a href='/tsconfig/#target'>--target</a></code></td>
-  <td><p><code>es3</code>, <code>es5</code>, <code>es6</code>/<code>es2015</code>, <code>es2016</code>, <code>es2017</code>, <code>es2018</code>, <code>es2019</code>, <code>es2020</code>, <code>es2021</code>, or <code>esnext</code></p>
+  <td><p><code>es3</code>, <code>es5</code>, <code>es6</code>/<code>es2015</code>, <code>es2016</code>, <code>es2017</code>, <code>es2018</code>, <code>es2019</code>, <code>es2020</code>, <code>es2021</code>, <code>es2022</code>, or <code>esnext</code></p>
 </td>
   <td><p><code>ES3</code></p>
 </td>

packages/documentation/copy/en/reference/Advanced Types.md

@@ -756,7 +756,7 @@ Note that this syntax describes a type rather than a member.
 If you want to add members, you can use an intersection type:
 
 ```ts twoslash
-// @errors: 2693 1005 1128
+// @errors: 2693 1005 1128 7061
 // Use this:
 type PartialWithNewMember<T> = {
   [P in keyof T]?: T[P];

packages/playground/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/jest": "^25.1.3",
     "jest": "*",
-    "monaco-editor": "^0.29.1",
+    "monaco-editor": "^0.32.1",
     "monaco-typescript": "^3.7.0",
     "typescript": "*"
   }

packages/playground/src/index.ts

@@ -188,21 +188,25 @@ export const setupPlayground = (
   // something more inline, but we can abuse the code lenses for now because they get their own line!
   sandbox.monaco.languages.registerCodeLensProvider(sandbox.language, {
     provideCodeLenses: function (model, token) {
-      const lenses = !showFileCodeLens ? [] : [{
-        range: {
-          startLineNumber: 1,
-          startColumn: 1,
-          endLineNumber: 2,
-          endColumn: 1
-        },
-        id: "implicit-filename-first",
-        command: {
-          id: "noop",
-          title: `// @filename: ${sandbox.filepath}`
-        }
-      }]
-      return { lenses, dispose: () => { } };
-    }
+      const lenses = !showFileCodeLens
+        ? []
+        : [
+            {
+              range: {
+                startLineNumber: 1,
+                startColumn: 1,
+                endLineNumber: 2,
+                endColumn: 1,
+              },
+              id: "implicit-filename-first",
+              command: {
+                id: "noop",
+                title: `// @filename: ${sandbox.filepath}`,
+              },
+            },
+          ]
+      return { lenses, dispose: () => {} }
+    },
   })
 
   let showFileCodeLens = false
@@ -394,7 +398,7 @@ export const setupPlayground = (
   const shareAction = {
     id: "copy-clipboard",
     label: "Save to clipboard",
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S],
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
 
     contextMenuGroupId: "run",
     contextMenuOrder: 1.5,
@@ -714,7 +718,11 @@ export const setupPlayground = (
     }
   }
 
-  if (monaco.languages.registerInlayHintsProvider) {
+  const [tsMajor, tsMinor] = sandbox.ts.version.split(".")
+  if (
+    (parseInt(tsMajor) > 4 || (parseInt(tsMajor) == 4 && parseInt(tsMinor) >= 6)) &&
+    monaco.languages.registerInlayHintsProvider
+  ) {
     monaco.languages.registerInlayHintsProvider(sandbox.language, createTwoslashInlayProvider(sandbox))
   }
 

packages/playground/src/sidebar/runtime.ts

@@ -22,7 +22,7 @@ export const runPlugin: PluginFactory = (i, utils) => {
       const clearLogsAction = {
         id: "clear-logs-play",
         label: "Clear Playground Logs",
-        keybindings: [sandbox.monaco.KeyMod.CtrlCmd | sandbox.monaco.KeyCode.KEY_K],
+        keybindings: [sandbox.monaco.KeyMod.CtrlCmd | sandbox.monaco.KeyCode.KeyK],
 
         contextMenuGroupId: "run",
         contextMenuOrder: 1.5,
@@ -183,7 +183,7 @@ function rewireLoggingToElement(
   const replacers = {
     "<span class='literal'>null</span>": "1231232131231231423434534534",
     "<span class='literal'>undefined</span>": "4534534534563567567567",
-    "<span class='comma'>, </span>": "785y8345873485763874568734y535438"
+    "<span class='comma'>, </span>": "785y8345873485763874568734y535438",
   }
 
   const objectToText = (arg: any): string => {
@@ -207,7 +207,9 @@ function rewireLoggingToElement(
       const mapIter = [...arg.entries()]
       textRep =
         `Map (${arg.size}) {` +
-        mapIter.map(([k, v]) => `${objectToText(k)} => ${objectToText(v)}`).join(replacers["<span class='comma'>, </span>"]) +
+        mapIter
+          .map(([k, v]) => `${objectToText(k)} => ${objectToText(v)}`)
+          .join(replacers["<span class='comma'>, </span>"]) +
         "}"
     } else if (typeof arg === "string") {
       textRep = '"' + htmlEscape(arg) + '"'
@@ -254,5 +256,5 @@ function sanitizeJS(code: string) {
 }
 
 function htmlEscape(str: string) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+}