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

package/CodeHighlighter/CodeHighlighterClient.js

@@ -1,5 +1,6 @@
 'use client';
 
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
@@ -18,6 +19,8 @@ import { codeToFallbackProps } from "./codeToFallbackProps.js";
 import { parseCode } from "./parseCode.js";
 import { applyTransforms, getAvailableTransforms } from "./transformCode.js";
 import { parseControlledCode } from "./parseControlledCode.js";
+import { useOnHydrate } from "../useOnHydrate/index.js";
+import { useOnIdle } from "../useOnIdle/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DEBUG = false; // Set to true for debugging purposes
 
@@ -31,7 +34,9 @@ function useInitialData(_ref) {
     highlightAt = _ref.highlightAt,
     fallbackUsesExtraFiles = _ref.fallbackUsesExtraFiles,
     fallbackUsesAllVariants = _ref.fallbackUsesAllVariants,
-    isControlled = _ref.isControlled;
+    isControlled = _ref.isControlled,
+    globalsCode = _ref.globalsCode,
+    setProcessedGlobalsCode = _ref.setProcessedGlobalsCode;
   var _useCodeContext = useCodeContext(),
     sourceParser = _useCodeContext.sourceParser,
     loadCodeMeta = _useCodeContext.loadCodeMeta,
@@ -49,6 +54,10 @@ function useInitialData(_ref) {
     if (initialData || isControlled) {
       return;
     }
+    if (!url) {
+      // TODO: handle error - URL is required for loading fallback data
+      return;
+    }
 
     // TODO: abort controller
 
@@ -62,7 +71,8 @@ function useInitialData(_ref) {
               console.log('Loading initial data for CodeHighlighterClient: ', reason);
             }
             _context.next = 3;
-            return loadFallbackCode(url, variantName, code, highlightAt === 'init', fallbackUsesExtraFiles, fallbackUsesAllVariants, sourceParser, loadSource, loadVariantMeta, loadCodeMeta, fileName, variants)["catch"](function (error) {
+            return loadFallbackCode(url, variantName, code, highlightAt === 'init', fallbackUsesExtraFiles, fallbackUsesAllVariants, sourceParser, loadSource, loadVariantMeta, loadCodeMeta, fileName, variants, globalsCode // Let loadFallbackCode handle processing
+            )["catch"](function (error) {
               return {
                 error: error
               };
@@ -73,6 +83,10 @@ function useInitialData(_ref) {
               // TODO: handle error
             } else {
               setCode(loaded.code);
+              // Store processed globalsCode from loadFallbackCode result
+              if (loaded.processedGlobalsCode) {
+                setProcessedGlobalsCode(loaded.processedGlobalsCode);
+              }
             }
           case 5:
           case "end":
@@ -80,7 +94,7 @@ function useInitialData(_ref) {
         }
       }, _callee);
     }))();
-  }, [initialData, reason, isControlled, variantName, code, setCode, highlightAt, url, sourceParser, loadSource, loadVariantMeta, loadCodeMeta, fallbackUsesExtraFiles, fallbackUsesAllVariants, fileName, variants]);
+  }, [initialData, reason, isControlled, variantName, code, setCode, highlightAt, url, sourceParser, loadSource, loadVariantMeta, loadCodeMeta, fallbackUsesExtraFiles, fallbackUsesAllVariants, fileName, variants, globalsCode, setProcessedGlobalsCode]);
 }
 function useAllVariants(_ref3) {
   var readyForContent = _ref3.readyForContent,
@@ -88,7 +102,10 @@ function useAllVariants(_ref3) {
     isControlled = _ref3.isControlled,
     url = _ref3.url,
     code = _ref3.code,
-    setCode = _ref3.setCode;
+    setCode = _ref3.setCode,
+    processedGlobalsCode = _ref3.processedGlobalsCode,
+    globalsCode = _ref3.globalsCode,
+    setProcessedGlobalsCode = _ref3.setProcessedGlobalsCode;
   var _useCodeContext2 = useCodeContext(),
     loadCodeMeta = _useCodeContext2.loadCodeMeta,
     loadVariantMeta = _useCodeContext2.loadVariantMeta,
@@ -97,39 +114,100 @@ function useAllVariants(_ref3) {
     if (readyForContent || isControlled) {
       return;
     }
+    if (!url) {
+      // URL is required for loading variants
+      return;
+    }
 
     // TODO: abort controller
 
-    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var loadedCode, result, resultCode, errors, _iterator, _step, item;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var loadedCode, globalsCodeObjects, result, resultCode, errors, _iterator, _step, item;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             loadedCode = code;
             if (loadedCode) {
-              _context2.next = 7;
+              _context3.next = 7;
               break;
             }
             if (loadCodeMeta) {
-              _context2.next = 4;
+              _context3.next = 4;
               break;
             }
             throw new Error('"loadCodeMeta" function is required when no code is provided');
           case 4:
-            _context2.next = 6;
+            _context3.next = 6;
             return loadCodeMeta(url);
           case 6:
-            loadedCode = _context2.sent;
+            loadedCode = _context3.sent;
           case 7:
-            _context2.next = 9;
+            // Use the already-processed globalsCode from state, or process it if not available
+            globalsCodeObjects = [];
+            if (!processedGlobalsCode) {
+              _context3.next = 12;
+              break;
+            }
+            // Use the already-processed globalsCode from state
+            globalsCodeObjects = processedGlobalsCode;
+            _context3.next = 17;
+            break;
+          case 12:
+            if (!(globalsCode && globalsCode.length > 0)) {
+              _context3.next = 17;
+              break;
+            }
+            _context3.next = 15;
+            return Promise.all(globalsCode.map(/*#__PURE__*/function () {
+              var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(item) {
+                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      if (!(typeof item === 'string')) {
+                        _context2.next = 4;
+                        break;
+                      }
+                      if (loadCodeMeta) {
+                        _context2.next = 3;
+                        break;
+                      }
+                      throw new Error('"loadCodeMeta" function is required for string URLs in globalsCode');
+                    case 3:
+                      return _context2.abrupt("return", loadCodeMeta(item));
+                    case 4:
+                      return _context2.abrupt("return", item);
+                    case 5:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              }));
+              return function (_x) {
+                return _ref5.apply(this, arguments);
+              };
+            }()));
+          case 15:
+            globalsCodeObjects = _context3.sent;
+            // Store processed globalsCode in state for future use
+            setProcessedGlobalsCode(globalsCodeObjects);
+          case 17:
+            _context3.next = 19;
             return Promise.all(variants.map(function (name) {
+              // Resolve globalsCode for this specific variant
+              var globalsForVariant = globalsCodeObjects.map(function (codeObj) {
+                // Only include if this variant exists in the globalsCode
+                return codeObj[name];
+              }).filter(function (item) {
+                return Boolean(item);
+              });
               return loadVariant(url, name, loadedCode[name], undefined,
               // sourceParser - skip parsing
               loadSource, loadVariantMeta, undefined,
               // sourceTransformers - skip transforming
               {
                 disableParsing: true,
-                disableTransforms: true
+                disableTransforms: true,
+                globalsCode: globalsForVariant
               }).then(function (variant) {
                 return {
                   name: name,
@@ -141,8 +219,8 @@ function useAllVariants(_ref3) {
                 };
               });
             }));
-          case 9:
-            result = _context2.sent;
+          case 19:
+            result = _context3.sent;
             resultCode = {};
             errors = [];
             _iterator = _createForOfIteratorHelper(result);
@@ -165,37 +243,60 @@ function useAllVariants(_ref3) {
             } else {
               setCode(resultCode);
             }
-          case 15:
+          case 25:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }))();
-  }, [readyForContent, isControlled, variants, url, code, setCode, loadSource, loadVariantMeta, loadCodeMeta]);
+  }, [readyForContent, isControlled, variants, url, code, setCode, loadSource, loadVariantMeta, loadCodeMeta, processedGlobalsCode, globalsCode, setProcessedGlobalsCode]);
   return {
     readyForContent: readyForContent
   };
 }
