@mui/internal-docs-infra/esm/useCode/Pre.js

MUI Infra - internal documentation creation tools.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { toText } from 'hast-util-to-text';
import { decompressSync, strFromU8 } from 'fflate';
import { decode } from 'uint8-to-base64';
import { hastToJsx } from "../pipeline/hastUtils/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function Pre(_ref) {
  var children = _ref.children,
    className = _ref.className,
    ref = _ref.ref,
    shouldHighlight = _ref.shouldHighlight,
    _ref$hydrateMargin = _ref.hydrateMargin,
    hydrateMargin = _ref$hydrateMargin === void 0 ? '200px 0px 200px 0px' : _ref$hydrateMargin;
  var hast = React.useMemo(function () {
    if (typeof children === 'string') {
      return null;
    }
    if ('hastJson' in children) {
      return JSON.parse(children.hastJson);
    }
    if ('hastGzip' in children) {
      return JSON.parse(strFromU8(decompressSync(decode(children.hastGzip))));
    }
    return children;
  }, [children]);
  var _React$useState = React.useState(_defineProperty({}, 0, true)),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    visibleFrames = _React$useState2[0],
    setVisibleFrames = _React$useState2[1];
  var observer = React.useRef(null);
  var bindIntersectionObserver = React.useCallback(function (root) {
    if (!root) {
      if (observer.current) {
        observer.current.disconnect();
      }
      observer.current = null;
      return;
    }
    observer.current = new IntersectionObserver(function (entries) {
      return setVisibleFrames(function (prev) {
        var visible = [];
        var invisible = [];
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            visible.push(Number(entry.target.getAttribute('data-frame')));
          } else {
            invisible.push(Number(entry.target.getAttribute('data-frame')));
          }
        });

        // avoid mutating the object if nothing changed
        var frames;
        visible.forEach(function (frame) {
          if (prev[frame] !== true) {
            if (!frames) {
              frames = _extends({}, prev);
            }
            frames[frame] = true;
          }
        });
        invisible.forEach(function (frame) {
          if (prev[frame]) {
            if (!frames) {
              frames = _extends({}, prev);
            }
            delete frames[frame];
          }
        });
        return frames || prev;
      });
    }, {
      rootMargin: hydrateMargin
    });
    root.childNodes.forEach(function (node) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        var _observer$current;
        var element = node;
        (_observer$current = observer.current) == null || _observer$current.observe(element);
      }
    });
    if (ref) {
      if (typeof ref === 'function') {
        ref(root);
      } else {
        ref.current = root;
      }
    }
  }, [ref, hydrateMargin]);
  var observeFrame = React.useCallback(function (node) {
    if (observer.current && node) {
      observer.current.observe(node);
    }
  }, []);
  var hastChildrenCache = React.useMemo(function () {
    return hast == null ? void 0 : hast.children.map(function () {
      return null;
    });
  }, [hast]);
  var textChildrenCache = React.useMemo(function () {
    return hast == null ? void 0 : hast.children.map(function () {
      return null;
    });
  }, [hast]);
  var renderCode = React.useCallback(function (index, hastChildren, renderHast, text) {
    if (renderHast) {
      var _cached = hastChildrenCache == null ? void 0 : hastChildrenCache[index];
      if (_cached) {
        return _cached;
      }
      var jsx = hastToJsx({
        type: 'root',
        children: hastChildren
      });
      if (hastChildrenCache) {
        hastChildrenCache[index] = jsx;
      }
      return jsx;
    }
    if (text !== undefined) {
      return text;
    }
    var cached = textChildrenCache == null ? void 0 : textChildrenCache[index];
    if (cached) {
      return cached;
    }
    var txt = toText({
      type: 'root',
      children: hastChildren
    }, {
      whitespace: 'pre'
    });
    if (textChildrenCache) {
      textChildrenCache[index] = txt;
    }
    return txt;
  }, [hastChildrenCache, textChildrenCache]);
  var frames = React.useMemo(function () {
    return hast == null ? void 0 : hast.children.map(function (child, index) {
      if (child.type !== 'element') {
        return null;
      }
      if (child.properties.className === 'frame') {
        var _child$properties, _child$properties2;
        var isVisible = Boolean(visibleFrames[index]);
        return /*#__PURE__*/_jsx("span", {
          className: "frame",
          "data-frame": index,
          ref: observeFrame,
          children: renderCode(index, child.children, shouldHighlight && isVisible, (_child$properties = child.properties) != null && _child$properties.dataAsString ? String((_child$properties2 = child.properties) == null ? void 0 : _child$properties2.dataAsString) : undefined)
        }, index);
      }
      return /*#__PURE__*/_jsx(React.Fragment, {
        children: shouldHighlight ? hastToJsx(child) : toText(child, {
          whitespace: 'pre'
        })
      }, index);
    });
  }, [hast, renderCode, observeFrame, shouldHighlight, visibleFrames]);
  return /*#__PURE__*/_jsx("pre", {
    ref: bindIntersectionObserver,
    className: className,
    children: typeof children === 'string' ? children : frames
  });
}