chore: upgrade syntax highlighting dependencies, `prism-react-rendere…

…r` to v2, `react-live` to v4 (#9316)

Co-authored-by: sebastienlorber <[email protected]>

packages/create-docusaurus/templates/classic-typescript/package.json

@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/create-docusaurus/templates/classic/docusaurus.config.js

@@ -4,8 +4,10 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const {themes} = require('prism-react-renderer');
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

packages/create-docusaurus/templates/classic/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

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/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}`);
   });

packages/docusaurus-theme-common/package.json

@@ -42,7 +42,7 @@
     "@types/react-router-config": "*",
     "clsx": "^1.2.1",
     "parse-numeric-range": "^1.3.0",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "tslib": "^2.6.0",
     "utility-types": "^3.10.0"
   },

packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

@@ -7,7 +7,7 @@
 
 import type {CSSProperties} from 'react';
 import rangeParser from 'parse-numeric-range';
-import type {PrismTheme} from 'prism-react-renderer';
+import type {PrismTheme, PrismThemeEntry} from 'prism-react-renderer';
 
 const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
 const metastringLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
@@ -254,14 +254,14 @@ export function parseLines(
 }
 
 export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
-  const mapping: {[name: keyof PrismTheme['plain']]: string} = {
+  const mapping: PrismThemeEntry = {
     color: '--prism-color',
     backgroundColor: '--prism-background-color',
   };
 
   const properties: {[key: string]: string} = {};
   Object.entries(prismTheme.plain).forEach(([key, value]) => {
-    const varName = mapping[key];
+    const varName = mapping[key as keyof PrismThemeEntry];
     if (varName && typeof value === 'string') {
       properties[varName] = value;
     }

packages/docusaurus-theme-live-codeblock/package.json

@@ -30,7 +30,7 @@
     "@philpl/buble": "^0.19.7",
     "clsx": "^1.2.1",
     "fs-extra": "^11.1.1",
-    "react-live": "2.2.3",
+    "react-live": "^4.1.5",
     "tslib": "^2.6.0"
   },
   "devDependencies": {

packages/docusaurus-theme-live-codeblock/src/deps.d.ts

@@ -7,7 +7,8 @@
 
 declare module '@philpl/buble' {
   import type {TransformOptions as OriginalTransformOptions} from 'buble';
-  // eslint-disable-next-line import/no-extraneous-dependencies, no-restricted-syntax
+
+  // eslint-disable-next-line no-restricted-syntax
   export * from 'buble';
   export const features: string[];
   export type TransformOptions = OriginalTransformOptions & {

packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts

@@ -18,9 +18,10 @@ declare module '@docusaurus/theme-live-codeblock' {
 
 declare module '@theme/Playground' {
   import type {Props as BaseProps} from '@theme/CodeBlock';
-  import type {LiveProviderProps} from 'react-live';
+  import type {LiveProvider} from 'react-live';
 
   type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+  type LiveProviderProps = React.ComponentProps<typeof LiveProvider>;
 
   export interface Props extends CodeBlockProps, LiveProviderProps {
     children: string;

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx

@@ -13,7 +13,6 @@ import CodeBlock, {type Props} from '@theme-init/CodeBlock';
 const withLiveEditor = (Component: typeof CodeBlock) => {
   function WrappedComponent(props: Props) {
     if (props.live) {
-      // @ts-expect-error: we have deliberately widened the type of language prop
       return <Playground scope={ReactLiveScope} {...props} />;
     }
 

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx

@@ -115,7 +115,6 @@ export default function Playground({
 
   return (
     <div className={styles.playgroundContainer}>
-      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
         noInline={noInline}

packages/docusaurus/src/client/exports/__tests__/Interpolate.test.tsx

@@ -31,7 +31,6 @@ describe('interpolate', () => {
       object: {hello: 'world'},
       array: ['Hello'],
     };
-    // @ts-expect-error: test
     expect(interpolate(text, values)).toMatchInlineSnapshot(
       `"42 Hello [object Object] Hello"`,
     );
@@ -52,7 +51,6 @@ describe('interpolate', () => {
     // Should we emit warnings in such case?
     const text = 'Hello {name} how are you {unprovidedValue}?';
     const values = {name: 'Sébastien', extraValue: 'today'};
-    // @ts-expect-error: test
     expect(interpolate(text, values)).toMatchInlineSnapshot(
       `"Hello Sébastien how are you {unprovidedValue}?"`,
     );
@@ -62,7 +60,6 @@ describe('interpolate', () => {
     // Should we emit warnings in such case?
     const text = 'Hello {name} how are you {day}?';
     expect(interpolate(text)).toEqual(text);
-    // @ts-expect-error: test
     expect(interpolate(text, {})).toEqual(text);
   });
 
@@ -86,7 +83,6 @@ describe('interpolate', () => {
       extraUselessValue1: <div>test</div>,
       extraUselessValue2: 'hi',
     };
-    // @ts-expect-error: test
     expect(interpolate(text, values)).toMatchSnapshot();
   });
 });
@@ -128,15 +124,13 @@ describe('<Interpolate>', () => {
     expect(() =>
       renderer.create(
         <Interpolate>
-          {/* @ts-expect-error: for test */}
           <span>aaa</span>
         </Interpolate>,
       ),
     ).toThrowErrorMatchingInlineSnapshot(
       `"The Docusaurus <Interpolate> component only accept simple string values. Received: React element"`,
     );
     expect(() =>
-      // @ts-expect-error: test
       renderer.create(<Interpolate>{null}</Interpolate>),
     ).toThrowErrorMatchingInlineSnapshot(
       `"The Docusaurus <Interpolate> component only accept simple string values. Received: object"`,

packages/docusaurus/src/server/__tests__/configValidation.test.ts

@@ -477,7 +477,7 @@ describe('config warning and error', () => {
       url: 'https://mysite.com/someSubpath',
     });
     expect(error).toBeDefined();
-    expect(error.message).toBe(
+    expect(error?.message).toBe(
       'The url is not supposed to contain a sub-path like "/someSubpath". Please use the baseUrl field for sub-paths.',
     );
   });

website/docs/api/themes/theme-configuration.mdx

@@ -799,12 +799,14 @@ By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-ren
 Example configuration:
 
 ```js title="docusaurus.config.js"
