@docusaurus/core 2.0.0-beta.15 → 2.0.0-beta.16

package/bin/beforeCli.mjs

@@ -0,0 +1,136 @@
+/**
+ * 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.
+ */
+
+// @ts-check
+
+import logger from '@docusaurus/logger';
+import fs from 'fs-extra';
+import semver from 'semver';
+import path from 'path';
+import updateNotifier from 'update-notifier';
+import boxen from 'boxen';
+import {createRequire} from 'module';
+
+const packageJson = createRequire(import.meta.url)('../package.json');
+const sitePkg = createRequire(path.join(process.cwd(), 'package.json'))(
+  './package.json',
+);
+
+const {
+  name,
+  version,
+  engines: {node: requiredVersion},
+} = packageJson;
+
+/**
+ * Notify user if `@docusaurus` packages are outdated
+ *
+ * Note: this is a 2-step process to avoid delaying cli usage by awaiting a
+ * response:
+ * - 1st run: trigger background job to check releases + store result
+ * - 2nd run: display potential update to users
+ *
+ * cache data is stored in `~/.config/configstore/update-notifier-@docusaurus`
+ */
+export default async function beforeCli() {
+  const notifier = updateNotifier({
+    pkg: {
+      name,
+      version,
+    },
+    // Check is in background so it's fine to use a small value like 1h
+    // Use 0 for debugging
+    updateCheckInterval: 1000 * 60 * 60,
+    // updateCheckInterval: 0
+  });
+
+  // Hacky way to ensure we check for updates on first run
+  // Note: the notification will only happen in the 2nd run
+  // See https://github.com/yeoman/update-notifier/issues/209
+  try {
+    if (
+      notifier.config &&
+      // @ts-expect-error: this is an internal API
+      !notifier.disabled &&
+      Date.now() - notifier.config.get('lastUpdateCheck') < 50
+    ) {
+      notifier.config.set('lastUpdateCheck', 0);
+      notifier.check();
+    }
+  } catch (err) {
+    // Do not stop cli if this fails, see https://github.com/facebook/docusaurus/issues/5400
+    logger.error(err);
+  }
+
+  /**
+   * We don't want to display update message for canary releases.
+   * See https://github.com/facebook/docusaurus/issues/5378
+   * @param {import('update-notifier').UpdateInfo} update
+   */
+  function ignoreUpdate(update) {
+    const isCanaryRelease =
+      update && update.current && update.current.startsWith('0.0.0');
+    return isCanaryRelease;
+  }
+
+  if (
+    notifier.config &&
+    notifier.update &&
+    semver.lt(notifier.update.current, notifier.update.latest)
+  ) {
+    // Because notifier clears cached data after reading it, leading to notifier
+    // not consistently displaying the update.
+    // See https://github.com/yeoman/update-notifier/issues/209
+    notifier.config.set('update', notifier.update);
+
+    if (ignoreUpdate(notifier.update)) {
+      return;
+    }
+
+    const siteDocusaurusPackagesForUpdate = Object.keys({
+      ...sitePkg.dependencies,
+      ...sitePkg.devDependencies,
+    })
+      .filter((p) => p.startsWith('@docusaurus'))
+      .map((p) => p.concat('@latest'))
+      .join(' ');
+    const isYarnUsed = await fs.pathExists(
+      path.resolve(process.cwd(), 'yarn.lock'),
+    );
+    const upgradeCommand = isYarnUsed
+      ? `yarn upgrade ${siteDocusaurusPackagesForUpdate}`
+      : `npm i ${siteDocusaurusPackagesForUpdate}`;
+
+    /** @type {import('boxen').Options} */
+    const boxenOptions = {
+      padding: 1,
+      margin: 1,
+      align: 'center',
+      borderColor: 'yellow',
+      borderStyle: 'round',
+    };
+
+    const docusaurusUpdateMessage = boxen(
+      `Update available ${logger.dim(
+        `${notifier.update.current}`,
+      )} → ${logger.green(`${notifier.update.latest}`)}
+
+  To upgrade Docusaurus packages with the latest version, run the following command:
+  ${logger.code(upgradeCommand)}`,
+      boxenOptions,
+    );
+
+    console.log(docusaurusUpdateMessage);
+  }
+
+  // notify user if node version needs to be updated
+  if (!semver.satisfies(process.version, requiredVersion)) {
+    logger.error('Minimum Node.js version not met :(');
+    logger.info`You are using Node.js number=${process.version}, Requirement: Node.js number=${requiredVersion}.`;
+    process.exit(1);
+  }
+}

