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

package/CodeControllerContext/CodeControllerContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlledCode } from "../CodeHighlighter/types.js";
+import type { ControlledCode } from "../CodeHighlighter/types.js";
 export type Selection = {
   variant: string;
   fileName?: string;

package/CodeControllerContext/CodeControllerContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeControllerContext.d.ts","sourceRoot":"","sources":["../../../src/CodeControllerContext/CodeControllerContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtF,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;CAC1D;AAED,eAAO,MAAM,qBAAqB,kDAEjC,CAAC;AAEF,wBAAgB,iBAAiB;;;;;;EAShC"}
+{"version":3,"file":"CodeControllerContext.d.ts","sourceRoot":"","sources":["../../src/CodeControllerContext/CodeControllerContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtF,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;CAC1D;AAED,eAAO,MAAM,qBAAqB,kDAEjC,CAAC;AAEF,wBAAgB,iBAAiB;;;;;;EAShC"}

package/CodeControllerContext/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CodeControllerContext/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CodeControllerContext/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/CodeExternalsContext/CodeExternalsContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type Module = {};
+export interface CodeExternalsContext {
+  externals?: Record<string, Module>;
+}
+export declare const CodeExternalsContext: React.Context<CodeExternalsContext | undefined>;
+export declare function useCodeExternals(): CodeExternalsContext | undefined;
+export {};

package/CodeExternalsContext/CodeExternalsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeExternalsContext.d.ts","sourceRoot":"","sources":["../../src/CodeExternalsContext/CodeExternalsContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,MAAM,GAAG,EAAE,CAAC;AACjB,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,oBAAoB,iDAEhC,CAAC;AAEF,wBAAgB,gBAAgB,qCAE/B"}

package/CodeExternalsContext/CodeExternalsContext.js

@@ -0,0 +1,7 @@
+'use client';
+
+import * as React from 'react';
+export var CodeExternalsContext = /*#__PURE__*/React.createContext(undefined);
+export function useCodeExternals() {
+  return React.useContext(CodeExternalsContext);
+}

package/CodeExternalsContext/index.d.ts

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

package/CodeExternalsContext/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CodeExternalsContext/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/CodeExternalsContext/index.js

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

package/CodeHighlighter/CodeHighlighter.d.ts

@@ -1,2 +1,2 @@
 import type { CodeHighlighterProps } from "./types.js";
-export declare function CodeHighlighter(props: CodeHighlighterProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeHighlighter<T extends {}>(props: CodeHighlighterProps<T>): import("react/jsx-runtime").JSX.Element;

package/CodeHighlighter/CodeHighlighter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.d.ts","sourceRoot":"","sources":["../../../src/CodeHighlighter/CodeHighlighter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,oBAAoB,EAIrB,MAAM,SAAS,CAAC;AAkRjB,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA4F1D"}
+{"version":3,"file":"CodeHighlighter.d.ts","sourceRoot":"","sources":["../../src/CodeHighlighter/CodeHighlighter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,oBAAoB,EAMrB,MAAM,SAAS,CAAC;AA8WjB,wBAAgB,eAAe,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAsI3E"}

package/CodeHighlighter/CodeHighlighter.js

@@ -1,16 +1,18 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
 import { loadVariant } from "./loadVariant.js";
 import { loadFallbackCode } from "./loadFallbackCode.js";
-import { stringOrHastToJsx } from "../hast/index.js";
+import { stringOrHastToJsx } from "../pipeline/hastUtils/index.js";
 import { CodeHighlighterClient } from "./CodeHighlighterClient.js";
 import { maybeInitialData } from "./maybeInitialData.js";
 import { hasAllVariants } from "./hasAllVariants.js";
+import { getFileNameFromUrl } from "../pipeline/loaderUtils/getFileNameFromUrl.js";
 
 // Common props shared across helper functions
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -25,6 +27,13 @@ function HighlightErrorHandler(_ref) {
 }
 function createClientProps(props) {
   var highlightAt = props.highlightAt === 'stream' ? 'init' : props.highlightAt;
+  var contentProps = _objectSpread({
+    code: props.code || props.precompute,
+    components: props.components,
+    name: props.name,
+    slug: props.slug,
+    url: props.url
+  }, props.contentProps || {});
   return {
     url: props.url,
     code: props.code,
@@ -41,58 +50,152 @@ function createClientProps(props) {
     controlled: props.controlled,
     name: props.name,
     slug: props.slug,
-    description: props.description,
-    children: /*#__PURE__*/_jsx(props.Content, {
-      code: _typeof(props.precompute) === 'object' ? props.code || props.precompute : props.code,
-      components: props.components,
-      name: props.name,
-      slug: props.slug,
-      description: props.description
-    })
+    // Use processedGlobalsCode if available, otherwise fall back to raw globalsCode
+    globalsCode: props.processedGlobalsCode || props.globalsCode,
+    children: /*#__PURE__*/_jsx(props.Content, _objectSpread({}, contentProps))
   };
 }
 function CodeSourceLoader(_x) {
   return _CodeSourceLoader.apply(this, arguments);
 }
 function _CodeSourceLoader() {
-  _CodeSourceLoader = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(props) {
-    var ErrorHandler, loadedCode, variantNames, variantCodes, processedCode, errors, _iterator, _step, item, clientProps;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+  _CodeSourceLoader = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(props) {
+    var ErrorHandler, loadedCode, processedGlobalsCode, hasStringUrls, globalsPromises, variantNames, variantCodes, processedCode, errors, _iterator2, _step2, item, clientProps;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           ErrorHandler = props.ErrorHandler || HighlightErrorHandler; // Start with the loaded code from precompute, or load it if needed
-          loadedCode = props.code;
+          loadedCode = props.code || props.precompute;
           if (loadedCode) {
-            _context.next = 14;
+            _context2.next = 16;
             break;
           }
           if (props.loadCodeMeta) {
-            _context.next = 5;
+            _context2.next = 5;
             break;
           }
-          return _context.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
             error: new Error('No code provided and "loadCodeMeta" function is not defined')
           }));
         case 5:
-          _context.prev = 5;
-          _context.next = 8;
+          if (props.url) {
+            _context2.next = 7;
+            break;
+          }
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+            error: new Error('URL is required when loading code with "loadCodeMeta"')
+          }));
+        case 7:
+          _context2.prev = 7;
+          _context2.next = 10;
           return props.loadCodeMeta(props.url);
-        case 8:
-          loadedCode = _context.sent;
-          _context.next = 14;
+        case 10:
+          loadedCode = _context2.sent;
+          _context2.next = 16;
           break;
-        case 11:
-          _context.prev = 11;
-          _context.t0 = _context["catch"](5);
-          return _context.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
-            error: new Error("Failed to load code from URL: ".concat(props.url, ". Error: ").concat(JSON.stringify(_context.t0)))
+        case 13:
+          _context2.prev = 13;
+          _context2.t0 = _context2["catch"](7);
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+            error: new Error("Failed to load code from URL: ".concat(props.url, ". Error: ").concat(JSON.stringify(_context2.t0)))
           }));
