refactor clientsidehighlight (#29713)

* refactor ClientSideHighlight

* names

* names again

components/ClientSideHighlight.tsx

@@ -1,23 +1,31 @@
 import { useState, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 
-export default function useLazyLoadHighlightJS(path: string) {
+const ClientSideHighlightJS = dynamic(() => import('./ClientSideHighlightJS'), {
+  ssr: false,
+})
+
+export function ClientSideHighlight() {
+  const { asPath } = useRouter()
   // 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)
+  const [load, setLoad] = 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)
+    if (!load && document.querySelector('[data-highlight]')) {
+      setLoad(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])
+  }, [asPath])
 
-  return lazyLoadHighlightJS
+  if (load) return <ClientSideHighlightJS />
+  return null
 }

components/article/ArticlePage.tsx

@@ -1,10 +1,8 @@
 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'
@@ -17,8 +15,7 @@ import { ArticleGridLayout } from './ArticleGridLayout'
 import { PlatformPicker } from 'components/article/PlatformPicker'
 import { ToolPicker } from 'components/article/ToolPicker'
 import { MiniTocs } from 'components/ui/MiniTocs'
-
-const ClientSideHighlightJS = dynamic(() => import('./ClientSideHighlightJS'), { ssr: false })
+import { ClientSideHighlight } from 'components/ClientSideHighlight'
 
 // Mapping of a "normal" article to it's interactive counterpart
 const interactiveAlternatives: Record<string, { href: string }> = {
@@ -58,13 +55,9 @@ export const ArticlePage = () => {
   const { t } = useTranslation('pages')
   const currentPath = asPath.split('?')[0]
 
-  const lazyLoadHighlightJS = useLazyLoadHighlightJS(asPath)
-
   return (
     <DefaultLayout>
-      {/* Doesn't matter *where* this is included because it will
-      never render anything. It always just return null. */}
-      {lazyLoadHighlightJS && <ClientSideHighlightJS />}
+      <ClientSideHighlight />
 
       <div className="container-xl px-3 px-md-6 my-4">
         <ArticleGridLayout

components/article/AutomatedPage.tsx

@@ -1,7 +1,3 @@
-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'
@@ -9,24 +5,18 @@ import { Lead } from 'components/ui/Lead'
 import { ArticleGridLayout } from './ArticleGridLayout'
 import { MiniTocs } from 'components/ui/MiniTocs'
 import { useAutomatedPageContext } from 'components/context/AutomatedPageContext'
-
-const ClientSideHighlightJS = dynamic(() => import('./ClientSideHighlightJS'), { ssr: false })
+import { ClientSideHighlight } from 'components/ClientSideHighlight'
 
 type Props = {
   children: React.ReactNode
 }
 
 export const AutomatedPage = ({ children }: Props) => {
-  const { asPath } = useRouter()
   const { title, intro, renderedPage, miniTocItems } = useAutomatedPageContext()
 
-  const lazyLoadHighlightJS = useLazyLoadHighlightJS(asPath)
-
   return (
     <DefaultLayout>
-      {/* Doesn't matter *where* this is included because it will
-      never render anything. It always just return null. */}
-      {lazyLoadHighlightJS && <ClientSideHighlightJS />}
+      <ClientSideHighlight />
 
       <div className="container-xl px-3 px-md-6 my-4">
         <ArticleGridLayout

components/rest/RestReferencePage.tsx

@@ -3,7 +3,6 @@ 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'
@@ -11,10 +10,7 @@ import { RestOperation } from './RestOperation'
 import styles from './RestOperation.module.scss'
 import { useAutomatedPageContext } from 'components/context/AutomatedPageContext'
 import { Operation } from './types'
-
-const ClientSideHighlightJS = dynamic(() => import('components/article/ClientSideHighlightJS'), {
-  ssr: false,
-})
+import { ClientSideHighlight } from 'components/ClientSideHighlight'
 
 const ClientSideRedirectExceptions = dynamic(
   () => import('components/article/ClientsideRedirectExceptions'),
@@ -74,14 +70,12 @@ export const RestReferencePage = ({ restOperations }: StructuredContentT) => {
     })
   }, [])
 
-  const lazyLoadHighlightJS = useLazyLoadHighlightJS(asPath)
-
   return (
     <DefaultLayout>
       {/* Doesn't matter *where* this is included because it will
       never render anything. It always just return null. */}
       {loadClientsideRedirectExceptions && <ClientSideRedirectExceptions />}
-      {lazyLoadHighlightJS && <ClientSideHighlightJS />}
+      <ClientSideHighlight />
       <div
         className={cx(styles.restOperation, 'px-3 px-md-6 my-4 container-xl')}
         data-search="article-body"