@mui/internal-docs-infra 0.1.1-alpha.1 → 0.1.1-alpha.10

package/useCode/useCode.js

@@ -1,19 +1,15 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["name", "slug", "code", "components", "url"];
 import * as React from 'react';
-import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
-import { toText } from 'hast-util-to-text';
-import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
-import { useCopier } from "../useCopier/index.js";
 import { useCodeHighlighterContextOptional } from "../CodeHighlighter/CodeHighlighterContext.js";
-import { applyTransform } from "../CodeHighlighter/applyTransform.js";
-function toComponent(source) {
-  return toJsxRuntime(source, {
-    Fragment: Fragment,
-    jsx: jsx,
-    jsxs: jsxs
-  });
-}
+import { extractNameAndSlugFromUrl } from "../pipeline/loaderUtils/index.js";
+import { useVariantSelection } from "./useVariantSelection.js";
+import { useTransformManagement } from "./useTransformManagement.js";
+import { useFileNavigation } from "./useFileNavigation.js";
+import { useUIState } from "./useUIState.js";
+import { useCopyFunctionality } from "./useCopyFunctionality.js";
+import { useSourceEditing } from "./useSourceEditing.js";
 export function useCode(contentProps, opts) {
   var _ref = opts || {},
     copyOpts = _ref.copy,
@@ -24,370 +20,103 @@ export function useCode(contentProps, opts) {
 
   // Safely try to get context values - will be undefined if not in context
   var context = useCodeHighlighterContextOptional();
-  var _React$useState = React.useState(defaultOpen),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    expanded = _React$useState2[0],
-    setExpanded = _React$useState2[1];
-  var expand = React.useCallback(function () {
-    return setExpanded(true);
-  }, []);
-  var ref = React.useRef(null);
-  var resetFocus = React.useCallback(function () {
-    var _ref$current;
-    (_ref$current = ref.current) == null || _ref$current.focus();
-  }, []);
 
   // Get the effective code - context overrides contentProps if available
   var effectiveCode = React.useMemo(function () {
     return (context == null ? void 0 : context.code) || contentProps.code || {};
   }, [context == null ? void 0 : context.code, contentProps.code]);
-
-  // Get variant keys from effective code
-  var variantKeys = React.useMemo(function () {
-    return Object.keys(effectiveCode).filter(function (key) {
-      var variant = effectiveCode[key];
-      return variant && _typeof(variant) === 'object' && 'source' in variant;
-    });
-  }, [effectiveCode]);
-  var _React$useState3 = React.useState(initialVariant || variantKeys[0] || ''),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    selectedVariantKey = _React$useState4[0],
-    setSelectedVariantKey = _React$useState4[1];
-  var selectedVariant = React.useMemo(function () {
-    var variant = effectiveCode[selectedVariantKey];
-    if (variant && _typeof(variant) === 'object' && 'source' in variant) {
-      return variant;
-    }
-    return null;
-  }, [effectiveCode, selectedVariantKey]);
-
-  // Safety check: if selectedVariant doesn't exist, fall back to first variant
-  React.useEffect(function () {
-    if (!selectedVariant && variantKeys.length > 0) {
-      setSelectedVariantKey(variantKeys[0]);
-    }
-  }, [selectedVariant, variantKeys]);
-
-  // 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
-    var transforms = new Set();
-    if (effectiveCode && selectedVariantKey) {
-      var variantCode = effectiveCode[selectedVariantKey];
-      if (variantCode && _typeof(variantCode) === 'object' && 'transforms' in variantCode && variantCode.transforms) {
-        Object.keys(variantCode.transforms).forEach(function (transformKey) {
-          transforms.add(transformKey);
-        });
-      }
-    }
-    return Array.from(transforms);
-  }, [context == null ? void 0 : context.availableTransforms, effectiveCode, selectedVariantKey]);
-  var _React$useState5 = React.useState(initialTransform || null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    selectedTransform = _React$useState6[0],
-    setSelectedTransform = _React$useState6[1];
-
-  // Memoize all transformed files based on selectedTransform
-  var transformedFiles = React.useMemo(function () {
-    // Only create transformed files when there's actually a transform selected
-    if (!selectedVariant || !selectedTransform) {
-      return undefined;
-    }
-    var files = [];
-    var filenameMap = {};
-
-    // Helper function to apply transform to a source
-    var applyTransformToSource = function applyTransformToSource(source, fileName, transforms) {
-      if (!(transforms != null && transforms[selectedTransform])) {
-        return {
-          transformedSource: source,
-          transformedName: fileName
-        };
-      }
+  var shouldHighlight = !(context != null && context.deferHighlight);
+
+  // Memoize userProps with auto-generated name and slug if missing
+  var userProps = React.useMemo(function () {
+    // Extract only the user-defined properties (T) from contentProps
+    var contentName = contentProps.name,
+      contentSlug = contentProps.slug,
+      code = contentProps.code,
+      components = contentProps.components,
+      contentUrl = contentProps.url,
+      userDefinedProps = _objectWithoutProperties(contentProps, _excluded);
+    // Get URL from context first, then fall back to contentProps
+    var effectiveUrl = (context == null ? void 0 : context.url) || contentUrl;
+    var name = contentName;
+    var slug = contentSlug;
+    // Generate name and slug from URL if they're missing and we have a URL
+    if ((!name || !slug) && effectiveUrl) {
       try {
-        // Get transform data
-        var transformData = transforms[selectedTransform];
-        if (!transformData || _typeof(transformData) !== 'object' || !('delta' in transformData)) {
-          return {
-            transformedSource: source,
-            transformedName: fileName
-          };
-        }
-
-        // Apply transform
-        var result = applyTransform(source, transforms, selectedTransform);
-        var transformedName = transformData.fileName || fileName;
-        return {
-          transformedSource: result,
-          transformedName: transformedName
-        };
-      } catch (error) {
-        console.error("Transform failed for ".concat(fileName, ":"), error);
-        return {
-          transformedSource: source,
-          transformedName: fileName
-        };
+        var generated = extractNameAndSlugFromUrl(effectiveUrl);
+        name = name || generated.name;
+        slug = slug || generated.slug;
+      } catch (_unused) {
+        // If URL parsing fails, keep the original values (which might be undefined)
       }
-    };
-
-    // Process main file - get transforms from selectedVariant
-    var variantTransforms = 'transforms' in selectedVariant ? selectedVariant.transforms : undefined;
-    var _applyTransformToSour = applyTransformToSource(selectedVariant.source, selectedVariant.fileName, variantTransforms),
-      mainSource = _applyTransformToSour.transformedSource,
-      mainName = _applyTransformToSour.transformedName;
-    filenameMap[selectedVariant.fileName] = mainName;
-    files.push({
-      name: mainName,
-      originalName: selectedVariant.fileName,
-      source: mainSource,
-      component: toComponent(mainSource)
-    });
-
-    // Process extra files
-    if (selectedVariant.extraFiles) {
-      Object.entries(selectedVariant.extraFiles).forEach(function (_ref2) {
-        var _transforms;
-        var _ref3 = _slicedToArray(_ref2, 2),
-          fileName = _ref3[0],
-          fileData = _ref3[1];
-        var source;
-        var transforms;
-
-        // Handle different extraFile structures
-        if (typeof fileData === 'string') {
-          source = fileData;
-          transforms = variantTransforms;
-        } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
-          source = fileData.source;
-          transforms = fileData.transforms || variantTransforms;
-        } else {
-          return; // Skip invalid entries
-        }
-
-        // Apply transforms if available
-        var transformedSource = source;
-        var transformedName = fileName;
-        if ((_transforms = transforms) != null && _transforms[selectedTransform]) {
-          try {
-            var transformData = transforms[selectedTransform];
-            if (transformData && _typeof(transformData) === 'object' && 'delta' in transformData) {
-              transformedSource = applyTransform(source, transforms, selectedTransform);
-              transformedName = transformData.fileName || fileName;
-            }
-          } catch (error) {
-            console.error("Transform failed for ".concat(fileName, ":"), error);
-          }
-        }
-        filenameMap[fileName] = transformedName;
-        files.push({
-          name: transformedName,
-          originalName: fileName,
-          source: transformedSource,
-          component: toComponent(transformedSource)
-        });
-      });
-    }
-    return {
-      files: files,
-      filenameMap: filenameMap
-    };
-  }, [selectedVariant, selectedTransform]);
-
-  // Keep selectedFileName as untransformed filename for internal tracking
-  var _React$useState7 = React.useState((selectedVariant == null ? void 0 : selectedVariant.fileName) || ''),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    selectedFileNameInternal = _React$useState8[0],
-    setSelectedFileNameInternal = _React$useState8[1];
-
-  // Reset selectedFileName when variant changes
-  React.useEffect(function () {
-    if (selectedVariant && selectedFileNameInternal !== selectedVariant.fileName) {
-      // Only reset if current selectedFileName doesn't exist in the new variant
-      var hasFile = selectedVariant.fileName === selectedFileNameInternal || selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal];
-      if (!hasFile) {
-        setSelectedFileNameInternal(selectedVariant.fileName);
-      }
-    }
-  }, [selectedVariant, selectedFileNameInternal]);
-
-  // Compute the displayed filename (transformed if applicable)
-  var selectedFileName = React.useMemo(function () {
-    if (!selectedVariant) {
-      return '';
-    }
-
-    // If we have transformed files, return the transformed name
-    if (transformedFiles) {
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === selectedFileNameInternal;
-      });
-      return file ? file.name : selectedFileNameInternal;
-    }
-
-    // Otherwise, return the original filename
-    return selectedFileNameInternal;
-  }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
-  var selectedFile = React.useMemo(function () {
-    if (!selectedVariant) {
-      return null;
-    }
-
-    // If we have transformed files, use them
-    if (transformedFiles) {
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === selectedFileNameInternal;
-      });
-      return file ? file.source : null;
-    }
-
-    // Otherwise, use the original untransformed files
-    if (selectedFileNameInternal === selectedVariant.fileName) {
-      return selectedVariant.source;
-    }
-
-    // Look in extraFiles
-    if (selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal]) {
-      var extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
-      if (typeof extraFile === 'string') {
-        return extraFile;
-      }
-      if (extraFile && _typeof(extraFile) === 'object' && 'source' in extraFile) {
-        return extraFile.source;
-      }
-    }
-    return null;
-  }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
-  var selectedFileComponent = React.useMemo(function () {
-    if (!selectedVariant) {
-      return null;
-    }
-
-    // If we have transformed files, use them
-    if (transformedFiles) {
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === selectedFileNameInternal;
-      });
-      return file ? file.component : null;
-    }
-
-    // Otherwise, create component from original untransformed files
-    if (selectedFileNameInternal === selectedVariant.fileName) {
-      return toComponent(selectedVariant.source);
     }
