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

package/CodeControllerContext/CodeControllerContext.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ControlledCode } from "../CodeHighlighter/types.js";
+export type Selection = {
+  variant: string;
+  fileName?: string;
+  transformKey?: string;
+};
+export interface CodeControllerContext {
+  code?: ControlledCode;
+  selection?: Selection;
+  setCode?: React.Dispatch<React.SetStateAction<ControlledCode | undefined>>;
+  setSelection?: React.Dispatch<React.SetStateAction<Selection>>;
+  components?: Record<string, React.ReactNode> | undefined;
+}
+export declare const CodeControllerContext: React.Context<CodeControllerContext | undefined>;
+export declare function useControlledCode(): {
+  controlledCode: ControlledCode | undefined;
+  controlledSelection: Selection | undefined;
+  controlledSetCode: React.Dispatch<React.SetStateAction<ControlledCode | undefined>> | undefined;
+  controlledSetSelection: React.Dispatch<React.SetStateAction<Selection>> | undefined;
+  controlledComponents: Record<string, React.ReactNode> | undefined;
+};

package/CodeControllerContext/CodeControllerContext.d.ts.map

@@ -0,0 +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"}

package/CodeControllerContext/CodeControllerContext.js

@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+export var CodeControllerContext = /*#__PURE__*/React.createContext(undefined);
+export function useControlledCode() {
+  var context = React.useContext(CodeControllerContext);
+  return {
+    controlledCode: context == null ? void 0 : context.code,
+    controlledSelection: context == null ? void 0 : context.selection,
+    controlledSetCode: context == null ? void 0 : context.setCode,
+    controlledSetSelection: context == null ? void 0 : context.setSelection,
+    controlledComponents: context == null ? void 0 : context.components
+  };
+}

package/CodeControllerContext/index.d.ts

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

package/CodeControllerContext/index.d.ts.map

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

package/CodeControllerContext/index.js

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

package/CodeHighlighter/CodeHighlighter.d.ts

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

package/CodeHighlighter/CodeHighlighter.d.ts.map

@@ -0,0 +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"}

package/CodeHighlighter/CodeHighlighter.js

