Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 26, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/Converting Twoslash Code Samples.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
4 changes: 0 additions & 4 deletions docs/Setup Troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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": [
Expand All @@ -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",
Expand All @@ -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",
Expand Down
105 changes: 54 additions & 51 deletions packages/glossary/scripts/lint.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand All @@ -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();
2 changes: 1 addition & 1 deletion packages/handbook-epub/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/typescript-vfs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/typescriptlang-org/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/typescriptlang-org/lib/bootup/createPages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
53 changes: 26 additions & 27 deletions packages/typescriptlang-org/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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",
Expand All @@ -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"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down Expand Up @@ -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;
};
Expand Down
2 changes: 0 additions & 2 deletions packages/typescriptlang-org/src/templates/documentation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -70,7 +69,6 @@ const HandbookTemplate: React.FC<Props> = (props) => {
// Sets current selection
updateSidebarOnScroll()

setupTwoslashHovers()
setupLikeDislikeButtons(props.pageContext.slug, i)


Expand Down
8 changes: 1 addition & 7 deletions packages/typescriptlang-org/src/templates/glossary.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from "react"
import React from "react"
import { graphql } from "gatsby"

import { Layout } from "../components/layout"
Expand All @@ -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) => {
Expand All @@ -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}>
Expand Down
Loading