-        case 14:
+        case 16:
           // TODO: if props.variant is provided, we should only load that variant
+          // Process globalsCode: use already processed version if available, otherwise convert string URLs to Code objects
+          processedGlobalsCode = props.processedGlobalsCode;
+          if (!(!processedGlobalsCode && props.globalsCode && props.globalsCode.length > 0)) {
+            _context2.next = 31;
+            break;
+          }
+          hasStringUrls = props.globalsCode.some(function (item) {
+            return typeof item === 'string';
+          });
+          if (!(hasStringUrls && !props.loadCodeMeta)) {
+            _context2.next = 21;
+            break;
+          }
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+            error: new Error('loadCodeMeta function is required when globalsCode contains string URLs')
+          }));
+        case 21:
+          // Load all string URLs in parallel, keep Code objects as-is
+          globalsPromises = props.globalsCode.map(/*#__PURE__*/function () {
+            var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(globalItem) {
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    if (!(typeof globalItem === 'string')) {
+                      _context.next = 12;
+                      break;
+                    }
+                    _context.prev = 1;
+                    _context.next = 4;
+                    return props.loadCodeMeta(globalItem);
+                  case 4:
+                    return _context.abrupt("return", _context.sent);
+                  case 7:
+                    _context.prev = 7;
+                    _context.t0 = _context["catch"](1);
+                    throw new Error("Failed to load globalsCode from URL: ".concat(globalItem, ". Error: ").concat(JSON.stringify(_context.t0)));
+                  case 10:
+                    _context.next = 13;
+                    break;
+                  case 12:
+                    return _context.abrupt("return", globalItem);
+                  case 13:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[1, 7]]);
+            }));
+            return function (_x4) {
+              return _ref2.apply(this, arguments);
+            };
+          }());
+          _context2.prev = 22;
+          _context2.next = 25;
+          return Promise.all(globalsPromises);
+        case 25:
+          processedGlobalsCode = _context2.sent;
+          _context2.next = 31;
+          break;
+        case 28:
+          _context2.prev = 28;
+          _context2.t1 = _context2["catch"](22);
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+            error: _context2.t1
+          }));
+        case 31:
           variantNames = Object.keys(props.components || loadedCode || {});