+    return _objectSpread(_objectSpread({}, userDefinedProps), {}, {
+      name: name,
+      slug: slug
+    });
+  }, [contentProps, context == null ? void 0 : context.url]);
 
-    // Look in extraFiles
-    if (selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal]) {
-      var extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
-      var source;
-      if (typeof extraFile === 'string') {
-        source = extraFile;
-      } else if (extraFile && _typeof(extraFile) === 'object' && 'source' in extraFile) {
-        source = extraFile.source;
-      } else {
-        return null;
-      }
-      return toComponent(source);
-    }
-    return null;
-  }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
+  // Sub-hook: UI State Management
+  var uiState = useUIState({
+    defaultOpen: defaultOpen
+  });
 
-  // Convert files for the return interface
-  var files = React.useMemo(function () {
-    if (!selectedVariant) {
-      return [];
-    }
+  // Sub-hook: Variant Selection
+  var variantSelection = useVariantSelection({
+    effectiveCode: effectiveCode,
+    initialVariant: initialVariant
+  });
 
-    // If we have transformed files, use them
-    if (transformedFiles) {
-      return transformedFiles.files.map(function (f) {
-        return {
-          name: f.name,
-          component: f.component
-        };
-      });
-    }
+  // Sub-hook: Transform Management
+  var transformManagement = useTransformManagement({
+    context: context,
+    effectiveCode: effectiveCode,
+    selectedVariantKey: variantSelection.selectedVariantKey,
+    selectedVariant: variantSelection.selectedVariant,
+    initialTransform: initialTransform,
+    shouldHighlight: shouldHighlight
+  });
 
-    // Otherwise, create files from original untransformed data
-    var result = [{
-      name: selectedVariant.fileName,
-      component: toComponent(selectedVariant.source)
-    }];
-    if (selectedVariant.extraFiles) {
-      Object.entries(selectedVariant.extraFiles).forEach(function (_ref4) {
-        var _ref5 = _slicedToArray(_ref4, 2),
-          fileName = _ref5[0],
-          fileData = _ref5[1];
-        var source;
-        if (typeof fileData === 'string') {
-          source = fileData;
-        } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
-          source = fileData.source;
-        } else {
-          return; // Skip invalid entries
-        }
-        result.push({
-          name: fileName,
-          component: toComponent(source)
-        });
-      });
-    }
-    return result;
-  }, [selectedVariant, transformedFiles]);
-  var sourceFileToText = React.useCallback(function () {
-    if (!selectedFile) {
-      return undefined;
-    }
-    if (typeof selectedFile === 'string') {
-      return selectedFile;
-    }
-    if (selectedFile && _typeof(selectedFile) === 'object' && 'hastJson' in selectedFile) {
-      return selectedFile.hastJson;
-    }
-    return toText(selectedFile, {
-      whitespace: 'pre'
-    });
-  }, [selectedFile]);
-  var _useCopier = useCopier(sourceFileToText, copyOpts),
-    copy = _useCopier.copy,
-    copyDisabled = _useCopier.disabled;
+  // Sub-hook: File Navigation
+  var fileNavigation = useFileNavigation({
+    selectedVariant: variantSelection.selectedVariant,
+    transformedFiles: transformManagement.transformedFiles,
+    mainSlug: userProps.slug,
+    selectedVariantKey: variantSelection.selectedVariantKey,
+    variantKeys: variantSelection.variantKeys,
+    initialVariant: initialVariant,
+    shouldHighlight: shouldHighlight
+  });
 
