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

package/esm/pipeline/transformMarkdownRelativePaths/transformMarkdownRelativePaths.js

@@ -16,21 +16,21 @@ import { fileUrlToPortablePath } from "../loaderUtils/fileUrlToPortablePath.js";
  * - /(public)/components/page.tsx -> /components
  * This allows URLs to resolve when reading in VSCode and Github
  */
-export var transformMarkdownRelativePaths = function transformMarkdownRelativePaths() {
-  return function (tree, file) {
-    visit(tree, 'link', function (node) {
+export const transformMarkdownRelativePaths = () => {
+  return (tree, file) => {
+    visit(tree, 'link', node => {
       if (node.url) {
         node.url = node.url.replace(/\/page\.(tsx|jsx|js|mdx|md)$/g, '');
         node.url = node.url.replace(/\/page\.(tsx|jsx|js|mdx|md)(\?[^#]*)?(#.*)?$/g, '$2$3');
         if ((node.url.startsWith('./') || node.url.startsWith('../')) && file.path) {
           // Convert filesystem path to portable path for cross-platform compatibility
-          var portablePath = fileUrlToPortablePath(pathToFileURL(file.path).href);
-          var currentDir = path.dirname(portablePath);
-          var appIndex = currentDir.indexOf('/app/');
-          var baseDir = appIndex !== -1 ? currentDir.substring(appIndex + 4) : '/';
+          const portablePath = fileUrlToPortablePath(pathToFileURL(file.path).href);
+          const currentDir = path.dirname(portablePath);
+          const appIndex = currentDir.indexOf('/app/');
+          const baseDir = appIndex !== -1 ? currentDir.substring(appIndex + 4) : '/';
 
           // Resolve the relative path from the current directory
-          var resolvedPath = path.resolve('/', baseDir, node.url);
+          const resolvedPath = path.resolve('/', baseDir, node.url);
           node.url = resolvedPath;
         }
 

package/esm/pipeline/transformTypescriptToJavascript/removeTypes.js

@@ -1,13 +1,10 @@
-import _regenerator from "@babel/runtime/helpers/esm/regenerator";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 // Based on https://github.com/ember-cli/babel-remove-types/blob/fc3be010e99c4f4926fd70d00242d6777ab1b8d7/src/index.ts
 // Converted to use Babel standalone, with added TSX support
 
 import * as Babel from '@babel/standalone';
-import prettier from 'prettier/standalone';
-import prettierPluginEstree from 'prettier/plugins/estree';
-import parserBabel from 'prettier/parser-babel';
+import { format } from 'prettier/standalone';
+import pluginBabel from 'prettier/plugins/babel';
+import pluginEstree from 'prettier/plugins/estree';
 /**
  * Strips TypeScript types and decorators from code (including React in TSX),
  * preserving blank lines and optionally formatting with Prettier.
@@ -19,113 +16,87 @@ import parserBabel from 'prettier/parser-babel';
  *                         or a Prettier options object to customize.
  * @returns The transformed (and optionally formatted) code.
  */
-export function removeTypes(_x) {
-  return _removeTypes.apply(this, arguments);
-}
-function _removeTypes() {
-  _removeTypes = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(code) {
-    var filename,
-      prettierConfig,
-      removeComments,
-      isTSX,
-      transformed,
-      fixed,
-      standardPrettierOptions,
-      mergedPrettierOptions,
-      _args = arguments;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          filename = _args.length > 1 && _args[1] !== undefined ? _args[1] : 'file.ts';
-          prettierConfig = _args.length > 2 && _args[2] !== undefined ? _args[2] : true;
-          // Babel collapses newlines all over the place, which messes with the formatting of almost any
-          // code you pass to it. To preserve the formatting, we go through and mark all the empty lines
-          // in the code string *before* transforming it. This allows us to go back through after the
-          // transformation re-insert the empty lines in the correct place relative to the new code that
-          // has been generated.
-          code = code.replace(/\n\n+/g, '/* ___NEWLINE___ */\n');
+export async function removeTypes(code, filename = 'file.ts', prettierConfig = true) {
+  // Babel collapses newlines all over the place, which messes with the formatting of almost any
+  // code you pass to it. To preserve the formatting, we go through and mark all the empty lines
+  // in the code string *before* transforming it. This allows us to go back through after the
+  // transformation re-insert the empty lines in the correct place relative to the new code that
+  // has been generated.
+  code = code.replace(/\n\n+/g, '/* ___NEWLINE___ */\n');
 
-          // When removing TS-specific constructs (e.g. interfaces), we want to make sure we also remove
-          // any comments that are associated with those constructs, since otherwise we'll be left with
-          // comments that refer to something that isn't actually there.
-          // Credit to https://github.com/cyco130/detype for figuring out this very useful pattern
-          removeComments = {
-            enter: function enter(nodePath) {
-              if (!nodePath.node.leadingComments) {
-                return;
-              }
-              for (var i = nodePath.node.leadingComments.length - 1; i >= 0; i -= 1) {
-                var comment = nodePath.node.leadingComments[i];
-                if (code.slice(comment.end).match(/^\s*\n\s*\n/) || comment.value.includes('___NEWLINE___')) {
-                  // There is at least one empty line between the comment and the TypeScript specific construct
-                  // We should keep this comment and those before it
-                  break;
-                }
-                comment.value = '___REMOVE_ME___';
-              }
-            }
-          };
-          isTSX = /\.tsx$/i.test(filename);
-          transformed = Babel.transform(code, {
-            filename: filename,
-            plugins: [{
-              name: 'comment-remover',
-              visitor: {
-                TSTypeAliasDeclaration: removeComments,
-                TSInterfaceDeclaration: removeComments,
-                TSDeclareFunction: removeComments,
-                TSDeclareMethod: removeComments,
-                TSImportType: removeComments,
-                TSModuleDeclaration: removeComments
-              }
-            }, ['transform-typescript', {
-              onlyRemoveTypeImports: true,
-              isTSX: isTSX,
-              allExtensions: true
-            }], ['proposal-decorators', {
-              legacy: true
-            }]],
-            generatorOpts: {
-              retainLines: true,
-              shouldPrintComment: function shouldPrintComment(c) {
-                return c !== '___REMOVE_ME___';
-              }
-            }
-          });
-          if (!(!transformed || !transformed.code)) {
-            _context.n = 1;
-            break;
-          }
-          throw new Error('There was an issue with the Babel transform.');
-        case 1:
-          fixed = transformed.code.replace(/\/\* ___NEWLINE___ \*\//g, '\n'); // If the user has *explicitly* passed `false` here, it means they do not want us to run Prettier
-          // at all, so we bail here.
-          if (!(prettierConfig === false)) {
-            _context.n = 2;
-            break;
-          }
-          return _context.a(2, fixed);
-        case 2:
-          standardPrettierOptions = {
-            parser: 'babel',
-            singleQuote: true,
-            plugins: [prettierPluginEstree, parserBabel]
-          }; // If `prettierConfig` is *explicitly* true (as opposed to truthy), it means the user has opted in
-          // to default behavior either explicitly or implicitly. Either way, we run basic Prettier on it.
-          if (!(prettierConfig === true)) {
-            _context.n = 3;
-            break;
-          }
-          return _context.a(2, prettier.format(fixed, standardPrettierOptions));
-        case 3:
-          // If we've made it here, the user has passed their own Prettier options so we merge it with ours
-          // and let theirs overwrite any of the default settings.
-          mergedPrettierOptions = _extends(_extends(_extends({}, standardPrettierOptions), prettierConfig), {}, {
-            plugins: standardPrettierOptions.plugins
-          });
-          return _context.a(2, prettier.format(fixed, mergedPrettierOptions));
+  // When removing TS-specific constructs (e.g. interfaces), we want to make sure we also remove
+  // any comments that are associated with those constructs, since otherwise we'll be left with
+  // comments that refer to something that isn't actually there.
+  // Credit to https://github.com/cyco130/detype for figuring out this very useful pattern
+  const removeComments = {
+    enter(nodePath) {
+      if (!nodePath.node.leadingComments) {
+        return;
+      }
+      for (let i = nodePath.node.leadingComments.length - 1; i >= 0; i -= 1) {
+        const comment = nodePath.node.leadingComments[i];
+        if (code.slice(comment.end).match(/^\s*\n\s*\n/) || comment.value.includes('___NEWLINE___')) {
+          // There is at least one empty line between the comment and the TypeScript specific construct
+          // We should keep this comment and those before it
+          break;
+        }
+        comment.value = '___REMOVE_ME___';
       }
-    }, _callee);
-  }));
-  return _removeTypes.apply(this, arguments);
+    }
+  };
+  const isTSX = /\.tsx$/i.test(filename);
+  const transformed = Babel.transform(code, {
+    filename,
+    plugins: [{
+      name: 'comment-remover',
+      visitor: {
+        TSTypeAliasDeclaration: removeComments,
+        TSInterfaceDeclaration: removeComments,
+        TSDeclareFunction: removeComments,
+        TSDeclareMethod: removeComments,
+        TSImportType: removeComments,
+        TSModuleDeclaration: removeComments
+      }
+    }, ['transform-typescript', {
+      onlyRemoveTypeImports: true,
+      isTSX,
+      allExtensions: true
+    }], ['proposal-decorators', {
+      legacy: true
+    }]],
+    generatorOpts: {
+      retainLines: true,
+      shouldPrintComment: c => c !== '___REMOVE_ME___'
+    }
+  });
+  if (!transformed || !transformed.code) {
+    throw new Error('There was an issue with the Babel transform.');
+  }
+  const fixed = transformed.code.replace(/\/\* ___NEWLINE___ \*\//g, '\n');
+
+  // If the user has *explicitly* passed `false` here, it means they do not want us to run Prettier
+  // at all, so we bail here.
+  if (prettierConfig === false) {
+    return fixed;
+  }
+  const standardPrettierOptions = {
+    parser: 'babel',
+    singleQuote: true,
+    plugins: [pluginBabel, pluginEstree]
+  };
+
+  // If `prettierConfig` is *explicitly* true (as opposed to truthy), it means the user has opted in
+  // to default behavior either explicitly or implicitly. Either way, we run basic Prettier on it.
+  if (prettierConfig === true) {
+    return format(fixed, standardPrettierOptions);
+  }
+
+  // If we've made it here, the user has passed their own Prettier options so we merge it with ours
+  // and let theirs overwrite any of the default settings.
+  const mergedPrettierOptions = {
+    ...standardPrettierOptions,
+    ...prettierConfig,
+    plugins: standardPrettierOptions.plugins
+  };
+  return format(fixed, mergedPrettierOptions);
 }

package/esm/pipeline/transformTypescriptToJavascript/transformTypescriptToJavascript.js

@@ -1,31 +1,15 @@
-import _regenerator from "@babel/runtime/helpers/esm/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import { removeTypes } from "./removeTypes.js";
-export var transformTypescriptToJavascript = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(source, fileName) {
-    var transformed, transformedFileName;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          _context.n = 1;
-          return removeTypes(source, fileName);
-        case 1:
-          transformed = _context.v;
-          transformedFileName = fileName.replace(/\.ts$/, '.js').replace(/\.tsx$/, '.jsx');
-          return _context.a(2, {
-            js: {
-              source: transformed,
-              fileName: transformedFileName
-            }
-          });
-      }
-    }, _callee);
-  }));
-  return function transformTypescriptToJavascript(_x, _x2) {
-    return _ref.apply(this, arguments);
+export const transformTypescriptToJavascript = async (source, fileName) => {
+  const transformed = await removeTypes(source, fileName);
+  const transformedFileName = fileName.replace(/\.ts$/, '.js').replace(/\.tsx$/, '.jsx');
+  return {
+    js: {
+      source: transformed,
+      fileName: transformedFileName
+    }
   };
-}();
-export var TypescriptToJavascriptTransformer = {
+};
+export const TypescriptToJavascriptTransformer = {
   extensions: ['ts', 'tsx'],
   transformer: transformTypescriptToJavascript
 };

package/esm/useCode/Pre.d.ts

@@ -3,12 +3,14 @@ import type { VariantSource } from "../CodeHighlighter/types.js";
 export declare function Pre({
   children,
   className,
+  language,
   ref,
   shouldHighlight,
   hydrateMargin
 }: {
   children: VariantSource;
   className?: string;
+  language?: string;
   ref?: React.Ref<HTMLPreElement>;
   shouldHighlight?: boolean;
   hydrateMargin?: string;

package/esm/useCode/Pre.js

@@ -1,19 +1,16 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { toText } from 'hast-util-to-text';
 import { decompressSync, strFromU8 } from 'fflate';
 import { decode } from 'uint8-to-base64';
 import { hastToJsx } from "../pipeline/hastUtils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-var hastChildrenCache = new WeakMap();
-var textChildrenCache = new WeakMap();
+const hastChildrenCache = new WeakMap();
+const textChildrenCache = new WeakMap();
 function renderCode(hastChildren, renderHast, text) {
   if (renderHast) {
-    var jsx = hastChildrenCache.get(hastChildren);
+    let jsx = hastChildrenCache.get(hastChildren);
     if (!jsx) {
       jsx = hastToJsx({
         type: 'root',
@@ -26,7 +23,7 @@ function renderCode(hastChildren, renderHast, text) {
   if (text !== undefined) {
     return text;
   }
-  var txt = textChildrenCache.get(hastChildren);
+  let txt = textChildrenCache.get(hastChildren);
   if (!txt) {
     txt = toText({
       type: 'root',
@@ -38,14 +35,15 @@ function renderCode(hastChildren, renderHast, text) {
   }
   return txt;
 }
-export function Pre(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    ref = _ref.ref,
-    shouldHighlight = _ref.shouldHighlight,
-    _ref$hydrateMargin = _ref.hydrateMargin,
-    hydrateMargin = _ref$hydrateMargin === void 0 ? '200px 0px 200px 0px' : _ref$hydrateMargin;
-  var hast = React.useMemo(function () {
+export function Pre({
+  children,
+  className,
+  language,
+  ref,
+  shouldHighlight,
+  hydrateMargin = '200px 0px 200px 0px'
+}) {
+  const hast = React.useMemo(() => {
     if (typeof children === 'string') {
       return null;
     }
@@ -57,12 +55,11 @@ export function Pre(_ref) {
     }
     return children;
   }, [children]);
-  var _React$useState = React.useState(_defineProperty({}, 0, true)),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    visibleFrames = _React$useState2[0],
-    setVisibleFrames = _React$useState2[1];
-  var observer = React.useRef(null);
-  var bindIntersectionObserver = React.useCallback(function (root) {
+  const [visibleFrames, setVisibleFrames] = React.useState({
+    [0]: true
+  });
+  const observer = React.useRef(null);
+  const bindIntersectionObserver = React.useCallback(root => {
     if (!root) {
       if (observer.current) {
         observer.current.disconnect();
@@ -70,52 +67,53 @@ export function Pre(_ref) {
       observer.current = null;
       return;
     }
-    observer.current = new IntersectionObserver(function (entries) {
-      return setVisibleFrames(function (prev) {
-        var visible = [];
-        var invisible = [];
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            visible.push(Number(entry.target.getAttribute('data-frame')));
-          } else {
-            invisible.push(Number(entry.target.getAttribute('data-frame')));
-          }
-        });
+    observer.current = new IntersectionObserver(entries => setVisibleFrames(prev => {
+      const visible = [];
+      const invisible = [];
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          visible.push(Number(entry.target.getAttribute('data-frame')));
+        } else {
+          invisible.push(Number(entry.target.getAttribute('data-frame')));
+        }
+      });
 
-        // avoid mutating the object if nothing changed
-        var frames;
-        visible.forEach(function (frame) {
-          if (prev[frame] !== true) {
-            if (!frames) {
-              frames = _extends({}, prev);
-            }
-            frames[frame] = true;
+      // avoid mutating the object if nothing changed
+      let frames;
+      visible.forEach(frame => {
+        if (prev[frame] !== true) {
+          if (!frames) {
+            frames = {
+              ...prev
+            };
           }
-        });
-        invisible.forEach(function (frame) {
-          if (prev[frame]) {
-            if (!frames) {
-              frames = _extends({}, prev);
-            }
-            delete frames[frame];
+          frames[frame] = true;
+        }
+      });
+      invisible.forEach(frame => {
+        if (prev[frame]) {
+          if (!frames) {
+            frames = {
+              ...prev
+            };
           }
-        });
-        return frames || prev;
+          delete frames[frame];
+        }
       });
-    }, {
+      return frames || prev;
+    }), {
       rootMargin: hydrateMargin
     });
 
     // <pre><code><span class="frame" data-frame="0">...</span><span class="frame" data-frame="1">...</span>...</code></pre>
-    root.childNodes[0].childNodes.forEach(function (node) {
+    root.childNodes[0].childNodes.forEach(node => {
       if (node.nodeType === Node.ELEMENT_NODE) {
-        var _observer$current;
-        var element = node;
+        const element = node;
         if (!element.hasAttribute('data-frame')) {
           console.warn('Expected frame element in useCode <Pre>', element);
           return;
         }
-        (_observer$current = observer.current) == null || _observer$current.observe(element);
+        observer.current?.observe(element);
       }
     });
     if (ref) {
@@ -126,13 +124,13 @@ export function Pre(_ref) {
       }
     }
   }, [ref, hydrateMargin]);
-  var observeFrame = React.useCallback(function (node) {
+  const observeFrame = React.useCallback(node => {
     if (observer.current && node) {
       observer.current.observe(node);
     }
   }, []);
-  var frames = React.useMemo(function () {
-    return hast == null ? void 0 : hast.children.map(function (child, index) {
+  const frames = React.useMemo(() => {
+    return hast?.children.map((child, index) => {
       if (child.type !== 'element') {
         if (child.type === 'text') {
           return /*#__PURE__*/_jsx(React.Fragment, {
@@ -142,13 +140,12 @@ export function Pre(_ref) {
         return null;
       }
       if (child.properties.className === 'frame') {
-        var _child$properties, _child$properties2;
-        var isVisible = Boolean(visibleFrames[index]);
+        const isVisible = Boolean(visibleFrames[index]);
         return /*#__PURE__*/_jsx("span", {
           className: "frame",
           "data-frame": index,
           ref: observeFrame,
-          children: renderCode(child.children, shouldHighlight && isVisible, (_child$properties = child.properties) != null && _child$properties.dataAsString ? String((_child$properties2 = child.properties) == null ? void 0 : _child$properties2.dataAsString) : undefined)
+          children: renderCode(child.children, shouldHighlight && isVisible, child.properties?.dataAsString ? String(child.properties?.dataAsString) : undefined)
         }, index);
       }
       return /*#__PURE__*/_jsx(React.Fragment, {
@@ -162,6 +159,7 @@ export function Pre(_ref) {
     ref: bindIntersectionObserver,
     className: className,
     children: /*#__PURE__*/_jsx("code", {
+      className: language ? `language-${language}` : undefined,
       children: typeof children === 'string' ? children : frames
     })
   });