Merge pull request #306 from FormidableLabs/prism-optimizations

Fix performance issues on event info panel

package.json

@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "electron": "^9.0.4",
+    "prismjs": "^1.21.0",
     "ws": "^7.3.0"
   },
   "devDependencies": {
@@ -81,6 +82,7 @@
     "@types/jest-environment-puppeteer": "^4.3.2",
     "@types/jest-image-snapshot": "^3.1.0",
     "@types/nanoid": "^2.1.0",
+    "@types/prismjs": "^1.16.1",
     "@types/puppeteer": "^3.0.1",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
@@ -129,7 +131,6 @@
     "nanoid": "^3.1.12",
     "polished": "^3.6.6",
     "prettier": "^2.1.1",
-    "prism-react-renderer": "^1.1.1",
     "puppeteer": "^3.3.0",
     "react": "^16.13.1",
     "react-cosmos": "5.4.0",

src/panel/components/CodeHighlight.fixture.tsx

@@ -36,15 +36,16 @@ export default {
         value:{" "}
         <CodeHighlight
           code={JSON.stringify({ number: 1234, string: "Hello" }, null, 2)}
-          language="json"
+          language="javascript"
         />
       </p>
     </Wrapper>
   ),
   "Inline - string": (
     <Wrapper>
       <p data-snapshot>
-        value: <InlineCodeHighlight code={'"Hello world"'} language="json" />
+        value:{" "}
+        <InlineCodeHighlight code={'"Hello world"'} language="javascript" />
       </p>
     </Wrapper>
   ),
@@ -54,7 +55,7 @@ export default {
         value:{" "}
         <InlineCodeHighlight
           code={'"Hello world this string is very long"'}
-          language="json"
+          language="javascript"
         />
       </p>
     </Wrapper>
@@ -65,7 +66,7 @@ export default {
         value:{" "}
         <InlineCodeHighlight
           code={JSON.stringify({ prop: 123 })}
-          language="json"
+          language="javascript"
         />
       </p>
     </Wrapper>
@@ -79,7 +80,7 @@ export default {
             prop: 123,
             otherProp: "some string",
           })}
-          language="json"
+          language="javascript"
         />
       </p>
     </Wrapper>
@@ -90,7 +91,7 @@ export default {
         value:{" "}
         <InlineCodeHighlight
           code={JSON.stringify([1, "two"])}
-          language="json"
+          language="javascript"
         />
       </p>
     </Wrapper>
@@ -101,7 +102,7 @@ export default {
         value:{" "}
         <InlineCodeHighlight
           code={JSON.stringify([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])}
-          language="json"
+          language="javascript"
         />
       </p>
     </Wrapper>

src/panel/components/CodeHighlight.tsx

@@ -1,70 +1,67 @@
-import React, { FC, memo } from "react";
-import Highlight, { defaultProps } from "prism-react-renderer";
+import React, { FC, useCallback, ComponentPropsWithoutRef } from "react";
 import styled from "styled-components";
 
-export const CodeHighlight: FC<any> = memo(function CodeHighlightMemo(props) {
+type PrismLanguage = "javascript" | "graphql";
+
+export const CodeHighlight: FC<
+  {
+    code: string;
+    language: PrismLanguage;
+  } & ComponentPropsWithoutRef<typeof StyledCodeBlock>
+> = ({ code, language, ...props }) => {
+  const handleRef = useCallback(
+    (ref: HTMLPreElement | null) => {
+      if (ref === null) {
+        return;
+      }
+
+      (ref.children[0] as HTMLElement).textContent = code;
+      // Run prism on element (in web worker/async)
+      // when code is a chonker
+      Prism.highlightElement(ref, code.length > 600);
+    },
+    [code, language]
+  );
+
   return (
-    <Highlight {...defaultProps} {...props}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <StyledCodeBlock
-          className={`${className} ${props.className}`}
-          style={{ ...style, backgroundColor: undefined, color: undefined }}
-        >
-          <code>
-            {tokens.map((line, i) => (
-              <div
-                key={i}
-                {...getLineProps({ line, key: i })}
-                style={undefined}
-              >
-                {line.map((token, key) => (
-                  <span
-                    key={key}
-                    {...getTokenProps({ token, key })}
-                    style={undefined}
-                  />
-                ))}
-              </div>
-            ))}
-          </code>
-        </StyledCodeBlock>
-      )}
-    </Highlight>
+    <StyledCodeBlock
+      {...props}
+      ref={handleRef}
+      className={`language language-${language} ${props.className || ""}`}
+    >
+      <code />
+    </StyledCodeBlock>
   );
-});
+};
 
-export const InlineCodeHighlight: FC<any> = memo(
-  function InlineCodeHighlightMemo({ code, ...props }) {
-    return (
-      <Highlight {...defaultProps} code={code} {...props}>
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <StyledInlineBlock
-            className={`${className} ${props.className}`}
-            style={{ ...style, backgroundColor: undefined, color: undefined }}
-          >
-            <code>
-              {tokens.map((line, i) => (
-                <div
-                  key={i}
-                  {...getLineProps({ line, key: i })}
-                  style={undefined}
-                >
-                  {line.map((token, key) => (
-                    <span
-                      key={key}
-                      {...getTokenProps({ token, key })}
-                      style={undefined}
-                    />
-                  ))}
-                </div>
-              ))}
-            </code>
-          </StyledInlineBlock>
-        )}
-      </Highlight>
-    );
-  }
-);
+export const InlineCodeHighlight: FC<
+  {
+    code: string;
+    language: PrismLanguage;
+  } & ComponentPropsWithoutRef<typeof StyledCodeBlock>
+> = ({ code, language, ...props }) => {
+  const handleRef = useCallback(
+    (ref) => {
+      if (ref === null) {
+        return;
+      }
+
+      // Run prism on element (sync)
+      Prism.highlightElement(ref, false);
+    },
+    [code, language]
+  );
+
+  return (
+    <StyledInlineBlock
+      {...props}
+      ref={handleRef}
+      className={`language language-${language} ${props.className || ""}`}
+    >
+      <code>{code}</code>
+    </StyledInlineBlock>
+  );
+};
 
 export const StyledInlineBlock = styled.pre`
   display: inline-flex;

src/panel/cosmos.decorator.tsx

@@ -1,8 +1,9 @@
+import "./App.css";
+import "./prism";
 import React, { FC } from "react";
 import { MemoryRouter } from "react-router";
 import { ThemeProvider, createGlobalStyle } from "styled-components";
 import { theme, GlobalStyle } from "./theme";
-import "./App.css";
 import { DevtoolsContext } from "./context";
 
 const FixtureStyle = createGlobalStyle`

src/panel/definitions.d.ts

@@ -10,3 +10,8 @@ declare namespace NodeJS {
     PKG_VERSION: string;
   }
 }
+
+/**
+ * Implicit prism declaration (injected by ./prism.ts).
+ */
+declare const Prism: import("prismjs");

src/panel/pages/error/ErrorBoundary.fixture.tsx

@@ -8,7 +8,9 @@ const ErrorChild = () => {
     throw err;
   }
 
-  err.stack = err.stack.replace(/localhost/g, "cosmos").replace(/:\d+/g, ":1");
+  err.stack = err.stack
+    .replace(/localhost|host.docker.internal/g, "cosmos")
+    .replace(/:\d+/g, ":1");
   throw err;
 };