microsoft · orta · Jul 26, 2021 · Jun 30, 2021 · Jul 26, 2021 · Jul 26, 2021
diff --git a/README.md b/README.md
@@ -65,7 +65,6 @@ The main website for TypeScript, a Gatsby website which is statically deployed.
 yarn start
 ```
 
-To save your time, twoslash is not applied to code-samples in `yarn start` - to launch the server with twoslash support use: `yarn start-twoslash`.
 To optimize even more, the env var `NO_TRANSLATIONS` as truthy will make the website only load pages for English.
 
 ## Sandbox

diff --git a/docs/Converting Twoslash Code Samples.md b/docs/Converting Twoslash Code Samples.md
@@ -1,6 +1,6 @@
 ### A Guide to Converting to Twoslash
 
-To run the site with Twoslash enabled you need to use `yarn start-twoslash`.
+To run the site with Twoslash enabled you need to use `yarn start`.
 
 Code samples on the TypeScript Website should run through [Twoslash](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher#typescript-twoslash) which lets the compiler do more of the work.
 

diff --git a/docs/Setup Troubleshooting.md b/docs/Setup Troubleshooting.md
@@ -4,10 +4,6 @@
 
 Sometimes, and it's not been tracked down exactly, some dependencies of the site aren't built even though it says they are. In those cases, re-run `yarn bootstrap` and `yarn build` to re-build all the internal site deps.
 
-#### No syntax highlighting
-
-By default the website runs without twoslash code samples being evaluated, this affects the syntax highlighting. To turn it on, use `yarn start-twoslash` instead of `yarn start`.
-
 #### Windows + Watchman
 
 The Windows support for watchman is a bit meh. It's not likely to get better, given how well WSL works now. So, you _could_ use WSL to work around that.

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "fb-watchman": "^2.0.1",
     "git-branch-is": "^3.1.0",
     "husky": "^4.2.3",
-    "pleb": "^2.5.6",
+    "pleb": "^2.6.1",
     "reflect-metadata": "^0.1.13"
   },
   "resolutions": {
@@ -26,7 +26,8 @@
     "typescript": "4.4.0-dev.20210627",
     "tslib": "2.1.0",
     "prettier": "^2.0.2",
-    "shelljs": "0.8.4"
+    "shelljs": "0.8.4",
+    "sharp": "0.28.1"
   },
   "jest": {
     "transformIgnorePatterns": [
@@ -36,7 +37,6 @@
   "scripts": {
     "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\"",
-    "start-twoslash": "concurrently -p \"[{name}]\" -n \"BUILD,SITE\" -c \"bgBlue.bold,bgMagenta.bold\" \"node watcher.js\" \"yarn workspace typescriptlang-org start-twoslash\"",
     "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",
@@ -47,7 +47,7 @@
     "update-test-snapshots": "CI=true yarn workspaces foreach --include gatsby-remark-shiki-twoslash  --include @typescript/twoslash --include shiki-twoslash --include @typescript/vfs run test -u"
   },
   "dependencies": {
-    "@oss-docs/sync": "^1.1.1",
+    "@oss-docs/sync": "^1.1.3",
     "@types/express": "^4.17.6",
     "gray-matter": "4.0.2",
     "node-polyfill-webpack-plugin": "^1.1.0",

diff --git a/packages/glossary/scripts/lint.js b/packages/glossary/scripts/lint.js
@@ -12,7 +12,7 @@ const { readdirSync, readFileSync } = require("fs");
 const { join } = require("path");
 
 const remark = require("remark");
-const remarkTwoSlash = require("gatsby-remark-shiki-twoslash");
+const remarkTwoSlash = require("remark-shiki-twoslash");
 
 const { read } = require("gray-matter");
 
@@ -25,62 +25,65 @@ const filterString = process.argv[2] ? process.argv[2] : "";
 
 const errorReports = [];
 
-languages.forEach((lang) => {
-  console.log("\n\nLanguage: " + chalk.bold(lang) + "\n");
+const go = async () => {
+  for (const lang of languages) {
+    console.log("\n\nLanguage: " + chalk.bold(lang) + "\n");
 
-  const locale = join(__dirname, "..", "copy", lang);
-  let options;
+    const locale = join(__dirname, "..", "copy", lang);
+    let options;
 
-  try {
-    options = readdirSync(join(locale)).filter((f) => !f.startsWith("."));
-  } catch {
-    errorReports.push({
-      path: join(locale, "options"),
-      error: `Options directory ${join(locale, "options")} doesn't exist`,
-    });
-    return;
-  }
+    try {
+      options = readdirSync(join(locale)).filter((f) => !f.startsWith("."));
+    } catch {
+      errorReports.push({
+        path: join(locale, "options"),
+        error: `Options directory ${join(locale, "options")} doesn't exist`,
+      });
+      return;
+    }
 