-function useCodeParsing(_ref5) {
-  var code = _ref5.code,
-    readyForContent = _ref5.readyForContent;
+function useCodeParsing(_ref6) {
+  var code = _ref6.code,
+    readyForContent = _ref6.readyForContent,
+    highlightAt = _ref6.highlightAt;
   var _useCodeContext3 = useCodeContext(),
     parseSource = _useCodeContext3.parseSource;
 
-  // Parse the internal code state when ready
+  // Use timing hooks to determine when to highlight
+  var isHydrated = useOnHydrate();
+  var isIdle = useOnIdle();
+
+  // Determine if we should highlight based on the highlightAt setting
+  var shouldHighlight = React.useMemo(function () {
+    if (!readyForContent) {
+      return false;
+    }
+    switch (highlightAt) {
+      case 'hydration':
+        return isHydrated;
+      case 'idle':
+        return isIdle;
+      case 'init':
+      default:
+        return true;
+    }
+  }, [readyForContent, highlightAt, isHydrated, isIdle]);
+
+  // Parse the internal code state when ready and timing conditions are met
   var parsedCode = React.useMemo(function () {
-    if (!code || !readyForContent || !parseSource) {
+    if (!code || !shouldHighlight || !parseSource) {
       return undefined;
     }
     return parseCode(code, parseSource);
-  }, [code, readyForContent, parseSource]);
+  }, [code, shouldHighlight, parseSource]);
+  var deferHighlight = !shouldHighlight;
   return {
-    parsedCode: parsedCode
+    parsedCode: parsedCode,
+    deferHighlight: deferHighlight
   };
 }