package/bin/{docusaurus.js → docusaurus.mjs}

@@ -8,10 +8,11 @@
 
 // @ts-check
 
-const logger = require('@docusaurus/logger').default;
-const fs = require('fs');
-const cli = require('commander');
-const {
+import logger from '@docusaurus/logger';
+import fs from 'fs-extra';
+import cli from 'commander';
+import {createRequire} from 'module';
+import {
   build,
   swizzle,
   deploy,
@@ -21,13 +22,16 @@ const {
   clear,
   writeTranslations,
   writeHeadingIds,
-} = require('../lib');
+} from '../lib/index.js';
+import beforeCli from './beforeCli.mjs';
 
-require('./beforeCli');
+await beforeCli();
 
-const resolveDir = (dir = '.') => fs.realpathSync(dir);
+const resolveDir = (dir = '.') => fs.realpath(dir);
 
-cli.version(require('../package.json').version).usage('<command> [options]');
+cli
+  .version(createRequire(import.meta.url)('../package.json').version)
+  .usage('<command> [options]');
 
 cli
   .command('build [siteDir]')
@@ -52,8 +56,8 @@ cli
     '--no-minify',
     'build website without minimizing JS bundles (default: false)',
   )
-  .action((siteDir, {bundleAnalyzer, config, outDir, locale, minify}) => {
-    build(resolveDir(siteDir), {
+  .action(async (siteDir, {bundleAnalyzer, config, outDir, locale, minify}) => {
+    build(await resolveDir(siteDir), {
       bundleAnalyzer,
       outDir,
       config,
@@ -64,14 +68,28 @@ cli
 
 cli
   .command('swizzle [themeName] [componentName] [siteDir]')
-  .description('Copy the theme files into website folder for customization.')
+  .description(
+    'Wraps or ejects the original theme files into website folder for customization.',
+  )
+  .option(
+    '-w, --wrap',
+    'Creates a wrapper around the original theme component.\nAllows rendering other components before/after the original theme component.',
+  )
+  .option(
+    '-e, --eject',
+    'Ejects the full source code of the original theme component.\nAllows overriding the original component entirely with your own UI and logic.',
+  )
   .option(
-    '--typescript',
+    '-l, --list',
+    'only list the available themes/components without further prompting (default: false)',
+  )
+  .option(
+    '-t, --typescript',
     'copy TypeScript theme files when possible (default: false)',
   )
-  .option('--danger', 'enable swizzle for internal component of themes')
-  .action((themeName, componentName, siteDir, {typescript, danger}) => {
-    swizzle(resolveDir(siteDir), themeName, componentName, typescript, danger);
+  .option('--danger', 'enable swizzle for unsafe component of themes')
+  .action(async (themeName, componentName, siteDir, options) => {
+    swizzle(await resolveDir(siteDir), themeName, componentName, options);
   });
 
 cli
@@ -93,8 +111,8 @@ cli
     '--skip-build',
     'skip building website before deploy it (default: false)',
   )
-  .action((siteDir, {outDir, skipBuild, config}) => {
-    deploy(resolveDir(siteDir), {
+  .action(async (siteDir, {outDir, skipBuild, config}) => {
+    deploy(await resolveDir(siteDir), {
       outDir,
       config,
       skipBuild,
@@ -120,17 +138,19 @@ cli
     '--poll [interval]',
     'use polling rather than watching for reload (default: false). Can specify a poll interval in milliseconds',
   )
-  .action((siteDir, {port, host, locale, config, hotOnly, open, poll}) => {
-    start(resolveDir(siteDir), {
-      port,
-      host,
-      locale,
-      config,
-      hotOnly,
-      open,
-      poll,
-    });
-  });
+  .action(
+    async (siteDir, {port, host, locale, config, hotOnly, open, poll}) => {
+      start(await resolveDir(siteDir), {
+        port,
+        host,
+        locale,
+        config,
+        hotOnly,
+        open,
+        poll,
+      });
+    },
+  );
 
 cli
   .command('serve [siteDir]')
@@ -147,7 +167,7 @@ cli
   .option('--build', 'build website before serving (default: false)')
   .option('-h, --host <host>', 'use specified host (default: localhost)')
   .action(
-    (
+    async (
       siteDir,
       {
         dir = 'build',
@@ -157,7 +177,7 @@ cli
         config,
       },
     ) => {
-      serve(resolveDir(siteDir), {
+      serve(await resolveDir(siteDir), {
         dir,
         port,
         build: buildSite,
@@ -170,8 +190,8 @@ cli
 cli
   .command('clear [siteDir]')
   .description('Remove build artifacts.')
-  .action((siteDir) => {
-    clear(resolveDir(siteDir));
+  .action(async (siteDir) => {
+    clear(await resolveDir(siteDir));
   });
 
 cli
@@ -194,11 +214,11 @@ cli
     'allows to init new written messages with a given prefix. This might help you to highlight untranslated message to make them stand out in the UI',
   )
   .action(
-    (
+    async (
       siteDir,
       {locale = undefined, override = false, messagePrefix = '', config},
     ) => {
-      writeTranslations(resolveDir(siteDir), {
+      writeTranslations(await resolveDir(siteDir), {
         locale,
         override,
         config,
@@ -208,15 +228,15 @@ cli
   );
 
 cli
-  .command('write-heading-ids [contentDir] [files]')
+  .command('write-heading-ids [siteDir] [files...]')
   .description('Generate heading ids in Markdown content.')
   .option(
     '--maintain-case',
     "keep the headings' casing, otherwise make all lowercase (default: false)",
   )
   .option('--overwrite', 'overwrite existing heading IDs (default: false)')
-  .action((siteDir, files, options) =>
-    writeHeadingIds(resolveDir(siteDir), files, options),
+  .action(async (siteDir, files, options) =>
+    writeHeadingIds(await resolveDir(siteDir), files, options),
   );
 
 cli.arguments('<command>').action((cmd) => {
@@ -224,6 +244,9 @@ cli.arguments('<command>').action((cmd) => {
   logger.error`    Unknown command name=${cmd}.`;
 });
 
+/**
+ * @param {string} command
+ */
 function isInternalCommand(command) {
   return [
     'start',
@@ -239,8 +262,7 @@ function isInternalCommand(command) {
 
 async function run() {
   if (!isInternalCommand(process.argv.slice(2)[0])) {
-    // @ts-expect-error: Hmmm
-    await externalCommand(cli, resolveDir('.'));
+    await externalCommand(cli, await resolveDir('.'));
   }
 
   cli.parse(process.argv);
@@ -253,6 +275,6 @@ async function run() {
 run();
 
 process.on('unhandledRejection', (err) => {
-  logger.error(err.stack);
+  logger.error(err);
   process.exit(1);
 });

package/lib/babel/preset.d.ts

@@ -5,5 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 import type { ConfigAPI, TransformOptions } from '@babel/core';
-declare function babelPresets(api: ConfigAPI): TransformOptions;
-export default babelPresets;
+export default function babelPresets(api: ConfigAPI): TransformOptions;

package/lib/babel/preset.js

@@ -11,7 +11,8 @@ const path_1 = (0, tslib_1.__importDefault)(require("path"));
 function getTransformOptions(isServer) {
     const absoluteRuntimePath = path_1.default.dirname(require.resolve(`@babel/runtime/package.json`));
     return {
-        // All optional newlines and whitespace will be omitted when generating code in compact mode
+        // All optional newlines and whitespace will be omitted when generating code
+        // in compact mode
         compact: true,
         presets: [
             isServer
@@ -46,9 +47,9 @@ function getTransformOptions(isServer) {
                 {
                     corejs: false,
                     helpers: true,
-                    // By default, it assumes @babel/runtime@7.0.0. Since we use >7.0.0, better to
-                    // explicitly specify the version so that it can reuse the helper better
-                    // See https://github.com/babel/babel/issues/10261
+                    // By default, it assumes @babel/runtime@7.0.0. Since we use >7.0.0,
+                    // better to explicitly specify the version so that it can reuse the
+                    // helper better. See https://github.com/babel/babel/issues/10261
                     // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
                     version: require('@babel/runtime/package.json').version,
                     regenerator: true,

package/lib/choosePort.js

@@ -55,7 +55,7 @@ function getProcessForPort(port) {
         const command = getProcessCommand(processId);
         return logger_1.default.interpolate `code=${command} subdue=${`(pid ${processId})`} in path=${directory}`;
     }
-    catch (e) {
+    catch {
         return null;
     }
 }
@@ -64,41 +64,33 @@ function getProcessForPort(port) {
  * to choose another if port is already being used
  */
 async function choosePort(host, defaultPort) {
-    return (0, detect_port_1.default)({ port: defaultPort, hostname: host }).then((port) => new Promise((resolve) => {
+    try {
+        const port = await (0, detect_port_1.default)({ port: defaultPort, hostname: host });
         if (port === defaultPort) {
-            resolve(port);
-            return;
+            return port;
         }
         const message = process.platform !== 'win32' && defaultPort < 1024 && !(0, is_root_1.default)()
             ? `Admin permissions are required to run a server on a port below 1024.`
             : `Something is already running on port ${defaultPort}.`;
-        if (isInteractive) {
-            clearConsole();
-            const existingProcess = getProcessForPort(defaultPort);
-            const question = {
-                type: 'confirm',
-                name: 'shouldChangePort',
-                message: logger_1.default.yellow(`${logger_1.default.bold('[WARNING]')} ${message}${existingProcess ? ` Probably:\n  ${existingProcess}` : ''}
-
-Would you like to run the app on another port instead?`),
-                initial: true,
-            };
-            (0, prompts_1.default)(question).then((answer) => {
-                if (answer.shouldChangePort === true) {
-                    resolve(port);
-                }
-                else {
-                    resolve(null);
-                }
-            });
-        }
-        else {
+        if (!isInteractive) {
             logger_1.default.error(message);
-            resolve(null);
+            return null;
         }
-    }), (err) => {
-        throw new Error(`Could not find an open port at ${host}.
-${`Network error message: "${err.message || err}".`}`);
-    });
+        clearConsole();
+        const existingProcess = getProcessForPort(defaultPort);
+        const { shouldChangePort } = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'shouldChangePort',
+            message: logger_1.default.yellow(`${logger_1.default.bold('[WARNING]')} ${message}${existingProcess ? ` Probably:\n  ${existingProcess}` : ''}
+
+Would you like to run the app on another port instead?`),
+            initial: true,
+        });
+        return shouldChangePort ? port : null;
+    }
+    catch (err) {
+        logger_1.default.error `Could not find an open port at ${host}.`;
+        throw err;
+    }
 }
 exports.default = choosePort;

package/lib/client/App.d.ts

@@ -6,5 +6,4 @@
  */
 /// <reference types="react" />
 import './client-lifecycles-dispatcher';
-declare function App(): JSX.Element;
-export default App;
+export default function App(): JSX.Element;

package/lib/client/App.js

@@ -16,12 +16,17 @@ import './client-lifecycles-dispatcher';
 // TODO, quick fix for CSS insertion order
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import Error from '@theme/Error';
-function App() {
-    return (React.createElement(ErrorBoundary, { fallback: Error },
-        React.createElement(DocusaurusContextProvider, null,
-            React.createElement(BrowserContextProvider, null,
-                React.createElement(Root, null,
-                    React.createElement(BaseUrlIssueBanner, null),
-                    React.createElement(PendingNavigation, { routes: routes, delay: 1000 }, renderRoutes(routes)))))));
+export default function App() {
+    return (<ErrorBoundary fallback={Error}>
+      <DocusaurusContextProvider>
+        <BrowserContextProvider>
+          <Root>
+            <BaseUrlIssueBanner />
+            <PendingNavigation routes={routes} delay={1000}>
+              {renderRoutes(routes)}
+            </PendingNavigation>
+          </Root>
+        </BrowserContextProvider>
+      </DocusaurusContextProvider>
+    </ErrorBoundary>);
 }
-export default App;

package/lib/client/LinksCollector.js

@@ -23,5 +23,5 @@ const Context = createContext({
 });
 export const useLinksCollector = () => useContext(Context);
 export function ProvideLinksCollector({ children, linksCollector, }) {
-    return React.createElement(Context.Provider, { value: linksCollector }, children);
+    return <Context.Provider value={linksCollector}>{children}</Context.Provider>;
 }

package/lib/client/PendingNavigation.d.ts

@@ -8,7 +8,7 @@
 import React from 'react';
 import { type RouteComponentProps } from 'react-router-dom';
 import type { RouteConfig } from 'react-router-config';
-import type { Location } from '@docusaurus/history';
+import type { Location } from 'history';
 import './nprogress.css';
 interface Props extends RouteComponentProps {
     readonly routes: RouteConfig[];
@@ -23,9 +23,9 @@ declare class PendingNavigation extends React.Component<Props, State> {
     progressBarTimeout: NodeJS.Timeout | null;
     constructor(props: Props);
     shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
-    clearProgressBarTimeout(): void;
-    startProgressBar(delay: number): void;
-    stopProgressBar(): void;
+    private clearProgressBarTimeout;
+    private startProgressBar;
+    private stopProgressBar;
     render(): JSX.Element;
 }
 declare const _default: React.ComponentClass<Pick<Props, "routes" | "delay">, any> & import("react-router").WithRouterStatics<typeof PendingNavigation>;

package/lib/client/PendingNavigation.js

@@ -27,8 +27,8 @@ class PendingNavigation extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         const routeDidChange = nextProps.location !== this.props.location;
         const { routes, delay } = this.props;
-        // If `routeDidChange` is true, means the router is trying to navigate to a new
-        // route. We will preload the new route.
+        // If `routeDidChange` is true, means the router is trying to navigate to a
+        // new route. We will preload the new route.
         if (routeDidChange) {
             const nextLocation = normalizeLocation(nextProps.location);
             this.startProgressBar(delay);
@@ -46,9 +46,7 @@ class PendingNavigation extends React.Component {
                 });
                 // Route has loaded, we can reset previousLocation.
                 this.previousLocation = null;
-                this.setState({
-                    nextRouteHasLoaded: true,
-                }, this.stopProgressBar);
+                this.setState({ nextRouteHasLoaded: true }, this.stopProgressBar);
                 const { hash } = nextLocation;
                 if (!hash) {
                     window.scrollTo(0, 0);
@@ -92,7 +90,7 @@ class PendingNavigation extends React.Component {
     }
     render() {
         const { children, location } = this.props;
-        return (React.createElement(Route, { location: normalizeLocation(location), render: () => children }));
+        return (<Route location={normalizeLocation(location)} render={() => children}/>);
     }
 }
 export default withRouter(PendingNavigation);

package/lib/client/baseUrlIssueBanner/BaseUrlIssueBanner.d.ts

@@ -11,4 +11,12 @@ declare global {
         __DOCUSAURUS_INSERT_BASEURL_BANNER: boolean;
     }
 }
+/**
+ * We want to help the users with a bad baseUrl configuration (very common
+ * error) Help message is inlined, and hidden if JS or CSS is able to load
+ * Note: it might create false positives (ie network failures): not a big deal
+ * Note: we only inline this for the homepage to avoid polluting all the site's
+ * pages
+ * @see https://github.com/facebook/docusaurus/pull/3621
+ */
 export default function BaseUrlIssueBanner(): JSX.Element | null;

package/lib/client/baseUrlIssueBanner/BaseUrlIssueBanner.js

@@ -67,21 +67,26 @@ function BaseUrlIssueBannerEnabled() {
     useLayoutEffect(() => {
         window[InsertBannerWindowAttribute] = false;
     }, []);
-    return (React.createElement(React.Fragment, null,
-        !ExecutionEnvironment.canUseDOM && (React.createElement(Head, null,
-            React.createElement("script", null, createInlineScript(baseUrl)))),
-        React.createElement("div", { id: BannerContainerId })));
+    return (<>
+      {!ExecutionEnvironment.canUseDOM && (<Head>
+          <script>{createInlineScript(baseUrl)}</script>
+        </Head>)}
+      <div id={BannerContainerId}/>
+    </>);
 }
-// We want to help the users with a bad baseUrl configuration (very common error)
-// Help message is inlined, and hidden if JS or CSS is able to load
-// Note: it might create false positives (ie network failures): not a big deal
-// Note: we only inline this for the homepage to avoid polluting all the site's pages
-// See https://github.com/facebook/docusaurus/pull/3621
+/**
+ * We want to help the users with a bad baseUrl configuration (very common
+ * error) Help message is inlined, and hidden if JS or CSS is able to load
+ * Note: it might create false positives (ie network failures): not a big deal
+ * Note: we only inline this for the homepage to avoid polluting all the site's
+ * pages
+ * @see https://github.com/facebook/docusaurus/pull/3621
+ */
 export default function BaseUrlIssueBanner() {
     const { siteConfig: { baseUrl, baseUrlIssueBanner }, } = useDocusaurusContext();
     const { pathname } = useLocation();
     // returns true for the homepage during SRR
     const isHomePage = pathname === baseUrl;
     const enabled = baseUrlIssueBanner && isHomePage;
-    return enabled ? React.createElement(BaseUrlIssueBannerEnabled, null) : null;
+    return enabled ? <BaseUrlIssueBannerEnabled /> : null;
 }

package/lib/client/client-lifecycles-dispatcher.d.ts

@@ -4,9 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-interface Dispatchers {
-    onRouteUpdate: (...args: unknown[]) => void;
-    onRouteUpdateDelayed: (...args: unknown[]) => void;
-}
-declare const clientLifecyclesDispatchers: Dispatchers;
+import type { ClientModule } from '@docusaurus/types';
+declare const clientLifecyclesDispatchers: Required<ClientModule>;
 export default clientLifecyclesDispatchers;

package/lib/client/client-lifecycles-dispatcher.js

@@ -5,21 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import clientModules from '@generated/client-modules';
-function dispatchLifecycleAction(lifecycleAction, ...args) {
+function dispatchLifecycleAction(lifecycleAction, args) {
     clientModules.forEach((clientModule) => {
         var _a, _b;
-        const lifecycleFunction = (_b = (_a = clientModule === null || clientModule === void 0 ? void 0 : clientModule.default) === null || _a === void 0 ? void 0 : _a[lifecycleAction]) !== null && _b !== void 0 ? _b : clientModule[lifecycleAction];
-        if (lifecycleFunction) {
-            lifecycleFunction(...args);
-        }
+        const lifecycleFunction = ((_b = (_a = clientModule === null || clientModule === void 0 ? void 0 : clientModule.default) === null || _a === void 0 ? void 0 : _a[lifecycleAction]) !== null && _b !== void 0 ? _b : clientModule[lifecycleAction]);
+        lifecycleFunction === null || lifecycleFunction === void 0 ? void 0 : lifecycleFunction(...args);
     });
 }
 const clientLifecyclesDispatchers = {
     onRouteUpdate(...args) {
-        dispatchLifecycleAction('onRouteUpdate', ...args);
+        dispatchLifecycleAction('onRouteUpdate', args);
     },
     onRouteUpdateDelayed(...args) {
-        dispatchLifecycleAction('onRouteUpdateDelayed', ...args);
+        dispatchLifecycleAction('onRouteUpdateDelayed', args);
     },
 };
 export default clientLifecyclesDispatchers;