-  options.forEach((option) => {
-    if (filterString.length && !option.includes(filterString)) return;
+    for (const option of options) {
+      if (filterString.length && !option.includes(filterString)) return;
 
-    const optionPath = join(locale, option);
+      const optionPath = join(locale, option);
 
-    const markdown = readFileSync(optionPath, "utf8");
-    const markdownAST = remark().parse(markdown);
-    let hasError = false;
+      const markdown = readFileSync(optionPath, "utf8");
+      const markdownAST = remark().parse(markdown);
+      let hasError = false;
 
-    try {
-      remarkTwoSlash.runTwoSlashAcrossDocument({ markdownAST }, {});
-    } catch (error) {
-      hasError = true;
-      errorReports.push({ path: optionPath, error });
-    }
+      try {
+        await remarkTwoSlash.default({})(markdownAST);
+      } catch (error) {
+        hasError = true;
+        errorReports.push({ path: optionPath, error });
+      }
 
-    const optionFile = read(optionPath);
-    if (!optionFile.data.display) {
-      hasError = true;
-      // prettier-ignore
-      errorReports.push({ path: optionPath, error: new Error("Did not have a 'display' property in the YML header") });
+      const optionFile = read(optionPath);
+      if (!optionFile.data.display) {
+        hasError = true;
+        // prettier-ignore
+        errorReports.push({ path: optionPath, error: new Error("Did not have a 'display' property in the YML header") });
+      }
+
+      const sigil = hasError ? cross : tick;
+      const name = hasError ? chalk.red(option) : option;
+      process.stdout.write(name + " " + sigil + ", ");
     }
+  }
+
+  if (errorReports.length) {
+    process.exitCode = 1;
 
-    const sigil = hasError ? cross : tick;
-    const name = hasError ? chalk.red(option) : option;
-    process.stdout.write(name + " " + sigil + ", ");
-  });
-});
-
-if (errorReports.length) {
-  process.exitCode = 1;
-
-  errorReports.forEach((err) => {
-    console.log(`\n> ${chalk.bold.red(err.path)}\n`);
-    err.error.stack = undefined;
-    console.log(err.error);
-  });
-  console.log("\n\n");
-
-  console.log(
-    "Note: you can add an extra argument to the lint script ( yarn workspace glossary lint [opt] ) to just run one lint."
-  );
-}
+    errorReports.forEach((err) => {
+      console.log(`\n> ${chalk.bold.red(err.path)}\n`);
+      err.error.stack = undefined;
+      console.log(err.error);
+    });
+    console.log("\n\n");
+
+    console.log(
+      "Note: you can add an extra argument to the lint script ( yarn workspace glossary lint [opt] ) to just run one lint."
+    );
+  }
+};
+go();
diff --git a/packages/handbook-epub/package.json b/packages/handbook-epub/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "fs-jetpack": "^2.4.0",
-    "gatsby-remark-shiki-twoslash": "2.0.0",
+    "gatsby-remark-shiki-twoslash": "3.0.14",
     "playwright": "^1.9.1",
     "sass": "*",
     "streampub": "https://github.com/orta/streampub-1.git#ibooks",

diff --git a/packages/typescript-vfs/package.json b/packages/typescript-vfs/package.json
@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@types/jest": "^25.1.3",
+    "babel-jest": "^26.0.6",
     "cpy-cli": "^3.1.1",
     "tsdx": "^0.14.1",
     "tslib": "^1.10.0",

diff --git a/packages/typescriptlang-org/gatsby-config.js b/packages/typescriptlang-org/gatsby-config.js
@@ -66,7 +66,7 @@ module.exports = {
       resolve: `gatsby-plugin-sitemap`,
       options: {
         // Skip handbook v2 frmo appearing in search
-        exclude: [`*/2/*`, `*/glossary`, `*/vo/*`],
+        excludes: [`*/2/*`, `*/glossary`, `*/vo/*`],
       },
     },
     // Lets you edit the head from inside a react tree

