@mui/internal-docs-infra 0.3.1-canary.2 → 0.3.1-canary.4

package/esm/pipeline/transformHtmlCodePrecomputed/transformHtmlCodePrecomputed.js

@@ -1,85 +1,87 @@
-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 { loadCodeVariant } from "../loadCodeVariant/loadCodeVariant.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
+ * Reserved data properties that are handled internally and should not be passed to userProps.
+ * These are either processed by the transform pipeline or have special meaning.
  */
-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'
-};
+const RESERVED_DATA_PROPS = new Set(['dataFilename',
+// Used for fileName
+'dataVariant',
+// Used for variant name
+'dataTransform',
+// Used for skipTransforms
+'dataPrecompute',
+// The precomputed output itself
+'dataContentProps',
+// The serialized user props output
+'dataName',
+// Used for demo name
+'dataSlug' // Used for demo slug/URL
+]);
 
 /**
- * Extracts the language from className attribute
+ * Extracts user-defined data properties from a code element.
+ * Filters out reserved properties and returns remaining data-* attributes.
+ * Converts from camelCase (dataTitle) to kebab-case keys (title).
  */
-function extractLanguageFromClassName(className) {
-  if (!className) {
-    return null;
+function extractUserProps(codeElement) {
+  const props = codeElement.properties;
+  if (!props) {
+    return undefined;
   }
-
-  // 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;
+  const userProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    // Only process data-* attributes (in camelCase form: dataXxx)
+    if (key.startsWith('data') && key.length > 4 && !RESERVED_DATA_PROPS.has(key)) {
+      // Convert dataTitle -> title, dataHighlight -> highlight
+      const propName = key.charAt(4).toLowerCase() + key.slice(5);
+      // Convert value to string
+      userProps[propName] = String(value);
+    }
+  }
+  return Object.keys(userProps).length > 0 ? userProps : undefined;
 }
 
 /**
- * Gets the filename from data-filename attribute or derives it from language
- * Returns undefined if no explicit filename and no recognizable language
+ * Gets the filename from data-filename attribute only
+ * Returns undefined if no explicit filename is provided
  */
 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;
+  const dataFilename = codeElement.properties?.dataFilename;
   if (dataFilename && typeof dataFilename === 'string') {
     return dataFilename;
   }
+  return undefined;
+}
 
-  // 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]);
+/**
+ * Extracts language from a className like "language-typescript" or "language-js"
+ * Returns the language portion after "language-" prefix
+ */
+function extractLanguageFromClassName(className) {
+  if (!className) {
+    return undefined;
+  }
+  const classes = Array.isArray(className) ? className : [className];
+  for (const cls of classes) {
+    if (typeof cls === 'string' && cls.startsWith('language-')) {
+      return cls.slice('language-'.length);
+    }
   }
-
-  // Return undefined instead of a fallback - let the system handle gracefully
   return undefined;
 }
 
+/**
+ * Gets the language from class="language-*" attribute
+ */
+function getLanguage(codeElement) {
+  const className = codeElement.properties?.className;
+  return extractLanguageFromClassName(className);
+}
+
 /**
  * Extracts text content from HAST nodes
  */
@@ -88,9 +90,7 @@ function extractTextContent(node) {
     return node.value;
   }
   if (node.type === 'element' && node.children) {
-    return node.children.map(function (child) {
-      return extractTextContent(child);
-    }).join('');
+    return node.children.map(child => extractTextContent(child)).join('');
   }
   return '';
 }
