@docusaurus/core 2.0.0-beta.15d451942 → 2.0.0-beta.18

package/lib/commands/deploy.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
 const shelljs_1 = tslib_1.__importDefault(require("shelljs"));
-const chalk_1 = tslib_1.__importDefault(require("chalk"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+const utils_1 = require("@docusaurus/utils");
 const server_1 = require("../server");
 const build_1 = tslib_1.__importDefault(require("./build"));
 const path_1 = tslib_1.__importDefault(require("path"));
 const os_1 = tslib_1.__importDefault(require("os"));
-const buildRemoteBranchUrl_1 = require("./buildRemoteBranchUrl");
 // GIT_PASS env variable should not appear in logs
 function obfuscateGitPass(str) {
     const gitPass = process.env.GIT_PASS;
@@ -25,72 +25,99 @@ function obfuscateGitPass(str) {
 function shellExecLog(cmd) {
     try {
         const result = shelljs_1.default.exec(cmd);
-        console.log(`${chalk_1.default.cyan('CMD:')} ${obfuscateGitPass(cmd)} ${chalk_1.default.cyan(`(code=${result.code})`)}`);
+        logger_1.default.info `code=${obfuscateGitPass(cmd)} subdue=${`code: ${result.code}`}`;
         return result;
     }
-    catch (e) {
-        console.log(`${chalk_1.default.red('CMD:')} ${obfuscateGitPass(cmd)}`);
-        throw e;
+    catch (err) {
+        logger_1.default.error `code=${obfuscateGitPass(cmd)}`;
+        throw err;
     }
 }
 async function deploy(siteDir, cliOptions = {}) {
-    const { outDir, siteConfig, siteConfigPath } = await server_1.loadContext(siteDir, {
+    const { outDir, siteConfig, siteConfigPath } = await (0, server_1.loadContext)(siteDir, {
         customConfigFilePath: cliOptions.config,
         customOutDir: cliOptions.outDir,
     });
-    console.log('Deploy command invoked ...');
+    if (typeof siteConfig.trailingSlash === 'undefined') {
+        logger_1.default.warn(`When deploying to GitHub Pages, it is better to use an explicit "trailingSlash" site config.
+Otherwise, GitHub Pages will add an extra trailing slash to your site urls only on direct-access (not when navigation) with a server redirect.
+This behavior can have SEO impacts and create relative link issues.
+`);
+    }
+    logger_1.default.info('Deploy command invoked...');
     if (!shelljs_1.default.which('git')) {
         throw new Error('Git not installed or on the PATH!');
     }
+    // Source repo is the repo from where the command is invoked
+    const sourceRepoUrl = shelljs_1.default
+        .exec('git config --get remote.origin.url', { silent: true })
+        .stdout.trim();
+    // The source branch; defaults to the currently checked out branch
+    const sourceBranch = process.env.CURRENT_BRANCH ||
+        shelljs_1.default.exec('git rev-parse --abbrev-ref HEAD', { silent: true }).stdout.trim();
     const gitUser = process.env.GIT_USER;
-    if (!gitUser) {
-        throw new Error('Please set the GIT_USER environment variable!');
+    let useSSH = process.env.USE_SSH !== undefined &&
+        process.env.USE_SSH.toLowerCase() === 'true';
+    if (!gitUser && !useSSH) {
+        // If USE_SSH is unspecified: try inferring from repo URL
+        if (process.env.USE_SSH === undefined && (0, utils_1.hasSSHProtocol)(sourceRepoUrl)) {
+            useSSH = true;
+        }
+        else {
+            throw new Error('Please set the GIT_USER environment variable, or explicitly specify USE_SSH instead!');
+        }
     }
-    // The branch that contains the latest docs changes that will be deployed.
-    const currentBranch = process.env.CURRENT_BRANCH ||
-        shelljs_1.default.exec('git rev-parse --abbrev-ref HEAD').stdout.trim();
     const organizationName = process.env.ORGANIZATION_NAME ||
         process.env.CIRCLE_PROJECT_USERNAME ||
         siteConfig.organizationName;
     if (!organizationName) {
-        throw new Error(`Missing project organization name. Did you forget to define 'organizationName' in ${siteConfigPath}? You may also export it via the ORGANIZATION_NAME environment variable.`);
+        throw new Error(`Missing project organization name. Did you forget to define "organizationName" in ${siteConfigPath}? You may also export it via the ORGANIZATION_NAME environment variable.`);
     }
-    console.log(`${chalk_1.default.cyan('organizationName:')} ${organizationName}`);
+    logger_1.default.info `organizationName: name=${organizationName}`;
     const projectName = process.env.PROJECT_NAME ||
         process.env.CIRCLE_PROJECT_REPONAME ||
         siteConfig.projectName;
     if (!projectName) {
-        throw new Error(`Missing project name. Did you forget to define 'projectName' in ${siteConfigPath}? You may also export it via the PROJECT_NAME environment variable.`);
+        throw new Error(`Missing project name. Did you forget to define "projectName" in ${siteConfigPath}? You may also export it via the PROJECT_NAME environment variable.`);
     }
-    console.log(`${chalk_1.default.cyan('projectName:')} ${projectName}`);
+    logger_1.default.info `projectName: name=${projectName}`;
     // We never deploy on pull request.
     const isPullRequest = process.env.CI_PULL_REQUEST || process.env.CIRCLE_PULL_REQUEST;
     if (isPullRequest) {
-        shelljs_1.default.echo('Skipping deploy on a pull request');
+        shelljs_1.default.echo('Skipping deploy on a pull request.');
         shelljs_1.default.exit(0);
     }
-    // github.io indicates organization repos that deploy via master. All others use gh-pages.
-    const deploymentBranch = process.env.DEPLOYMENT_BRANCH ||
-        (projectName.indexOf('.github.io') !== -1 ? 'master' : 'gh-pages');
-    console.log(`${chalk_1.default.cyan('deploymentBranch:')} ${deploymentBranch}`);
+    // github.io indicates organization repos that deploy via default branch.
+    // All others use gh-pages. Organization deploys looks like:
+    // - Git repo: https://github.com/<organization>/<organization>.github.io
+    // - Site url: https://<organization>.github.io
+    const isGitHubPagesOrganizationDeploy = projectName.includes('.github.io');
+    if (isGitHubPagesOrganizationDeploy &&
+        !process.env.DEPLOYMENT_BRANCH &&
+        !siteConfig.deploymentBranch) {
+        throw new Error(`For GitHub pages organization deployments, 'docusaurus deploy' does not assume anymore that 'master' is your default Git branch.
+Please provide the branch name to deploy to as an environment variable, for example DEPLOYMENT_BRANCH=main or DEPLOYMENT_BRANCH=master .
+You can also set the deploymentBranch property in docusaurus.config.js .`);
+    }
+    const deploymentBranch = process.env.DEPLOYMENT_BRANCH || siteConfig.deploymentBranch || 'gh-pages';
+    logger_1.default.info `deploymentBranch: name=${deploymentBranch}`;
     const githubHost = process.env.GITHUB_HOST || siteConfig.githubHost || 'github.com';
     const githubPort = process.env.GITHUB_PORT || siteConfig.githubPort;
-    const gitPass = process.env.GIT_PASS;
-    let gitCredentials = `${gitUser}`;
-    if (gitPass) {
-        gitCredentials = `${gitCredentials}:${gitPass}`;
+    let deploymentRepoURL;
+    if (useSSH) {
+        deploymentRepoURL = (0, utils_1.buildSshUrl)(githubHost, organizationName, projectName, githubPort);
+    }
+    else {
+        const gitPass = process.env.GIT_PASS;
+        const gitCredentials = gitPass ? `${gitUser}:${gitPass}` : gitUser;
+        deploymentRepoURL = (0, utils_1.buildHttpsUrl)(gitCredentials, githubHost, organizationName, projectName, githubPort);
     }
-    const useSSH = process.env.USE_SSH;
-    const remoteBranch = buildRemoteBranchUrl_1.buildUrl(githubHost, githubPort, gitCredentials, organizationName, projectName, useSSH !== undefined && useSSH.toLowerCase() === 'true');
-    console.log(`${chalk_1.default.cyan('Remote branch:')} ${obfuscateGitPass(remoteBranch)}`);
+    logger_1.default.info `Remote repo URL: name=${obfuscateGitPass(deploymentRepoURL)}`;
     // Check if this is a cross-repo publish.
-    const currentRepoUrl = shelljs_1.default
-        .exec('git config --get remote.origin.url')
-        .stdout.trim();
-    const crossRepoPublish = !currentRepoUrl.endsWith(`${organizationName}/${projectName}.git`);
+    const crossRepoPublish = !sourceRepoUrl.endsWith(`${organizationName}/${projectName}.git`);
     // We don't allow deploying to the same branch unless it's a cross publish.
-    if (currentBranch === deploymentBranch && !crossRepoPublish) {
-        throw new Error(`You cannot deploy from this branch (${currentBranch}).` +
+    if (sourceBranch === deploymentBranch && !crossRepoPublish) {
+        throw new Error(`You cannot deploy from this branch (${sourceBranch}).` +
             '\nYou will need to checkout to a different branch!');
     }
     // Save the commit hash that triggers publish-gh-pages before checking
@@ -99,42 +126,32 @@ async function deploy(siteDir, cliOptions = {}) {
     const runDeploy = async (outputDirectory) => {
         const fromPath = outputDirectory;
         const toPath = await fs_extra_1.default.mkdtemp(path_1.default.join(os_1.default.tmpdir(), `${projectName}-${deploymentBranch}`));
-        if (shellExecLog(`git clone ${remoteBranch} ${toPath}`).code !== 0) {
-            throw new Error(`Error: git clone failed in ${toPath}`);
-        }
         shelljs_1.default.cd(toPath);
-        // If the default branch is the one we're deploying to, then we'll fail
-        // to create it. This is the case of a cross-repo publish, where we clone
-        // a github.io repo with a default master branch.
-        const defaultBranch = shelljs_1.default
-            .exec('git rev-parse --abbrev-ref HEAD')
-            .stdout.trim();
-        if (defaultBranch !== deploymentBranch) {
-            if (shellExecLog(`git checkout origin/${deploymentBranch}`).code !== 0) {
-                if (shellExecLog(`git checkout --orphan ${deploymentBranch}`).code !== 0) {
-                    throw new Error(`Error: Git checkout ${deploymentBranch} failed`);
-                }
-            }
-            else if (shellExecLog(`git checkout -b ${deploymentBranch}`).code +
-                shellExecLog(`git branch --set-upstream-to=origin/${deploymentBranch}`).code !==
-                0) {
-                throw new Error(`Error: Git checkout ${deploymentBranch} failed`);
-            }
+        // Check out deployment branch when cloning repository, and then remove all
+        // the files in the directory. If the 'clone' command fails, assume that
+        // the deployment branch doesn't exist, and initialize git in an empty
+        // directory, check out a clean deployment branch and add remote.
+        if (shellExecLog(`git clone --depth 1 --branch ${deploymentBranch} ${deploymentRepoURL} "${toPath}"`).code === 0) {
+            shellExecLog('git rm -rf .');
+        }
+        else {
+            shellExecLog('git init');
+            shellExecLog(`git checkout -b ${deploymentBranch}`);
+            shellExecLog(`git remote add origin ${deploymentRepoURL}`);
         }
-        shellExecLog('git rm -rf .');
         try {
             await fs_extra_1.default.copy(fromPath, toPath);
         }
-        catch (error) {
-            throw new Error(`Error: Copying build assets from "${fromPath}" to "${toPath}" failed with error '${error}'`);
+        catch (err) {
+            logger_1.default.error `Copying build assets from path=${fromPath} to path=${toPath} failed.`;
+            throw err;
         }
-        shelljs_1.default.cd(toPath);
         shellExecLog('git add --all');
         const commitMessage = process.env.CUSTOM_COMMIT_MESSAGE ||
             `Deploy website - based on ${currentCommit}`;
         const commitResults = shellExecLog(`git commit -m "${commitMessage}"`);
         if (shellExecLog(`git push --force origin ${deploymentBranch}`).code !== 0) {
-            throw new Error('Error: Git push failed');
+            throw new Error('Running "git push" command failed. Does the GitHub user account you are using have push access to the repository?');
         }
         else if (commitResults.code === 0) {
             // The commit might return a non-zero value when site is up to date.
@@ -148,18 +165,18 @@ async function deploy(siteDir, cliOptions = {}) {
                 // GitHub enterprise hosting.
                 websiteURL = `https://${githubHost}/pages/${organizationName}/${projectName}/`;
             }
-            shelljs_1.default.echo(`Website is live at ${websiteURL}`);
+            shelljs_1.default.echo(`Website is live at "${websiteURL}".`);
             shelljs_1.default.exit(0);
         }
     };
     if (!cliOptions.skipBuild) {
-        // Build static html files, then push to deploymentBranch branch of specified repo.
+        // Build site, then push to deploymentBranch branch of specified repo.
         try {
-            await runDeploy(await build_1.default(siteDir, cliOptions, false));
+            await runDeploy(await (0, build_1.default)(siteDir, cliOptions, false));
         }
-        catch (buildError) {
-            console.error(buildError);
-            process.exit(1);
+        catch (err) {
+            logger_1.default.error('Deployment of the build output failed.');
+            throw err;
         }
     }
     else {

package/lib/commands/external.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Command } from 'commander';
-export default function externalCommand(cli: Command, siteDir: string): Promise<void>;
+import type { CommanderStatic } from 'commander';
+export default function externalCommand(cli: CommanderStatic, siteDir: string): Promise<void>;

package/lib/commands/external.js

@@ -10,16 +10,12 @@ const tslib_1 = require("tslib");
 const server_1 = require("../server");
 const init_1 = tslib_1.__importDefault(require("../server/plugins/init"));
 async function externalCommand(cli, siteDir) {
-    const context = await server_1.loadContext(siteDir);
-    const pluginConfigs = server_1.loadPluginConfigs(context);
-    const plugins = init_1.default({ pluginConfigs, context });
+    const context = await (0, server_1.loadContext)(siteDir);
+    const pluginConfigs = await (0, server_1.loadPluginConfigs)(context);
+    const plugins = await (0, init_1.default)({ pluginConfigs, context });
     // Plugin Lifecycle - extendCli.
     plugins.forEach((plugin) => {
-        const { extendCli } = plugin;
-        if (!extendCli) {
-            return;
-        }
-        extendCli(cli);
+        plugin.extendCli?.(cli);
     });
 }
 exports.default = externalCommand;

package/lib/commands/serve.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ServeCLIOptions } from '@docusaurus/types';
+import type { ServeCLIOptions } from '@docusaurus/types';
 export default function serve(siteDir: string, cliOptions: ServeCLIOptions): Promise<void>;

package/lib/commands/serve.js

@@ -9,9 +9,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const http_1 = tslib_1.__importDefault(require("http"));
 const serve_handler_1 = tslib_1.__importDefault(require("serve-handler"));
-const boxen_1 = tslib_1.__importDefault(require("boxen"));
-const chalk_1 = tslib_1.__importDefault(require("chalk"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
 const path_1 = tslib_1.__importDefault(require("path"));
+const server_1 = require("../server");
 const build_1 = tslib_1.__importDefault(require("./build"));
 const commandUtils_1 = require("./commandUtils");
 async function serve(siteDir, cliOptions) {
@@ -19,28 +19,41 @@ async function serve(siteDir, cliOptions) {
         ? cliOptions.dir
         : path_1.default.join(siteDir, cliOptions.dir);
     if (cliOptions.build) {
-        dir = await build_1.default(siteDir, {
+        dir = await (0, build_1.default)(siteDir, {
             config: cliOptions.config,
             outDir: dir,
         }, false);
     }
-    const host = commandUtils_1.getCLIOptionHost(cliOptions.host);
-    const port = await commandUtils_1.getCLIOptionPort(cliOptions.port, host);
+    const host = (0, commandUtils_1.getCLIOptionHost)(cliOptions.host);
+    const port = await (0, commandUtils_1.getCLIOptionPort)(cliOptions.port, host);
     if (port === null) {
         process.exit();
     }
+    const { siteConfig: { baseUrl, trailingSlash }, } = await (0, server_1.loadSiteConfig)({
+        siteDir,
+        customConfigFilePath: cliOptions.config,
+    });
+    const servingUrl = `http://${host}:${port}`;
     const server = http_1.default.createServer((req, res) => {
-        serve_handler_1.default(req, res, {
+        // Automatically redirect requests to /baseUrl/
+        if (!req.url?.startsWith(baseUrl)) {
+            res.writeHead(302, {
+                Location: baseUrl,
+            });
+            res.end();
+            return;
+        }
+        // Remove baseUrl before calling serveHandler, because /baseUrl/ should
+        // serve /build/index.html, not /build/baseUrl/index.html (does not exist)
+        req.url = req.url?.replace(baseUrl, '/');
+        (0, serve_handler_1.default)(req, res, {
             cleanUrls: true,
             public: dir,
+            trailingSlash,
+            directoryListing: false,
         });
     });
-    console.log(boxen_1.default(`${chalk_1.default.green(`Serving ${cliOptions.dir}!`)}\n\n- Local: http://${cliOptions.host}:${port}`, {
-        borderColor: 'green',
-        padding: 1,
-        margin: 1,
-        align: 'center',
-    }));
+    logger_1.default.success `Serving path=${cliOptions.dir} directory at path=${servingUrl + baseUrl}.`;
     server.listen(port);
 }
 exports.default = serve;

package/lib/commands/start.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { StartCLIOptions } from '@docusaurus/types';
+import type { StartCLIOptions } from '@docusaurus/types';
 export default function start(siteDir: string, cliOptions: Partial<StartCLIOptions>): Promise<void>;

package/lib/commands/start.js

@@ -8,23 +8,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const utils_1 = require("@docusaurus/utils");
-const chalk = require("chalk");
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
 const chokidar_1 = tslib_1.__importDefault(require("chokidar"));
-const express_1 = tslib_1.__importDefault(require("express"));
 const html_webpack_plugin_1 = tslib_1.__importDefault(require("html-webpack-plugin"));
 const path_1 = tslib_1.__importDefault(require("path"));
-const lodash_1 = require("lodash");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const openBrowser_1 = tslib_1.__importDefault(require("react-dev-utils/openBrowser"));
 const WebpackDevServerUtils_1 = require("react-dev-utils/WebpackDevServerUtils");
-const errorOverlayMiddleware_1 = tslib_1.__importDefault(require("react-dev-utils/errorOverlayMiddleware"));
-// import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
-const evalSourceMapMiddleware_1 = tslib_1.__importDefault(require("../webpack/react-dev-utils-webpack5/evalSourceMapMiddleware"));
+const evalSourceMapMiddleware_1 = tslib_1.__importDefault(require("react-dev-utils/evalSourceMapMiddleware"));
 const webpack_1 = tslib_1.__importDefault(require("webpack"));
 const webpack_dev_server_1 = tslib_1.__importDefault(require("webpack-dev-server"));
 const webpack_merge_1 = tslib_1.__importDefault(require("webpack-merge"));
-const HotModuleReplacementPlugin_1 = tslib_1.__importDefault(require("webpack/lib/HotModuleReplacementPlugin"));
 const server_1 = require("../server");
-const constants_1 = require("../constants");
 const client_1 = tslib_1.__importDefault(require("../webpack/client"));
 const utils_2 = require("../webpack/utils");
 const commandUtils_1 = require("./commandUtils");
@@ -32,9 +27,9 @@ const translations_1 = require("../server/translations/translations");
 async function start(siteDir, cliOptions) {
     process.env.NODE_ENV = 'development';
     process.env.BABEL_ENV = 'development';
-    console.log(chalk.blue('Starting the development server...'));
+    logger_1.default.info('Starting the development server...');
     function loadSite() {
-        return server_1.load(siteDir, {
+        return (0, server_1.load)(siteDir, {
             customConfigFilePath: cliOptions.config,
             locale: cliOptions.locale,
             localizePath: undefined, // should this be configurable?
@@ -43,62 +38,69 @@ async function start(siteDir, cliOptions) {
     // Process all related files as a prop.
     const props = await loadSite();
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const host = commandUtils_1.getCLIOptionHost(cliOptions.host);
-    const port = await commandUtils_1.getCLIOptionPort(cliOptions.port, host);
+    const host = (0, commandUtils_1.getCLIOptionHost)(cliOptions.host);
+    const port = await (0, commandUtils_1.getCLIOptionPort)(cliOptions.port, host);
     if (port === null) {
         process.exit();
     }
     const { baseUrl, headTags, preBodyTags, postBodyTags } = props;
-    const urls = WebpackDevServerUtils_1.prepareUrls(protocol, host, port);
-    const openUrl = utils_1.normalizeUrl([urls.localUrlForBrowser, baseUrl]);
-    console.log(chalk.cyanBright(`Docusaurus website is running at: ${openUrl}`));
+    const urls = (0, WebpackDevServerUtils_1.prepareUrls)(protocol, host, port);
+    const openUrl = (0, utils_1.normalizeUrl)([urls.localUrlForBrowser, baseUrl]);
+    logger_1.default.success `Docusaurus website is running at path=${openUrl}.`;
     // Reload files processing.
-    const reload = lodash_1.debounce(() => {
+    const reload = lodash_1.default.debounce(() => {
         loadSite()
             .then(({ baseUrl: newBaseUrl }) => {
-            const newOpenUrl = utils_1.normalizeUrl([urls.localUrlForBrowser, newBaseUrl]);
+            const newOpenUrl = (0, utils_1.normalizeUrl)([urls.localUrlForBrowser, newBaseUrl]);
             if (newOpenUrl !== openUrl) {
-                console.log(chalk.cyanBright(`Docusaurus website is running at: ${newOpenUrl}`));
+                logger_1.default.success `Docusaurus website is running at path=${newOpenUrl}.`;
             }
         })
             .catch((err) => {
-            console.error(chalk.red(err.stack));
+            logger_1.default.error(err.stack);
         });
     }, 500);
-    const { siteConfig, plugins = [] } = props;
+    const { siteConfig, plugins } = props;
     const normalizeToSiteDir = (filepath) => {
         if (filepath && path_1.default.isAbsolute(filepath)) {
-            return utils_1.posixPath(path_1.default.relative(siteDir, filepath));
+            return (0, utils_1.posixPath)(path_1.default.relative(siteDir, filepath));
         }
-        return utils_1.posixPath(filepath);
+        return (0, utils_1.posixPath)(filepath);
     };
-    const pluginPaths = []
-        .concat(...plugins
-        .map((plugin) => { var _a, _b; return (_b = (_a = plugin.getPathsToWatch) === null || _a === void 0 ? void 0 : _a.call(plugin)) !== null && _b !== void 0 ? _b : []; })
-        .filter(Boolean))
+    const pluginPaths = plugins
+        .flatMap((plugin) => plugin.getPathsToWatch?.() ?? [])
+        .filter(Boolean)
         .map(normalizeToSiteDir);
     const pathsToWatch = [
         ...pluginPaths,
         props.siteConfigPath,
-        translations_1.getTranslationsLocaleDirPath({
+        (0, translations_1.getTranslationsLocaleDirPath)({
             siteDir,
             locale: props.i18n.currentLocale,
         }),
     ];
-    const fsWatcher = chokidar_1.default.watch(pathsToWatch, {
-        cwd: siteDir,
-        ignoreInitial: true,
+    const pollingOptions = {
         usePolling: !!cliOptions.poll,
         interval: Number.isInteger(cliOptions.poll)
             ? cliOptions.poll
             : undefined,
+    };
+    const httpsConfig = await (0, utils_2.getHttpsConfig)();
+    const fsWatcher = chokidar_1.default.watch(pathsToWatch, {
+        cwd: siteDir,
+        ignoreInitial: true,
+        ...{ pollingOptions },
     });
     ['add', 'change', 'unlink', 'addDir', 'unlinkDir'].forEach((event) => fsWatcher.on(event, reload));
-    let config = webpack_merge_1.default(client_1.default(props), {
+    let config = (0, webpack_merge_1.default)(await (0, client_1.default)(props), {
+        infrastructureLogging: {
+            // Reduce log verbosity, see https://github.com/facebook/docusaurus/pull/5420#issuecomment-906613105
+            level: 'warn',
+        },
         plugins: [
             // Generates an `index.html` file with the <script> injected.
             new html_webpack_plugin_1.default({
-                template: path_1.default.resolve(__dirname, '../client/templates/index.html.template.ejs'),
+                template: path_1.default.join(__dirname, '../webpack/templates/index.html.template.ejs'),
                 // So we can define the position where the scripts are injected.
                 inject: false,
                 filename: 'index.html',
@@ -107,84 +109,91 @@ async function start(siteDir, cliOptions) {
                 preBodyTags,
                 postBodyTags,
             }),
-            // This is necessary to emit hot updates for webpack-dev-server.
-            new HotModuleReplacementPlugin_1.default(),
         ],
     });
     // Plugin Lifecycle - configureWebpack and configurePostCss.
     plugins.forEach((plugin) => {
-        var _a;
         const { configureWebpack, configurePostCss } = plugin;
         if (configurePostCss) {
-            config = utils_2.applyConfigurePostCss(configurePostCss, config);
+            config = (0, utils_2.applyConfigurePostCss)(configurePostCss.bind(plugin), config);
         }
         if (configureWebpack) {
-            config = utils_2.applyConfigureWebpack(configureWebpack.bind(plugin), // The plugin lifecycle may reference `this`.
-            config, false, (_a = props.siteConfig.webpack) === null || _a === void 0 ? void 0 : _a.jsLoader);
+            config = (0, utils_2.applyConfigureWebpack)(configureWebpack.bind(plugin), // The plugin lifecycle may reference `this`.
+            config, false, props.siteConfig.webpack?.jsLoader, plugin.content);
         }
     });
-    // https://webpack.js.org/configuration/dev-server
-    const devServerConfig = {
-        ...{
-            compress: true,
-            clientLogLevel: 'error',
-            hot: true,
-            hotOnly: cliOptions.hotOnly,
-            // Use 'ws' instead of 'sockjs-node' on server since we're using native
-            // websockets in `webpackHotDevClient`.
-            transportMode: 'ws',
-            // Prevent a WS client from getting injected as we're already including
-            // `webpackHotDevClient`.
-            injectClient: false,
-            quiet: true,
-            https: utils_2.getHttpsConfig(),
-            headers: {
-                'access-control-allow-origin': '*',
-            },
-            publicPath: baseUrl,
-            watchOptions: {
-                ignored: /node_modules/,
-                poll: cliOptions.poll,
-            },
-            historyApiFallback: {
-                rewrites: [{ from: /\/*/, to: baseUrl }],
-            },
-            disableHostCheck: true,
-            // Disable overlay on browser since we use CRA's overlay error reporting.
-            overlay: false,
-            host,
-            before: (app, server) => {
-                app.use(baseUrl, express_1.default.static(path_1.default.resolve(siteDir, constants_1.STATIC_DIR_NAME)));
-                // This lets us fetch source contents from webpack for the error overlay.
-                app.use(evalSourceMapMiddleware_1.default(server));
-                // This lets us open files from the runtime error overlay.
-                app.use(errorOverlayMiddleware_1.default());
-            },
-        },
-    };
-    const compiler = webpack_1.default(config);
+    const compiler = (0, webpack_1.default)(config);
     if (process.env.E2E_TEST) {
         compiler.hooks.done.tap('done', (stats) => {
             if (stats.hasErrors()) {
-                console.log('E2E_TEST: Project has compiler errors.');
+                logger_1.default.error('E2E_TEST: Project has compiler errors.');
                 process.exit(1);
             }
-            console.log('E2E_TEST: Project can compile.');
+            logger_1.default.success('E2E_TEST: Project can compile.');
             process.exit(0);
         });
     }
-    const devServer = new webpack_dev_server_1.default(compiler, devServerConfig);
-    devServer.listen(port, host, (err) => {
-        if (err) {
-            console.log(err);
-        }
+    // https://webpack.js.org/configuration/dev-server
+    const defaultDevServerConfig = {
+        hot: cliOptions.hotOnly ? 'only' : true,
+        liveReload: false,
+        client: {
+            progress: true,
+            overlay: {
+                warnings: false,
+                errors: true,
+            },
+        },
+        headers: {
+            'access-control-allow-origin': '*',
+        },
+        devMiddleware: {
+            publicPath: baseUrl,
+            // Reduce log verbosity, see https://github.com/facebook/docusaurus/pull/5420#issuecomment-906613105
+            stats: 'summary',
+        },
+        static: siteConfig.staticDirectories.map((dir) => ({
+            publicPath: baseUrl,
+            directory: path_1.default.resolve(siteDir, dir),
+            watch: {
+                // Useful options for our own monorepo using symlinks!
+                // See https://github.com/webpack/webpack/issues/11612#issuecomment-879259806
+                followSymlinks: true,
+                ignored: /node_modules\/(?!@docusaurus)/,
+                ...{ pollingOptions },
+            },
+        })),
+        ...(httpsConfig && {
+            server: typeof httpsConfig === 'object'
+                ? {
+                    type: 'https',
+                    options: httpsConfig,
+                }
+                : 'https',
+        }),
+        historyApiFallback: {
+            rewrites: [{ from: /\/*/, to: baseUrl }],
+        },
+        allowedHosts: 'all',
+        host,
+        port,
+        setupMiddlewares: (middlewares, devServer) => {
+            // This lets us fetch source contents from webpack for the error overlay.
+            middlewares.unshift((0, evalSourceMapMiddleware_1.default)(devServer));
+            return middlewares;
+        },
+    };
+    // Allow plugin authors to customize/override devServer config
+    const devServerConfig = (0, webpack_merge_1.default)([defaultDevServerConfig, config.devServer].filter(Boolean));
+    const devServer = new webpack_dev_server_1.default(devServerConfig, compiler);
+    devServer.startCallback(() => {
         if (cliOptions.open) {
-            openBrowser_1.default(openUrl);
+            (0, openBrowser_1.default)(openUrl);
         }
     });
     ['SIGINT', 'SIGTERM'].forEach((sig) => {
         process.on(sig, () => {
-            devServer.close();
+            devServer.stop();
             process.exit();
         });
     });

package/lib/commands/swizzle/actions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 type { SwizzleAction, SwizzleComponentConfig } from '@docusaurus/types';
+import type { SwizzleOptions } from './common';
+export declare const SwizzleActions: SwizzleAction[];
+export declare function getAction(componentConfig: SwizzleComponentConfig, options: Pick<SwizzleOptions, 'wrap' | 'eject'>): Promise<SwizzleAction>;
+export declare type ActionParams = {
+    siteDir: string;
+    themePath: string;
+    componentName: string;
+};
+export declare type ActionResult = {
+    createdFiles: string[];
+};
+export declare function eject({ siteDir, themePath, componentName, }: ActionParams): Promise<ActionResult>;
+export declare function wrap({ siteDir, themePath, componentName: themeComponentName, typescript, importType, }: ActionParams & {
+    typescript: boolean;
+    importType?: 'original' | 'init';
+}): Promise<ActionResult>;