@docusaurus/core 2.0.0-beta.1ec2c95e3 → 2.0.0-beta.21

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 declare function externalCommand(cli: CommanderStatic, siteDir: string): Promise<void>;

package/lib/commands/external.js

@@ -6,20 +6,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+exports.externalCommand = void 0;
 const server_1 = require("../server");
-const init_1 = tslib_1.__importDefault(require("../server/plugins/init"));
+const init_1 = 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 plugins = await (0, init_1.initPlugins)(context);
     // Plugin Lifecycle - extendCli.
     plugins.forEach((plugin) => {
-        const { extendCli } = plugin;
-        if (!extendCli) {
-            return;
-        }
-        extendCli(cli);
+        plugin.extendCli?.(cli);
     });
 }
-exports.default = externalCommand;
+exports.externalCommand = externalCommand;

package/lib/commands/serve.d.ts

@@ -4,5 +4,11 @@
  * 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';
-export default function serve(siteDir: string, cliOptions: ServeCLIOptions): Promise<void>;
+import { type HostPortOptions } from '../server/getHostPort';
+import type { LoadContextOptions } from '../server';
+export declare type ServeCLIOptions = HostPortOptions & Pick<LoadContextOptions, 'config'> & {
+    dir?: string;
+    build?: boolean;
+    open?: boolean;
+};
+export declare function serve(siteDir: string, cliOptions: Partial<ServeCLIOptions>): Promise<void>;

package/lib/commands/serve.js

