Fix dimensions when code starts hidden

Author: pomber

packages/mdx/src/highlighter/index.tsx

@@ -3,6 +3,8 @@ import { highlight as light } from "@code-hike/lighter"
 
 const newlineRe = /\r\n|\r|\n/
 
+const warnings = new Set()
+
 export async function highlight({
   code,
   lang,
@@ -35,10 +37,13 @@ export async function highlight({
     return { lines, lang }
   } catch (e) {
     // TODO check error is "missing grammar"
-    console.warn(
-      "[Code Hike warning]",
-      `${lang} is not a valid language, no syntax highlighting will be applied.`
-    )
+    if (!warnings.has(lang)) {
+      console.warn(
+        "[Code Hike warning]",
+        `${lang} is not a valid language, no syntax highlighting will be applied.`
+      )
+      warnings.add(lang)
+    }
     return highlight({ code, lang: "text", theme })
   }
 }

packages/mdx/src/smooth-code/code-tween.tsx

@@ -109,10 +109,7 @@ function BeforeDimensions({
   debug?: boolean
 }) {
   return (
-    <Wrapper
-      htmlProps={htmlProps}
-      style={{ opacity: debug ? 0.9 : 0, overflow: "auto" }}
-    >
+    <Wrapper htmlProps={htmlProps} measured={false}>
       {element}
     </Wrapper>
   )
@@ -137,7 +134,7 @@ function AfterDimensions({
   htmlProps: HTMLProps
 }) {
   return (
-    <Wrapper htmlProps={htmlProps} style={{ opacity: 1 }}>
+    <Wrapper htmlProps={htmlProps} measured={true}>
       <SmoothLines
         codeStep={stepInfo}
         progress={progress}
@@ -159,12 +156,12 @@ function AfterDimensions({
 
 function Wrapper({
   htmlProps,
-  style,
   children,
+  measured,
 }: {
   htmlProps?: HTMLProps
-  style: React.CSSProperties
   children: React.ReactNode
+  measured: boolean
 }) {
   return (
     // not using <pre> because https://github.com/code-hike/codehike/issues/120
@@ -173,10 +170,7 @@ function Wrapper({
       className={`ch-code-wrapper ${
         htmlProps?.className || ""
       }`}
-      style={{
-        ...style,
-        ...htmlProps?.style,
-      }}
+      data-ch-measured={measured}
       children={children}
     />
   )

packages/mdx/src/smooth-code/index.scss

@@ -51,3 +51,9 @@
   // to avoid resets using "border-box" that break the scrollbar https://github.com/code-hike/codehike/issues/240
   box-sizing: content-box;
 }
+.ch-code-wrapper[data-ch-measured="false"] {
+  overflow: auto;
+}
+.ch-code-wrapper[data-ch-measured="false"] > * {
+  opacity: 0;
+}

packages/mdx/src/smooth-code/use-dimensions.tsx

@@ -45,9 +45,13 @@ function useDimensions(
   const [dimensions, setDimensions] =
     React.useState<Dimensions>(null)
 
+  // in case the element starts hidden https://github.com/code-hike/codehike/issues/372
+  const [visibility, markAsVisible] = React.useState(0)
+
   const windowWidth = useWindowWidth()
   const prevLineRef = React.useRef<HTMLDivElement>(null!)
 
+  // the element to render before dimensions are calculated
   const { prevLongestLine, nextLongestLine, element } =
     React.useMemo(() => {
       const prevLongestLine = getLongestLine(
@@ -135,6 +139,7 @@ function useDimensions(
     prevLongestLine,
     nextLongestLine,
     minColumns,
+    visibility,
   ]
 
   useLayoutEffect(() => {
@@ -143,6 +148,21 @@ function useDimensions(
       const contentElement = pll?.parentElement!
       const codeElement = contentElement.parentElement!
 
+      const { width } = codeElement.getBoundingClientRect()
+      if (!width && visibility === 0) {
+        const resizeObserver = new ResizeObserver(
+          ([entry]) => {
+            const { width } = entry.contentRect
+            if (width) {
+              resizeObserver.disconnect()
+              markAsVisible(1)
+            }
+          }
+        )
+        resizeObserver.observe(codeElement)
+        return () => resizeObserver.disconnect()
+      }
+
       // TODO is it clientWidth or clientRect?
       const lineContentDiv = pll?.querySelector(
         ":scope > div"
@@ -195,6 +215,7 @@ function useDimensions(
       }
       setDimensions(d)
     }
+    return () => {}
   }, allDeps)
 
   if (