@mui/internal-docs-infra/CodeHighlighter/createClientProps.mjs

MUI Infra - internal documentation creation tools.

import * as React from 'react';
import { replaceUrlPrefix } from "../pipeline/loaderUtils/applyUrlPrefix.mjs";
import { resolveFallbackCritical } from "./resolveFallbackCritical.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Assemble the props for the `'use client'` `CodeHighlighterClient` from the
 * server/isomorphic props: rewrite the top-level URL to its hosted form, pre-render
 * the `Content` element (functions can't cross the server-client boundary), and
 * forward the loading `fallback` and compressed `residualFallbacks`.
 */
export function createClientProps(props) {
  const highlightAfter = props.highlightAfter === 'stream' ? 'init' : props.highlightAfter;
  const enhanceAfter = props.enhanceAfter === 'stream' ? 'init' : props.enhanceAfter;

  // Resolve the staging `fallbackCritical` on every variant of both carriers before
  // they cross to the client: under `highlightAt: 'init'` (not `collapseToEmpty`)
  // promote it over the plain `fallback` so the first paint is highlighted with no
  // decompression, and always strip it so it never reaches `Content`/`ContentLoading`
  // or bloats the payload. `code` and `precompute` are forwarded separately (the
  // client seeds its `code` state from `precompute`), so both must be resolved.
  const collapseToEmpty = props.collapseToEmpty ?? props.contentProps?.collapseToEmpty ?? false;
  const code = resolveFallbackCritical(props.code, highlightAfter, collapseToEmpty);
  const precompute = resolveFallbackCritical(props.precompute, highlightAfter, collapseToEmpty);

  // Rewrite the top-level URL before it leaves the server. The client never
  // receives `urlPrefix` (and shouldn't deal with `file://` URLs), so any
  // local URL must be translated to its hosted form here. Variant-level URLs
  // inside `code`/`precompute` are already rewritten upstream (by
  // `loadIsomorphicCodeVariant` on the server, or by the demo factory for precomputed
  // input).
  const url = props.urlPrefix && props.url ? replaceUrlPrefix(props.url, props.urlPrefix) : props.url;
  const contentProps = {
    ...props.contentProps,
    code: code || precompute,
    components: props.components,
    name: props.name,
    slug: props.slug,
    url,
    variantType: props.variantType,
    // Thread the render-time display flags into the content channel so both
    // `useCode`/`<Pre>` and the loading fallback honor them. A top-level prop
    // wins over one already present in `contentProps`.
    ...(props.collapseToEmpty !== undefined ? {
      collapseToEmpty: props.collapseToEmpty
    } : undefined),
    ...(props.initialExpanded !== undefined ? {
      initialExpanded: props.initialExpanded
    } : undefined)
  };
  return {
    url,
    code,
    precompute,
    components: props.components,
    variants: props.variants,
    variant: props.variant,
    fileName: props.fileName,
    initialVariant: props.initialVariant,
    defaultVariant: props.defaultVariant,
    highlightAfter: highlightAfter || 'idle',
    enhanceAfter: enhanceAfter || 'idle',
    skipFallback: props.skipFallback,
    controlled: props.controlled,
    editActivation: props.editActivation,
    residualFallbacks: props.residualFallbacks,
    name: props.name,
    slug: props.slug,
    // Use processedGlobalsCode if available, otherwise fall back to raw globalsCode
    globalsCode: props.processedGlobalsCode || props.globalsCode,
    // Note: it is important that we render components before passing them to the client
    // otherwise we will get an error because functions can't be serialized
    // On the client, in order to send data to these components, we have to set context
    fallback: props.fallback,
    children: /*#__PURE__*/_jsx(props.Content, {
      ...contentProps
    })
  };
}