-  // Function to switch to a specific transform
-  var selectTransform = React.useCallback(function (transformName) {
-    if (!transformName || availableTransforms.includes(transformName)) {
-      setSelectedTransform(transformName);
-    } else {
-      setSelectedTransform(null);
-    }
-  }, [availableTransforms]);
+  // Sub-hook: Copy Functionality
+  var copyFunctionality = useCopyFunctionality({
+    selectedFile: fileNavigation.selectedFile,
+    copyOpts: copyOpts
+  });
 
-  // Get the effective components object - context overrides contentProps
-  // Components are kept separate from variant data to maintain clean separation of concerns
-  var effectiveComponents = React.useMemo(function () {
-    return (context == null ? void 0 : context.components) || contentProps.components || {};
-  }, [context == null ? void 0 : context.components, contentProps.components]);
+  // Sub-hook: Source Editing
+  var sourceEditing = useSourceEditing({
+    context: context,
+    selectedVariantKey: variantSelection.selectedVariantKey,
+    effectiveCode: effectiveCode,
+    selectedVariant: variantSelection.selectedVariant
+  });
   return {
-    component: effectiveComponents[selectedVariantKey] || null,
-    ref: ref,
-    variants: variantKeys,
-    selectedVariant: selectedVariantKey,
-    selectVariant: setSelectedVariantKey,
-    files: files,
-    selectedFile: selectedFileComponent,
-    selectedFileName: selectedFileName,
-    selectFileName: setSelectedFileNameInternal,
-    expanded: expanded,
-    expand: expand,
-    setExpanded: setExpanded,
-    resetFocus: resetFocus,
-    copy: copy,
-    copyDisabled: copyDisabled,
-    availableTransforms: availableTransforms,
-    selectedTransform: selectedTransform,
-    selectTransform: selectTransform
+    variants: variantSelection.variantKeys,
+    selectedVariant: variantSelection.selectedVariantKey,
+    selectVariant: variantSelection.selectVariant,
+    files: fileNavigation.files,
+    selectedFile: fileNavigation.selectedFileComponent,
+    selectedFileName: fileNavigation.selectedFileName,
+    selectFileName: fileNavigation.selectFileName,
+    expanded: uiState.expanded,
+    expand: uiState.expand,
+    setExpanded: uiState.setExpanded,
+    copy: copyFunctionality.copy,
+    availableTransforms: transformManagement.availableTransforms,
+    selectedTransform: transformManagement.selectedTransform,
+    selectTransform: transformManagement.selectTransform,
+    setSource: sourceEditing.setSource,
+    userProps: userProps
   };
 }

