Remove react-prism

It doesn't seem to be updated anymore and our uses are small enough.

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -82,6 +82,7 @@ module.exports = {
         'Output/PaneWithMir.tsx',
         'Output/SimplePane.tsx',
         'PopButton.tsx',
+        'Prism.tsx',
         'Stdin.tsx',
         'actions.ts',
         'api.ts',
@@ -91,6 +92,7 @@ module.exports = {
         'editor/SimpleEditor.tsx',
         'hooks.ts',
         'observer.ts',
+        'prism-shim.ts',
         'reducers/**/*.ts',
         'reducers/websocket.ts',
         'selectors/index.spec.ts',

ui/frontend/.prettierignore

@@ -22,6 +22,7 @@ node_modules
 !Output/PaneWithMir.tsx
 !Output/SimplePane.tsx
 !PopButton.tsx
+!Prism.tsx
 !Stdin.tsx
 !actions.ts
 !api.ts
@@ -31,6 +32,7 @@ node_modules
 !editor/SimpleEditor.tsx
 !hooks.ts
 !observer.ts
+!prism-shim.ts
 !reducers/**/*.ts
 !selectors/index.spec.ts
 !types.ts

ui/frontend/HelpExample.tsx

@@ -1,8 +1,7 @@
-import 'prismjs/components/prism-rust.min';
 import React, { useCallback } from 'react';
-import { PrismCode } from 'react-prism';
 import root from 'react-shadow';
 
+import Prism from './Prism';
 import * as actions from './actions';
 import { useAppDispatch } from './hooks';
 
@@ -25,9 +24,7 @@ const HelpExample: React.FC<HelpExampleProps> = ({ code }) => {
       <root.div>
         <link href={prismTheme} rel="stylesheet" />
 
-        <pre>
-          <PrismCode className="language-rust">{code}</PrismCode>
-        </pre>
+        <Prism language="rust">{code}</Prism>
       </root.div>
     </div>
   );

ui/frontend/Output/OutputPrism.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { PrismCode } from 'react-prism';
+
+import Prism from '../Prism';
 
 import styles from './OutputPrism.module.css';
 
 interface OutputPrismProps {
-  children: React.ReactNode;
-  languageCode: 'language-rust_mir' | 'language-rust_errors';
+  children?: string;
+  language: 'rust_mir' | 'rust_errors';
 }
 
-const OutputPrism: React.FC<OutputPrismProps> = ({ languageCode, children }) => (
-  <pre>
-    <PrismCode className={`${styles.container} ${languageCode}`}>{children}</PrismCode>
-  </pre>
+const OutputPrism: React.FC<OutputPrismProps> = ({ language, children }) => (
+  <Prism className={styles.container} language={language}>
+    {children}
+  </Prism>
 );
 
 export default OutputPrism;

ui/frontend/Output/PaneWithMir.tsx

@@ -12,7 +12,7 @@ const PaneWithMir: React.FC<PaneWithMirProps> = ({ code, ...rest }) => (
   <SimplePane {...rest}>
     <div data-test-id="output-result">
       <Header label="Result" />
-      <OutputPrism languageCode="language-rust_mir">{code}</OutputPrism>
+      <OutputPrism language="rust_mir">{code}</OutputPrism>
     </div>
   </SimplePane>
 );

ui/frontend/Output/SimplePane.tsx

@@ -6,7 +6,7 @@ import OutputPrism from './OutputPrism';
 import Section from './Section';
 
 interface HighlightErrorsProps {
-  children: React.ReactNode;
+  children?: string;
   label: string;
 }
 
@@ -24,7 +24,7 @@ const onOutputPrismCopy: React.ClipboardEventHandler = (event) => {
 const HighlightErrors: React.FC<HighlightErrorsProps> = ({ label, children }) => (
   <div data-test-id="output-stderr" onCopy={onOutputPrismCopy}>
     <Header label={label} />
-    <OutputPrism languageCode="language-rust_errors">{children}</OutputPrism>
+    <OutputPrism language="rust_errors">{children}</OutputPrism>
   </div>
 );
 

ui/frontend/Prism.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from 'react';
+
+import RealPrism from './prism-shim';
+
+interface PrismProps {
+  children?: string;
+  language: 'rust' | 'rust_mir' | 'rust_errors';
+  className?: string;
+}
+
+const Prism: React.FC<PrismProps> = ({ children, language, className = '' }) => {
+  const element = useRef(null);
+
+  useEffect(() => {
+    if (!element.current) {
+      return;
+    }
+
+    RealPrism.highlightElement(element.current);
+  }, [element, children, language]);
+
+  return (
+    <pre>
+      <code ref={element} className={`${className} language-${language}`}>
+        {children}
+      </code>
+    </pre>
+  );
+};
+
+export default Prism;

ui/frontend/package.json

@@ -20,7 +20,6 @@
     "react-dom": "^18.2.0",
     "react-monaco-editor": "^0.55.0",
     "react-portal": "^4.1.4",
-    "react-prism": "^4.0.0",
     "react-redux": "^9.0.2",
     "react-shadow": "^20.0.0",
     "redux-thunk": "^3.1.0",

ui/frontend/pnpm-lock.yaml

@@ -0,0 +1,6 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-rust';
+
+Prism.manual = true;
+
+export default Prism;