@docusaurus/theme-classic 3.0.0-beta.0 → 3.0.0-rc.0

package/lib/options.js

@@ -7,9 +7,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateOptions = exports.validateThemeConfig = exports.ThemeConfigSchema = exports.DEFAULT_CONFIG = void 0;
-const tslib_1 = require("tslib");
-const palenight_1 = tslib_1.__importDefault(require("prism-react-renderer/themes/palenight"));
+const prism_react_renderer_1 = require("prism-react-renderer");
 const utils_validation_1 = require("@docusaurus/utils-validation");
+const defaultPrismTheme = prism_react_renderer_1.themes.palenight;
 const DEFAULT_DOCS_CONFIG = {
     versionPersistence: 'localStorage',
     sidebar: {
@@ -37,7 +37,7 @@ exports.DEFAULT_CONFIG = {
     metadata: [],
     prism: {
         additionalLanguages: [],
-        theme: palenight_1.default,
+        theme: defaultPrismTheme,
         magicComments: [
             {
                 className: 'theme-code-block-highlighted-line',

package/lib/prism-include-languages.js

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import Prism from 'prism-react-renderer/prism';
+import { Prism } from 'prism-react-renderer';
 import prismIncludeLanguages from '@theme/prism-include-languages';
 prismIncludeLanguages(Prism);

package/lib/theme/CodeBlock/Content/String.js

@@ -14,7 +14,7 @@ import {
   containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import Highlight, {defaultProps} from 'prism-react-renderer';
+import {Highlight} from 'prism-react-renderer';
 import Line from '@theme/CodeBlock/Line';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
@@ -64,17 +64,14 @@ export default function CodeBlockString({
       )}>
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
-        <Highlight
-          {...defaultProps}
-          theme={prismTheme}
-          code={code}
-          language={language ?? 'text'}>
-          {({className, tokens, getLineProps, getTokenProps}) => (
+        <Highlight theme={prismTheme} code={code} language={language ?? 'text'}>
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+              style={style}>
               <code
                 className={clsx(
                   styles.codeBlockLines,

package/lib/theme/Navbar/Search/index.js

@@ -8,5 +8,9 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 export default function NavbarSearch({children, className}) {
-  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
+  return (
+    <div className={clsx(className, styles.navbarSearchContainer)}>
+      {children}
+    </div>
+  );
 }

package/lib/theme/Navbar/Search/styles.module.css

@@ -5,15 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+.navbarSearchContainer:not(:has(> *)) {
+  display: none;
+}
+
 @media (max-width: 996px) {
-  .searchBox {
+  .navbarSearchContainer {
     position: absolute;
     right: var(--ifm-navbar-padding-horizontal);
   }
 }
 
 @media (min-width: 997px) {
-  .searchBox {
+  .navbarSearchContainer {
     padding: var(--ifm-navbar-item-padding-vertical)
       var(--ifm-navbar-item-padding-horizontal);
   }

package/lib/theme/prism-include-languages.js

@@ -18,6 +18,10 @@ export default function prismIncludeLanguages(PrismObject) {
   // long as you don't re-assign it
   globalThis.Prism = PrismObject;
   additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
     // eslint-disable-next-line global-require, import/no-dynamic-require
     require(`prismjs/components/prism-${lang}`);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-rc.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "3.0.0-beta.0",
-    "@docusaurus/mdx-loader": "3.0.0-beta.0",
-    "@docusaurus/module-type-aliases": "3.0.0-beta.0",
-    "@docusaurus/plugin-content-blog": "3.0.0-beta.0",
-    "@docusaurus/plugin-content-docs": "3.0.0-beta.0",
-    "@docusaurus/plugin-content-pages": "3.0.0-beta.0",
-    "@docusaurus/theme-common": "3.0.0-beta.0",
-    "@docusaurus/theme-translations": "3.0.0-beta.0",
-    "@docusaurus/types": "3.0.0-beta.0",
-    "@docusaurus/utils": "3.0.0-beta.0",
-    "@docusaurus/utils-common": "3.0.0-beta.0",
-    "@docusaurus/utils-validation": "3.0.0-beta.0",
+    "@docusaurus/core": "3.0.0-rc.0",
+    "@docusaurus/mdx-loader": "3.0.0-rc.0",
+    "@docusaurus/module-type-aliases": "3.0.0-rc.0",
+    "@docusaurus/plugin-content-blog": "3.0.0-rc.0",
+    "@docusaurus/plugin-content-docs": "3.0.0-rc.0",
+    "@docusaurus/plugin-content-pages": "3.0.0-rc.0",
+    "@docusaurus/theme-common": "3.0.0-rc.0",
+    "@docusaurus/theme-translations": "3.0.0-rc.0",
+    "@docusaurus/types": "3.0.0-rc.0",
+    "@docusaurus/utils": "3.0.0-rc.0",
+    "@docusaurus/utils-common": "3.0.0-rc.0",
+    "@docusaurus/utils-validation": "3.0.0-rc.0",
     "@mdx-js/react": "^2.1.5",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.2.0",
@@ -39,7 +39,7 @@
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.26",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "prismjs": "^1.29.0",
     "react-router-dom": "^5.3.4",
     "rtlcss": "^4.1.0",
@@ -60,7 +60,7 @@
     "react-dom": "^18.0.0"
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   },
-  "gitHead": "27a1e90d9fff88af90ecad35bea16d4d7230482a"
+  "gitHead": "e66dfe04d2972edce66f431908470c61340f8ffc"
 }

package/src/options.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import defaultPrismTheme from 'prism-react-renderer/themes/palenight';
+import {themes} from 'prism-react-renderer';
 import {Joi, URISchema} from '@docusaurus/utils-validation';
 import type {Options, PluginOptions} from '@docusaurus/theme-classic';
 import type {ThemeConfig} from '@docusaurus/theme-common';
@@ -14,6 +14,7 @@ import type {
   OptionValidationContext,
 } from '@docusaurus/types';
 
+const defaultPrismTheme = themes.palenight;
 const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
   versionPersistence: 'localStorage',
   sidebar: {

package/src/prism-include-languages.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import Prism from 'prism-react-renderer/prism';
+import {Prism} from 'prism-react-renderer';
 import prismIncludeLanguages from '@theme/prism-include-languages';
 
 prismIncludeLanguages(Prism);

package/src/theme/CodeBlock/Content/String.tsx

@@ -15,7 +15,7 @@ import {
   containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import Highlight, {defaultProps, type Language} from 'prism-react-renderer';
+import {Highlight, type Language} from 'prism-react-renderer';
 import Line from '@theme/CodeBlock/Line';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
@@ -74,16 +74,16 @@ export default function CodeBlockString({
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
         <Highlight
-          {...defaultProps}
           theme={prismTheme}
           code={code}
           language={(language ?? 'text') as Language}>
-          {({className, tokens, getLineProps, getTokenProps}) => (
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+              style={style}>
               <code
                 className={clsx(
                   styles.codeBlockLines,

package/src/theme/Navbar/Search/index.tsx

@@ -15,5 +15,9 @@ export default function NavbarSearch({
   children,
   className,
 }: Props): JSX.Element {
-  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
+  return (
+    <div className={clsx(className, styles.navbarSearchContainer)}>
+      {children}
+    </div>
+  );
 }

package/src/theme/Navbar/Search/styles.module.css

@@ -5,15 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+.navbarSearchContainer:not(:has(> *)) {
+  display: none;
+}
+
 @media (max-width: 996px) {
-  .searchBox {
+  .navbarSearchContainer {
     position: absolute;
     right: var(--ifm-navbar-padding-horizontal);
   }
 }
 
 @media (min-width: 997px) {
-  .searchBox {
+  .navbarSearchContainer {
     padding: var(--ifm-navbar-item-padding-vertical)
       var(--ifm-navbar-item-padding-horizontal);
   }

package/src/theme/prism-include-languages.ts

@@ -26,6 +26,10 @@ export default function prismIncludeLanguages(
   globalThis.Prism = PrismObject;
 
   additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
     // eslint-disable-next-line global-require, import/no-dynamic-require
     require(`prismjs/components/prism-${lang}`);
   });

package/src/theme-classic.d.ts

@@ -400,23 +400,20 @@ declare module '@theme/CodeBlock/Content/String' {
 }
 
 declare module '@theme/CodeBlock/Line' {
-  import type {ComponentProps} from 'react';
-  import type Highlight from 'prism-react-renderer';
-
-  // Lib does not make this easy
-  type RenderProps = Parameters<
-    ComponentProps<typeof Highlight>['children']
-  >[0];
-  type GetLineProps = RenderProps['getLineProps'];
-  type GetTokenProps = RenderProps['getTokenProps'];
-  type Token = RenderProps['tokens'][number][number];
+  import type {
+    LineInputProps,
+    LineOutputProps,
+    Token,
+    TokenInputProps,
+    TokenOutputProps,
+  } from 'prism-react-renderer';
 
   export interface Props {
     readonly line: Token[];
     readonly classNames: string[] | undefined;
     readonly showLineNumbers: boolean;
-    readonly getLineProps: GetLineProps;
-    readonly getTokenProps: GetTokenProps;
+    readonly getLineProps: (input: LineInputProps) => LineOutputProps;
+    readonly getTokenProps: (input: TokenInputProps) => TokenOutputProps;
   }
 
   export default function CodeBlockLine(props: Props): JSX.Element;

package/src/deps.d.ts

@@ -1,13 +0,0 @@
-/**
- * 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.
- */
-
-declare module 'prism-react-renderer/prism' {
-  import type * as PrismNamespace from 'prismjs';
-
-  const Prism: typeof PrismNamespace;
-  export default Prism;
-}