@@ -6,60 +6,59 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.serve = void 0;
 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 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");
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+const utils_1 = require("@docusaurus/utils");
+const serve_handler_1 = tslib_1.__importDefault(require("serve-handler"));
+const openBrowser_1 = tslib_1.__importDefault(require("react-dev-utils/openBrowser"));
+const config_1 = require("../server/config");
+const build_1 = require("./build");
+const getHostPort_1 = require("../server/getHostPort");
 async function serve(siteDir, cliOptions) {
-    let dir = path_1.default.isAbsolute(cliOptions.dir)
-        ? cliOptions.dir
-        : path_1.default.join(siteDir, cliOptions.dir);
+    const buildDir = cliOptions.dir ?? utils_1.DEFAULT_BUILD_DIR_NAME;
+    let dir = path_1.default.resolve(siteDir, buildDir);
     if (cliOptions.build) {
-        dir = await build_1.default(siteDir, {
+        dir = await (0, build_1.build)(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, port } = await (0, getHostPort_1.getHostPort)(cliOptions);
     if (port === null) {
         process.exit();
     }
-    const { siteConfig: { baseUrl, trailingSlash }, } = await server_1.loadSiteConfig({
+    const { siteConfig: { baseUrl, trailingSlash }, } = await (0, config_1.loadSiteConfig)({
         siteDir,
         customConfigFilePath: cliOptions.config,
     });
-    const servingUrl = `http://${cliOptions.host}:${cliOptions.port}`;
+    const servingUrl = `http://${host}:${port}`;
     const server = http_1.default.createServer((req, res) => {
-        var _a, _b;
         // Automatically redirect requests to /baseUrl/
-        if (!((_a = req.url) === null || _a === void 0 ? void 0 : _a.startsWith(baseUrl))) {
+        if (!req.url?.startsWith(baseUrl)) {
             res.writeHead(302, {
                 Location: baseUrl,
             });
             res.end();
             return;
         }
-        // Remove baseUrl before calling serveHandler
-        // Reason: /baseUrl/ should serve /build/index.html, not /build/baseUrl/index.html (does not exist)
-        req.url = (_b = req.url) === null || _b === void 0 ? void 0 : _b.replace(baseUrl, '/');
-        serve_handler_1.default(req, res, {
+        // 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}" directory at "${servingUrl + baseUrl}".`), {
-        borderColor: 'green',
-        padding: 1,
-        margin: 1,
-        align: 'center',
-    }));
+    const url = servingUrl + baseUrl;
+    logger_1.default.success `Serving path=${buildDir} directory at: url=${url}`;
     server.listen(port);
+    if (cliOptions.open && !process.env.CI) {
+        (0, openBrowser_1.default)(url);
+    }
 }
-exports.default = serve;
+exports.serve = serve;

package/lib/commands/start.d.ts

@@ -4,5 +4,12 @@
  * 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';
-export default function start(siteDir: string, cliOptions: Partial<StartCLIOptions>): Promise<void>;
+import { type LoadContextOptions } from '../server';
+import { type HostPortOptions } from '../server/getHostPort';
+export declare type StartCLIOptions = HostPortOptions & Pick<LoadContextOptions, 'locale' | 'config'> & {
+    hotOnly?: boolean;
+    open?: boolean;
+    poll?: boolean | number;
+    minify?: boolean;
+};
+export declare function start(siteDir: string, cliOptions: Partial<StartCLIOptions>): Promise<void>;

package/lib/commands/start.js

@@ -6,99 +6,106 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.start = void 0;
 const tslib_1 = require("tslib");
+const path_1 = tslib_1.__importDefault(require("path"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
 const utils_1 = require("@docusaurus/utils");
-const chalk = require("chalk");
 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 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");
+const getHostPort_1 = require("../server/getHostPort");
 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, {
-            customConfigFilePath: cliOptions.config,
+        return (0, server_1.load)({
+            siteDir,
+            config: cliOptions.config,
             locale: cliOptions.locale,
-            localizePath: undefined, // should this be configurable?
+            localizePath: undefined, // Should this be configurable?
         });
     }
     // 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, port } = await (0, getHostPort_1.getHostPort)(cliOptions);
     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: url=${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: url=${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, cliOptions.minify), {
+        watchOptions: {
+            ignored: /node_modules\/(?!@docusaurus)/,
+            poll: cliOptions.poll,
+        },
+        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,86 +114,93 @@ 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`. // TODO remove this implicit api: inject in callback instead
-            config, false, (_a = props.siteConfig.webpack) === null || _a === void 0 ? void 0 : _a.jsLoader, plugin.content);
+            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();
         });
     });
 }
-exports.default = start;
+exports.start = start;

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 { SwizzleCLIOptions } from './common';
+export declare const SwizzleActions: SwizzleAction[];
+export declare function getAction(componentConfig: SwizzleComponentConfig, options: Pick<SwizzleCLIOptions, '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>;

package/lib/commands/swizzle/actions.js

@@ -0,0 +1,100 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrap = exports.eject = exports.getAction = exports.SwizzleActions = void 0;
+const tslib_1 = require("tslib");
+const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
+const path_1 = tslib_1.__importDefault(require("path"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+const utils_1 = require("@docusaurus/utils");
+const prompts_1 = require("./prompts");
+exports.SwizzleActions = ['wrap', 'eject'];
+async function getAction(componentConfig, options) {
+    if (options.wrap) {
+        return 'wrap';
+    }
+    if (options.eject) {
+        return 'eject';
+    }
+    return (0, prompts_1.askSwizzleAction)(componentConfig);
+}
+exports.getAction = getAction;
+async function isDir(dirPath) {
+    return ((await fs_extra_1.default.pathExists(dirPath)) && (await fs_extra_1.default.stat(dirPath)).isDirectory());
+}
+async function eject({ siteDir, themePath, componentName, }) {
+    const fromPath = path_1.default.join(themePath, componentName);
+    const isDirectory = await isDir(fromPath);
+    const globPattern = isDirectory
+        ? // Do we really want to copy all components?
+            path_1.default.join(fromPath, '*')
+        : `${fromPath}.*`;
+    const globPatternPosix = (0, utils_1.posixPath)(globPattern);
+    const filesToCopy = await (0, utils_1.Globby)(globPatternPosix, {
+        ignore: ['**/*.{story,stories,test,tests}.{js,jsx,ts,tsx}'],
+    });
+    if (filesToCopy.length === 0) {
+        // This should never happen
+        throw new Error(logger_1.default.interpolate `No files to copy from path=${fromPath} with glob code=${globPatternPosix}`);
+    }
+    const toPath = path_1.default.join(siteDir, utils_1.THEME_PATH);
+    await fs_extra_1.default.ensureDir(toPath);
+    const createdFiles = await Promise.all(filesToCopy.map(async (sourceFile) => {
+        const targetFile = path_1.default.join(toPath, path_1.default.relative(themePath, sourceFile));
+        try {
+            const fileContents = await fs_extra_1.default.readFile(sourceFile, 'utf-8');
+            await fs_extra_1.default.outputFile(targetFile, fileContents.trimStart().replace(/^\/\*.+?\*\/\s*/ms, ''));
+        }
+        catch (err) {
+            logger_1.default.error `Could not copy file from path=${sourceFile} to path=${targetFile}`;
+            throw err;
+        }
+        return targetFile;
+    }));
+    return { createdFiles };
+}
+exports.eject = eject;
+async function wrap({ siteDir, themePath, componentName: themeComponentName, typescript, importType = 'original', }) {
+    const isDirectory = await isDir(path_1.default.join(themePath, themeComponentName));
+    // Top/Parent/ComponentName => ComponentName
+    const componentName = lodash_1.default.last(themeComponentName.split('/'));
+    const wrapperComponentName = `${componentName}Wrapper`;
+    const wrapperFileName = `${themeComponentName}${isDirectory ? '/index' : ''}${typescript ? '.tsx' : '.js'}`;
+    await fs_extra_1.default.ensureDir(path_1.default.resolve(siteDir, utils_1.THEME_PATH));
+    const toPath = path_1.default.resolve(siteDir, utils_1.THEME_PATH, wrapperFileName);
+    const content = typescript
+        ? `import React, {ComponentProps} from 'react';
+import ${componentName} from '@theme-${importType}/${themeComponentName}';
+import type ${componentName}Type from '@theme/${themeComponentName}';
+
+type Props = ComponentProps<typeof ${componentName}Type>;
+
+export default function ${wrapperComponentName}(props: Props): JSX.Element {
+  return (
+    <>
+      <${componentName} {...props} />
+    </>
+  );
+}
+`
+        : `import React from 'react';
+import ${componentName} from '@theme-${importType}/${themeComponentName}';
+
+export default function ${wrapperComponentName}(props) {
+  return (
+    <>
+      <${componentName} {...props} />
+    </>
+  );
+}
+`;
+    await fs_extra_1.default.outputFile(toPath, content);
+    return { createdFiles: [toPath] };
+}
+exports.wrap = wrap;

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { NormalizedPluginConfig } from '../../server/plugins/configs';
+import type { InitializedPlugin, SwizzleAction, SwizzleActionStatus } from '@docusaurus/types';
+export declare const SwizzleActions: SwizzleAction[];
+export declare const SwizzleActionsStatuses: SwizzleActionStatus[];
+export declare const PartiallySafeHint: string;
+export declare function actionStatusLabel(status: SwizzleActionStatus): string;
+export declare function actionStatusColor(status: SwizzleActionStatus, str: string): string;
+export declare function actionStatusSuffix(status: SwizzleActionStatus, options?: {
+    partiallySafe?: boolean;
+}): string;
+export declare type SwizzlePlugin = {
+    instance: InitializedPlugin;
+    plugin: NormalizedPluginConfig;
+};
+export declare type SwizzleContext = {
+    plugins: SwizzlePlugin[];
+};
+export declare type SwizzleCLIOptions = {
+    typescript: boolean;
+    danger: boolean;
+    list: boolean;
+    wrap: boolean;
+    eject: boolean;
+};
+export declare function normalizeOptions(options: Partial<SwizzleCLIOptions>): SwizzleCLIOptions;
+export declare function findStringIgnoringCase(str: string, values: string[]): string | undefined;
+export declare function findClosestValue(str: string, values: string[], maxLevenshtein?: number): string | undefined;