fix(code-viewer): support SSR (#192)

Author: P0lip

package.json

@@ -58,7 +58,6 @@
     "refractor": "^3.0.0",
     "tslib": "^1.12.0",
     "use-debounce": "^3.4.3",
-    "use-resize-observer": "^6.1.0",
     "yup": "^0.28.3"
   },
   "devDependencies": {

src/CodeViewer/__tests__/Viewer.spec.tsx

@@ -19,8 +19,6 @@ jest.mock('../components/BlockCodeViewer/ObservableSet', () => ({
   },
 }));
 
-jest.mock('use-resize-observer');
-
 describe('Code Viewer component', () => {
   afterEach(() => {
     (parseCode as jest.Mock).mockReset();

src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx

@@ -1,10 +1,7 @@
 import cn from 'classnames';
-import { debounce } from 'lodash';
 import * as React from 'react';
-import useResizeObserver from 'use-resize-observer';
 
 import { Classes } from '../../../classes';
-import { SINGLE_LINE_SIZE } from './consts';
 import { useSlicedBlocks } from './hooks/useSlicedBlocks';
 import { ObservableSet } from './ObservableSet';
 import { SingleCodeBlock } from './SingleCodeBlock';
@@ -15,29 +12,17 @@ export interface IBlockCodeViewerProps extends React.HTMLAttributes<HTMLPreEleme
   showLineNumbers: boolean;
 }
 
-function calculateMaxLines(height: number) {
-  return Math.floor(Math.min(window.innerHeight, height) / SINGLE_LINE_SIZE) + 1;
-}
-
 const BlockCodeViewer: React.FC<IBlockCodeViewerProps> = ({ className, language, value, showLineNumbers, ...rest }) => {
   const nodeRef = React.useRef<HTMLPreElement | null>(null);
-  const [maxLines, setMaxLines] = React.useState<number | null>(null);
+  const maxLines = 100;
   const [observer, setObserver] = React.useState<IntersectionObserver>();
   const viewportSet = React.useRef(new ObservableSet());
-  const slicedBlocks = useSlicedBlocks(value, maxLines === null ? null : Math.max(0, maxLines - 1));
-  const lineNumberCharacterCount = String(
-    slicedBlocks !== null && maxLines !== null ? slicedBlocks.length * maxLines : 0,
-  ).length;
-
-  React.useLayoutEffect(() => {
-    if (nodeRef.current !== null) {
-      setMaxLines(calculateMaxLines(window.innerHeight)); // we have to use window here, as element may not ave any height at this time
-    }
-  }, [nodeRef]);
+  const slicedBlocks = useSlicedBlocks(value ?? '', maxLines - 1);
+  const lineNumberCharacterCount = String(slicedBlocks.length * maxLines).length;
 
   React.useEffect(() => {
     const { current: viewport } = viewportSet;
-    if (nodeRef.current === null || maxLines === null) {
+    if (nodeRef.current === null) {
       return;
     }
 
@@ -71,21 +56,7 @@ const BlockCodeViewer: React.FC<IBlockCodeViewerProps> = ({ className, language,
       setObserver(void 0);
       observer.disconnect();
     };
-  }, [nodeRef, maxLines]);
-
-  useResizeObserver({
-    onResize: debounce(
-      ({ height }) => {
-        const newMaxLines = calculateMaxLines(height);
-        if (newMaxLines !== maxLines) {
-          setMaxLines(newMaxLines);
-        }
-      },
-      250,
-      { leading: true },
-    ),
-    ref: nodeRef,
-  });
+  }, [nodeRef]);
 
   return (
     <pre

src/CodeViewer/components/BlockCodeViewer/hooks/useSlicedBlocks.ts

@@ -14,12 +14,8 @@ function createSlicedBlock(): SlicedBlock {
   };
 }
 
-export const useSlicedBlocks = (value: string, maxLines: number | null) => {
-  return React.useMemo<SlicedBlock[] | null>(() => {
-    if (maxLines === null) {
-      return null;
-    }
-
+export const useSlicedBlocks = (value: string, maxLines: number) => {
+  return React.useMemo<SlicedBlock[]>(() => {
     const blocks: SlicedBlock[] = [createSlicedBlock()];
 
     for (let i = 0, n = 0; i < value.length; i++) {

yarn.lock

@@ -15863,13 +15863,6 @@ use-debounce@^3.4.3:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-3.4.3.tgz#5df9322322b3f1b1c263d46413f9facf6d8b56ab"
   integrity sha512-nxy+opOxDccWfhMl36J5BSCTpvcj89iaQk2OZWLAtBJQj7ISCtx1gh+rFbdjGfMl6vtCZf6gke/kYvrkVfHMoA==
 
-use-resize-observer@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-6.1.0.tgz#d4d267a940dbf9c326da6042f8a4bb8c89d29729"
-  integrity sha512-SiPcWHiIQ1CnHmb6PxbYtygqiZXR0U9dNkkbpX9VYnlstUwF8+QqpUTrzh13pjPwcjMVGR+QIC+nvF5ujfFNng==
-  dependencies:
-    resize-observer-polyfill "^1.5.1"
-
 use-sidecar@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"