diff --git a/packages/typescriptlang-org/lib/bootup/createPages.ts b/packages/typescriptlang-org/lib/bootup/createPages.ts
@@ -23,5 +23,5 @@ export const createPages: GatsbyNode["createPages"] = async args => {
   await createTSConfigSingleFlagPages(args.graphql, args.actions.createPage)
   await createRootPagesLocalized(args.graphql, args.actions.createPage)
 
-  return null
+  return undefined
 }
diff --git a/packages/typescriptlang-org/package.json b/packages/typescriptlang-org/package.json
@@ -14,8 +14,7 @@
     "setup-staging": "node scripts/setupStaging.mjs",
     "create-lighthouse-json": "node scripts/createLighthouseJSON.js",
     "compile-index-examples": "node scripts/runTwoslashIndexExamples.js light; node scripts/runTwoslashIndexExamples.js dark",
-    "start": "TWOSLASH_DISABLE=true gatsby develop",
-    "start-twoslash": "gatsby develop",
+    "start": "gatsby develop",
     "serve": "gatsby serve",
     "test": "yarn tsc && jest"
   },
@@ -28,34 +27,34 @@
     "@typescript/sandbox": "0.1.0",
     "@typescript/twoslash": "2.1.0",
     "canvas": "^2.6.1",
-    "gatsby": "^3.2.1",
-    "gatsby-link": "3.2.0",
-    "gatsby-plugin-catch-links": "^3.2.0",
+    "gatsby": "^3.8.1",
+    "gatsby-link": "3.10.0",
+    "gatsby-plugin-catch-links": "^3.10.0",
     "gatsby-plugin-client-side-redirect": "orta/gatsby-plugin-client-side-redirect#index",
     "gatsby-plugin-i18n": "^1.0.1",
-    "gatsby-plugin-manifest": "^3.2.0",
-    "gatsby-plugin-offline": "^4.2.0",
-    "gatsby-plugin-react-helmet": "^4.2.0",
-    "gatsby-plugin-sass": "^4.2.0",
-    "gatsby-plugin-sharp": "^3.2.1",
-    "gatsby-plugin-sitemap": "^3.2.0",
-    "gatsby-plugin-typegen": "^2.2.1",
-    "gatsby-react-router-scroll": "4.2.0",
-    "gatsby-remark-autolink-headers": "^3.2.0",
-    "gatsby-remark-copy-linked-files": "^3.2.0",
+    "gatsby-plugin-manifest": "^3.10.0",
+    "gatsby-plugin-offline": "^4.10.0",
+    "gatsby-plugin-react-helmet": "^4.10.0",
+    "gatsby-plugin-sass": "^4.10.0",
+    "gatsby-plugin-sharp": "^3.10.2",
+    "gatsby-plugin-sitemap": "^4.6.0",
+    "gatsby-plugin-typegen": "^2.2.4",
+    "gatsby-react-router-scroll": "4.10.0",
+    "gatsby-remark-autolink-headers": "^4.7.0",
+    "gatsby-remark-copy-linked-files": "^4.7.0",
     "gatsby-remark-emojis": "^0.4.3",
-    "gatsby-remark-images": "^4.2.0",
-    "gatsby-remark-responsive-iframe": "^3.2.0",
-    "gatsby-remark-shiki-twoslash": "^2.0.1",
-    "gatsby-remark-smartypants": "^3.2.0",
-    "gatsby-source-filesystem": "^3.2.0",
-    "gatsby-transformer-remark": "^3.2.0",
+    "gatsby-remark-images": "^5.7.0",
+    "gatsby-remark-responsive-iframe": "^4.7.0",
+    "gatsby-remark-shiki-twoslash": "^3.0.14",
+    "gatsby-remark-smartypants": "^4.7.0",
+    "gatsby-source-filesystem": "^3.8.0",
+    "gatsby-transformer-remark": "^4.7.0",
     "jsdom": "^16.2.0",
-    "preact": "^10.5.5",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1",
-    "react-intl": "^3.12.0",
+    "preact": "^10.5.13",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
+    "react-intl": "^3.12.1",
     "rehype-shiki": "^0.0.7",
     "sass": "^1.26.10",
     "ts-debounce": "^2.2.0",
@@ -68,7 +67,7 @@
     "@types/react": "^16.9.20",
     "@types/react-dom": "^16.9.5",
     "concurrently": "^5.1.0",
-    "gatsby-plugin-typescript": "^3.2.0",
+    "gatsby-plugin-typescript": "^3.10.0",
     "jest": "*",
     "ts-jest": "^26.4.4"
   },

