Merge pull request #1042 from rust-lang/no-react-prism

Remove react-prism

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -76,8 +76,13 @@ module.exports = {
         'BuildMenu.tsx',
         'ButtonSet.tsx',
         'Header.tsx',
+        'HelpExample.tsx',
         'Notifications.tsx',
+        'Output/OutputPrism.tsx',
+        'Output/PaneWithMir.tsx',
+        'Output/SimplePane.tsx',
         'PopButton.tsx',
+        'Prism.tsx',
         'Stdin.tsx',
         'actions.ts',
         'api.ts',
@@ -87,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

@@ -16,8 +16,13 @@ node_modules
 !BuildMenu.tsx
 !ButtonSet.tsx
 !Header.tsx
+!HelpExample.tsx
 !Notifications.tsx
+!Output/OutputPrism.tsx
+!Output/PaneWithMir.tsx
+!Output/SimplePane.tsx
 !PopButton.tsx
+!Prism.tsx
 !Stdin.tsx
 !actions.ts
 !api.ts
@@ -27,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,9 +1,7 @@
 import React, { useCallback } from 'react';
 import root from 'react-shadow';
 
-import 'prismjs/components/prism-rust.min';
-import { PrismCode } from 'react-prism';
-
+import Prism from './Prism';
 import * as actions from './actions';
 import { useAppDispatch } from './hooks';
 
@@ -16,10 +14,7 @@ export interface HelpExampleProps {
 
 const HelpExample: React.FC<HelpExampleProps> = ({ code }) => {
   const dispatch = useAppDispatch();
-  const showExample = useCallback(
-    () => dispatch(actions.showExample(code)),
-    [dispatch, code]
-  );
+  const showExample = useCallback(() => dispatch(actions.showExample(code)), [dispatch, code]);
 
   return (
     <div className={styles.container}>
@@ -29,11 +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,19 +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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import Header from './Header';
-import SimplePane, { SimplePaneProps } from './SimplePane';
 import OutputPrism from './OutputPrism';
+import SimplePane, { SimplePaneProps } from './SimplePane';
 
 interface PaneWithMirProps extends SimplePaneProps {
   code?: string;
@@ -12,9 +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

@@ -2,15 +2,15 @@ import React from 'react';
 
 import Header from './Header';
 import Loader from './Loader';
-import Section from './Section';
 import OutputPrism from './OutputPrism';
+import Section from './Section';
 
 interface HighlightErrorsProps {
-  children: React.ReactNode;
+  children?: string;
   label: string;
 }
 
-const onOutputPrismCopy: React.ClipboardEventHandler = event => {
+const onOutputPrismCopy: React.ClipboardEventHandler = (event) => {
   // Blank out HTML copy data.
   // Though linkified output is handy in the Playground, it does more harm
   // than good when copied elsewhere, and terminal output is usable on its own.
@@ -24,9 +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>
 );
 
@@ -42,12 +40,16 @@ export interface ReallySimplePaneProps {
   error?: string;
 }
 
-const SimplePane: React.FC<SimplePaneProps> = props => (
+const SimplePane: React.FC<SimplePaneProps> = (props) => (
   <div data-test-id={`output-${props.kind}`}>
-    {(props.requestsInProgress > 0) && <Loader />}
-    <Section kind="error" label="Errors">{props.error}</Section>
+    {props.requestsInProgress > 0 && <Loader />}
+    <Section kind="error" label="Errors">
+      {props.error}
+    </Section>
     <HighlightErrors label="Standard Error">{props.stderr}</HighlightErrors>
-    <Section kind="stdout" label="Standard Output">{props.stdout}</Section>
+    <Section kind="stdout" label="Standard Output">
+      {props.stdout}
+    </Section>
     {props.children}
   </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;