-          _context.next = 17;
+          _context2.next = 34;
           return Promise.all(variantNames.map(function (variantName) {
-            return loadVariant(props.url, variantName, loadedCode[variantName], props.sourceParser, props.loadSource, props.loadVariantMeta, props.sourceTransformers).then(function (variant) {
+            var variantCode = loadedCode[variantName];
+            var variantUrl = _typeof(variantCode) === 'object' && variantCode != null && variantCode.url ? variantCode.url : props.url;
+
+            // Convert processedGlobalsCode to VariantCode | string for this specific variant
+            var resolvedGlobalsCode;
+            if (processedGlobalsCode && processedGlobalsCode.length > 0) {
+              resolvedGlobalsCode = [];
+              var _iterator = _createForOfIteratorHelper(processedGlobalsCode),
+                _step;
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var codeObj = _step.value;
+                  // Only include if this variant exists in the globalsCode
+                  var targetVariant = codeObj[variantName];
+                  if (targetVariant) {
+                    resolvedGlobalsCode.push(targetVariant);
+                  }
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+            }
+            return loadVariant(variantUrl, variantName, variantCode, props.sourceParser, props.loadSource, props.loadVariantMeta, props.sourceTransformers, {
+              globalsCode: resolvedGlobalsCode
+            }).then(function (variant) {
               return {
                 name: variantName,
                 variant: variant
@@ -103,14 +206,14 @@ function _CodeSourceLoader() {
               };
             });
           }));
-        case 17:
-          variantCodes = _context.sent;
+        case 34:
+          variantCodes = _context2.sent;
           processedCode = {};
           errors = [];
-          _iterator = _createForOfIteratorHelper(variantCodes);
+          _iterator2 = _createForOfIteratorHelper(variantCodes);
           try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              item = _step.value;
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              item = _step2.value;
               if ('error' in item) {
                 errors.push(item.error);
               } else {
@@ -118,35 +221,36 @@ function _CodeSourceLoader() {
               }
             }
           } catch (err) {
-            _iterator.e(err);
+            _iterator2.e(err);
           } finally {
-            _iterator.f();
+            _iterator2.f();
           }
           if (!(errors.length > 0)) {
-            _context.next = 24;
+            _context2.next = 41;
             break;
           }
-          return _context.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
             error: new Error("Failed loading code: ".concat(errors.map(function (err) {
               return err.message;
             }).join('\n ')))
           }));
-        case 24:
+        case 41:
           clientProps = createClientProps(_objectSpread(_objectSpread({}, props), {}, {
-            code: processedCode
+            code: processedCode,
+            processedGlobalsCode: processedGlobalsCode
           }));