-function useCodeTransforms(_ref6) {
-  var parsedCode = _ref6.parsedCode,
-    variantName = _ref6.variantName;
+function useCodeTransforms(_ref7) {
+  var parsedCode = _ref7.parsedCode,
+    variantName = _ref7.variantName;
   var _useCodeContext4 = useCodeContext(),
     sourceParser = _useCodeContext4.sourceParser;
   var _React$useState = React.useState(undefined),
@@ -216,33 +317,33 @@ function useCodeTransforms(_ref6) {
     }
 
     // Process transformations for all variants
-    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var parseSource, enhanced;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            _context3.prev = 0;
-            _context3.next = 3;
+            _context4.prev = 0;
+            _context4.next = 3;
             return sourceParser;
           case 3:
-            parseSource = _context3.sent;
-            _context3.next = 6;
+            parseSource = _context4.sent;
+            _context4.next = 6;
             return applyTransforms(parsedCode, parseSource);
           case 6:
-            enhanced = _context3.sent;
+            enhanced = _context4.sent;
             setTransformedCode(enhanced);
-            _context3.next = 14;
+            _context4.next = 14;
             break;
           case 10:
-            _context3.prev = 10;
-            _context3.t0 = _context3["catch"](0);
-            console.error('Failed to process transforms:', _context3.t0);
+            _context4.prev = 10;
+            _context4.t0 = _context4["catch"](0);
+            console.error('Failed to process transforms:', _context4.t0);
             setTransformedCode(parsedCode);
           case 14:
           case "end":
-            return _context3.stop();
+            return _context4.stop();
         }
-      }, _callee3, null, [[0, 10]]);
+      }, _callee4, null, [[0, 10]]);
     }))();
   }, [parsedCode, sourceParser]);
   return {
@@ -250,8 +351,8 @@ function useCodeTransforms(_ref6) {
     availableTransforms: availableTransforms
   };
 }