diff --git a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
@@ -7,7 +7,6 @@ import { ShowErrorsExample } from "./twoslash/generated/showErrors";
 import { ReactExample } from "./twoslash/generated/react";
 import { TypeDefinitionsExample } from "./twoslash/generated/typeDefinitions";
 import { InterfaceExample } from "./twoslash/generated/interface";
-import { setupTwoslashHovers } from "shiki-twoslash/dist/dom"
 
 // prettier-ignore
 const ts = () => <svg fill="none" height="8" viewBox="0 0 14 8" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m6.72499 1.47255h-2.3375v6.32987h-1.71875v-6.32987h-2.337502v-1.117035h6.325002v1.117035zm5.29371 4.40609c0-.31029-.1375-.49646-.3437-.68264-.2063-.18617-.6188-.31028-1.1688-.49646-.96246-.24823-1.71871-.55852-2.26871-.93086-.48125-.37235-.75625-.80675-.75625-1.42732 0-.62058.275-1.11704.89375-1.489385.55-.372345 1.30625-.558518 2.20001-.558518.8937 0 1.65.24823 2.2.682633.55.4344.825.99292.825 1.6135h-1.5813c0-.37235-.1375-.62058-.4125-.86881-.275-.18617-.6187-.31029-1.1-.31029-.4125 0-.75621.06206-1.03121.24823-.275.18618-.34375.43441-.34375.68264s.1375.4344.4125.62057.68746.31029 1.37496.49646c.8938.24823 1.5813.55852 2.0625.93087.4813.37234.6875.8688.6875 1.48938 0 .62057-.275 1.17909-.825 1.48938-.55.37234-1.3062.55852-2.2.55852-.89371 0-1.71871-.18618-2.33746-.62058s-1.03125-.99292-.9625-1.79967h1.65c0 .4344.1375.74469.48125.99292.275.18617.75621.31029 1.23751.31029.4812 0 .825-.06206 1.0312-.24823.1375-.18617.275-.4344.275-.68263z" fill="#719af4" /></svg>;
@@ -40,11 +39,7 @@ export const EditorExamples = () => {
   const next = (e) => {
     if (index + 1 === explanations.length) loadIndex(0);
     else loadIndex(index + 1);
-    // Timeout gives the async react reconcilation to happen
-    setTimeout(() => {
-      setupTwoslashHovers()
-    }, 100)
-
+
     e.preventDefault();
     return false;
   };

diff --git a/packages/typescriptlang-org/src/templates/documentation.tsx b/packages/typescriptlang-org/src/templates/documentation.tsx
@@ -16,7 +16,6 @@ import { createInternational } from "../lib/createInternational"
 import { useIntl } from "react-intl"
 import { createIntlLink } from "../components/IntlLink"
 import { handbookCopy } from "../copy/en/handbook"
-import { setupTwoslashHovers } from "shiki-twoslash/dist/dom"
 import { Contributors } from "../components/handbook/Contributors"
 import { overrideSubNavLinksWithSmoothScroll, updateSidebarOnScroll } from "./scripts/setupSubNavigationSidebar"
 import { setupLikeDislikeButtons } from "./scripts/setupLikeDislikeButtons"
@@ -70,7 +69,6 @@ const HandbookTemplate: React.FC<Props> = (props) => {
     // Sets current selection
     updateSidebarOnScroll()
 
-    setupTwoslashHovers()
     setupLikeDislikeButtons(props.pageContext.slug, i)
 
 

diff --git a/packages/typescriptlang-org/src/templates/glossary.tsx b/packages/typescriptlang-org/src/templates/glossary.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React from "react"
 import { graphql } from "gatsby"
 
 import { Layout } from "../components/layout"
@@ -11,8 +11,6 @@ import { headCopy } from "../copy/en/head-seo"
 import "./markdown.scss"
 import "./glossary.scss"
 
-import { setupTwoslashHovers } from "shiki-twoslash/dist/dom"
-
 type Props = { pageContext: any, data: GatsbyTypes.TSConfigReferenceTemplateQuery, path: string }
 
 const GlossaryTemplateComponent = (props) => {
@@ -24,10 +22,6 @@ const GlossaryTemplateComponent = (props) => {
     return <div></div>
   }
 
-  useEffect(() => {
-    setupTwoslashHovers()
-  }, [])
-
   const meta = props.pageContext.languageMeta as typeof import("../../../glossary/output/en.json")
   return (
     <Layout title={i("tsconfig_title")} description={i("tsconfig_description")} lang={props.pageContext.locale}>