chore: upgrade syntax highlighting dependencies, prism-react-renderer to v2, react-live to v4 (#9316)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/package.json

@@ -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",

packages/docusaurus-theme-classic/src/__tests__/options.test.ts

@@ -11,8 +11,7 @@ import {
   normalizeThemeConfig,
   normalizePluginOptions,
 } from '@docusaurus/utils-validation';
-import theme from 'prism-react-renderer/themes/github';
-import darkTheme from 'prism-react-renderer/themes/dracula';
+import {themes} from 'prism-react-renderer';
 import {ThemeConfigSchema, DEFAULT_CONFIG, validateOptions} from '../options';
 import type {Options, PluginOptions} from '@docusaurus/theme-classic';
 import type {ThemeConfig} from '@docusaurus/theme-common';
@@ -36,8 +35,8 @@ describe('themeConfig', () => {
   it('accepts valid theme config', () => {
     const userConfig = {
       prism: {
-        theme,
-        darkTheme,
+        theme: themes.github,
+        darkTheme: themes.dracula,
         defaultLanguage: 'javaSCRIPT',
         additionalLanguages: ['koTLin', 'jaVa'],
         magicComments: [
@@ -579,7 +578,7 @@ describe('themeConfig', () => {
       const prismConfig = {
         prism: {
           additionalLanguages: ['kotlin', 'java'],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [],
         },
       };
@@ -590,7 +589,7 @@ describe('themeConfig', () => {
       const prismConfig2 = {
         prism: {
           additionalLanguages: [],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [
             {
               className: 'a',
@@ -606,7 +605,7 @@ describe('themeConfig', () => {
       const prismConfig3 = {
         prism: {
           additionalLanguages: [],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [
             {
               className: 'a',

packages/docusaurus-theme-classic/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;
-}

packages/docusaurus-theme-classic/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: {

packages/docusaurus-theme-classic/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);

packages/docusaurus-theme-classic/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;

packages/docusaurus-theme-classic/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,

packages/docusaurus-theme-classic/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}`);
   });