@@ -0,0 +1,321 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+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 * as React from 'react';
+import { loadVariant } from "./loadVariant.js";
+import { loadFallbackCode } from "./loadFallbackCode.js";
+import { stringOrHastToJsx } from "../hast/index.js";
+import { CodeHighlighterClient } from "./CodeHighlighterClient.js";
+import { maybeInitialData } from "./maybeInitialData.js";
+import { hasAllVariants } from "./hasAllVariants.js";
+
+// Common props shared across helper functions
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_HIGHLIGHT_AT = 'stream';
+var DEBUG = false; // Set to true for debugging purposes
+
+function HighlightErrorHandler(_ref) {
+  var error = _ref.error;
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["Error: ", error.message]
+  });
+}
+function createClientProps(props) {
+  var highlightAt = props.highlightAt === 'stream' ? 'init' : props.highlightAt;
+  return {
+    url: props.url,
+    code: props.code,
+    precompute: props.precompute,
+    components: props.components,
+    variants: props.variants,
+    variant: props.variant,
+    fileName: props.fileName,
+    initialVariant: props.initialVariant,
+    defaultVariant: props.defaultVariant,
+    highlightAt: highlightAt || 'init',
+    fallback: props.fallback,
+    skipFallback: props.skipFallback,
+    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
+    })
+  };
+}
+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) {
+        case 0:
+          ErrorHandler = props.ErrorHandler || HighlightErrorHandler; // Start with the loaded code from precompute, or load it if needed
+          loadedCode = props.code;
+          if (loadedCode) {
+            _context.next = 14;
+            break;
+          }
+          if (props.loadCodeMeta) {
+            _context.next = 5;
+            break;
+          }
+          return _context.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;
+          return props.loadCodeMeta(props.url);
+        case 8:
+          loadedCode = _context.sent;
+          _context.next = 14;
+          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 14:
+          // TODO: if props.variant is provided, we should only load that variant
+          variantNames = Object.keys(props.components || loadedCode || {});
+          _context.next = 17;
+          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) {
+              return {
+                name: variantName,
+                variant: variant
+              };
+            })["catch"](function (error) {
+              return {
+                error: error
+              };
+            });
+          }));
+        case 17:
+          variantCodes = _context.sent;
+          processedCode = {};
+          errors = [];
+          _iterator = _createForOfIteratorHelper(variantCodes);
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              item = _step.value;
+              if ('error' in item) {
+                errors.push(item.error);
+              } else {
+                processedCode[item.name] = item.variant.code;
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          if (!(errors.length > 0)) {
+            _context.next = 24;
+            break;
+          }
+          return _context.abrupt("return", /*#__PURE__*/_jsx(ErrorHandler, {
+            error: new Error("Failed loading code: ".concat(errors.map(function (err) {
+              return err.message;
+            }).join('\n ')))
+          }));
+        case 24:
+          clientProps = createClientProps(_objectSpread(_objectSpread({}, props), {}, {
+            code: processedCode
+          }));
+          return _context.abrupt("return", /*#__PURE__*/_jsx(CodeHighlighterClient, _objectSpread({}, clientProps)));
+        case 26:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[5, 11]]);
+  }));
+  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 variants = props.variants || Object.keys(props.components || code || {});
+  var allCodeVariantsLoaded = code && hasAllVariants(variants, code, true);
+  if (!allCodeVariantsLoaded) {
+    if (props.forceClient) {
+      return /*#__PURE__*/_jsx(ErrorHandler, {
+        error: new Error('Client only mode requires precomputed source code')
+      });
+    }
+    return /*#__PURE__*/_jsx(CodeSourceLoader, _objectSpread({}, props));
+  }
+  var clientProps = createClientProps(_objectSpread({}, props));
+  return /*#__PURE__*/_jsx(CodeHighlighterClient, _objectSpread({}, clientProps));
+
+  // TODO: we might not need the client if hydrateAt is 'init' or 'stream' and there is no props.controlled
+}
+
+/**
+ * Ensures that the suspense boundary is always rendered, even if none of the children have async operations.
+ */
+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) {
+        case 0:
+          return _context2.abrupt("return", props.children);
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _CodeHighlighterSuspense.apply(this, arguments);
+}
+function renderWithInitialSource(props) {
+  var fileNames = [props.initialFilename].concat(_toConsumableArray(Object.keys(props.initialExtraFiles || {})));
+  var source = stringOrHastToJsx(props.initialSource, props.highlightAt === 'init');
+  var ContentLoading = props.ContentLoading;
+  var fallback = /*#__PURE__*/_jsx(ContentLoading, {
+    fileNames: fileNames,
+    source: source
+  });
+  if (props.forceClient) {
+    return renderCodeHighlighter(_objectSpread(_objectSpread({}, props), {}, {
+      fallback: fallback
+    }));
+  }
+  return /*#__PURE__*/_jsx(React.Suspense, {
+    fallback: fallback,
+    children: /*#__PURE__*/_jsx(CodeHighlighterSuspense, {
+      children: renderCodeHighlighter(_objectSpread(_objectSpread({}, props), {}, {
+        fallback: fallback,
+        skipFallback: true
+      }))
+    })
+  });
+}
+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) {
+        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) {
+            return {
+              error: error
+            };
+          });
+        case 3:
+          loaded = _context3.sent;
+          if (!('error' in loaded)) {
+            _context3.next = 6;
+            break;
+          }
+          return _context3.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), {}, {
+            code: code,
+            initialFilename: initialFilename,
+            initialSource: initialSource,
+            initialExtraFiles: initialExtraFiles,
+            ContentLoading: props.ContentLoading
+          })));
+        case 8:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _CodeInitialSourceLoader.apply(this, arguments);
+}
+export function CodeHighlighter(props) {
+  var _props$components;
+  var ErrorHandler = props.ErrorHandler || HighlightErrorHandler;
+  if (props.precompute === true) {
+    return /*#__PURE__*/_jsx(ErrorHandler, {
+      error: new Error('Precompute enabled, but not provided')
+    });
+  }
+  var code = props.precompute || props.code;
+  var variants = props.variants || Object.keys(props.components || props.precompute || props.code || {});
+  if (variants.length === 0) {
+    return /*#__PURE__*/_jsx(ErrorHandler, {
+      error: new Error('No code or components provided')
+    });
+  }
+  var ContentLoading = props.ContentLoading;
+  if (!ContentLoading) {
+    if (props.highlightAt === 'stream') {
+      // if the user explicitly sets highlightAt to 'stream', we need a ContentLoading component
+      return /*#__PURE__*/_jsx(ErrorHandler, {
+        error: new Error('ContentLoading component is required for stream highlighting')
+      });
+    }
+    return renderCodeHighlighter(_objectSpread({}, props));
+  }
+  var initialKey = props.initialVariant || props.variant || props.defaultVariant || 'Default';
+  var initial = 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, "\""))
+    });
+  }
+
+  // TODO: use initial.filesOrder to determing which source to use
+  var highlightAt = props.highlightAt || DEFAULT_HIGHLIGHT_AT;
+  var _maybeInitialData = maybeInitialData(variants, initialKey, code, undefined,
+    // TODO: use initial.filesOrder if provided?
+    highlightAt === 'init', props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants),
+    initialData = _maybeInitialData.initialData,
+    reason = _maybeInitialData.reason;
+  if (!initialData) {
+    if (DEBUG) {
+      // eslint-disable-next-line no-console
+      console.log('Initial data not found:', reason);
+    }
+    if (props.forceClient) {
+      if (highlightAt === 'init') {
+        return /*#__PURE__*/_jsx(ErrorHandler, {
+          error: new Error('Client only mode with highlightAt: init requires precomputed and parsed source code')
+        });
+      }
+
+      // TODO: send directly to client component?
+      return /*#__PURE__*/_jsx(ErrorHandler, {
+        error: new Error('Client only mode requires precomputed source code')
+      });
+    }
+    return /*#__PURE__*/_jsx(CodeInitialSourceLoader, _objectSpread(_objectSpread({}, props), {}, {
+      ContentLoading: ContentLoading,
+      initialVariant: initialKey
+    }));
+  }
+  return renderWithInitialSource(_objectSpread(_objectSpread({}, props), {}, {
+    code: initialData.code,
+    ContentLoading: ContentLoading,
+    initialVariant: initialKey,
+    initialFilename: initialData.initialFilename,
+    initialSource: initialData.initialSource,
+    initialExtraFiles: initialData.initialExtraFiles
+  }));
+}

package/CodeHighlighter/CodeHighlighterClient.d.ts

@@ -0,0 +1,2 @@
+import { CodeHighlighterClientProps } from "./types.js";
+export declare function CodeHighlighterClient(props: CodeHighlighterClientProps): import("react/jsx-runtime").JSX.Element;

package/CodeHighlighter/CodeHighlighterClient.d.ts.map

@@ -0,0 +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"}