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

package/esm/CodeHighlighter/CodeHighlighterClient.js

@@ -0,0 +1,984 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _regenerator from "@babel/runtime/helpers/esm/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import * as React from 'react';
+import { useCodeContext } from "../CodeProvider/CodeContext.js";
+import { CodeHighlighterContext } from "./CodeHighlighterContext.js";
+import { maybeInitialData } from "./maybeInitialData.js";
+import { hasAllVariants } from "./hasAllVariants.js";
+import { CodeHighlighterFallbackContext } from "./CodeHighlighterFallbackContext.js";
+import { useControlledCode } from "../CodeControllerContext/index.js";
+import { codeToFallbackProps } from "./codeToFallbackProps.js";
+import { mergeMetadata } from "./mergeMetadata.js";
+import * as Errors from "./errors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEBUG = false; // Set to true for debugging purposes
+
+function useInitialData(_ref) {
+  var variants = _ref.variants,
+    variantName = _ref.variantName,
+    code = _ref.code,
+    setCode = _ref.setCode,
+    fileName = _ref.fileName,
+    url = _ref.url,
+    highlightAt = _ref.highlightAt,
+    fallbackUsesExtraFiles = _ref.fallbackUsesExtraFiles,
+    fallbackUsesAllVariants = _ref.fallbackUsesAllVariants,
+    isControlled = _ref.isControlled,
+    globalsCode = _ref.globalsCode,
+    setProcessedGlobalsCode = _ref.setProcessedGlobalsCode;
+  var _useCodeContext = useCodeContext(),
+    sourceParser = _useCodeContext.sourceParser,
+    loadCodeMeta = _useCodeContext.loadCodeMeta,
+    loadVariantMeta = _useCodeContext.loadVariantMeta,
+    loadSource = _useCodeContext.loadSource,
+    loadFallbackCode = _useCodeContext.loadFallbackCode;
+  var _React$useMemo = React.useMemo(function () {
+      return maybeInitialData(variants, variantName, code, fileName, highlightAt === 'init', fallbackUsesExtraFiles, fallbackUsesAllVariants);
+    }, [variants, variantName, code, fileName, highlightAt, fallbackUsesExtraFiles, fallbackUsesAllVariants]),
+    initialData = _React$useMemo.initialData,
+    reason = _React$useMemo.reason;
+  var needsFallback = !initialData && !isControlled;
+  if (needsFallback) {
+    if (!url) {
+      // URL is required for loading fallback data
+      throw new Errors.ErrorCodeHighlighterClientMissingUrlForFallback();
+    }
+    if (!loadFallbackCode) {
+      throw new Errors.ErrorCodeHighlighterClientMissingLoadFallbackCode(url);
+    }
+  }
+
+  // TODO: fallbackInitialRenderOnly option? this would mean we can't fetch fallback data on the client side
+  // Load initial data if not provided
+  React.useEffect(function () {
+    if (!needsFallback || !url || !loadFallbackCode) {
+      return;
+    }
+
+    // TODO: abort controller
+
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var loaded;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            if (DEBUG) {
+              // eslint-disable-next-line no-console
+              console.log('Loading initial data for CodeHighlighterClient: ', reason);
+            }
+            _context.n = 1;
+            return loadFallbackCode(url, variantName, code, {
+              shouldHighlight: highlightAt === 'init',
+              fallbackUsesExtraFiles: fallbackUsesExtraFiles,
+              fallbackUsesAllVariants: fallbackUsesAllVariants,
+              sourceParser: sourceParser,
+              loadSource: loadSource,
+              loadVariantMeta: loadVariantMeta,
+              loadCodeMeta: loadCodeMeta,
+              initialFilename: fileName,
+              variants: variants,
+              globalsCode: globalsCode // Let loadFallbackCode handle processing
+            })["catch"](function (error) {
+              return {
+                error: error
+              };
+            });
+          case 1:
+            loaded = _context.v;
+            if ('error' in loaded) {
+              console.error(new Errors.ErrorCodeHighlighterClientLoadFallbackFailure(loaded.error));
+            } else {
+              setCode(loaded.code);
+              // Store processed globalsCode from loadFallbackCode result
+              if (loaded.processedGlobalsCode) {
+                setProcessedGlobalsCode(loaded.processedGlobalsCode);
+              }
+            }
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    }))();
+  }, [initialData, reason, needsFallback, variantName, code, setCode, highlightAt, url, sourceParser, loadSource, loadVariantMeta, loadCodeMeta, fallbackUsesExtraFiles, fallbackUsesAllVariants, fileName, variants, globalsCode, setProcessedGlobalsCode, loadFallbackCode]);
+}
+function useAllVariants(_ref3) {
+  var readyForContent = _ref3.readyForContent,
+    variants = _ref3.variants,
+    isControlled = _ref3.isControlled,
+    url = _ref3.url,
+    code = _ref3.code,
+    setCode = _ref3.setCode,
+    processedGlobalsCode = _ref3.processedGlobalsCode,
+    globalsCode = _ref3.globalsCode,
+    setProcessedGlobalsCode = _ref3.setProcessedGlobalsCode;
+  var _useCodeContext2 = useCodeContext(),
+    loadCodeMeta = _useCodeContext2.loadCodeMeta,
+    loadVariantMeta = _useCodeContext2.loadVariantMeta,
+    loadSource = _useCodeContext2.loadSource,
+    loadVariant = _useCodeContext2.loadVariant;
+  var needsData = !readyForContent && !isControlled;
+
+  // validation
+  React.useMemo(function () {
+    if (needsData) {
+      if (!url) {
+        throw new Errors.ErrorCodeHighlighterClientMissingUrlForVariants();
+      }
+      if (!loadVariant) {
+        throw new Errors.ErrorCodeHighlighterClientMissingLoadVariant(url);
+      }
+      if (!code && !loadCodeMeta) {
+        throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForNoCode(url);
+      }
+      if (globalsCode && globalsCode.length > 0 && globalsCode.some(function (item) {
+        return typeof item === 'string';
+      }) && !loadCodeMeta) {
+        throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForGlobals();
+      }
+      if (!code && !loadSource) {
+        throw new Errors.ErrorCodeHighlighterClientMissingLoadSourceForNoCode();
+      }
+      if (code && Object.keys(code).some(function (variantName) {
+        var variant = code[variantName];
+        if (!variant || typeof variant === 'string' || !variant.source) {
+          return true;
+        }
+        var extraFiles = variant.extraFiles;
+        if (extraFiles && Object.keys(extraFiles).some(function (fileName) {
+          return !extraFiles[fileName] || typeof extraFiles[fileName] === 'string' || !extraFiles[fileName].source;
+        })) {
+          return true;
+        }
+        return false;
+      }) && !loadSource) {
+        throw new Errors.ErrorCodeHighlighterClientMissingLoadSourceForUnloadedUrls();
+      }
+    }
+  }, [code, globalsCode, loadCodeMeta, loadVariant, loadSource, needsData, url]);
+  React.useEffect(function () {
+    if (!needsData || !url || !loadVariant) {
+      return;
+    }
+
+    // TODO: abort controller
+
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var loadedCode, globalsCodeObjects, result, resultCode, errors, _iterator, _step, item, _t;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            _context3.p = 0;
+            loadedCode = code;
+            if (loadedCode) {
+              _context3.n = 3;
+              break;
+            }
+            if (loadCodeMeta) {
+              _context3.n = 1;
+              break;
+            }
+            throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMeta();
+          case 1:
+            _context3.n = 2;
+            return loadCodeMeta(url);
+          case 2:
+            loadedCode = _context3.v;
+          case 3:
+            // Use the already-processed globalsCode from state, or process it if not available
+            globalsCodeObjects = [];
+            if (!processedGlobalsCode) {
+              _context3.n = 4;
+              break;
+            }
+            // Use the already-processed globalsCode from state
+            globalsCodeObjects = processedGlobalsCode;
+            _context3.n = 6;
+            break;
+          case 4:
+            if (!(globalsCode && globalsCode.length > 0)) {
+              _context3.n = 6;
+              break;
+            }
+            _context3.n = 5;
+            return Promise.all(globalsCode.map(/*#__PURE__*/function () {
+              var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(item) {
+                return _regenerator().w(function (_context2) {
+                  while (1) switch (_context2.n) {
+                    case 0:
+                      if (!(typeof item === 'string')) {
+                        _context2.n = 2;
+                        break;
+                      }
+                      if (loadCodeMeta) {
+                        _context2.n = 1;
+                        break;
+                      }
+                      throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMeta();
+                    case 1:
+                      return _context2.a(2, loadCodeMeta(item));
+                    case 2:
+                      return _context2.a(2, item);
+                  }
+                }, _callee2);
+              }));
+              return function (_x) {
+                return _ref5.apply(this, arguments);
+              };
+            }()));
+          case 5:
+            globalsCodeObjects = _context3.v;
+            // Store processed globalsCode in state for future use
+            setProcessedGlobalsCode(globalsCodeObjects);
+          case 6:
+            _context3.n = 7;
+            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], {
+                disableParsing: true,
+                disableTransforms: true,
+                loadSource: loadSource,
+                loadVariantMeta: loadVariantMeta,
+                globalsCode: globalsForVariant
+              }).then(function (variant) {
+                return {
+                  name: name,
+                  variant: variant
+                };
+              })["catch"](function (error) {
+                return {
+                  error: error
+                };
+              });
+            }));
+          case 7:
+            result = _context3.v;
+            resultCode = {};
+            errors = [];
+            _iterator = _createForOfIteratorHelper(result);
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                item = _step.value;
+                if ('error' in item) {
+                  errors.push(item.error);
+                } else {
+                  resultCode[item.name] = item.variant.code;
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            if (errors.length > 0) {
+              console.error(new Errors.ErrorCodeHighlighterClientLoadVariantsFailure(url, errors));
+            } else {
+              setCode(resultCode);
+            }
+            _context3.n = 9;
+            break;
+          case 8:
+            _context3.p = 8;
+            _t = _context3.v;
+            console.error(new Errors.ErrorCodeHighlighterClientLoadAllVariantsFailure(url, _t));
+          case 9:
+            return _context3.a(2);
+        }
+      }, _callee3, null, [[0, 8]]);
+    }))();
+  }, [needsData, variants, url, code, setCode, loadSource, loadVariantMeta, loadCodeMeta, processedGlobalsCode, globalsCode, setProcessedGlobalsCode, loadVariant]);
+  return {
+    readyForContent: readyForContent
+  };
+}
+function useCodeParsing(_ref6) {
+  var code = _ref6.code,
+    readyForContent = _ref6.readyForContent,
+    highlightAt = _ref6.highlightAt,
+    forceClient = _ref6.forceClient,
+    url = _ref6.url;
+  var _useCodeContext3 = useCodeContext(),
+    parseSource = _useCodeContext3.parseSource,
+    parseCode = _useCodeContext3.parseCode;
+
+  // Use useSyncExternalStore to detect hydration
+  var subscribe = React.useCallback(function () {
+    return function () {};
+  }, []);
+  var getSnapshot = React.useCallback(function () {
+    return true;
+  }, []);
+  var getServerSnapshot = React.useCallback(function () {
+    return false;
+  }, []);
+  var useIsHydrated = function useIsHydrated() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  };
+  var isHydrated = useIsHydrated();
+  var _React$useState = React.useState(highlightAt === 'init' || highlightAt === 'hydration' && isHydrated),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isHighlightAllowed = _React$useState2[0],
+    setIsHighlightAllowed = _React$useState2[1];
+  React.useEffect(function () {
+    if (highlightAt === 'idle') {
+      var idleRequest = window.requestIdleCallback(function () {
+        setIsHighlightAllowed(true);
+      });
+      return function () {
+        return window.cancelIdleCallback(idleRequest);
+      };
+    }
+    return undefined;
+  }, [highlightAt]);
+
+  // Update highlight allowed state when hydration completes
+  React.useEffect(function () {
+    if (highlightAt === 'hydration' && isHydrated) {
+      setIsHighlightAllowed(true);
+    }
+  }, [highlightAt, isHydrated]);
+
+  // Determine if we should highlight based on the highlightAt setting
+  var shouldHighlight = React.useMemo(function () {
+    if (!readyForContent) {
+      return false;
+    }
+    return isHighlightAllowed;
+  }, [readyForContent, isHighlightAllowed]);
+
+  // Parse the internal code state when ready and timing conditions are met
+  var parsedCode = React.useMemo(function () {
+    if (!code || !shouldHighlight || hasAllVariants(Object.keys(code), code, true)) {
+      return undefined;
+    }
+    if (!parseSource) {
+      if (forceClient) {
+        console.error(new Errors.ErrorCodeHighlighterClientMissingParseSource(url, true));
+      } else {
+        console.error(new Errors.ErrorCodeHighlighterClientMissingParseSource(url, false));
+      }
+      return undefined;
+    }
+    if (!parseCode) {
+      if (forceClient) {
+        console.error(new Errors.ErrorCodeHighlighterClientMissingParseCode(url, true));
+      } else {
+        console.error(new Errors.ErrorCodeHighlighterClientMissingParseCode(url, false));
+      }
+      return undefined;
+    }
+    return parseCode(code, parseSource);
+  }, [code, shouldHighlight, parseSource, parseCode, forceClient, url]);
+  var deferHighlight = !shouldHighlight;
+  return {
+    parsedCode: parsedCode,
+    deferHighlight: deferHighlight
+  };
+}
+function useCodeTransforms(_ref7) {
+  var parsedCode = _ref7.parsedCode,
+    variantName = _ref7.variantName;
+  var _useCodeContext4 = useCodeContext(),
+    sourceParser = _useCodeContext4.sourceParser,
+    getAvailableTransforms = _useCodeContext4.getAvailableTransforms,
+    applyTransforms = _useCodeContext4.applyTransforms;
+  var _React$useState3 = React.useState(undefined),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    transformedCode = _React$useState4[0],
+    setTransformedCode = _React$useState4[1];
+
+  // Get available transforms from the current variant (separate memo for efficiency)
+  var availableTransforms = React.useMemo(function () {
+    if (!getAvailableTransforms) {
+      return [];
+    }
+    return getAvailableTransforms(parsedCode, variantName);
+  }, [parsedCode, variantName, getAvailableTransforms]);
+
+  // Effect to compute transformations for all variants
+  React.useEffect(function () {
+    if (!parsedCode || !sourceParser || !applyTransforms) {
+      setTransformedCode(parsedCode);
+      return;
+    }
+
+    // Process transformations for all variants
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var parseSource, enhanced, _t2;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
+          case 0:
+            _context4.p = 0;
+            _context4.n = 1;
+            return sourceParser;
+          case 1:
+            parseSource = _context4.v;
+            _context4.n = 2;
+            return applyTransforms(parsedCode, parseSource);
+          case 2:
+            enhanced = _context4.v;
+            setTransformedCode(enhanced);
+            _context4.n = 4;
+            break;
+          case 3:
+            _context4.p = 3;
+            _t2 = _context4.v;
+            console.error(new Errors.ErrorCodeHighlighterClientTransformProcessingFailure(_t2));
+            setTransformedCode(parsedCode);
+          case 4:
+            return _context4.a(2);
+        }
+      }, _callee4, null, [[0, 3]]);
+    }))();
+  }, [parsedCode, sourceParser, applyTransforms]);
+  return {
+    transformedCode: transformedCode,
+    availableTransforms: availableTransforms
+  };
+}
+function useControlledCodeParsing(_ref9) {
+  var code = _ref9.code,
+    forceClient = _ref9.forceClient,
+    url = _ref9.url;
+  var _useCodeContext5 = useCodeContext(),
+    parseSource = _useCodeContext5.parseSource,
+    parseControlledCode = _useCodeContext5.parseControlledCode;
+
+  // Parse the controlled code separately (no need to check readyForContent)
+  var parsedControlledCode = React.useMemo(function () {
+    if (!code) {
+      return undefined;
+    }
+    if (!parseSource || !parseControlledCode) {
+      // Log when provider functions are missing to help with debugging
+      if (!parseSource) {
+        if (forceClient) {
+          console.error(new Errors.ErrorCodeHighlighterClientMissingParseSource(url, true));
+        } else {
+          console.error(new Errors.ErrorCodeHighlighterClientMissingParseSource(url, false));
+        }
+      }
+      if (!parseControlledCode) {
+        if (forceClient) {
+          console.error(new Errors.ErrorCodeHighlighterClientMissingParseControlledCode(url, true));
+        } else {
+          console.error(new Errors.ErrorCodeHighlighterClientMissingParseControlledCode(url, false));
+        }
+      }
+      return undefined;
+    }
+    return parseControlledCode(code, parseSource);
+  }, [code, parseSource, parseControlledCode, forceClient, url]);
+  return {
+    parsedControlledCode: parsedControlledCode
+  };
+}
+function useGlobalsCodeMerging(_ref0) {
+  var url = _ref0.url,
+    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,
+    loadVariant = _useCodeContext6.loadVariant;
+
+  // 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
+    }
+    if (!loadVariant) {
+      console.error(new Errors.ErrorCodeHighlighterClientMissingLoadVariantForGlobals());
+      return;
+    }
+
+    // Need to load string URLs or load missing variants
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+      var basicCodeObjects, fullyLoadedCodeObjects, _t6;
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.p = _context8.n) {
+          case 0:
+            _context8.p = 0;
+            _context8.n = 1;
+            return Promise.all(globalsCode.map(/*#__PURE__*/function () {
+              var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(item) {
+                var _t3, _t4;
+                return _regenerator().w(function (_context5) {
+                  while (1) switch (_context5.n) {
+                    case 0:
+                      if (!(typeof item === 'string')) {
+                        _context5.n = 3;
+                        break;
+                      }
+                      if (loadCodeMeta) {
+                        _context5.n = 1;
+                        break;
+                      }
+                      throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForStringUrls();
+                    case 1:
+                      _context5.n = 2;
+                      return loadCodeMeta(item);
+                    case 2:
+                      _t3 = _context5.v;
+                      _t4 = item;
+                      return _context5.a(2, {
+                        codeObj: _t3,
+                        originalUrl: _t4
+                      });
+                    case 3:
+                      return _context5.a(2, {
+                        codeObj: item,
+                        originalUrl: undefined
+                      });
+                  }
+                }, _callee5);
+              }));
+              return function (_x2) {
+                return _ref10.apply(this, arguments);
+              };
+            }()));
+          case 1:
+            basicCodeObjects = _context8.v;
+            _context8.n = 2;
+            return Promise.all(basicCodeObjects.map(/*#__PURE__*/function () {
+              var _ref12 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(_ref11) {
+                var codeObj, originalUrl, loadedVariants;
+                return _regenerator().w(function (_context7) {
+                  while (1) switch (_context7.n) {
+                    case 0:
+                      codeObj = _ref11.codeObj, originalUrl = _ref11.originalUrl;
+                      if (!hasAllVariants(variants, codeObj)) {
+                        _context7.n = 1;
+                        break;
+                      }
+                      return _context7.a(2, codeObj);
+                    case 1:
+                      // Need to load missing variants
+                      loadedVariants = _extends({}, codeObj);
+                      _context7.n = 2;
+                      return Promise.all(variants.map(/*#__PURE__*/function () {
+                        var _ref13 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(variantName) {
+                          var result, _t5;
+                          return _regenerator().w(function (_context6) {
+                            while (1) switch (_context6.p = _context6.n) {
+                              case 0:
+                                if (!(codeObj[variantName] && _typeof(codeObj[variantName]) === 'object')) {
+                                  _context6.n = 1;
+                                  break;
+                                }
+                                return _context6.a(2);
+                              case 1:
+                                _context6.p = 1;
+                                _context6.n = 2;
+                                return loadVariant(originalUrl || '',
+                                // Use the original URL if available
+                                variantName, codeObj[variantName],
+                                // May be undefined or string
+                                {
+                                  disableParsing: true,
+                                  disableTransforms: true,
+                                  loadSource: loadSource,
+                                  loadVariantMeta: loadVariantMeta
+                                });
+                              case 2:
+                                result = _context6.v;
+                                loadedVariants[variantName] = result.code;
+                                _context6.n = 4;
+                                break;
+                              case 3:
+                                _context6.p = 3;
+                                _t5 = _context6.v;
+                                console.error(new Errors.ErrorCodeHighlighterClientLoadVariantFailureForGlobals(variantName, originalUrl, _t5));
+                                // Keep the original variant data (may be undefined)
+                              case 4:
+                                return _context6.a(2);
+                            }
+                          }, _callee6, null, [[1, 3]]);
+                        }));
+                        return function (_x4) {
+                          return _ref13.apply(this, arguments);
+                        };
+                      }()));
+                    case 2:
+                      return _context7.a(2, loadedVariants);
+                  }
+                }, _callee7);
+              }));
+              return function (_x3) {
+                return _ref12.apply(this, arguments);
+              };
+            }()));
+          case 2:
+            fullyLoadedCodeObjects = _context8.v;
+            setProcessedGlobalsCode(fullyLoadedCodeObjects);
+            _context8.n = 4;
+            break;
+          case 3:
+            _context8.p = 3;
+            _t6 = _context8.v;
+            console.error(new Errors.ErrorCodeHighlighterClientLoadGlobalsCodeFailure(url || 'No URL', _t6));
+          case 4:
+            return _context8.a(2);
+        }
+      }, _callee8, null, [[0, 3]]);
+    }))();
+  }, [url, globalsCode, processedGlobalsCode, setProcessedGlobalsCode, loadCodeMeta, loadSource, loadVariantMeta, variants, loadVariant]);
+
+  // 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 = _extends({}, 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) {
+        // Use mergeMetadata for sophisticated globals merging with proper positioning
+        var currentVariant = variantData;
+        globalsForVariant.forEach(function (globalVariant) {
+          if (globalVariant.extraFiles) {
+            // Convert globals extraFiles to metadata format for mergeMetadata
+            var globalsMetadata = {};
+            for (var _i = 0, _Object$entries = Object.entries(globalVariant.extraFiles); _i < _Object$entries.length; _i++) {
+              var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+                key = _Object$entries$_i[0],
+                value = _Object$entries$_i[1];
+              if (typeof value === 'string') {
+                globalsMetadata[key] = {
+                  source: value
+                };
+              } else {
+                globalsMetadata[key] = _extends({}, value);
+              }
+            }
+
+            // Use mergeMetadata to properly position and merge the globals
+            currentVariant = mergeMetadata(currentVariant, globalsMetadata);
+          }
+        });
+
+        // Only update if the variant actually changed
+        if (currentVariant !== variantData) {
+          mergedCode[variant] = currentVariant;
+          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 = _extends({}, 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) {
+        // Use mergeMetadata for sophisticated globals merging with proper positioning
+        var currentVariant = variantData;
+        globalsForVariant.forEach(function (globalVariant) {
+          if (globalVariant.extraFiles) {
+            // Convert globals extraFiles to metadata format for mergeMetadata
+            var globalsMetadata = {};
+            for (var _i2 = 0, _Object$entries2 = Object.entries(globalVariant.extraFiles); _i2 < _Object$entries2.length; _i2++) {
+              var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+                key = _Object$entries2$_i[0],
+                value = _Object$entries2$_i[1];
+              if (typeof value === 'string') {
+                globalsMetadata[key] = {
+                  source: value
+                };
+              } else {
+                globalsMetadata[key] = _extends({}, value);
+              }
+            }
+
+            // Use mergeMetadata to properly position and merge the globals
+            currentVariant = mergeMetadata(currentVariant, globalsMetadata);
+          }
+        });
+
+        // Only update if the variant actually changed
+        if (currentVariant !== variantData) {
+          mergedCode[variant] = currentVariant;
+          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 _controlled$selection, _controlled$selection2;
+  var controlled = useControlledCode();
+  var isControlled = Boolean(props.code || (controlled == null ? void 0 : controlled.code));
+  var _React$useState5 = React.useState(_typeof(props.precompute) === 'object' ? props.precompute : undefined),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    code = _React$useState6[0],
+    setCode = _React$useState6[1];
+
+  // Sync code state with precompute prop changes (for hot-reload)
+  React.useEffect(function () {
+    if (_typeof(props.precompute) === 'object') {
+      setCode(props.precompute);
+    } else if (props.precompute === undefined) {
+      // Only reset to undefined if precompute is explicitly undefined
+      setCode(undefined);
+    }
+  }, [props.precompute]);
+
+  // State to store processed globalsCode to avoid duplicate loading
+  var _React$useState7 = React.useState(undefined),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    processedGlobalsCode = _React$useState8[0],
+    setProcessedGlobalsCode = _React$useState8[1];
+  var activeCode = (controlled == null ? void 0 : controlled.code) || props.code || code;
+  var variants = React.useMemo(function () {
+    return props.variants || Object.keys(props.components || activeCode || {});
+  }, [props.variants, props.components, activeCode]);
+
+  // 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$useState9 = React.useState({
+      variant: props.initialVariant || props.defaultVariant || variants[0]
+    }),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    selection = _React$useState0[0],
+    setSelection = _React$useState0[1];
+  var variantName = (controlled == null || (_controlled$selection = controlled.selection) == null ? void 0 : _controlled$selection.variant) || props.variant || selection.variant;
+  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 = (controlled == null || (_controlled$selection2 = controlled.selection) == null ? void 0 : _controlled$selection2.fileName) || props.fileName || initialFilename;
+  var url = props.url,
+    highlightAt = props.highlightAt,
+    fallbackUsesExtraFiles = props.fallbackUsesExtraFiles,
+    fallbackUsesAllVariants = props.fallbackUsesAllVariants;
+  useInitialData({
+    variants: variants,
+    variantName: variantName,
+    code: code,
+    setCode: setCode,
+    fileName: fileName,
+    url: url,
+    highlightAt: highlightAt,
+    fallbackUsesExtraFiles: fallbackUsesExtraFiles,
+    fallbackUsesAllVariants: fallbackUsesAllVariants,
+    isControlled: isControlled,
+    globalsCode: props.globalsCode,
+    setProcessedGlobalsCode: setProcessedGlobalsCode
+  });
+  var readyForContent = React.useMemo(function () {
+    if (!code) {
+      return false;
+    }
+    return hasAllVariants(variants, code);
+  }, [code, variants]);
+
+  // Separate check for activeCode to determine when to show fallback
+  var activeCodeReady = React.useMemo(function () {
+    if (!activeCode) {
+      return false;
+    }
+
+    // Controlled code is always ready since it comes from editing already-ready code
+    if (controlled != null && controlled.code) {
+      return true;
+    }
+
+    // For regular code, use the existing hasAllVariants function
+    var regularCode = props.code || code;
+    return regularCode ? hasAllVariants(variants, regularCode) : false;
+  }, [activeCode, controlled == null ? void 0 : controlled.code, variants, props.code, code]);
+  useAllVariants({
+    readyForContent: readyForContent,
+    variants: variants,
+    isControlled: isControlled,
+    url: url,
+    code: code,
+    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({
+    url: url,
+    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: codeWithGlobals,
+      readyForContent: readyForContent || Boolean(props.code),
+      highlightAt: highlightAt,
+      forceClient: props.forceClient,
+      url: props.url
+    }),
+    parsedCode = _useCodeParsing.parsedCode,
+    deferHighlight = _useCodeParsing.deferHighlight;
+  var _useCodeTransforms = useCodeTransforms({
+      parsedCode: parsedCode,
+      variantName: variantName
+    }),
+    transformedCode = _useCodeTransforms.transformedCode,
+    availableTransforms = _useCodeTransforms.availableTransforms;
+  var _useControlledCodePar = useControlledCodeParsing({
+      code: controlled == null ? void 0 : controlled.code,
+      forceClient: props.forceClient,
+      url: props.url
+    }),
+    parsedControlledCode = _useControlledCodePar.parsedControlledCode;
+
+  // Determine the final overlaid code (controlled takes precedence)
+  var overlaidCode = parsedControlledCode || transformedCode || codeWithGlobals;
+
+  // For fallback context, use the processed code or fall back to non-controlled code
+  var codeForFallback = overlaidCode || (controlled != null && controlled.code ? undefined : props.code || code);
+  var fallbackContext = React.useMemo(function () {
+    return codeToFallbackProps(variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants);
+  }, [variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants]);
+  var context = React.useMemo(function () {
+    return {
+      code: overlaidCode,
+      // Use processed/transformed code
+      setCode: controlled == null ? void 0 : controlled.setCode,
+      selection: (controlled == null ? void 0 : controlled.selection) || selection,
+      setSelection: (controlled == null ? void 0 : controlled.setSelection) || setSelection,
+      components: (controlled == null ? void 0 : controlled.components) || props.components,
+      availableTransforms: isControlled ? [] : availableTransforms,
+      url: props.url,
+      deferHighlight: deferHighlight
+    };
+  }, [overlaidCode, controlled == null ? void 0 : controlled.setCode, selection, controlled == null ? void 0 : controlled.selection, controlled == null ? void 0 : controlled.setSelection, controlled == null ? void 0 : controlled.components, props.components, isControlled, availableTransforms, props.url, deferHighlight]);
+  if (!props.variants && !props.components && !activeCode) {
+    throw new Errors.ErrorCodeHighlighterClientMissingData();
+  }
+  var fallback = props.fallback;
+  if (fallback && !props.skipFallback && !activeCodeReady) {
+    return /*#__PURE__*/_jsx(CodeHighlighterFallbackContext.Provider, {
+      value: fallbackContext,
+      children: fallback
+    });
+  }
+  return /*#__PURE__*/_jsx(CodeHighlighterContext.Provider, {
+    value: context,
+    children: props.children
+  });
+}