@mui/internal-docs-infra 0.1.1-canary.9 → 0.2.0-alpha.2

package/esm/pipeline/transformTypescriptToJavascript/transformTypescriptToJavascript.js

@@ -0,0 +1,31 @@
+import _regenerator from "@babel/runtime/helpers/esm/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { removeTypes } from "./removeTypes.js";
+export var transformTypescriptToJavascript = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(source, fileName) {
+    var transformed, transformedFileName;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return removeTypes(source, fileName);
+        case 1:
+          transformed = _context.v;
+          transformedFileName = fileName.replace(/\.ts$/, '.js').replace(/\.tsx$/, '.jsx');
+          return _context.a(2, {
+            js: {
+              source: transformed,
+              fileName: transformedFileName
+            }
+          });
+      }
+    }, _callee);
+  }));
+  return function transformTypescriptToJavascript(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var TypescriptToJavascriptTransformer = {
+  extensions: ['ts', 'tsx'],
+  transformer: transformTypescriptToJavascript
+};

package/esm/useCode/Pre.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { VariantSource } from "../CodeHighlighter/types.js";
+export declare function Pre({
+  children,
+  className,
+  ref,
+  shouldHighlight,
+  hydrateMargin
+}: {
+  children: VariantSource;
+  className?: string;
+  ref?: React.Ref<HTMLPreElement>;
+  shouldHighlight?: boolean;
+  hydrateMargin?: string;
+}): React.ReactNode;

package/esm/useCode/Pre.js

@@ -0,0 +1,164 @@
+'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 { 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);
+    }
+    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
+  });
+}

package/esm/useCode/index.d.ts

@@ -0,0 +1 @@
+export * from "./useCode.js";

package/esm/useCode/index.js

@@ -0,0 +1 @@
+export * from "./useCode.js";

package/esm/useCode/useCode.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { ContentProps } from "../CodeHighlighter/types.js";
+import { UseCopierOpts } from "../useCopier/index.js";
+export type UseCodeOpts = {
+  preClassName?: string;
+  preRef?: React.Ref<HTMLPreElement>;
+  defaultOpen?: boolean;
+  copy?: UseCopierOpts;
+  githubUrlPrefix?: string;
+  initialVariant?: string;
+  initialTransform?: string;
+};
+type UserProps<T extends {} = {}> = T & {
+  name?: string;
+  slug?: string;
+};
+export interface UseCodeResult<T extends {} = {}> {
+  variants: string[];
+  selectedVariant: string;
+  selectVariant: React.Dispatch<React.SetStateAction<string>>;
+  files: Array<{
+    name: string;
+    slug?: string;
+    component: React.ReactNode;
+  }>;
+  selectedFile: React.ReactNode;
+  selectedFileLines: number;
+  selectedFileName: string | undefined;
+  selectFileName: (fileName: string) => void;
+  expanded: boolean;
+  expand: () => void;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  availableTransforms: string[];
+  selectedTransform: string | null | undefined;
+  selectTransform: (transformName: string | null) => void;
+  setSource?: (source: string) => void;
+  userProps: UserProps<T>;
+}
+export declare function useCode<T extends {} = {}>(contentProps: ContentProps<T>, opts?: UseCodeOpts): UseCodeResult<T>;
+export {};

