Add lazy syntax highlighting hook (github#29610)

rachmari · web-flow · commit dea3da24279a · 2022-08-04T21:23:22.000Z
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
 import { ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
 
+import useLazyLoadHighlightJS from 'components/hooks/useLazyLoadHighlightJS'
 import { Link } from 'components/Link'
 import { DefaultLayout } from 'components/DefaultLayout'
 import { ArticleTitle } from 'components/article/ArticleTitle'
@@ -58,23 +58,7 @@ export const ArticlePage = () => {
   const { t } = useTranslation('pages')
   const currentPath = asPath.split('?')[0]
 
-  // If the page contains `[data-highlight]` blocks, these pages need
-  // syntax highlighting. But not every page needs it, so it's conditionally
-  // lazy-loaded on the client.
-  const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
-  useEffect(() => {
-    // It doesn't need to use querySelector because all we care about is if
-    // there is greater than zero of these in the DOM.
-    // Note! This "core selector", which determines whether to bother
-    // or not, needs to match what's used inside ClientSideHighlightJS.tsx
-    if (document.querySelector('[data-highlight]')) {
-      setLazyLoadHighlightJS(true)
-    }
-
-    // Important to depend on the current path because the first page you
-    // load, before any client-side navigation, might not need it, but the
-    // consecutive one does.
-  }, [asPath])
+  const lazyLoadHighlightJS = useLazyLoadHighlightJS(asPath)
 
   return (
     <DefaultLayout>
diff --git a/components/article/AutomatedPage.tsx b/components/article/AutomatedPage.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
+import useLazyLoadHighlightJS from 'components/hooks/useLazyLoadHighlightJS'
 import { DefaultLayout } from 'components/DefaultLayout'
 import { ArticleTitle } from 'components/article/ArticleTitle'
 import { MarkdownContent } from 'components/ui/MarkdownContent'
@@ -20,23 +20,7 @@ export const AutomatedPage = ({ children }: Props) => {
   const { asPath } = useRouter()
   const { title, intro, renderedPage, miniTocItems } = useAutomatedPageContext()
 
-  // If the page contains `[data-highlight]` blocks, these pages need
-  // syntax highlighting. But not every page needs it, so it's conditionally
-  // lazy-loaded on the client.
-  const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
-  useEffect(() => {
-    // It doesn't need to use querySelector because all we care about is if
-    // there is greater than zero of these in the DOM.
-    // Note! This "core selector", which determines whether to bother
-    // or not, needs to match what's used inside ClientSideHighlightJS.tsx
-    if (document.querySelector('[data-highlight]')) {
-      setLazyLoadHighlightJS(true)
-    }
-
-    // Important to depend on the current path because the first page you
-    // load, before any client-side navigation, might not need it, but the
-    // consecutive one does.
-  }, [asPath])
+  const lazyLoadHighlightJS = useLazyLoadHighlightJS(asPath)
 
   return (
     <DefaultLayout>
diff --git a/components/hooks/useLazyLoadHighlightJS.ts b/components/hooks/useLazyLoadHighlightJS.ts
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react'
+
+export default function useLazyLoadHighlightJS(path: string) {
+  // If the page contains `[data-highlight]` blocks, these pages need
+  // syntax highlighting. But not every page needs i  t, so it's conditionally
+  // lazy-loaded on the client.
+  const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
+  useEffect(() => {
+    // It doesn't need to use querySelector because all we care about is if
+    // there is greater than zero of these in the DOM.
+    // Note! This "core selector", which determines whether to bother
+    // or not, needs to match what's used inside ClientSideHighlightJS.tsx
+    if (document.querySelector('[data-highlight]')) {
+      setLazyLoadHighlightJS(true)
+    }
+
+    // Important to depend on the current path because the first page you
+    // load, before any client-side navigation, might not need it, but the
+    // consecutive one does.
+  }, [path])
+
+  return lazyLoadHighlightJS
+}
diff --git a/components/rest/RestReferencePage.tsx b/components/rest/RestReferencePage.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import cx from 'classnames'
 
+import useLazyLoadHighlightJS from 'components/hooks/useLazyLoadHighlightJS'
 import { DefaultLayout } from 'components/DefaultLayout'
 import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { Lead } from 'components/ui/Lead'
@@ -73,23 +74,7 @@ export const RestReferencePage = ({ restOperations }: StructuredContentT) => {
     })
   }, [])
 
-  // If the page contains `[data-highlight]` blocks, these pages need
-  // syntax highlighting. But not every page needs it, so it's conditionally
-  // lazy-loaded on the client.
-  const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
-  useEffect(() => {
-    // It doesn't need to use querySelector because all we care about is if
-    // there is greater than zero of these in the DOM.
-    // Note! This "core selector", which determines whether to bother
-    // or not, needs to match what's used inside ClientSideHighlightJS.tsx
-    if (document.querySelector('[data-highlight]')) {
-      setLazyLoadHighlightJS(true)
-    }
-
-    // Important to depend on the current path because the first page you
-    // load, before any client-side navigation, might not need it, but the
-    // consecutive one does.
-  }, [asPath])
+  const lazyLoadHighlightJS = useLazyLoadHighlightJS(asPath)
 
   return (
     <DefaultLayout>