@@ -100,51 +100,37 @@ function extractTextContent(node) {
  * Handles both section/figure/dl and standalone dl structures
  */
 function extractCodeFromSemanticStructure(element) {
-  var results = [];
+  const 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', '');
-        }
+    const figures = element.children.filter(child => child.type === 'element' && child.tagName === 'figure');
+    for (const figure of figures) {
+      // Extract variant name from figcaption
+      let variantName;
+      const figcaption = figure.children.find(child => 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
-            });
-          }
+      // Find dl element in figure
+      const dl = figure.children.find(child => child.type === 'element' && child.tagName === 'dl');
+      if (dl) {
+        const extracted = extractFromDl(dl);
+        if (extracted) {
+          results.push({
+            codeElement: extracted.codeElement,
+            filename: extracted.filename,
+            language: extracted.language,
+            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);
+    const extracted = extractFromDl(element);
+    if (extracted) {
+      results.push(extracted);
     }
   }
   return results;
@@ -155,51 +141,38 @@ function extractCodeFromSemanticStructure(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;
-            }
+  let filename;
+  let codeElement;
+  for (const child of dl.children) {
+    if (child.type === 'element') {
+      if (child.tagName === 'dt') {
+        // Extract filename from dt > code
+        const codeInDt = child.children.find(dtChild => 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
+        const pre = child.children.find(ddChild => ddChild.type === 'element' && ddChild.tagName === 'pre');
+        if (pre) {
+          const code = pre.children.find(preChild => 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;
+    const variantName = codeElement.properties?.dataVariant;
+    // Extract language from className
+    const language = getLanguage(codeElement);
     return {
-      codeElement: codeElement,
-      filename: filename,
-      variantName: variantName
+      codeElement,
+      filename,
+      language,
+      variantName
     };
   }
   return null;
@@ -216,200 +189,173 @@ function extractFromDl(dl) {
  * 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 = [];
+export const transformHtmlCodePrecomputed = () => {
+  return async tree => {
+    const transformPromises = [];
 
-              // 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
-                  }];
-                }
+    // Get the source parser and transformers
+    const sourceParser = createParseSource();
+    const sourceTransformers = [TypescriptToJavascriptTransformer];
+    visit(tree, 'element', node => {
+      let extractedElements = [];
+
+      // Handle basic pre > code structure from standard markdown
+      if (node.tagName === 'pre' && node.children && node.children.length > 0 && !node.properties?.dataPrecompute // Don't process if already processed
+      ) {
+        // Look for direct code element in pre
+        const codeElement = node.children.find(child => child.type === 'element' && child.tagName === 'code');
+        if (codeElement) {
+          // Extract filename from data-filename attribute (explicit only)
+          const filename = getFileName(codeElement);
+          // Extract language from className
+          const language = getLanguage(codeElement);
+          extractedElements = [{
+            codeElement,
+            filename,
+            language,
+            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) {
+        const transformPromise = (async () => {
+          try {
+            // Create variants from extracted elements
+            const variants = {};
+            if (extractedElements.length === 1) {
+              // Single element - use "Default" as variant name
+              const {
+                codeElement,
+                filename,
+                language
+              } = extractedElements[0];
+              const sourceCode = extractTextContent(codeElement);
+              const variant = {
+                source: sourceCode,
+                skipTransforms: !codeElement.properties?.dataTransform
+              };
+
+              // Add filename if explicitly provided
+              if (filename) {
+                variant.fileName = filename;
               }
-              // 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);
+
+              // Add language if available (from className)
+              if (language) {
+                variant.language = language;
               }
-              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);
+              variants.Default = variant;
+            } else {
+              // Multiple elements - use variant names
+              extractedElements.forEach(({
+                codeElement,
+                filename,
+                language,
+                variantName
+              }, index) => {
+                const 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)
-                            };
+                // Determine variant name
+                const finalVariantName = variantName || `Variant ${index + 1}`;
+                const variant = {
+                  source: sourceCode,
+                  skipTransforms: !codeElement.properties?.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;
-                          });
-                        }
+                // Add filename if explicitly provided
+                if (filename) {
+                  variant.fileName = filename;
+                }
 
-                        // Process each variant with loadCodeVariant
-                        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 loadCodeVariant(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;
-                            }
-                          }
+                // Add language if available (from className)
+                if (language) {
+                  variant.language = language;
+                }
+                variants[finalVariantName] = variant;
+              });
+            }
 
-                          // Clear all code element contents
-                        } catch (err) {
-                          _iterator3.e(err);
-                        } finally {
-                          _iterator3.f();
-                        }
-                        extractedElements.forEach(function (_ref7) {
-                          var codeElement = _ref7.codeElement;
-                          codeElement.children = [];
-                        });
+            // Process each variant with loadCodeVariant
+            const processedCode = {};
+            const variantPromises = Object.entries(variants).map(async ([variantName, variantData]) => {
+              if (variantData && typeof variantData === 'object') {
+                const result = await loadCodeVariant(undefined,
+                // url - not needed for inline code
+                variantName, variantData, {
+                  sourceParser,
+                  loadSource: undefined,
+                  // loadSource - not needed since we have the data
+                  loadVariantMeta: undefined,
+                  // loadVariantMeta - not needed since we have the data
+                  sourceTransformers,
+                  disableTransforms: variantData.skipTransforms || false,
+                  // TODO: output option
+                  output: 'hastGzip'
+                });
+                return {
+                  variantName,
+                  processedVariant: result.code
+                };
+              }
+              return null;
+            });
+            const variantResults = await Promise.all(variantPromises);
+            for (const result of variantResults) {
+              if (result) {
+                processedCode[result.variantName] = result.processedVariant;
+              }
+            }
 
-                        // 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'
-                        }];
+            // Extract user props from the first code element (they should be the same for all variants)
+            const userProps = extractUserProps(extractedElements[0].codeElement);
 
-                        // 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);
-              }
+            // Clear all code element contents
+            extractedElements.forEach(({
+              codeElement
+            }) => {
+              codeElement.children = [];
             });
 
-            // 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);
-    };
-  }();
+            // 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);
+
+            // Pass through name and slug if provided on the code element
+            const firstCodeElement = extractedElements[0].codeElement;
+            if (firstCodeElement.properties?.dataName) {
+              node.properties.dataName = firstCodeElement.properties.dataName;
+            }
+            if (firstCodeElement.properties?.dataSlug) {
+              node.properties.dataSlug = firstCodeElement.properties.dataSlug;
+            }
+
+            // Set user props if any exist
+            if (userProps) {
+              node.properties.dataContentProps = JSON.stringify(userProps);
+            }
+          } catch (error) {
+            console.warn('Failed to transform code block:', error);
+          }
+        })();
+        transformPromises.push(transformPromise);
+      }
+    });
+
+    // Wait for all transformations to complete
+    await Promise.all(transformPromises);
+  };
 };