package/esm/useCode/useCode.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["name", "slug", "code", "components", "url"];
+import * as React from 'react';
+import { useCodeHighlighterContextOptional } from "../CodeHighlighter/CodeHighlighterContext.js";
+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,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    initialVariant = _ref.initialVariant,
+    initialTransform = _ref.initialTransform,
+    preClassName = _ref.preClassName,
+    preRef = _ref.preRef;
+
+  // Safely try to get context values - will be undefined if not in context
+  var context = useCodeHighlighterContextOptional();
+
+  // 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]);
+  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 = _objectWithoutPropertiesLoose(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 {
+        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)
+      }
+    }
+    return _extends(_extends({}, userDefinedProps), {}, {
+      name: name,
+      slug: slug
+    });
+  }, [contentProps, context == null ? void 0 : context.url]);
+
+  // Sub-hook: UI State Management
+  var uiState = useUIState({
+    defaultOpen: defaultOpen
+  });
+
+  // Sub-hook: Variant Selection
+  var variantSelection = useVariantSelection({
+    effectiveCode: effectiveCode,
+    initialVariant: initialVariant,
+    variantType: contentProps.variantType
+  });
+
+  // Sub-hook: Transform Management
+  var transformManagement = useTransformManagement({
+    context: context,
+    effectiveCode: effectiveCode,
+    selectedVariantKey: variantSelection.selectedVariantKey,
+    selectedVariant: variantSelection.selectedVariant,
+    initialTransform: initialTransform,
+    shouldHighlight: shouldHighlight
+  });
+
+  // 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,
+    preClassName: preClassName,
+    preRef: preRef
+  });
+
+  // Sub-hook: Copy Functionality
+  var copyFunctionality = useCopyFunctionality({
+    selectedFile: fileNavigation.selectedFile,
+    copyOpts: copyOpts
+  });
+
+  // Sub-hook: Source Editing
+  var sourceEditing = useSourceEditing({
+    context: context,
+    selectedVariantKey: variantSelection.selectedVariantKey,
+    effectiveCode: effectiveCode,
+    selectedVariant: variantSelection.selectedVariant
+  });
+  return {
+    variants: variantSelection.variantKeys,
+    selectedVariant: variantSelection.selectedVariantKey,
+    selectVariant: variantSelection.selectVariant,
+    files: fileNavigation.files,
+    selectedFile: fileNavigation.selectedFileComponent,
+    selectedFileLines: fileNavigation.selectedFileLines,
+    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/esm/useCode/useCodeUtils.d.ts

@@ -0,0 +1,44 @@
+import type { VariantSource, VariantCode, Code, Transforms } from "../CodeHighlighter/types.js";
+interface TransformedFile {
+  name: string;
+  originalName: string;
+  source: VariantSource;
+  component: React.ReactNode;
+}
+export interface TransformedFiles {
+  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: VariantSource, fileName: string, transforms: Transforms | undefined, selectedTransform: string): {
+  transformedSource: VariantSource;
+  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): TransformedFiles | undefined;
+export {};

package/esm/useCode/useCodeUtils.js

@@ -0,0 +1,245 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { stringOrHastToJsx } from "../pipeline/hastUtils/index.js";
+import { applyTransform } from "../CodeHighlighter/applyTransform.js";
+/**
+ * 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 function getAvailableTransforms(effectiveCode, selectedVariantKey) {
+  var transforms = new Set();
+  if (effectiveCode && selectedVariantKey) {
+    var variantCode = effectiveCode[selectedVariantKey];
+    if (variantCode && _typeof(variantCode) === 'object') {
+      // Check main variant transforms
+      if ('transforms' in variantCode && variantCode.transforms) {
+        Object.keys(variantCode.transforms).forEach(function (transformKey) {
+          var transformData = variantCode.transforms[transformKey];
+          // Only include transforms that have actual deltas (file changes)
+          // Check if delta exists and is not empty
+          if (transformData && _typeof(transformData) === 'object' && 'delta' in transformData) {
+            var delta = transformData.delta;
+            // Check if delta has meaningful content (not just an empty object)
+            var hasContent = delta && _typeof(delta) === 'object' && Object.keys(delta).length > 0;
+            if (hasContent) {
+              transforms.add(transformKey);
+            }
+          }
+        });
+      }
+
+      // Check extraFiles for transforms with deltas
+      if ('extraFiles' in variantCode && variantCode.extraFiles) {
+        Object.values(variantCode.extraFiles).forEach(function (fileData) {
+          if (fileData && _typeof(fileData) === 'object' && 'transforms' in fileData && fileData.transforms) {
+            Object.keys(fileData.transforms).forEach(function (transformKey) {
+              var transformData = fileData.transforms[transformKey];
+              // Only include transforms that have actual deltas (file changes)
+              // Check if delta exists and is not empty
+              if (transformData && _typeof(transformData) === 'object' && 'delta' in transformData) {
+                var delta = transformData.delta;
+                // Check if delta has meaningful content (not just an empty object)
+                var hasContent = delta && _typeof(delta) === 'object' && Object.keys(delta).length > 0;
+                if (hasContent) {
+                  transforms.add(transformKey);
+                }
+              }
+            });
+          }
+        });
+      }
+    }
+  }
+  return Array.from(transforms);
+}
+
+/**
+ * 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 function applyTransformToSource(source, fileName, transforms, selectedTransform) {
+  if (!(transforms != null && transforms[selectedTransform])) {
+    return {
+      transformedSource: source,
+      transformedName: fileName
+    };
+  }
+  try {
+    // Get transform data
+    var transformData = transforms[selectedTransform];
+    if (!transformData || _typeof(transformData) !== 'object' || !('delta' in transformData)) {
+      return {
+        transformedSource: source,
+        transformedName: fileName
+      };
+    }
+
+    // Check if delta has meaningful content
+    var delta = transformData.delta;
+    var hasContent = delta && _typeof(delta) === 'object' && Object.keys(delta).length > 0;
+    if (!hasContent) {
+      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
+    };
+  }
+}
+
+/**
+ * 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 function createTransformedFiles(selectedVariant, selectedTransform, shouldHighlight) {
+  var _variantTransforms$se;
+  // Only create transformed files when there's actually a transform selected
+  if (!selectedVariant || !selectedTransform) {
+    return undefined;
+  }
+  var files = [];
+  var filenameMap = {};
+
+  // First, check if any file has a meaningful transform delta for the selected transform
+  var variantTransforms = 'transforms' in selectedVariant ? selectedVariant.transforms : undefined;
+  var hasAnyMeaningfulTransform = false;
+
+  // Check main file for meaningful transform
+  if (selectedVariant.fileName && variantTransforms != null && (_variantTransforms$se = variantTransforms[selectedTransform]) != null && _variantTransforms$se.delta) {
+    var delta = variantTransforms[selectedTransform].delta;
+    if (delta && Object.keys(delta).length > 0) {
+      hasAnyMeaningfulTransform = true;
+    }
+  }
+
+  // Check extraFiles for meaningful transforms
+  if (!hasAnyMeaningfulTransform && selectedVariant.extraFiles) {
+    Object.values(selectedVariant.extraFiles).forEach(function (fileData) {
+      if (fileData && _typeof(fileData) === 'object' && 'transforms' in fileData) {
+        var _fileData$transforms;
+        var transformData = (_fileData$transforms = fileData.transforms) == null ? void 0 : _fileData$transforms[selectedTransform];
+        if (transformData != null && transformData.delta && Object.keys(transformData.delta).length > 0) {
+          hasAnyMeaningfulTransform = true;
+        }
+      }
+    });
+  }
+
+  // If no file has a meaningful transform, return empty result
+  if (!hasAnyMeaningfulTransform) {
+    return {
+      files: [],
+      filenameMap: {}
+    };
+  }
+
+  // Process main file if we have a fileName and source
+  if (selectedVariant.fileName && selectedVariant.source) {
+    var _applyTransformToSour = applyTransformToSource(selectedVariant.source, selectedVariant.fileName, variantTransforms, selectedTransform),
+      mainSource = _applyTransformToSour.transformedSource,
+      mainName = _applyTransformToSour.transformedName;
+    var fileName = selectedVariant.fileName;
+    filenameMap[fileName] = mainName;
+    files.push({
+      name: mainName,
+      originalName: fileName,
+      source: mainSource,
+      component: stringOrHastToJsx(mainSource, shouldHighlight)
+    });
+  }
+
+  // Process extra files
+  if (selectedVariant.extraFiles) {
+    Object.entries(selectedVariant.extraFiles).forEach(function (_ref) {
+      var _transforms;
+      var _ref2 = _slicedToArray(_ref, 2),
+        extraFileName = _ref2[0],
+        fileData = _ref2[1];
+      var source;
+      var transforms;
+
+      // Handle different extraFile structures
+      if (typeof fileData === 'string') {
+        source = fileData;
+        transforms = undefined; // Don't inherit variant transforms for simple string files
+      } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
+        source = fileData.source;
+        transforms = fileData.transforms; // Only use explicit transforms for this file
+      } else {
+        return; // Skip invalid entries
+      }
+
+      // Skip if source is undefined
+      if (!source) {
+        return;
+      }
+
+      // Apply transforms if available, otherwise use original source
+      var transformedSource = source;
+      var transformedName = extraFileName;
+      if ((_transforms = transforms) != null && _transforms[selectedTransform]) {
+        try {
+          var transformData = transforms[selectedTransform];
+          if (transformData && _typeof(transformData) === 'object' && 'delta' in transformData) {
+            // Only apply transform if there's a meaningful delta
+            var hasTransformDelta = transformData.delta && Object.keys(transformData.delta).length > 0;
+            if (hasTransformDelta) {
+              transformedSource = applyTransform(source, transforms, selectedTransform);
+              transformedName = transformData.fileName || extraFileName;
+            }
+          }
+        } catch (error) {
+          console.error("Transform failed for ".concat(extraFileName, ":"), error);
+          // Continue with original source if transform fails
+        }
+      }
+
+      // Only update filenameMap and add to files if this doesn't conflict with existing files
+      // If a file already exists with the target name, skip this transformation to preserve original files
+      var existingFile = files.find(function (f) {
+        return f.name === transformedName;
+      });
+      if (!existingFile) {
+        filenameMap[extraFileName] = transformedName;
+        files.push({
+          name: transformedName,
+          originalName: extraFileName,
+          source: transformedSource,
+          component: stringOrHastToJsx(transformedSource, shouldHighlight)
+        });
+      } else {
+        // If there's a conflict, skip this file with a warning
+        console.warn("Transform conflict: ".concat(extraFileName, " would transform to ").concat(transformedName, " but that name is already taken. Skipping this file."));
+      }
+    });
+  }
+  return {
+    files: files,
+    filenameMap: filenameMap
+  };
+}