@mui/internal-docs-infra 0.2.0-alpha.1 → 0.2.0

package/esm/pipeline/transformHtmlCodePrecomputed/transformHtmlCodePrecomputed.js

@@ -0,0 +1,415 @@
+import _regenerator from "@babel/runtime/helpers/esm/regenerator";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { visit } from 'unist-util-visit';
+import { loadVariant } from "../../CodeHighlighter/loadVariant.js";
+import { createParseSource } from "../parseSource/index.js";
+import { TypescriptToJavascriptTransformer } from "../transformTypescriptToJavascript/index.js";
+/**
+ * Maps common language class names to file extensions
+ * Only includes languages that have corresponding grammars in parseSource/grammars.ts
+ */
+var LANGUAGE_TO_EXTENSION = {
+  // JavaScript
+  javascript: 'js',
+  js: 'js',
+  // TypeScript
+  typescript: 'ts',
+  ts: 'ts',
+  // TSX/JSX
+  tsx: 'tsx',
+  jsx: 'jsx',
+  // Maps to .jsx but uses tsx grammar
+
+  // JSON
+  json: 'json',
+  // Markdown
+  markdown: 'md',
+  md: 'md',
+  // MDX
+  mdx: 'mdx',
+  // HTML
+  html: 'html',
+  // CSS
+  css: 'css',
+  // Shell
+  shell: 'sh',
+  bash: 'sh',
+  sh: 'sh',
+  // YAML
+  yaml: 'yaml',
+  yml: 'yaml'
+};
+
+/**
+ * Extracts the language from className attribute
+ */
+function extractLanguageFromClassName(className) {
+  if (!className) {
+    return null;
+  }
+
+  // Handle array of class names (HAST format)
+  var classString = Array.isArray(className) ? className.join(' ') : className;
+  var match = classString.match(/(?:^|\s)language-(\w+)(?:\s|$)/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Gets the filename from data-filename attribute or derives it from language
+ * Returns undefined if no explicit filename and no recognizable language
+ */
+function getFileName(codeElement) {
+  var _codeElement$properti, _codeElement$properti2;
+  // Check for explicit data-filename attribute
+  var dataFilename = (_codeElement$properti = codeElement.properties) == null ? void 0 : _codeElement$properti.dataFilename;
+  if (dataFilename && typeof dataFilename === 'string') {
+    return dataFilename;
+  }
+
+  // Extract language from className
+  var className = (_codeElement$properti2 = codeElement.properties) == null ? void 0 : _codeElement$properti2.className;
+  var language = extractLanguageFromClassName(className);
+  if (language && LANGUAGE_TO_EXTENSION[language]) {
+    return "index.".concat(LANGUAGE_TO_EXTENSION[language]);
+  }
+
+  // Return undefined instead of a fallback - let the system handle gracefully
+  return undefined;
+}
+
+/**
+ * Extracts text content from HAST nodes
+ */
+function extractTextContent(node) {
+  if (node.type === 'text') {
+    return node.value;
+  }
+  if (node.type === 'element' && node.children) {
+    return node.children.map(function (child) {
+      return extractTextContent(child);
+    }).join('');
+  }
+  return '';
+}
+
+/**
+ * Extracts code elements and filenames from semantic HTML structure
+ * Handles both section/figure/dl and standalone dl structures
+ */
+function extractCodeFromSemanticStructure(element) {
+  var results = [];
+  if (element.tagName === 'section') {
+    // Handle section with multiple figures
+    var figures = element.children.filter(function (child) {
+      return child.type === 'element' && child.tagName === 'figure';
+    });
+    var _iterator = _createForOfIteratorHelper(figures),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var figure = _step.value;
+        // Extract variant name from figcaption
+        var variantName = void 0;
+        var figcaption = figure.children.find(function (child) {
+          return child.type === 'element' && child.tagName === 'figcaption';
+        });
+        if (figcaption && figcaption.children[0] && figcaption.children[0].type === 'text') {
+          variantName = figcaption.children[0].value.replace(' variant', '');
+        }
+
+        // Find dl element in figure
+        var dl = figure.children.find(function (child) {
+          return child.type === 'element' && child.tagName === 'dl';
+        });
+        if (dl) {
+          var extracted = extractFromDl(dl);
+          if (extracted) {
+            results.push({
+              codeElement: extracted.codeElement,
+              filename: extracted.filename,
+              variantName: variantName || extracted.variantName
+            });
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  } else if (element.tagName === 'dl') {
+    // Handle standalone dl
+    var _extracted = extractFromDl(element);
+    if (_extracted) {
+      results.push(_extracted);
+    }
+  }
+  return results;
+}
+
+/**
+ * Extracts code element and filename from a dl element
+ */
+function extractFromDl(dl) {
+  // Find dt for filename and dd for code
+  var filename;
+  var codeElement;
+  var _iterator2 = _createForOfIteratorHelper(dl.children),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+      if (child.type === 'element') {
+        if (child.tagName === 'dt') {
+          // Extract filename from dt > code
+          var codeInDt = child.children.find(function (dtChild) {
+            return dtChild.type === 'element' && dtChild.tagName === 'code';
+          });
+          if (codeInDt && codeInDt.children[0] && codeInDt.children[0].type === 'text') {
+            filename = codeInDt.children[0].value;
+          }
+        } else if (child.tagName === 'dd') {
+          // Extract code from dd > pre > code
+          var pre = child.children.find(function (ddChild) {
+            return ddChild.type === 'element' && ddChild.tagName === 'pre';
+          });
+          if (pre) {
+            var code = pre.children.find(function (preChild) {
+              return preChild.type === 'element' && preChild.tagName === 'code';
+            });
+            if (code) {
+              codeElement = code;
+            }
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  if (codeElement) {
+    var _codeElement$properti3;
+    // Extract variant name from data-variant if available
+    var variantName = (_codeElement$properti3 = codeElement.properties) == null ? void 0 : _codeElement$properti3.dataVariant;
+    return {
+      codeElement: codeElement,
+      filename: filename,
+      variantName: variantName
+    };
+  }
+  return null;
+}
+
+/**
+ * Rehype plugin that transforms semantic HTML code structures to use loadVariant
+ *
+ * This plugin:
+ * 1. Finds section and dl elements in the HTML AST
+ * 2. Extracts code elements from the semantic structure (figure/dl/dd/pre/code)
+ * 3. Creates variants from multiple code elements or single Default variant
+ * 4. Uses loadVariant to process each variant
+ * 5. Stores the combined precompute data on the root element
+ * 6. Clears all code element contents and replaces with error message
+ */
+export var transformHtmlCodePrecomputed = function transformHtmlCodePrecomputed() {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(tree) {
+      var transformPromises, sourceParser, sourceTransformers;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            transformPromises = []; // Get the source parser and transformers
+            sourceParser = createParseSource();
+            sourceTransformers = [TypescriptToJavascriptTransformer];
+            visit(tree, 'element', function (node) {
+              var _node$properties;
+              var extractedElements = [];
+
+              // Handle basic pre > code structure from standard markdown
+              if (node.tagName === 'pre' && node.children && node.children.length > 0 && !((_node$properties = node.properties) != null && _node$properties.dataPrecompute) // Don't process if already processed
+              ) {
+                // Look for direct code element in pre
+                var codeElement = node.children.find(function (child) {
+                  return child.type === 'element' && child.tagName === 'code';
+                });
+                if (codeElement) {
+                  // Extract filename from data-filename or derive from language class
+                  var filename = getFileName(codeElement);
+                  extractedElements = [{
+                    codeElement: codeElement,
+                    filename: filename,
+                    variantName: undefined // Basic pre > code doesn't have variants
+                  }];
+                }
+              }
+              // Look for section elements (multi-variant) or dl elements (single variant)
+              else if ((node.tagName === 'section' || node.tagName === 'dl') && node.children && node.children.length > 0) {
+                // Extract code elements from semantic structure
+                extractedElements = extractCodeFromSemanticStructure(node);
+              }
+              if (extractedElements.length > 0) {
+                var transformPromise = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+                  var variants, _codeElement$properti4, _extractedElements$, _codeElement, _filename, sourceCode, variant, derivedFilename, processedCode, variantPromises, variantResults, _iterator3, _step3, result, _t;
+                  return _regenerator().w(function (_context2) {
+                    while (1) switch (_context2.p = _context2.n) {
+                      case 0:
+                        _context2.p = 0;
+                        // Create variants from extracted elements
+                        variants = {};
+                        if (extractedElements.length === 1) {
+                          // Single element - use "Default" as variant name
+                          _extractedElements$ = extractedElements[0], _codeElement = _extractedElements$.codeElement, _filename = _extractedElements$.filename;
+                          sourceCode = extractTextContent(_codeElement);
+                          variant = {
+                            source: sourceCode,
+                            skipTransforms: !((_codeElement$properti4 = _codeElement.properties) != null && _codeElement$properti4.dataTransform)
+                          }; // Add filename if available (prefer explicit filename over derived)
+                          if (_filename) {
+                            variant.fileName = _filename;
+                          } else {
+                            derivedFilename = getFileName(_codeElement);
+                            if (derivedFilename) {
+                              variant.fileName = derivedFilename;
+                            }
+                          }
+                          variants.Default = variant;
+                        } else {
+                          // Multiple elements - use variant names
+                          extractedElements.forEach(function (_ref3, index) {
+                            var _codeElement$properti5;
+                            var codeElement = _ref3.codeElement,
+                              filename = _ref3.filename,
+                              variantName = _ref3.variantName;
+                            var sourceCode = extractTextContent(codeElement);
+
+                            // Determine variant name
+                            var finalVariantName = variantName || "Variant ".concat(index + 1);
+                            var variant = {
+                              source: sourceCode,
+                              skipTransforms: !((_codeElement$properti5 = codeElement.properties) != null && _codeElement$properti5.dataTransform)
+                            };
+
+                            // Add filename if available (prefer explicit filename over derived)
+                            if (filename) {
+                              variant.fileName = filename;
+                            } else {
+                              var _derivedFilename = getFileName(codeElement);
+                              if (_derivedFilename) {
+                                variant.fileName = _derivedFilename;
+                              }
+                            }
+                            variants[finalVariantName] = variant;
+                          });
+                        }
+
+                        // Process each variant with loadVariant
+                        processedCode = {};
+                        variantPromises = Object.entries(variants).map(/*#__PURE__*/function () {
+                          var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref4) {
+                            var _ref6, variantName, variantData, result;
+                            return _regenerator().w(function (_context) {
+                              while (1) switch (_context.n) {
+                                case 0:
+                                  _ref6 = _slicedToArray(_ref4, 2), variantName = _ref6[0], variantData = _ref6[1];
+                                  if (!(variantData && _typeof(variantData) === 'object')) {
+                                    _context.n = 2;
+                                    break;
+                                  }
+                                  _context.n = 1;
+                                  return loadVariant(undefined,
+                                  // url - not needed for inline code
+                                  variantName, variantData, {
+                                    sourceParser: sourceParser,
+                                    loadSource: undefined,
+                                    // loadSource - not needed since we have the data
+                                    loadVariantMeta: undefined,
+                                    // loadVariantMeta - not needed since we have the data
+                                    sourceTransformers: sourceTransformers,
+                                    disableTransforms: variantData.skipTransforms || false,
+                                    // TODO: output option
+                                    output: 'hastGzip'
+                                  });
+                                case 1:
+                                  result = _context.v;
+                                  return _context.a(2, {
+                                    variantName: variantName,
+                                    processedVariant: result.code
+                                  });
+                                case 2:
+                                  return _context.a(2, null);
+                              }
+                            }, _callee);
+                          }));
+                          return function (_x2) {
+                            return _ref5.apply(this, arguments);
+                          };
+                        }());
+                        _context2.n = 1;
+                        return Promise.all(variantPromises);
+                      case 1:
+                        variantResults = _context2.v;
+                        _iterator3 = _createForOfIteratorHelper(variantResults);
+                        try {
+                          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                            result = _step3.value;
+                            if (result) {
+                              processedCode[result.variantName] = result.processedVariant;
+                            }
+                          }
+
+                          // Clear all code element contents
+                        } catch (err) {
+                          _iterator3.e(err);
+                        } finally {
+                          _iterator3.f();
+                        }
+                        extractedElements.forEach(function (_ref7) {
+                          var codeElement = _ref7.codeElement;
+                          codeElement.children = [];
+                        });
+
+                        // Replace the semantic structure with a <pre> element
+                        node.tagName = 'pre';
+                        node.children = [{
+                          type: 'text',
+                          value: 'Error: expected pre tag with precomputed data to be handled by the CodeHighlighter component'
+                        }];
+
+                        // Set the precompute data on the pre element directly on properties for immediate HTML serialization
+                        if (!node.properties) {
+                          node.properties = {};
+                        }
+                        node.properties.dataPrecompute = JSON.stringify(processedCode);
+                        _context2.n = 3;
+                        break;
+                      case 2:
+                        _context2.p = 2;
+                        _t = _context2.v;
+                        console.warn('Failed to transform code block:', _t);
+                      case 3:
+                        return _context2.a(2);
+                    }
+                  }, _callee2, null, [[0, 2]]);
+                }))();
+                transformPromises.push(transformPromise);
+              }
+            });
+
+            // Wait for all transformations to complete
+            _context3.n = 1;
+            return Promise.all(transformPromises);
+          case 1:
+            return _context3.a(2);
+        }
+      }, _callee3);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};