-          return _context.abrupt("return", /*#__PURE__*/_jsx(CodeHighlighterClient, _objectSpread({}, clientProps)));
-        case 26:
+          return _context2.abrupt("return", /*#__PURE__*/_jsx(CodeHighlighterClient, _objectSpread({}, clientProps)));
+        case 43:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee, null, [[5, 11]]);
+    }, _callee2, null, [[7, 13], [22, 28]]);
   }));
   return _CodeSourceLoader.apply(this, arguments);
 }
 function renderCodeHighlighter(props) {
   var ErrorHandler = props.ErrorHandler || HighlightErrorHandler;
-  var code = props.precompute !== true ? props.code || props.precompute : props.code;
+  var code = props.code || props.precompute;
   var variants = props.variants || Object.keys(props.components || code || {});
   var allCodeVariantsLoaded = code && hasAllVariants(variants, code, true);
   if (!allCodeVariantsLoaded) {
@@ -170,30 +274,35 @@ function CodeHighlighterSuspense(_x2) {
   return _CodeHighlighterSuspense.apply(this, arguments);
 }
 function _CodeHighlighterSuspense() {
-  _CodeHighlighterSuspense = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(props) {
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+  _CodeHighlighterSuspense = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(props) {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          return _context2.abrupt("return", props.children);
+          return _context3.abrupt("return", props.children);
         case 1:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return _CodeHighlighterSuspense.apply(this, arguments);
 }
 function renderWithInitialSource(props) {
-  var fileNames = [props.initialFilename].concat(_toConsumableArray(Object.keys(props.initialExtraFiles || {})));
+  var fileNames = [].concat(_toConsumableArray(props.initialFilename ? [props.initialFilename] : []), _toConsumableArray(Object.keys(props.initialExtraFiles || {})));
   var source = stringOrHastToJsx(props.initialSource, props.highlightAt === 'init');
-  var ContentLoading = props.ContentLoading;
-  var fallback = /*#__PURE__*/_jsx(ContentLoading, {
+  var contentProps = _objectSpread({
+    name: props.name,
+    slug: props.slug,
+    url: props.url,
     fileNames: fileNames,
     source: source
-  });
+  }, props.contentProps || {});
+  var ContentLoading = props.ContentLoading;
+  var fallback = /*#__PURE__*/_jsx(ContentLoading, _objectSpread({}, contentProps));
   if (props.forceClient) {
     return renderCodeHighlighter(_objectSpread(_objectSpread({}, props), {}, {
-      fallback: fallback
+      fallback: fallback,
+      processedGlobalsCode: props.processedGlobalsCode
     }));
   }
   return /*#__PURE__*/_jsx(React.Suspense, {
@@ -201,7 +310,8 @@ function renderWithInitialSource(props) {
     children: /*#__PURE__*/_jsx(CodeHighlighterSuspense, {
       children: renderCodeHighlighter(_objectSpread(_objectSpread({}, props), {}, {
         fallback: fallback,
-        skipFallback: true
+        skipFallback: true,
+        processedGlobalsCode: props.processedGlobalsCode
       }))
     })
   });
@@ -210,59 +320,96 @@ function CodeInitialSourceLoader(_x3) {
   return _CodeInitialSourceLoader.apply(this, arguments);
 }
 function _CodeInitialSourceLoader() {
-  _CodeInitialSourceLoader = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(props) {
-    var ErrorHandler, loaded, code, initialFilename, initialSource, initialExtraFiles;
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+  _CodeInitialSourceLoader = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(props) {
+    var ErrorHandler, loaded, code, initialFilename, initialSource, initialExtraFiles, processedGlobalsCode;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
           ErrorHandler = props.ErrorHandler || HighlightErrorHandler;
-          _context3.next = 3;
-          return loadFallbackCode(props.url, props.initialVariant, props.code, props.highlightAt === 'init', props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants, props.sourceParser, props.loadSource, props.loadVariantMeta, props.loadCodeMeta, props.fileName, props.variants)["catch"](function (error) {
+          if (props.url) {
+            _context4.next = 3;
+            break;
+          }
+          return _context4.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+            error: new Error('URL is required for loading initial source')
+          }));
+        case 3:
+          _context4.next = 5;
+          return loadFallbackCode(props.url, props.initialVariant, props.code, props.highlightAt === 'init', props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants, props.sourceParser, props.loadSource, props.loadVariantMeta, props.loadCodeMeta, props.fileName, props.variants, props.globalsCode)["catch"](function (error) {
             return {
               error: error
             };
           });
-        case 3:
-          loaded = _context3.sent;
+        case 5:
+          loaded = _context4.sent;
           if (!('error' in loaded)) {
-            _context3.next = 6;
+            _context4.next = 8;
             break;
           }
-          return _context3.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+          return _context4.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
             error: loaded.error
           }));
-        case 6:
-          code = loaded.code, initialFilename = loaded.initialFilename, initialSource = loaded.initialSource, initialExtraFiles = loaded.initialExtraFiles;
-          return _context3.abrupt("return", renderWithInitialSource(_objectSpread(_objectSpread({}, props), {}, {
+        case 8:
+          code = loaded.code, initialFilename = loaded.initialFilename, initialSource = loaded.initialSource, initialExtraFiles = loaded.initialExtraFiles, processedGlobalsCode = loaded.processedGlobalsCode;
+          return _context4.abrupt("return", renderWithInitialSource(_objectSpread(_objectSpread({}, props), {}, {
             code: code,
             initialFilename: initialFilename,
             initialSource: initialSource,
             initialExtraFiles: initialExtraFiles,
-            ContentLoading: props.ContentLoading
+            ContentLoading: props.ContentLoading,
+            processedGlobalsCode: processedGlobalsCode
           })));
-        case 8:
+        case 10:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
-    }, _callee3);
+    }, _callee4);
   }));
   return _CodeInitialSourceLoader.apply(this, arguments);
 }
 export function CodeHighlighter(props) {
-  var _props$components;
+  var _code, _props$components;
   var ErrorHandler = props.ErrorHandler || HighlightErrorHandler;
-  if (props.precompute === true) {
+
+  // Validate mutually exclusive props
+  if (props.children && (props.code || props.precompute)) {
     return /*#__PURE__*/_jsx(ErrorHandler, {
-      error: new Error('Precompute enabled, but not provided')
+      error: new Error('Cannot provide both "children" and "code" or "precompute" props')
     });
   }
-  var code = props.precompute || props.code;
-  var variants = props.variants || Object.keys(props.components || props.precompute || props.code || {});
+
+  // Handle children as string -> Default variant
+  var code = props.code;
+  if (props.children && typeof props.children === 'string') {
+    var fileName = props.fileName || (props.url ? getFileNameFromUrl(props.url).fileName : undefined);
+    code = {
+      Default: {
+        fileName: fileName,
+        source: props.children,
+        url: props.url
+      }
+    };
+  }
+  var variants = props.variants || Object.keys(props.components || code || props.precompute || {});
   if (variants.length === 0) {
     return /*#__PURE__*/_jsx(ErrorHandler, {
       error: new Error('No code or components provided')
     });
   }
+
+  // Validate fileName is provided when extraFiles are present
+  if (code) {
+    for (var _i = 0, _Object$entries = Object.entries(code); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        variantName = _Object$entries$_i[0],
+        variantCode = _Object$entries$_i[1];
+      if (_typeof(variantCode) === 'object' && variantCode != null && variantCode.extraFiles && Object.keys(variantCode.extraFiles).length > 0 && !variantCode.fileName && !variantCode.url) {
+        return /*#__PURE__*/_jsx(ErrorHandler, {
+          error: new Error("fileName or url is required for variant \"".concat(variantName, "\" when extraFiles are provided"))
+        });
+      }
+    }
+  }
   var ContentLoading = props.ContentLoading;
   if (!ContentLoading) {
     if (props.highlightAt === 'stream') {
@@ -271,10 +418,12 @@ export function CodeHighlighter(props) {
         error: new Error('ContentLoading component is required for stream highlighting')
       });
     }
-    return renderCodeHighlighter(_objectSpread({}, props));
+    return renderCodeHighlighter(_objectSpread(_objectSpread({}, props), {}, {
+      code: code
+    }));
   }
   var initialKey = props.initialVariant || props.variant || props.defaultVariant || 'Default';
-  var initial = code == null ? void 0 : code[initialKey];
+  var initial = (_code = code) == null ? void 0 : _code[initialKey];
   if (!initial && !((_props$components = props.components) != null && _props$components[initialKey])) {
     return /*#__PURE__*/_jsx(ErrorHandler, {
       error: new Error("No code or component for variant \"".concat(initialKey, "\""))
@@ -283,7 +432,7 @@ export function CodeHighlighter(props) {
 
   // TODO: use initial.filesOrder to determing which source to use
   var highlightAt = props.highlightAt || DEFAULT_HIGHLIGHT_AT;
-  var _maybeInitialData = maybeInitialData(variants, initialKey, code, undefined,
+  var _maybeInitialData = maybeInitialData(variants, initialKey, code || props.precompute, undefined,
     // TODO: use initial.filesOrder if provided?
     highlightAt === 'init', props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants),
     initialData = _maybeInitialData.initialData,

package/CodeHighlighter/CodeHighlighterClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighterClient.d.ts","sourceRoot":"","sources":["../../../src/CodeHighlighter/CodeHighlighterClient.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,0BAA0B,EAAkB,MAAM,SAAS,CAAC;AA6Q3E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAsKtE"}
+{"version":3,"file":"CodeHighlighterClient.d.ts","sourceRoot":"","sources":["../../src/CodeHighlighter/CodeHighlighterClient.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,0BAA0B,EAA+B,MAAM,SAAS,CAAC;AA+mBxF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CA0MtE"}