+const {themes} = require('prism-react-renderer');
+
 module.exports = {
   themeConfig: {
     prism: {
       // highlight-start
-      theme: require('prism-react-renderer/themes/github'),
-      darkTheme: require('prism-react-renderer/themes/dracula'),
+      theme: themes.github,
+      darkTheme: themes.dracula,
       // highlight-end
     },
   },

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -64,11 +64,13 @@ By default, the Prism [syntax highlighting theme](https://github.com/FormidableL
 For example, if you prefer to use the `dracula` highlighting theme:
 
 ```js title="docusaurus.config.js"
+const {themes} = require('prism-react-renderer');
+
 module.exports = {
   themeConfig: {
     prism: {
       // highlight-next-line
-      theme: require('prism-react-renderer/themes/dracula'),
+      theme: themes.dracula,
     },
   },
 };

website/docusaurus.config.js

@@ -478,7 +478,15 @@ module.exports = async function createConfigAsync() {
           content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter ${TwitterSvg}</a>`,
         },
         prism: {
-          additionalLanguages: ['java', 'latex', 'PHp'],
+          additionalLanguages: [
+            'java',
+            'latex',
+            'PHp',
+            'bash',
+            'diff',
+            'json',
+            'scss',
+          ],
           magicComments: [
             {
               className: 'theme-code-block-highlighted-line',

website/src/utils/prismDark.mjs

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import darkTheme from 'prism-react-renderer/themes/vsDark/index.cjs.js';
+import {themes} from 'prism-react-renderer';
+
+const darkTheme = themes.vsDark;
 
 export default {
   plain: {