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

MUI Infra - internal documentation creation tools.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { getAvailableTransforms, createTransformedFiles } from "./useCodeUtils.js";
import { usePreference } from "../usePreference/index.js";
/**
 * Hook for managing code transforms and their application
 * Uses the useLocalStorage hook for local storage persistence of transform preferences
 */
export function useTransformManagement(_ref) {
  var context = _ref.context,
    effectiveCode = _ref.effectiveCode,
    selectedVariantKey = _ref.selectedVariantKey,
    selectedVariant = _ref.selectedVariant,
    initialTransform = _ref.initialTransform,
    shouldHighlight = _ref.shouldHighlight;
  // Transform state - get available transforms from context or from the effective code data
  var availableTransforms = React.useMemo(function () {
    // First try to get from context
    if (context != null && context.availableTransforms && context.availableTransforms.length > 0) {
      return context.availableTransforms;
    }

    // Otherwise, get from the effective code data using the utility function
    return getAvailableTransforms(effectiveCode, selectedVariantKey);
  }, [context == null ? void 0 : context.availableTransforms, effectiveCode, selectedVariantKey]);

  // Use localStorage hook for transform persistence - this is our single source of truth
  var _usePreference = usePreference('transform', availableTransforms.length === 1 ? availableTransforms[0] : availableTransforms, function () {
      // Don't use initialTransform as the fallback - localStorage should always take precedence
      // We'll handle the initial transform separately below
      return null;
    }),
    _usePreference2 = _slicedToArray(_usePreference, 2),
    storedValue = _usePreference2[0],
    setStoredValue = _usePreference2[1];

  // Handle validation manually - empty string means "no transform selected"
  var selectedTransform = React.useMemo(function () {
    // If we have a stored value (including empty string), use it
    if (storedValue !== null) {
      if (storedValue === '') {
        return null;
      }
      // Validate the stored value
      if (!availableTransforms.includes(storedValue)) {
        return null;
      }
      return storedValue;
    }

    // If no stored value and we have an initial transform, use it (but don't store it yet)
    if (initialTransform && availableTransforms.includes(initialTransform)) {
      return initialTransform;
    }
    return null;
  }, [storedValue, availableTransforms, initialTransform]);
  var setSelectedTransformAsUser = React.useCallback(function (value) {
    var valueToStore = value === null ? '' : value;
    setStoredValue(valueToStore);
  }, [setStoredValue]);

  // Memoize all transformed files based on selectedTransform
  var transformedFiles = React.useMemo(function () {
    return createTransformedFiles(selectedVariant, selectedTransform, shouldHighlight);
  }, [selectedVariant, selectedTransform, shouldHighlight]);
  return {
    availableTransforms: availableTransforms,
    selectedTransform: selectedTransform,
    transformedFiles: transformedFiles,
    selectTransform: setSelectedTransformAsUser
  };
}