@docusaurus/theme-classic 0.0.0-4919 → 0.0.0-4922

package/lib/getSwizzleConfig.js

@@ -200,6 +200,13 @@ function getSwizzleConfig() {
         },
         description: 'A component wrapping all MDX content and providing the MDXComponents to the MDX context'
       },
+      'NavbarItem/ComponentTypes': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden'
+        },
+        description: 'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.'
+      },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {

package/lib/theme-classic.d.ts

@@ -893,6 +893,37 @@ declare module '@theme/NavbarItem/HtmlNavbarItem' {
   export default function HtmlNavbarItem(props: Props): JSX.Element;
 }
 
+declare module '@theme/NavbarItem/ComponentTypes' {
+  import type {ComponentType} from 'react';
+
+  import type DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+  import type DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+  import type LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+  import type SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+  import type HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+  import type DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+  import type DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+  import type DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+  import type DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+
+  export type ComponentTypesObject = {
+    readonly default: typeof DefaultNavbarItem;
+    readonly localeDropdown: typeof LocaleDropdownNavbarItem;
+    readonly search: typeof SearchNavbarItem;
+    readonly dropdown: typeof DropdownNavbarItem;
+    readonly html: typeof HtmlNavbarItem;
+    readonly doc: typeof DocNavbarItem;
+    readonly docSidebar: typeof DocSidebarNavbarItem;
+    readonly docsVersion: typeof DocsVersionNavbarItem;
+    readonly docsVersionDropdown: typeof DocsVersionDropdownNavbarItem;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [customComponentType: string]: ComponentType<any>;
+  };
+
+  const ComponentTypes: ComponentTypesObject;
+  export default ComponentTypes;
+}
+
 declare module '@theme/NavbarItem' {
   import type {ComponentProps} from 'react';
   import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';

package/lib/validateThemeConfig.js

@@ -95,11 +95,20 @@ const HtmlNavbarItemSchema = _utilsValidation.Joi.object({
   className: _utilsValidation.Joi.string(),
   type: _utilsValidation.Joi.string().equal('html').required(),
   value: _utilsValidation.Joi.string().required()
-});
+}); // A temporary workaround to allow users to add custom navbar items
+// See https://github.com/facebook/docusaurus/issues/7227
+
+
+const CustomNavbarItemRegexp = /custom-.*/;
+
+const CustomNavbarItemSchema = _utilsValidation.Joi.object({
+  type: _utilsValidation.Joi.string().regex(CustomNavbarItemRegexp).required()
+}).unknown();
 
 const itemWithType = type => {
   // Because equal(undefined) is not supported :/
-  const typeSchema = type ? _utilsValidation.Joi.string().required().equal(type) : _utilsValidation.Joi.string().forbidden();
+  const typeSchema = // eslint-disable-next-line no-nested-ternary
+  type instanceof RegExp ? _utilsValidation.Joi.string().required().regex(type) : type ? _utilsValidation.Joi.string().required().equal(type) : _utilsValidation.Joi.string().forbidden();
   return _utilsValidation.Joi.object({
     type: typeSchema
   }).unknown().required();
@@ -123,6 +132,9 @@ const DropdownSubitemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType('html'),
     then: HtmlNavbarItemSchema
+  }, {
+    is: itemWithType(CustomNavbarItemRegexp),
+    then: CustomNavbarItemSchema
   }, {
     is: _utilsValidation.Joi.alternatives().try(itemWithType('dropdown'), itemWithType('docsVersionDropdown'), itemWithType('localeDropdown'), itemWithType('search')),
     then: _utilsValidation.Joi.forbidden().messages({
@@ -181,6 +193,9 @@ const NavbarItemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType('html'),
     then: HtmlNavbarItemSchema
+  }, {
+    is: itemWithType(CustomNavbarItemRegexp),
+    then: CustomNavbarItemSchema
   }, {
     is: itemWithType(undefined),
     then: _utilsValidation.Joi.object().when('.', {

package/lib-next/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,27 @@
+/**
+ * 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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+export default ComponentTypes;

package/lib-next/theme/NavbarItem/index.js

@@ -5,37 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
-import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
-import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
-import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
-const NavbarItemComponents = {
-  default: () => DefaultNavbarItem,
-  localeDropdown: () => LocaleDropdownNavbarItem,
-  search: () => SearchNavbarItem,
-  dropdown: () => DropdownNavbarItem,
-  html: () => HtmlNavbarItem,
-  // Need to lazy load these items as we don't know for sure the docs plugin is
-  // loaded. See https://github.com/facebook/docusaurus/issues/3360
-
-  /* eslint-disable @typescript-eslint/no-var-requires, global-require */
-  docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
-  docsVersionDropdown: () =>
-    require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
-  doc: () => require('@theme/NavbarItem/DocNavbarItem').default,
-  docSidebar: () => require('@theme/NavbarItem/DocSidebarNavbarItem').default,
-  /* eslint-enable @typescript-eslint/no-var-requires, global-require */
-};
+import ComponentTypes from '@theme/NavbarItem/ComponentTypes';
 
 const getNavbarItemComponent = (type) => {
-  const navbarItemComponentFn = NavbarItemComponents[type];
+  const component = ComponentTypes[type];
 
-  if (!navbarItemComponentFn) {
+  if (!component) {
     throw new Error(`No NavbarItem component found for type "${type}".`);
   }
 
-  return navbarItemComponentFn();
+  return component;
 };
 
 function getComponentType(type, isDropdown) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4919",
+  "version": "0.0.0-4922",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4919",
-    "@docusaurus/plugin-content-blog": "0.0.0-4919",
-    "@docusaurus/plugin-content-docs": "0.0.0-4919",
-    "@docusaurus/plugin-content-pages": "0.0.0-4919",
-    "@docusaurus/theme-common": "0.0.0-4919",
-    "@docusaurus/theme-translations": "0.0.0-4919",
-    "@docusaurus/utils": "0.0.0-4919",
-    "@docusaurus/utils-common": "0.0.0-4919",
-    "@docusaurus/utils-validation": "0.0.0-4919",
+    "@docusaurus/core": "0.0.0-4922",
+    "@docusaurus/plugin-content-blog": "0.0.0-4922",
+    "@docusaurus/plugin-content-docs": "0.0.0-4922",
+    "@docusaurus/plugin-content-pages": "0.0.0-4922",
+    "@docusaurus/theme-common": "0.0.0-4922",
+    "@docusaurus/theme-translations": "0.0.0-4922",
+    "@docusaurus/utils": "0.0.0-4922",
+    "@docusaurus/utils-common": "0.0.0-4922",
+    "@docusaurus/utils-validation": "0.0.0-4922",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -45,8 +45,8 @@
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
     "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "0.0.0-4919",
-    "@docusaurus/types": "0.0.0-4919",
+    "@docusaurus/module-type-aliases": "0.0.0-4922",
+    "@docusaurus/types": "0.0.0-4922",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.4",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "5bb55e444066669a2af471cc558cd6c61cee8005"
+  "gitHead": "b3d7e7e589a5b4b1fc29731f7c2cff6e923a992e"
 }

package/src/getSwizzleConfig.ts

@@ -206,6 +206,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'A component wrapping all MDX content and providing the MDXComponents to the MDX context',
       },
+      'NavbarItem/ComponentTypes': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden',
+        },
+        description:
+          'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
+      },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {

package/src/theme/NavbarItem/ComponentTypes.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+
+import type {ComponentTypesObject} from '@theme/NavbarItem/ComponentTypes';
+
+const ComponentTypes: ComponentTypesObject = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+
+export default ComponentTypes;

package/src/theme/NavbarItem/index.tsx

@@ -6,57 +6,26 @@
  */
 
 import React from 'react';
-import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import DropdownNavbarItem, {
-  type Props as DropdownNavbarItemProps,
-} from '@theme/NavbarItem/DropdownNavbarItem';
-import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
-import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
-import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import {type Props as DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem';
 import type {Types, Props} from '@theme/NavbarItem';
 
-const NavbarItemComponents: {
-  // Not really worth typing, as we pass all props down immediately
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [type in Exclude<Types, undefined>]: () => (props: any) => JSX.Element;
-} = {
-  default: () => DefaultNavbarItem,
-  localeDropdown: () => LocaleDropdownNavbarItem,
-  search: () => SearchNavbarItem,
-  dropdown: () => DropdownNavbarItem,
-  html: () => HtmlNavbarItem,
+import ComponentTypes from '@theme/NavbarItem/ComponentTypes';
 
-  // Need to lazy load these items as we don't know for sure the docs plugin is
-  // loaded. See https://github.com/facebook/docusaurus/issues/3360
-  /* eslint-disable @typescript-eslint/no-var-requires, global-require */
-  docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
-  docsVersionDropdown: () =>
-    require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
-  doc: () => require('@theme/NavbarItem/DocNavbarItem').default,
-  docSidebar: () => require('@theme/NavbarItem/DocSidebarNavbarItem').default,
-  /* eslint-enable @typescript-eslint/no-var-requires, global-require */
-} as const;
-
-type NavbarItemComponentType = keyof typeof NavbarItemComponents;
-
-const getNavbarItemComponent = (type: NavbarItemComponentType) => {
-  const navbarItemComponentFn = NavbarItemComponents[type];
-  if (!navbarItemComponentFn) {
+const getNavbarItemComponent = (type: NonNullable<Types>) => {
+  const component = ComponentTypes[type];
+  if (!component) {
     throw new Error(`No NavbarItem component found for type "${type}".`);
   }
-  return navbarItemComponentFn();
+  return component;
 };
 
-function getComponentType(
-  type: Types,
-  isDropdown: boolean,
-): NavbarItemComponentType {
+function getComponentType(type: Types, isDropdown: boolean) {
   // Backward compatibility: navbar item with no type set
   // but containing dropdown items should use the type "dropdown"
   if (!type || type === 'default') {
     return isDropdown ? 'dropdown' : 'default';
   }
-  return type as NavbarItemComponentType;
+  return type as NonNullable<Types>;
 }
 
 export default function NavbarItem({type, ...props}: Props): JSX.Element {
@@ -65,5 +34,5 @@ export default function NavbarItem({type, ...props}: Props): JSX.Element {
     (props as DropdownNavbarItemProps).items !== undefined,
   );
   const NavbarItemComponent = getNavbarItemComponent(componentType);
-  return <NavbarItemComponent {...props} />;
+  return <NavbarItemComponent {...(props as never)} />;
 }

package/src/theme-classic.d.ts

@@ -893,6 +893,37 @@ declare module '@theme/NavbarItem/HtmlNavbarItem' {
   export default function HtmlNavbarItem(props: Props): JSX.Element;
 }
 
+declare module '@theme/NavbarItem/ComponentTypes' {
+  import type {ComponentType} from 'react';
+
+  import type DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+  import type DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+  import type LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+  import type SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+  import type HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+  import type DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+  import type DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+  import type DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+  import type DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+
+  export type ComponentTypesObject = {
+    readonly default: typeof DefaultNavbarItem;
+    readonly localeDropdown: typeof LocaleDropdownNavbarItem;
+    readonly search: typeof SearchNavbarItem;
+    readonly dropdown: typeof DropdownNavbarItem;
+    readonly html: typeof HtmlNavbarItem;
+    readonly doc: typeof DocNavbarItem;
+    readonly docSidebar: typeof DocSidebarNavbarItem;
+    readonly docsVersion: typeof DocsVersionNavbarItem;
+    readonly docsVersionDropdown: typeof DocsVersionDropdownNavbarItem;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [customComponentType: string]: ComponentType<any>;
+  };
+
+  const ComponentTypes: ComponentTypesObject;
+  export default ComponentTypes;
+}
+
 declare module '@theme/NavbarItem' {
   import type {ComponentProps} from 'react';
   import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';

package/src/validateThemeConfig.ts

@@ -99,11 +99,22 @@ const HtmlNavbarItemSchema = Joi.object({
   value: Joi.string().required(),
 });
 
-const itemWithType = (type: string | undefined) => {
+// A temporary workaround to allow users to add custom navbar items
+// See https://github.com/facebook/docusaurus/issues/7227
+const CustomNavbarItemRegexp = /custom-.*/;
+const CustomNavbarItemSchema = Joi.object({
+  type: Joi.string().regex(CustomNavbarItemRegexp).required(),
+}).unknown();
+
+const itemWithType = (type: string | RegExp | undefined) => {
   // Because equal(undefined) is not supported :/
-  const typeSchema = type
-    ? Joi.string().required().equal(type)
-    : Joi.string().forbidden();
+  const typeSchema =
+    // eslint-disable-next-line no-nested-ternary
+    type instanceof RegExp
+      ? Joi.string().required().regex(type)
+      : type
+      ? Joi.string().required().equal(type)
+      : Joi.string().forbidden();
   return Joi.object({
     type: typeSchema,
   })
@@ -135,6 +146,10 @@ const DropdownSubitemSchema = Joi.object({
       is: itemWithType('html'),
       then: HtmlNavbarItemSchema,
     },
+    {
+      is: itemWithType(CustomNavbarItemRegexp),
+      then: CustomNavbarItemSchema,
+    },
     {
       is: Joi.alternatives().try(
         itemWithType('dropdown'),
@@ -210,6 +225,10 @@ const NavbarItemSchema = Joi.object({
       is: itemWithType('html'),
       then: HtmlNavbarItemSchema,
     },
+    {
+      is: itemWithType(CustomNavbarItemRegexp),
+      then: CustomNavbarItemSchema,
+    },
     {
       is: itemWithType(undefined),
       then: Joi.object().when('.', {