@docusaurus/core 2.0.0-beta.1decd6f80 → 2.0.0-beta.20

package/lib/server/plugins/pluginIds.js

@@ -7,17 +7,22 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureUniquePluginInstanceIds = void 0;
-const lodash_1 = require("lodash");
-const constants_1 = require("../../constants");
-// It is forbidden to have 2 plugins of the same name sharing the same id
-// this is required to support multi-instance plugins without conflict
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("@docusaurus/utils");
+/**
+ * It is forbidden to have 2 plugins of the same name sharing the same ID.
+ * This is required to support multi-instance plugins without conflict.
+ */
 function ensureUniquePluginInstanceIds(plugins) {
-    const pluginsByName = lodash_1.groupBy(plugins, (p) => p.name);
+    const pluginsByName = lodash_1.default.groupBy(plugins, (p) => p.name);
     Object.entries(pluginsByName).forEach(([pluginName, pluginInstances]) => {
-        const pluginInstancesById = lodash_1.groupBy(pluginInstances, (p) => { var _a; return (_a = p.options.id) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_PLUGIN_ID; });
+        const pluginInstancesById = lodash_1.default.groupBy(pluginInstances, (p) => p.options.id ?? utils_1.DEFAULT_PLUGIN_ID);
         Object.entries(pluginInstancesById).forEach(([pluginId, pluginInstancesWithId]) => {
             if (pluginInstancesWithId.length !== 1) {
-                throw new Error(`Plugin ${pluginName} is used ${pluginInstancesWithId.length} times with id=${pluginId}.\nTo use the same plugin multiple times on a Docusaurus site, you need to assign a unique id to each plugin instance.`);
+                throw new Error(`Plugin "${pluginName}" is used ${pluginInstancesWithId.length} times with ID "${pluginId}".\nTo use the same plugin multiple times on a Docusaurus site, you need to assign a unique ID to each plugin instance.${pluginId === utils_1.DEFAULT_PLUGIN_ID
+                    ? `\n\nThe plugin ID is "${utils_1.DEFAULT_PLUGIN_ID}" by default. It's possible that the preset you are using already includes a plugin instance, in which case you either want to disable the plugin in the preset (to use a single instance), or assign another ID to your extra plugin instance (to use multiple instances).`
+                    : ''}`);
             }
         });
     });

package/lib/server/plugins/presets.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { LoadContext, DocusaurusConfig } from '@docusaurus/types';
+/**
+ * Calls preset functions, aggregates each of their return values, and returns
+ * the plugin and theme configs.
+ */
+export declare function loadPresets(context: LoadContext): Promise<Pick<DocusaurusConfig, 'plugins' | 'themes'>>;

package/lib/server/plugins/presets.js

@@ -0,0 +1,49 @@
+"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.loadPresets = void 0;
+const tslib_1 = require("tslib");
+const module_1 = require("module");
+const import_fresh_1 = tslib_1.__importDefault(require("import-fresh"));
+const moduleShorthand_1 = require("./moduleShorthand");
+/**
+ * Calls preset functions, aggregates each of their return values, and returns
+ * the plugin and theme configs.
+ */
+async function loadPresets(context) {
+    // We need to resolve plugins from the perspective of the site config, as if
+    // we are using `require.resolve` on those module names.
+    const presetRequire = (0, module_1.createRequire)(context.siteConfigPath);
+    const { presets } = context.siteConfig;
+    const plugins = [];
+    const themes = [];
+    presets.forEach((presetItem) => {
+        let presetModuleImport;
+        let presetOptions = {};
+        if (!presetItem) {
+            return;
+        }
+        if (typeof presetItem === 'string') {
+            presetModuleImport = presetItem;
+        }
+        else {
+            [presetModuleImport, presetOptions] = presetItem;
+        }
+        const presetName = (0, moduleShorthand_1.resolveModuleName)(presetModuleImport, presetRequire, 'preset');
+        const presetModule = (0, import_fresh_1.default)(presetRequire.resolve(presetName));
+        const preset = (presetModule.default ?? presetModule)(context, presetOptions);
+        if (preset.plugins) {
+            plugins.push(...preset.plugins);
+        }
+        if (preset.themes) {
+            themes.push(...preset.themes);
+        }
+    });
+    return { plugins, themes };
+}
+exports.loadPresets = loadPresets;

package/lib/server/plugins/routeConfig.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { RouteConfig } from '@docusaurus/types';
+import { type ApplyTrailingSlashParams } from '@docusaurus/utils-common';
+/** Recursively applies trailing slash config to all nested routes. */
+export declare function applyRouteTrailingSlash(route: RouteConfig, params: ApplyTrailingSlashParams): RouteConfig;
+export declare function sortConfig(routeConfigs: RouteConfig[], baseUrl?: string): void;

package/lib/server/plugins/routeConfig.js

@@ -0,0 +1,54 @@
+"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.sortConfig = exports.applyRouteTrailingSlash = void 0;
+const utils_common_1 = require("@docusaurus/utils-common");
+/** Recursively applies trailing slash config to all nested routes. */
+function applyRouteTrailingSlash(route, params) {
+    return {
+        ...route,
+        path: (0, utils_common_1.applyTrailingSlash)(route.path, params),
+        ...(route.routes && {
+            routes: route.routes.map((subroute) => applyRouteTrailingSlash(subroute, params)),
+        }),
+    };
+}
+exports.applyRouteTrailingSlash = applyRouteTrailingSlash;
+function sortConfig(routeConfigs, baseUrl = '/') {
+    // Sort the route config. This ensures that route with nested
+    // routes is always placed last.
+    routeConfigs.sort((a, b) => {
+        // Root route should get placed last.
+        if (a.path === baseUrl && b.path !== baseUrl) {
+            return 1;
+        }
+        if (a.path !== baseUrl && b.path === baseUrl) {
+            return -1;
+        }
+        if (a.routes && !b.routes) {
+            return 1;
+        }
+        if (!a.routes && b.routes) {
+            return -1;
+        }
+        // Higher priority get placed first.
+        if (a.priority || b.priority) {
+            const priorityA = a.priority || 0;
+            const priorityB = b.priority || 0;
+            const score = priorityB - priorityA;
+            if (score !== 0) {
+                return score;
+            }
+        }
+        return a.path.localeCompare(b.path);
+    });
+    routeConfigs.forEach((routeConfig) => {
+        routeConfig.routes?.sort((a, b) => a.path.localeCompare(b.path));
+    });
+}
+exports.sortConfig = sortConfig;

package/lib/server/plugins/synthetic.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { LoadedPlugin, LoadContext } from '@docusaurus/types';
+/**
+ * Make a synthetic plugin to:
+ * - Inject site client modules
+ * - Inject scripts/stylesheets
+ */
+export declare function createBootstrapPlugin({ siteDir, siteConfig, }: LoadContext): LoadedPlugin;
+/**
+ * Configure Webpack fallback mdx loader for md/mdx files out of content-plugin
+ * folders. Adds a "fallback" mdx loader for mdx files that are not processed by
+ * content plugins. This allows to do things such as importing repo/README.md as
+ * a partial from another doc. Not ideal solution, but good enough for now
+ */
+export declare function createMDXFallbackPlugin({ siteDir, siteConfig, }: LoadContext): LoadedPlugin;

package/lib/server/plugins/synthetic.js

@@ -0,0 +1,112 @@
+"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.createMDXFallbackPlugin = exports.createBootstrapPlugin = void 0;
+const tslib_1 = require("tslib");
+const path_1 = tslib_1.__importDefault(require("path"));
+const remark_admonitions_1 = tslib_1.__importDefault(require("remark-admonitions"));
+/**
+ * Make a synthetic plugin to:
+ * - Inject site client modules
+ * - Inject scripts/stylesheets
+ */
+function createBootstrapPlugin({ siteDir, siteConfig, }) {
+    const { stylesheets, scripts, clientModules: siteConfigClientModules, } = siteConfig;
+    return {
+        name: 'docusaurus-bootstrap-plugin',
+        content: null,
+        options: {
+            id: 'default',
+        },
+        version: { type: 'synthetic' },
+        path: siteDir,
+        getClientModules() {
+            return siteConfigClientModules;
+        },
+        injectHtmlTags: () => {
+            const stylesheetsTags = stylesheets.map((source) => typeof source === 'string'
+                ? `<link rel="stylesheet" href="${source}">`
+                : {
+                    tagName: 'link',
+                    attributes: {
+                        rel: 'stylesheet',
+                        ...source,
+                    },
+                });
+            const scriptsTags = scripts.map((source) => typeof source === 'string'
+                ? `<script src="${source}"></script>`
+                : {
+                    tagName: 'script',
+                    attributes: {
+                        ...source,
+                    },
+                });
+            return {
+                headTags: [...stylesheetsTags, ...scriptsTags],
+            };
+        },
+    };
+}
+exports.createBootstrapPlugin = createBootstrapPlugin;
+/**
+ * Configure Webpack fallback mdx loader for md/mdx files out of content-plugin
+ * folders. Adds a "fallback" mdx loader for mdx files that are not processed by
+ * content plugins. This allows to do things such as importing repo/README.md as
+ * a partial from another doc. Not ideal solution, but good enough for now
+ */
+function createMDXFallbackPlugin({ siteDir, siteConfig, }) {
+    return {
+        name: 'docusaurus-mdx-fallback-plugin',
+        content: null,
+        options: {
+            id: 'default',
+        },
+        version: { type: 'synthetic' },
+        // Synthetic, the path doesn't matter much
+        path: '.',
+        configureWebpack(config, isServer, { getJSLoader }) {
+            // We need the mdx fallback loader to exclude files that were already
+            // processed by content plugins mdx loaders. This works, but a bit
+            // hacky... Not sure there's a way to handle that differently in webpack
+            function getMDXFallbackExcludedPaths() {
+                const rules = config?.module?.rules;
+                return rules.flatMap((rule) => {
+                    const isMDXRule = rule.test instanceof RegExp && rule.test.test('x.mdx');
+                    return isMDXRule ? rule.include : [];
+                });
+            }
+            const mdxLoaderOptions = {
+                staticDirs: siteConfig.staticDirectories.map((dir) => path_1.default.resolve(siteDir, dir)),
+                siteDir,
+                // External MDX files are always meant to be imported as partials
+                isMDXPartial: () => true,
+                // External MDX files might have front matter, just disable the warning
+                isMDXPartialFrontMatterWarningDisabled: true,
+                remarkPlugins: [remark_admonitions_1.default],
+            };
+            return {
+                module: {
+                    rules: [
+                        {
+                            test: /\.mdx?$/i,
+                            exclude: getMDXFallbackExcludedPaths(),
+                            use: [
+                                getJSLoader({ isServer }),
+                                {
+                                    loader: require.resolve('@docusaurus/mdx-loader'),
+                                    options: mdxLoaderOptions,
+                                },
+                            ],
+                        },
+                    ],
+                },
+            };
+        },
+    };
+}
+exports.createMDXFallbackPlugin = createMDXFallbackPlugin;

package/lib/server/routes.d.ts

@@ -4,16 +4,48 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ChunkRegistry, RouteConfig, ChunkNames } from '@docusaurus/types';
+import type { RouteConfig, RouteChunkNames, ReportingSeverity } from '@docusaurus/types';
 declare type LoadedRoutes = {
-    registry: {
-        [chunkName: string]: ChunkRegistry;
-    };
+    /** Serialized routes config that can be directly emitted into temp file. */
     routesConfig: string;
-    routesChunkNames: {
-        [routePath: string]: ChunkNames;
+    /** @see {ChunkNames} */
+    routesChunkNames: RouteChunkNames;
+    /**
+     * A map from chunk name to module paths. Module paths would have backslash
+     * escaped already, so they can be directly printed.
+     */
+    registry: {
+        [chunkName: string]: string;
     };
+    /**
+     * Collect all page paths for injecting it later in the plugin lifecycle.
+     * This is useful for plugins like sitemaps, redirects etc... Only collects
+     * "actual" pages, i.e. those without subroutes, because if a route has
+     * subroutes, it is probably a wrapper.
+     */
     routesPaths: string[];
 };
-export default function loadRoutes(pluginsRouteConfigs: RouteConfig[], baseUrl: string): Promise<LoadedRoutes>;
+/**
+ * Generates a unique chunk name that can be used in the chunk registry.
+ *
+ * @param modulePath A path to generate chunk name from. The actual value has no
+ * semantic significance.
+ * @param prefix A prefix to append to the chunk name, to avoid name clash.
+ * @param preferredName Chunk names default to `modulePath`, and this can supply
+ * a more human-readable name.
+ * @param shortId When `true`, the chunk name would only be a hash without any
+ * other characters. Useful for bundle size. Defaults to `true` in production.
+ */
+export declare function genChunkName(modulePath: string, prefix?: string, preferredName?: string, shortId?: boolean): string;
+export declare function handleDuplicateRoutes(pluginsRouteConfigs: RouteConfig[], onDuplicateRoutes: ReportingSeverity): void;
+/**
+ * Routes are prepared into three temp files:
+ *
+ * - `routesConfig`, the route config passed to react-router. This file is kept
+ * minimal, because it can't be code-splitted.
+ * - `routesChunkNames`, a mapping from route paths (hashed) to code-splitted
+ * chunk names.
+ * - `registry`, a mapping from chunk names to options for react-loadable.
+ */
+export declare function loadRoutes(routeConfigs: RouteConfig[], baseUrl: string, onDuplicateRoutes: ReportingSeverity): LoadedRoutes;
 export {};

package/lib/server/routes.js

@@ -6,115 +6,205 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadRoutes = exports.handleDuplicateRoutes = exports.genChunkName = void 0;
+const tslib_1 = require("tslib");
 const utils_1 = require("@docusaurus/utils");
-const lodash_1 = require("lodash");
-const querystring_1 = require("querystring");
-const createRouteCodeString = ({ routePath, routeHash, exact, subroutesCodeStrings, }) => {
-    const str = `{
-  path: '${routePath}',
-  component: ComponentCreator('${routePath}','${routeHash}'),
-  ${exact ? `exact: true,` : ''}
-${subroutesCodeStrings
-        ? `  routes: [
-${utils_1.removeSuffix(subroutesCodeStrings.join(',\n'), ',\n')},
-]
-`
-        : ''}}`;
-    return str;
-};
-const NotFoundRouteCode = `{
-  path: '*',
-  component: ComponentCreator('*')
-}`;
-const RoutesImportsCode = [
-    `import React from 'react';`,
-    `import ComponentCreator from '@docusaurus/ComponentCreator';`,
-].join('\n');
-function isModule(value) {
-    if (lodash_1.isString(value)) {
-        return true;
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const querystring_1 = tslib_1.__importDefault(require("querystring"));
+const utils_2 = require("./utils");
+/** Indents every line of `str` by one level. */
+function indent(str) {
+    return `  ${str.replace(/\n/g, `\n  `)}`;
+}
+const chunkNameCache = new Map();
+/**
+ * Generates a unique chunk name that can be used in the chunk registry.
+ *
+ * @param modulePath A path to generate chunk name from. The actual value has no
+ * semantic significance.
+ * @param prefix A prefix to append to the chunk name, to avoid name clash.
+ * @param preferredName Chunk names default to `modulePath`, and this can supply
+ * a more human-readable name.
+ * @param shortId When `true`, the chunk name would only be a hash without any
+ * other characters. Useful for bundle size. Defaults to `true` in production.
+ */
+function genChunkName(modulePath, prefix, preferredName, shortId = process.env.NODE_ENV === 'production') {
+    let chunkName = chunkNameCache.get(modulePath);
+    if (!chunkName) {
+        if (shortId) {
+            chunkName = (0, utils_1.simpleHash)(modulePath, 8);
+        }
+        else {
+            let str = modulePath;
+            if (preferredName) {
+                const shortHash = (0, utils_1.simpleHash)(modulePath, 3);
+                str = `${preferredName}${shortHash}`;
+            }
+            const name = str === '/' ? 'index' : (0, utils_1.docuHash)(str);
+            chunkName = prefix ? `${prefix}---${name}` : name;
+        }
+        chunkNameCache.set(modulePath, chunkName);
+    }
+    return chunkName;
+}
+exports.genChunkName = genChunkName;
+/**
+ * Takes a piece of route config, and serializes it into raw JS code. The shape
+ * is the same as react-router's `RouteConfig`. Formatting is similar to
+ * `JSON.stringify` but without all the quotes.
+ */
+function serializeRouteConfig({ routePath, routeHash, exact, subroutesCodeStrings, props, }) {
+    const parts = [
+        `path: '${routePath}'`,
+        `component: ComponentCreator('${routePath}', '${routeHash}')`,
+    ];
+    if (exact) {
+        parts.push(`exact: true`);
     }
-    if (lodash_1.isPlainObject(value) && lodash_1.has(value, '__import') && lodash_1.has(value, 'path')) {
-        return true;
+    if (subroutesCodeStrings) {
+        parts.push(`routes: [
+${indent(subroutesCodeStrings.join(',\n'))}
+]`);
     }
-    return false;
+    Object.entries(props).forEach(([propName, propValue]) => {
+        // Inspired by https://github.com/armanozak/should-quote/blob/main/packages/should-quote/src/lib/should-quote.ts
+        const shouldQuote = ((key) => {
+            // Pre-sanitation to prevent injection
+            if (/[.,;:}/\s]/.test(key)) {
+                return true;
+            }
+            try {
+                // If this key can be used in an expression like ({a:0}).a
+                // eslint-disable-next-line no-eval
+                eval(`({${key}:0}).${key}`);
+                return false;
+            }
+            catch {
+                return true;
+            }
+        })(propName);
+        // Escape quotes as well
+        const key = shouldQuote ? JSON.stringify(propName) : propName;
+        parts.push(`${key}: ${JSON.stringify(propValue)}`);
+    });
+    return `{
+${indent(parts.join(',\n'))}
+}`;
 }
+const isModule = (value) => typeof value === 'string' ||
+    (typeof value === 'object' &&
+        // eslint-disable-next-line no-underscore-dangle
+        !!value?.__import);
+/**
+ * Takes a {@link Module} (which is nothing more than a path plus some metadata
+ * like query) and returns the string path it represents.
+ */
 function getModulePath(target) {
     if (typeof target === 'string') {
         return target;
     }
-    const queryStr = target.query ? `?${querystring_1.stringify(target.query)}` : '';
+    const queryStr = target.query ? `?${querystring_1.default.stringify(target.query)}` : '';
     return `${target.path}${queryStr}`;
 }
-async function loadRoutes(pluginsRouteConfigs, baseUrl) {
-    const registry = {};
-    const routesPaths = [utils_1.normalizeUrl([baseUrl, '404.html'])];
-    const routesChunkNames = {};
-    // This is the higher level overview of route code generation.
-    function generateRouteCode(routeConfig) {
-        const { path: routePath, component, modules = {}, routes: subroutes, exact, } = routeConfig;
-        if (!lodash_1.isString(routePath) || !component) {
-            throw new Error(`Invalid routeConfig (Path must be a string and component is required) \n${JSON.stringify(routeConfig)}`);
-        }
-        // Collect all page paths for injecting it later in the plugin lifecycle
-        // This is useful for plugins like sitemaps, redirects etc...
-        // If a route has subroutes, it is not necessarily a valid page path (more likely to be a wrapper)
-        if (!subroutes) {
-            routesPaths.push(routePath);
-        }
-        // We hash the route to generate the key, because 2 routes can conflict with
-        // each others if they have the same path, ex: parent=/docs, child=/docs
-        // see https://github.com/facebook/docusaurus/issues/2917
-        const routeHash = utils_1.simpleHash(JSON.stringify(routeConfig), 3);
-        const chunkNamesKey = `${routePath}-${routeHash}`;
-        routesChunkNames[chunkNamesKey] = {
-            ...genRouteChunkNames(registry, { component }, 'component', component),
-            ...genRouteChunkNames(registry, modules, 'module', routePath),
-        };
-        return createRouteCodeString({
-            routePath: routeConfig.path.replace(/'/g, "\\'"),
-            routeHash,
-            exact,
-            subroutesCodeStrings: subroutes === null || subroutes === void 0 ? void 0 : subroutes.map(generateRouteCode),
-        });
+function genChunkNames(routeModule, prefix, name, res) {
+    if (isModule(routeModule)) {
+        // This is a leaf node, no need to recurse
+        const modulePath = getModulePath(routeModule);
+        const chunkName = genChunkName(modulePath, prefix, name);
+        res.registry[chunkName] = (0, utils_1.escapePath)(modulePath);
+        return chunkName;
     }
-    const routesConfig = `
-${RoutesImportsCode}
-export default [
-${pluginsRouteConfigs.map(generateRouteCode).join(',\n')},
-${NotFoundRouteCode}
-];\n`;
-    return {
-        registry,
-        routesConfig,
-        routesChunkNames,
-        routesPaths,
-    };
+    if (Array.isArray(routeModule)) {
+        return routeModule.map((val, index) => genChunkNames(val, `${index}`, name, res));
+    }
+    return lodash_1.default.mapValues(routeModule, (v, key) => genChunkNames(v, key, name, res));
 }
-exports.default = loadRoutes;
-function genRouteChunkNames(
-// TODO instead of passing a mutating the registry, return a registry slice?
-registry, value, prefix, name) {
-    if (!value) {
-        return null;
+function handleDuplicateRoutes(pluginsRouteConfigs, onDuplicateRoutes) {
+    if (onDuplicateRoutes === 'ignore') {
+        return;
     }
-    if (Array.isArray(value)) {
-        return value.map((val, index) => genRouteChunkNames(registry, val, `${index}`, name));
+    const allRoutes = (0, utils_2.getAllFinalRoutes)(pluginsRouteConfigs).map((routeConfig) => routeConfig.path);
+    const seenRoutes = new Set();
+    const duplicatePaths = allRoutes.filter((route) => {
+        if (seenRoutes.has(route)) {
+            return true;
+        }
+        seenRoutes.add(route);
+        return false;
+    });
+    if (duplicatePaths.length > 0) {
+        const finalMessage = `Duplicate routes found!
+${duplicatePaths
+            .map((duplicateRoute) => `- Attempting to create page at ${duplicateRoute}, but a page already exists at this route.`)
+            .join('\n')}
+This could lead to non-deterministic routing behavior.`;
+        (0, utils_1.reportMessage)(finalMessage, onDuplicateRoutes);
     }
-    if (isModule(value)) {
-        const modulePath = getModulePath(value);
-        const chunkName = utils_1.genChunkName(modulePath, prefix, name);
-        // We need to JSON.stringify so that if its on windows, backslashes are escaped.
-        const loader = `() => import(/* webpackChunkName: '${chunkName}' */ ${JSON.stringify(modulePath)})`;
-        registry[chunkName] = {
-            loader,
-            modulePath,
-        };
-        return chunkName;
+}
+exports.handleDuplicateRoutes = handleDuplicateRoutes;
+/**
+ * This is the higher level overview of route code generation. For each route
+ * config node, it returns the node's serialized form, and mutates `registry`,
+ * `routesPaths`, and `routesChunkNames` accordingly.
+ */
+function genRouteCode(routeConfig, res) {
+    const { path: routePath, component, modules = {}, context, routes: subroutes, priority, exact, ...props } = routeConfig;
+    if (typeof routePath !== 'string' || !component) {
+        throw new Error(`Invalid route config: path must be a string and component is required.
+${JSON.stringify(routeConfig)}`);
     }
-    const newValue = {};
-    Object.keys(value).forEach((key) => {
-        newValue[key] = genRouteChunkNames(registry, value[key], key, name);
+    if (!subroutes) {
+        res.routesPaths.push(routePath);
+    }
+    const routeHash = (0, utils_1.simpleHash)(JSON.stringify(routeConfig), 3);
+    res.routesChunkNames[`${routePath}-${routeHash}`] = {
+        // Avoid clash with a prop called "component"
+        ...genChunkNames({ __comp: component }, 'component', component, res),
+        ...(context &&
+            genChunkNames({ __context: context }, 'context', routePath, res)),
+        ...genChunkNames(modules, 'module', routePath, res),
+    };
+    return serializeRouteConfig({
+        routePath: routePath.replace(/'/g, "\\'"),
+        routeHash,
+        subroutesCodeStrings: subroutes?.map((r) => genRouteCode(r, res)),
+        exact,
+        props,
     });
-    return newValue;
 }
+/**
+ * Routes are prepared into three temp files:
+ *
+ * - `routesConfig`, the route config passed to react-router. This file is kept
+ * minimal, because it can't be code-splitted.
+ * - `routesChunkNames`, a mapping from route paths (hashed) to code-splitted
+ * chunk names.
+ * - `registry`, a mapping from chunk names to options for react-loadable.
+ */
+function loadRoutes(routeConfigs, baseUrl, onDuplicateRoutes) {
+    handleDuplicateRoutes(routeConfigs, onDuplicateRoutes);
+    const res = {
+        // To be written by `genRouteCode`
+        routesConfig: '',
+        routesChunkNames: {},
+        registry: {},
+        routesPaths: [(0, utils_1.normalizeUrl)([baseUrl, '404.html'])],
+    };
+    // `genRouteCode` would mutate `res`
+    const routeConfigSerialized = routeConfigs
+        .map((r) => genRouteCode(r, res))
+        .join(',\n');
+    res.routesConfig = `import React from 'react';
+import ComponentCreator from '@docusaurus/ComponentCreator';
+
+export default [
+${indent(routeConfigSerialized)},
+  {
+    path: '*',
+    component: ComponentCreator('*'),
+  },
+];
+`;
+    return res;
+}
+exports.loadRoutes = loadRoutes;