-function useControlledCodeParsing(_ref8) {
-  var controlledCode = _ref8.controlledCode;
+function useControlledCodeParsing(_ref9) {
+  var controlledCode = _ref9.controlledCode;
   var _useCodeContext5 = useCodeContext(),
     parseSource = _useCodeContext5.parseSource;
 
@@ -266,8 +367,304 @@ function useControlledCodeParsing(_ref8) {
     parsedControlledCode: parsedControlledCode
   };
 }
+function useGlobalsCodeMerging(_ref0) {
+  var code = _ref0.code,
+    globalsCode = _ref0.globalsCode,
+    processedGlobalsCode = _ref0.processedGlobalsCode,
+    setProcessedGlobalsCode = _ref0.setProcessedGlobalsCode,
+    readyForContent = _ref0.readyForContent,
+    variants = _ref0.variants;
+  var _useCodeContext6 = useCodeContext(),
+    loadCodeMeta = _useCodeContext6.loadCodeMeta,
+    loadSource = _useCodeContext6.loadSource,
+    loadVariantMeta = _useCodeContext6.loadVariantMeta;
+
+  // Set processedGlobalsCode if we have ready Code objects but haven't stored them yet
+  React.useEffect(function () {
+    if (!globalsCode || processedGlobalsCode) {
+      return; // No globals or already processed
+    }
+
+    // Check if all items are already Code objects (precomputed)
+    if (globalsCode.every(function (item) {
+      return _typeof(item) === 'object';
+    })) {
+      var codeObjects = globalsCode;
+      // Check if all Code objects have all their own variants
+      var allReady = codeObjects.every(function (codeObj) {
+        return hasAllVariants(Object.keys(codeObj), codeObj);
+      });
+      if (allReady) {
+        setProcessedGlobalsCode(codeObjects);
+        return;
+      }
+      // If not all ready, fall through to loading logic below
+    }
+
+    // Need to load string URLs or load missing variants
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+      var basicCodeObjects, fullyLoadedCodeObjects;
+      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            _context8.prev = 0;
+            _context8.next = 3;
+            return Promise.all(globalsCode.map(/*#__PURE__*/function () {
+              var _ref10 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(item) {
+                return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+                  while (1) switch (_context5.prev = _context5.next) {
+                    case 0:
+                      if (!(typeof item === 'string')) {
+                        _context5.next = 8;
+                        break;
+                      }
+                      if (loadCodeMeta) {
+                        _context5.next = 3;
+                        break;
+                      }
+                      throw new Error('"loadCodeMeta" function is required for string URLs in globalsCode');
+                    case 3:
+                      _context5.next = 5;
+                      return loadCodeMeta(item);
+                    case 5:
+                      _context5.t0 = _context5.sent;
+                      _context5.t1 = item;
+                      return _context5.abrupt("return", {
+                        codeObj: _context5.t0,
+                        originalUrl: _context5.t1
+                      });
+                    case 8:
+                      return _context5.abrupt("return", {
+                        codeObj: item,
+                        originalUrl: undefined
+                      });
+                    case 9:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }, _callee5);
+              }));
+              return function (_x2) {
+                return _ref10.apply(this, arguments);
+              };
+            }()));
+          case 3:
+            basicCodeObjects = _context8.sent;
+            _context8.next = 6;
+            return Promise.all(basicCodeObjects.map(/*#__PURE__*/function () {
+              var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7(_ref11) {
+                var codeObj, originalUrl, loadedVariants;
+                return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+                  while (1) switch (_context7.prev = _context7.next) {
+                    case 0:
+                      codeObj = _ref11.codeObj, originalUrl = _ref11.originalUrl;
+                      if (!hasAllVariants(variants, codeObj)) {
+                        _context7.next = 3;
+                        break;
+                      }
+                      return _context7.abrupt("return", codeObj);
+                    case 3:
+                      // Need to load missing variants
+                      loadedVariants = _objectSpread({}, codeObj);
+                      _context7.next = 6;
+                      return Promise.all(variants.map(/*#__PURE__*/function () {
+                        var _ref13 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6(variantName) {
+                          var result;
+                          return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+                            while (1) switch (_context6.prev = _context6.next) {
+                              case 0:
+                                if (!(codeObj[variantName] && _typeof(codeObj[variantName]) === 'object')) {
+                                  _context6.next = 2;
+                                  break;
+                                }
+                                return _context6.abrupt("return");
+                              case 2:
+                                _context6.prev = 2;
+                                _context6.next = 5;
+                                return loadVariant(originalUrl || '',
+                                // Use the original URL if available
+                                variantName, codeObj[variantName],
+                                // May be undefined or string
+                                undefined,
+                                // sourceParser - skip parsing for now
+                                loadSource, loadVariantMeta, undefined,
+                                // sourceTransformers - skip transforming
+                                {
+                                  disableParsing: true,
+                                  disableTransforms: true
+                                });
+                              case 5:
+                                result = _context6.sent;
+                                loadedVariants[variantName] = result.code;
+                                _context6.next = 12;
+                                break;
+                              case 9:
+                                _context6.prev = 9;
+                                _context6.t0 = _context6["catch"](2);
+                                console.warn("Failed to load variant ".concat(variantName, " for globalsCode:"), _context6.t0);
+                                // Keep the original variant data (may be undefined)
+                              case 12:
+                              case "end":
+                                return _context6.stop();
+                            }
+                          }, _callee6, null, [[2, 9]]);
+                        }));
+                        return function (_x4) {
+                          return _ref13.apply(this, arguments);
+                        };
+                      }()));
+                    case 6:
+                      return _context7.abrupt("return", loadedVariants);
+                    case 7:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }, _callee7);
+              }));
+              return function (_x3) {
+                return _ref12.apply(this, arguments);
+              };
+            }()));
+          case 6:
+            fullyLoadedCodeObjects = _context8.sent;
+            setProcessedGlobalsCode(fullyLoadedCodeObjects);
+            _context8.next = 13;
+            break;
+          case 10:
+            _context8.prev = 10;
+            _context8.t0 = _context8["catch"](0);
+            console.warn('Failed to load globalsCode:', _context8.t0);
+          case 13:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8, null, [[0, 10]]);
+    }))();
+  }, [globalsCode, processedGlobalsCode, setProcessedGlobalsCode, loadCodeMeta, loadSource, loadVariantMeta, variants]);
+
+  // Determine globalsCodeObjects to use (prefer processed, fallback to direct if ready)
+  var globalsCodeObjects = React.useMemo(function () {
+    if (processedGlobalsCode) {
+      return processedGlobalsCode;
+    }
+    if (globalsCode && globalsCode.every(function (item) {
+      return _typeof(item) === 'object';
+    })) {
+      var codeObjects = globalsCode;
+      var allGlobalsReady = codeObjects.every(function (codeObj) {
+        return hasAllVariants(Object.keys(codeObj), codeObj);
+      });
+      if (allGlobalsReady) {
+        return codeObjects;
+      }
+    }
+    return undefined;
+  }, [processedGlobalsCode, globalsCode]);
+
+  // Merge globalsCode with code when ready
+  return React.useMemo(function () {
+    // If no globalsCode or code not ready, return as-is
+    if (!globalsCode || !code || !readyForContent) {
+      return code;
+    }
+
+    // If globalsCodeObjects isn't ready yet, return unmerged code for now
+    if (!globalsCodeObjects) {
+      return code;
+    }
+
+    // For precomputed code, do simple synchronous merging of extraFiles
+    var mergedCode = _objectSpread({}, code);
+    var hasChanges = false;
+    variants.forEach(function (variant) {
+      var variantData = code[variant];
+      if (!variantData || typeof variantData === 'string') {
+        return;
+      }
+
+      // Get globalsCode for this variant (only exact matches, no fallback)
+      var globalsForVariant = globalsCodeObjects.map(function (codeObj) {
+        return codeObj[variant];
+      }).filter(function (item) {
+        return Boolean(item) && _typeof(item) === 'object';
+      });
+      if (globalsForVariant.length > 0) {
+        // Simple merge for precomputed data - just combine extraFiles
+        var mergedExtraFiles = _objectSpread({}, variantData.extraFiles || {});
+        globalsForVariant.forEach(function (globalVariant) {
+          if (globalVariant.extraFiles) {
+            Object.assign(mergedExtraFiles, globalVariant.extraFiles);
+          }
+        });
+
+        // Only update if we actually have extra files to merge
+        if (Object.keys(mergedExtraFiles).length > Object.keys(variantData.extraFiles || {}).length) {
+          mergedCode[variant] = _objectSpread(_objectSpread({}, variantData), {}, {
+            extraFiles: mergedExtraFiles
+          });
+          hasChanges = true;
+        }
+      }
+    });
+
+    // Return merged code if we made changes, otherwise return original code
+    return hasChanges ? mergedCode : code;
+  }, [code, globalsCode, globalsCodeObjects, readyForContent, variants]);
+}
+function usePropsCodeGlobalsMerging(_ref14) {
+  var code = _ref14.code,
+    globalsCode = _ref14.globalsCode,
+    processedGlobalsCode = _ref14.processedGlobalsCode,
+    variants = _ref14.variants;
+  // For props.code, always do synchronous merging if possible
+  // We don't want to cache this in state since props.code can change frequently
+  return React.useMemo(function () {
+    if (!code || !globalsCode || !processedGlobalsCode) {
+      return code; // No merge needed or not ready
+    }
+
+    // Use processedGlobalsCode for synchronous merging
+    var globalsCodeObjects = processedGlobalsCode;
+
+    // For props.code (controlled), do simple synchronous merging
+    var mergedCode = _objectSpread({}, code);
+    var hasChanges = false;
+    variants.forEach(function (variant) {
+      var variantData = code[variant];
+      if (!variantData || typeof variantData === 'string') {
+        return;
+      }
+
+      // Get globalsCode for this variant (only exact matches, no fallback)
+      var globalsForVariant = globalsCodeObjects.map(function (codeObj) {
+        return codeObj[variant];
+      }).filter(function (item) {
+        return Boolean(item) && _typeof(item) === 'object';
+      });
+      if (globalsForVariant.length > 0) {
+        // Simple merge for controlled data - just combine extraFiles
+        var mergedExtraFiles = _objectSpread({}, variantData.extraFiles || {});
+        globalsForVariant.forEach(function (globalVariant) {
+          if (globalVariant.extraFiles) {
+            Object.assign(mergedExtraFiles, globalVariant.extraFiles);
+          }
+        });
+
+        // Only update if we actually have extra files to merge
+        if (Object.keys(mergedExtraFiles).length > Object.keys(variantData.extraFiles || {}).length) {
+          mergedCode[variant] = _objectSpread(_objectSpread({}, variantData), {}, {
+            extraFiles: mergedExtraFiles
+          });
+          hasChanges = true;
+        }
+      }
+    });
+
+    // Return merged code if we made changes, otherwise return original code
+    return hasChanges ? mergedCode : code;
+  }, [code, globalsCode, processedGlobalsCode, variants]);
+}
 export function CodeHighlighterClient(props) {
-  var _activeCode$variantNa, _activeCode$variantNa2;
   var _useControlledCode = useControlledCode(),
     controlledCode = _useControlledCode.controlledCode,
     controlledSelection = _useControlledCode.controlledSelection,
@@ -288,18 +685,28 @@ export function CodeHighlighterClient(props) {
     code = _React$useState4[0],
     setCode = _React$useState4[1];
 
+  // State to store processed globalsCode to avoid duplicate loading
+  var _React$useState5 = React.useState(undefined),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    processedGlobalsCode = _React$useState6[0],
+    setProcessedGlobalsCode = _React$useState6[1];
+
   // TODO: if using props.variant, then the variant is controlled and we can't use our own state
   // does props.variant make any sense instead of controlledSelection?.variant?
-  var _React$useState5 = React.useState({
+  var _React$useState7 = React.useState({
       variant: props.initialVariant || props.defaultVariant || 'Default'
     }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    selection = _React$useState6[0],
-    setSelection = _React$useState6[1];
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selection = _React$useState8[0],
+    setSelection = _React$useState8[1];
   var variantName = (controlledSelection == null ? void 0 : controlledSelection.variant) || props.variant || selection.variant;
   var activeCode = controlledCode || props.code || code;
-  var initialFilename = _typeof(activeCode == null ? void 0 : activeCode[variantName]) === 'object' && (activeCode != null && (_activeCode$variantNa = activeCode[variantName]) != null && _activeCode$variantNa.filesOrder ? activeCode[variantName].filesOrder[0] : activeCode == null || (_activeCode$variantNa2 = activeCode[variantName]) == null ? void 0 : _activeCode$variantNa2.fileName);
-  var fileName = (controlledSelection == null ? void 0 : controlledSelection.fileName) || props.fileName || initialFilename || 'index.js';
+  var initialFilename;
+  if (_typeof(activeCode == null ? void 0 : activeCode[variantName]) === 'object') {
+    var variant = activeCode[variantName];
+    initialFilename = variant != null && variant.filesOrder ? variant.filesOrder[0] : variant == null ? void 0 : variant.fileName;
+  }
+  var fileName = (controlledSelection == null ? void 0 : controlledSelection.fileName) || props.fileName || initialFilename;
   var variants = props.variants || Object.keys(props.components || activeCode || {});
   var url = props.url,
     highlightAt = props.highlightAt,
@@ -315,7 +722,9 @@ export function CodeHighlighterClient(props) {
     highlightAt: highlightAt,
     fallbackUsesExtraFiles: fallbackUsesExtraFiles,
     fallbackUsesAllVariants: fallbackUsesAllVariants,
-    isControlled: isControlled
+    isControlled: isControlled,
+    globalsCode: props.globalsCode,
+    setProcessedGlobalsCode: setProcessedGlobalsCode
   });
   var readyForContent = React.useMemo(function () {
     if (!code) {
@@ -345,13 +754,40 @@ export function CodeHighlighterClient(props) {
     isControlled: isControlled,
     url: url,
     code: code,
-    setCode: setCode
+    setCode: setCode,
+    processedGlobalsCode: processedGlobalsCode,
+    globalsCode: props.globalsCode,
+    setProcessedGlobalsCode: setProcessedGlobalsCode
+  });
+
+  // Merge globalsCode with internal state code (fetched data) - this should be stable once ready
+  var stateCodeWithGlobals = useGlobalsCodeMerging({
+    code: code,
+    // Only use internal state, not props.code
+    globalsCode: props.globalsCode,
+    processedGlobalsCode: processedGlobalsCode,
+    setProcessedGlobalsCode: setProcessedGlobalsCode,
+    readyForContent: readyForContent,
+    variants: variants
   });
+
+  // For props.code (controlled), always re-merge when it changes (don't cache in state)
+  var propsCodeWithGlobals = usePropsCodeGlobalsMerging({
+    code: props.code,
+    globalsCode: props.globalsCode,
+    processedGlobalsCode: processedGlobalsCode,
+    variants: variants
+  });
+
+  // Use props.code result if available, otherwise use state code result
+  var codeWithGlobals = propsCodeWithGlobals || stateCodeWithGlobals;
   var _useCodeParsing = useCodeParsing({
-      code: props.code || code,
-      readyForContent: readyForContent || Boolean(props.code)
+      code: codeWithGlobals,
+      readyForContent: readyForContent || Boolean(props.code),
+      highlightAt: highlightAt
     }),
-    parsedCode = _useCodeParsing.parsedCode;
+    parsedCode = _useCodeParsing.parsedCode,
+    deferHighlight = _useCodeParsing.deferHighlight;
   var _useCodeTransforms = useCodeTransforms({
       parsedCode: parsedCode,
       variantName: variantName
@@ -364,7 +800,7 @@ export function CodeHighlighterClient(props) {
     parsedControlledCode = _useControlledCodePar.parsedControlledCode;
 
   // Determine the final overlaid code (controlled takes precedence)
-  var overlaidCode = parsedControlledCode || transformedCode;
+  var overlaidCode = parsedControlledCode || transformedCode || codeWithGlobals;
 
   // For fallback context, use the processed code or fall back to non-controlled code
   var codeForFallback = overlaidCode || (controlledCode ? undefined : props.code || code);
@@ -373,15 +809,17 @@ export function CodeHighlighterClient(props) {
   }, [variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants]);
   var context = React.useMemo(function () {
     return {
-      code: overlaidCode || transformedCode,
+      code: overlaidCode,
       // Use processed/transformed code
       setCode: controlledSetCode,
       selection: controlledSelection || selection,
       setSelection: controlledSetSelection || setSelection,
       components: controlledComponents || props.components,
-      availableTransforms: availableTransforms
+      availableTransforms: isControlled ? [] : availableTransforms,
+      url: props.url,
+      deferHighlight: deferHighlight
     };
-  }, [overlaidCode, transformedCode, controlledSetCode, selection, controlledSelection, controlledSetSelection, controlledComponents, props.components, availableTransforms]);
+  }, [overlaidCode, controlledSetCode, selection, controlledSelection, controlledSetSelection, controlledComponents, props.components, isControlled, availableTransforms, props.url, deferHighlight]);
   if (!props.variants && !props.components && !activeCode) {
     throw new Error('CodeHighlighterClient requires either `variants`, `components`, or `code` to be provided.');
   }