Merge branch 'facebook:main' into main

facebook · Aug 25, 2023 · a67a71f · a67a71f
2 parents b62999a + b3c8f5c
commit a67a71f
Show file tree

Hide file tree

Showing 35 changed files with 105 additions and 41 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,5 +1,5 @@
 {
-  "image": "mcr.microsoft.com/vscode/devcontainers/base:ubuntu-20.04",
+  "image": "mcr.microsoft.com/devcontainers/base:ubuntu-22.04",
   "settings": {
     "[typescript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode",

diff --git a/argos/tests/screenshot.css b/argos/tests/screenshot.css
@@ -13,6 +13,7 @@ article.yt-lite,
 .avatar__photo,
 img[src$='.gif'],
 h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b),
+.DocSearch-Button-Keys > kbd,
 [class*='playgroundPreview'] {
   visibility: hidden;
 }
@@ -24,3 +25,10 @@ Different docs last-update dates can alter layout
 .theme-last-updated {
   display: none;
 }
+
+/*
+Mermaid diagrams are rendered client-side and produce layout shifts
+ */
+.docusaurus-mermaid-container {
+  display: none;
+}
diff --git a/argos/tests/screenshot.spec.ts b/argos/tests/screenshot.spec.ts
@@ -13,6 +13,9 @@ const siteUrl = 'http://localhost:3000';
 const sitemapPath = '../website/build/sitemap.xml';
 const stylesheetPath = './tests/screenshot.css';
 
+// Use ONLY_PATH="/docs/installation" to debug a specific page
+const onlyPath: string | undefined = process.env.ONLY_PATH;
+
 // eslint-disable-next-line no-restricted-properties
 const sitemap = fs.readFileSync(sitemapPath).toString();
 // eslint-disable-next-line no-restricted-properties
@@ -28,6 +31,9 @@ function extractSitemapUrls() {
 }
 
 function isBlacklisted(pathname: string) {
+  if (onlyPath && onlyPath !== pathname) {
+    return true;
+  }
   // Some paths explicitly blacklisted
   const BlacklistedPathnames: string[] = [
     '/feature-requests', // Flaky because of Canny widget
@@ -75,10 +81,17 @@ function pathnameToArgosName(pathname: string): string {
   return pathname;
 }
 
+// See https://github.com/facebook/docusaurus/pull/9256
+// Docusaurus adds a <html data-has-hydrated="true">
+function waitForDocusaurusHydration() {
+  return document.documentElement.dataset.hasHydrated === 'true';
+}
+
 function createPathnameTest(pathname: string) {
   test(`pathname ${pathname}`, async ({page}) => {
     const url = siteUrl + pathname;
     await page.goto(url);
+    await page.waitForFunction(waitForDocusaurusHydration);
     await page.addStyleTag({content: stylesheet});
     // await expect(page).toHaveScreenshot({ fullPage: true, ...options });
     await argosScreenshot(page, pathnameToArgosName(pathname));

diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^29.5.3",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash": "^4.14.197",
     "@types/node": "^18.16.19",
     "@types/prompts": "^2.4.4",
     "@types/react": "^18.2.15",
@@ -116,6 +116,6 @@
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^29.0.0",
-    "typescript": "~5.0.4"
+    "typescript": "~5.2.2"
   }
 }
diff --git a/packages/create-docusaurus/bin/index.js b/packages/create-docusaurus/bin/index.js
@@ -31,7 +31,7 @@ program
   .arguments('[siteName] [template] [rootDir]')
   .option(
     '-p, --package-manager <manager>',
-    'The package manager used to install dependencies. One of yarn, npm, and pnpm.',
+    'The package manager used to install dependencies. One of yarn, npm, pnpm, and bun.',
   )
   .option(
     '-s, --skip-install',

diff --git a/packages/create-docusaurus/src/index.ts b/packages/create-docusaurus/src/index.ts
@@ -30,6 +30,7 @@ const lockfileNames = {
   npm: 'package-lock.json',
   yarn: 'yarn.lock',
   pnpm: 'pnpm-lock.yaml',
+  bun: 'bun.lockb',
 };
 
 type PackageManager = keyof typeof lockfileNames;
@@ -57,11 +58,12 @@ function findPackageManagerFromUserAgent(): PackageManager | undefined {
 async function askForPackageManagerChoice(): Promise<PackageManager> {
   const hasYarn = shell.exec('yarn --version', {silent: true}).code === 0;
   const hasPnpm = shell.exec('pnpm --version', {silent: true}).code === 0;
+  const hasBun = shell.exec('bun --version', {silent: true}).code === 0;
 
-  if (!hasYarn && !hasPnpm) {
+  if (!hasYarn && !hasPnpm && !hasBun) {
     return 'npm';
   }
-  const choices = ['npm', hasYarn && 'yarn', hasPnpm && 'pnpm']
+  const choices = ['npm', hasYarn && 'yarn', hasPnpm && 'pnpm', hasBun && 'bun']
     .filter((p): p is string => Boolean(p))
     .map((p) => ({title: p, value: p}));
 
@@ -524,7 +526,11 @@ export default async function init(
     logger.info`Installing dependencies with name=${pkgManager}...`;
     if (
       shell.exec(
-        pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install --color always`,
+        pkgManager === 'yarn'
+          ? 'yarn'
+          : pkgManager === 'bun'
+          ? 'bun install'
+          : `${pkgManager} install --color always`,
         {
           env: {
             ...process.env,
@@ -545,19 +551,21 @@ export default async function init(
   }
 
   const useNpm = pkgManager === 'npm';
+  const useBun = pkgManager === 'bun';
+  const useRunCommand = useNpm || useBun;
   logger.success`Created name=${cdpath}.`;
   logger.info`Inside that directory, you can run several commands:
 
   code=${`${pkgManager} start`}
     Starts the development server.
 
-  code=${`${pkgManager} ${useNpm ? 'run ' : ''}build`}
+  code=${`${pkgManager} ${useRunCommand ? 'run ' : ''}build`}
     Bundles your website into static files for production.
 
-  code=${`${pkgManager} ${useNpm ? 'run ' : ''}serve`}
+  code=${`${pkgManager} ${useRunCommand ? 'run ' : ''}serve`}
     Serves the built website locally.
 
-  code=${`${pkgManager} deploy`}
+  code=${`${pkgManager} ${useRunCommand ? 'run ' : ''}deploy`}
     Publishes the website to GitHub pages.
 
 We recommend that you begin by typing:

diff --git a/packages/create-docusaurus/templates/classic-typescript/package.json b/packages/create-docusaurus/templates/classic-typescript/package.json
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0-alpha.0",
     "@docusaurus/tsconfig": "3.0.0-alpha.0",
-    "typescript": "^5.0.4"
+    "typescript": "~5.2.2"
   },
   "browserslist": {
     "production": [

diff --git a/packages/docusaurus-plugin-content-docs/tsconfig.client.json b/packages/docusaurus-plugin-content-docs/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",

diff --git a/packages/docusaurus-plugin-debug/tsconfig.client.json b/packages/docusaurus-plugin-debug/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",

diff --git a/packages/docusaurus-plugin-google-analytics/tsconfig.client.json b/packages/docusaurus-plugin-google-analytics/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",

diff --git a/packages/docusaurus-plugin-google-gtag/tsconfig.client.json b/packages/docusaurus-plugin-google-gtag/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",

diff --git a/packages/docusaurus-plugin-google-tag-manager/tsconfig.client.json b/packages/docusaurus-plugin-google-tag-manager/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",

diff --git a/packages/docusaurus-plugin-ideal-image/tsconfig.client.json b/packages/docusaurus-plugin-ideal-image/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",

diff --git a/packages/docusaurus-plugin-pwa/tsconfig.client.json b/packages/docusaurus-plugin-pwa/tsconfig.client.json
@@ -7,6 +7,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
     "rootDir": "src",
     "outDir": "lib",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext"
   },

diff --git a/packages/docusaurus-plugin-pwa/tsconfig.worker.json b/packages/docusaurus-plugin-pwa/tsconfig.worker.json
@@ -8,6 +8,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-worker",
     "rootDir": "src",
     "outDir": "lib",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "types": ["node"]

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -891,7 +891,11 @@ declare module '@theme/MDXComponents' {
   import type Mermaid from '@theme/Mermaid';
   import type Head from '@docusaurus/Head';
 
-  export type MDXComponentsObject = {
+  import type {MDXProvider} from '@mdx-js/react';
+
+  type MDXComponentsBase = ComponentProps<typeof MDXProvider>['components'];
+
+  export type MDXComponentsObject = MDXComponentsBase & {
     readonly Head: typeof Head;
     readonly details: typeof MDXDetails;
 

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx
@@ -7,7 +7,6 @@
 
 import React, {useCallback, useState, useRef, useEffect} from 'react';
 import clsx from 'clsx';
-// @ts-expect-error: TODO, we need to make theme-classic have type: module
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/CodeBlock/CopyButton';

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ComponentProps} from 'react';
 import Head from '@docusaurus/Head';
 import MDXCode from '@theme/MDXComponents/Code';
 import MDXA from '@theme/MDXComponents/A';
@@ -28,12 +28,12 @@ const MDXComponents: MDXComponentsObject = {
   pre: MDXPre,
   ul: MDXUl,
   img: MDXImg,
-  h1: (props) => <MDXHeading as="h1" {...props} />,
-  h2: (props) => <MDXHeading as="h2" {...props} />,
-  h3: (props) => <MDXHeading as="h3" {...props} />,
-  h4: (props) => <MDXHeading as="h4" {...props} />,
-  h5: (props) => <MDXHeading as="h5" {...props} />,
-  h6: (props) => <MDXHeading as="h6" {...props} />,
+  h1: (props: ComponentProps<'h1'>) => <MDXHeading as="h1" {...props} />,
+  h2: (props: ComponentProps<'h2'>) => <MDXHeading as="h2" {...props} />,
+  h3: (props: ComponentProps<'h3'>) => <MDXHeading as="h3" {...props} />,
+  h4: (props: ComponentProps<'h4'>) => <MDXHeading as="h4" {...props} />,
+  h5: (props: ComponentProps<'h5'>) => <MDXHeading as="h5" {...props} />,
+  h6: (props: ComponentProps<'h6'>) => <MDXHeading as="h6" {...props} />,
   admonition: Admonition,
   mermaid: Mermaid,
 };

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
 import type {Props} from '@theme/MDXContent';

diff --git a/packages/docusaurus-theme-classic/tsconfig.client.json b/packages/docusaurus-theme-classic/tsconfig.client.json
@@ -7,6 +7,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
     "rootDir": "src",
     "outDir": "lib",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext"
   },

diff --git a/packages/docusaurus-theme-common/tsconfig.json b/packages/docusaurus-theme-common/tsconfig.json
@@ -4,6 +4,7 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "sourceMap": true,

diff --git a/packages/docusaurus-theme-live-codeblock/tsconfig.client.json b/packages/docusaurus-theme-live-codeblock/tsconfig.client.json
@@ -7,6 +7,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
     "rootDir": "src",
     "outDir": "lib",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext"
   },

diff --git a/packages/docusaurus-theme-mermaid/tsconfig.client.json b/packages/docusaurus-theme-mermaid/tsconfig.client.json
@@ -7,6 +7,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
     "rootDir": "src",
     "outDir": "lib",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext"
   },

diff --git a/packages/docusaurus-theme-mermaid/tsconfig.json b/packages/docusaurus-theme-mermaid/tsconfig.json
@@ -5,7 +5,6 @@
     "noEmit": false,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo",
-    "module": "commonjs",
     "rootDir": "src",
     "outDir": "lib"
   },

diff --git a/packages/docusaurus-theme-search-algolia/tsconfig.client.json b/packages/docusaurus-theme-search-algolia/tsconfig.client.json
@@ -7,6 +7,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
     "rootDir": "src",
     "outDir": "lib",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext"
   },

diff --git a/packages/docusaurus-tsconfig/tsconfig.json b/packages/docusaurus-tsconfig/tsconfig.json
@@ -7,7 +7,8 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "lib": ["DOM"],
-    "moduleResolution": "Node16",
+    "moduleResolution": "bundler",
+    "module": "esnext",
     "noEmit": true,
     "types": [
       "node",

diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
@@ -23,6 +23,7 @@ import SiteMetadataDefaults from './SiteMetadataDefaults';
 // TODO, quick fix for CSS insertion order
 // eslint-disable-next-line import/order
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import HasHydratedDataAttribute from './hasHydratedDataAttribute';
 
 export default function App(): JSX.Element {
   const routeElement = renderRoutes(routes);
@@ -39,6 +40,7 @@ export default function App(): JSX.Element {
               {routeElement}
             </PendingNavigation>
           </Root>
+          <HasHydratedDataAttribute />
         </BrowserContextProvider>
       </DocusaurusContextProvider>
     </ErrorBoundary>

diff --git a/packages/docusaurus/src/client/hasHydratedDataAttribute.tsx b/packages/docusaurus/src/client/hasHydratedDataAttribute.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Head from '@docusaurus/Head';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+// See https://github.com/facebook/docusaurus/pull/9256
+// Docusaurus adds a <html data-has-hydrated="true"> after hydration
+export default function HasHydratedDataAttribute(): JSX.Element {
+  const isBrowser = useIsBrowser();
+  return (
+    <Head>
+      <html data-has-hydrated={isBrowser} />
+    </Head>
+  );
+}
diff --git a/packages/docusaurus/tsconfig.client.json b/packages/docusaurus/tsconfig.client.json
@@ -5,6 +5,7 @@
     "composite": true,
     "incremental": true,
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "target": "esnext",
     "rootDir": "src",