Merge pull request #1913 from microsoft/use_twoslash_libs

Update gatsby/react and switch to the lib version of twoslash

Author: Orta Therox

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

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.
 

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.

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",

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();

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",

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",

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

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
 }

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"
   },