package/useCode/useCodeUtils.d.ts

@@ -0,0 +1,45 @@
+import type { VariantSource, VariantCode, Code } from "../CodeHighlighter/types.js";
+type Source = VariantSource;
+interface TransformedFile {
+  name: string;
+  originalName: string;
+  source: Source;
+  component: React.ReactNode;
+}
+interface TransformedFilesResult {
+  files: TransformedFile[];
+  filenameMap: {
+    [originalName: string]: string;
+  };
+}
+/**
+ * Pure function to get available transforms from effective code data.
+ * Only includes transforms that have actual deltas (file changes), not just filename changes.
+ *
+ * @param effectiveCode - The effective code object containing all variants
+ * @param selectedVariantKey - The currently selected variant key
+ * @returns Array of available transform keys that have deltas
+ */
+export declare function getAvailableTransforms(effectiveCode: Code, selectedVariantKey: string): string[];
+/**
+ * Pure helper function to apply transform to a source file.
+ *
+ * @param source - The source code to transform
+ * @param fileName - The filename for the source
+ * @param transforms - Available transforms for this source
+ * @param selectedTransform - The transform to apply
+ * @returns Object with transformed source and name
+ */
+export declare function applyTransformToSource(source: any, fileName: string, transforms: any, selectedTransform: string): {
+  transformedSource: Source;
+  transformedName: string;
+};
+/**
+ * Pure function to create transformed files from a variant and selected transform.
+ *
+ * @param selectedVariant - The currently selected variant
+ * @param selectedTransform - The transform to apply
+ * @returns Object with transformed files and filename mapping, or undefined if no transform
+ */
+export declare function createTransformedFiles(selectedVariant: VariantCode | null, selectedTransform: string | null, shouldHighlight: boolean): TransformedFilesResult | undefined;
+export {};

package/useCode/useCodeUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodeUtils.d.ts","sourceRoot":"","sources":["../../src/useCode/useCodeUtils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEjF,KAAK,MAAM,GAAG,aAAa,CAAC;AAE5B,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,WAAW,EAAE;QAAE,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACjD;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,GAAG,MAAM,EAAE,CAqDhG;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,GAAG,EACf,iBAAiB,EAAE,MAAM,GACxB;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,CA4BxD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,eAAe,EAAE,WAAW,GAAG,IAAI,EACnC,iBAAiB,EAAE,MAAM,GAAG,IAAI,EAChC,eAAe,EAAE,OAAO,GACvB,sBAAsB,GAAG,SAAS,CAuHpC"}