@mui/internal-docs-infra 0.2.3-canary.14 → 0.2.3-canary.15

package/README.md

@@ -4,6 +4,7 @@ This package hosts the tools that help create the documentation.
 
 ## Documentation
 
-This is stored in the `docs` directory.
+This is stored in the `docs` top-level directory.
 
-[Read More](../../docs/app/docs-infra/page.mdx)
+[Read in Markdown](../../docs/app/docs-infra/page.mdx)
+[Read in Browser](https://infra.mui.com/docs-infra)

package/esm/pipeline/getFileConventions/fileConventions.d.ts

@@ -0,0 +1,4 @@
+export declare const fileConventions: {
+  rule: string;
+  loader: string;
+}[];

package/esm/pipeline/getFileConventions/fileConventions.js

@@ -0,0 +1,4 @@
+export var fileConventions = [{
+  rule: './app/**/demos/*/index.ts',
+  loader: 'loadPrecomputedCodeHighlighter'
+}];

package/esm/pipeline/getFileConventions/getFileConventions.d.ts

@@ -0,0 +1,4 @@
+export declare function getFileConventions(): Promise<{
+  rule: string;
+  loader: string;
+}[]>;

package/esm/pipeline/getFileConventions/getFileConventions.js

@@ -0,0 +1,17 @@
+import _regenerator from "@babel/runtime/helpers/esm/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { fileConventions } from "./fileConventions.js";
+export function getFileConventions() {
+  return _getFileConventions.apply(this, arguments);
+}
+function _getFileConventions() {
+  _getFileConventions = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          return _context.a(2, fileConventions);
+      }
+    }, _callee);
+  }));
+  return _getFileConventions.apply(this, arguments);
+}

package/esm/pipeline/getFileConventions/index.d.ts

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

package/esm/pipeline/getFileConventions/index.js

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

package/esm/pipeline/loadCodeVariant/calculateMainFilePath.js

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { createSyntheticDirectories, buildPath } from './pathUtils.js';
+import { createSyntheticDirectories, buildPath } from "./pathUtils.js";
 export function calculateMainFilePath(url, maxBackNav, maxSourceBackNav, metadataPrefix, fileName) {
   // Handle optional parameters with defaults
   var actualMaxSourceBackNav = maxSourceBackNav != null ? maxSourceBackNav : maxBackNav;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/index.d.ts

@@ -0,0 +1,2 @@
+import { transformMarkdownBlockquoteCallouts } from "./transformMarkdownBlockquoteCallouts.js";
+export default transformMarkdownBlockquoteCallouts;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/index.js

@@ -0,0 +1,4 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownBlockquoteCallouts } from "./transformMarkdownBlockquoteCallouts.js";
+export default transformMarkdownBlockquoteCallouts;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.d.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from 'unified';
+/**
+ * Remark plugin that extracts GitHub-style callouts from blockquotes and injects them into data attributes.
+ *
+ * Transforms blockquotes like:
+ * > [!NOTE]
+ * > This is a note.
+ *
+ * Into blockquotes with a custom data attribute that will be preserved when converted to HTML:
+ * <blockquote data-callout-type="note">
+ *   <p>This is a note.</p>
+ * </blockquote>
+ *
+ * Supported callout types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
+ */
+export declare const transformMarkdownBlockquoteCallouts: Plugin;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.js

@@ -0,0 +1,58 @@
+import { visit } from 'unist-util-visit';
+/**
+ * Remark plugin that extracts GitHub-style callouts from blockquotes and injects them into data attributes.
+ *
+ * Transforms blockquotes like:
+ * > [!NOTE]
+ * > This is a note.
+ *
+ * Into blockquotes with a custom data attribute that will be preserved when converted to HTML:
+ * <blockquote data-callout-type="note">
+ *   <p>This is a note.</p>
+ * </blockquote>
+ *
+ * Supported callout types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
+ */
+export var transformMarkdownBlockquoteCallouts = function transformMarkdownBlockquoteCallouts() {
+  return function (tree) {
+    visit(tree, 'blockquote', function (node) {
+      // Find the first paragraph in the blockquote
+      var firstChild = node.children[0];
+      if (!firstChild || firstChild.type !== 'paragraph') {
+        return;
+      }
+
+      // Find the first text node in the paragraph
+      var firstTextNode = firstChild.children[0];
+      if (!firstTextNode || firstTextNode.type !== 'text') {
+        return;
+      }
+      var textNode = firstTextNode;
+      var calloutPattern = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/;
+      var match = textNode.value.match(calloutPattern);
+      if (match) {
+        var calloutType = match[1].toLowerCase();
+
+        // Remove the callout marker from the text
+        var newText = textNode.value.replace(calloutPattern, '');
+        if (newText.trim() === '') {
+          // Remove the text node if it becomes empty
+          firstChild.children.shift();
+        } else {
+          // Update the text content
+          textNode.value = newText;
+        }
+
+        // Add the data attribute to the blockquote
+        // This creates a custom property that will be preserved when converting to HTML
+        if (!node.data) {
+          node.data = {};
+        }
+        if (!node.data.hProperties) {
+          node.data.hProperties = {};
+        }
+        node.data.hProperties['data-callout-type'] = calloutType;
+      }
+    });
+  };
+};

package/esm/pipeline/transformMarkdownDemoLinks/index.d.ts

@@ -0,0 +1,2 @@
+import { transformMarkdownDemoLinks } from "./transformMarkdownDemoLinks.js";
+export default transformMarkdownDemoLinks;

package/esm/pipeline/transformMarkdownDemoLinks/index.js

@@ -0,0 +1,4 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownDemoLinks } from "./transformMarkdownDemoLinks.js";
+export default transformMarkdownDemoLinks;

package/esm/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.d.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from 'unified';
+/**
+ * Remark plugin that cleans up demo patterns in markdown.
+ *
+ * Looks for patterns where a Demo component is followed by a "[See Demo]" link
+ * and optionally a horizontal rule (---). When found, removes the link and
+ * any following horizontal rule.
+ *
+ * This is useful for markdown that will be converted to HTML where the link
+ * and separator are distracting on the page.
+ *
+ * Pattern it matches:
+ * ```
+ * <DemoSomething />
+ *
+ * [See Demo](./demos/base/)
+ *
+ * ---  (optional)
+ * ```
+ *
+ * Gets transformed to:
+ * ```
+ * <DemoSomething />
+ * ```
+ */
+export declare const transformMarkdownDemoLinks: Plugin;

package/esm/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.js

@@ -0,0 +1,107 @@
+// MDX JSX types
+
+/**
+ * Remark plugin that cleans up demo patterns in markdown.
+ *
+ * Looks for patterns where a Demo component is followed by a "[See Demo]" link
+ * and optionally a horizontal rule (---). When found, removes the link and
+ * any following horizontal rule.
+ *
+ * This is useful for markdown that will be converted to HTML where the link
+ * and separator are distracting on the page.
+ *
+ * Pattern it matches:
+ * ```
+ * <DemoSomething />
+ *
+ * [See Demo](./demos/base/)
+ *
+ * ---  (optional)
+ * ```
+ *
+ * Gets transformed to:
+ * ```
+ * <DemoSomething />
+ * ```
+ */
+export var transformMarkdownDemoLinks = function transformMarkdownDemoLinks() {
+  return function (tree) {
+    var parent = tree;
+    var children = parent.children;
+    for (var i = 0; i < children.length - 1; i += 1) {
+      var current = children[i];
+      var next = children[i + 1];
+      var separator = children[i + 2]; // May not exist
+
+      var hasDemo = false;
+
+      // Check if current node is an HTML element containing a Demo component without .Title
+      if ((current == null ? void 0 : current.type) === 'html') {
+        var htmlNode = current;
+        hasDemo = htmlNode.value.includes('<Demo') && !htmlNode.value.includes('.Title');
+      } else if ((current == null ? void 0 : current.type) === 'mdxJsxFlowElement') {
+        // Check if current node is an MDX JSX element (for imported Demo components)
+        var mdxNode = current;
+        if (mdxNode.name && mdxNode.name.includes('Demo') && !mdxNode.name.includes('.Title')) {
+          hasDemo = true;
+        }
+      } else if ((current == null ? void 0 : current.type) === 'paragraph') {
+        // Check if paragraph contains only a single HTML node with a Demo component
+        var paragraphNode = current;
+        if (paragraphNode.children.length === 1 && paragraphNode.children[0].type === 'html') {
+          var _htmlNode = paragraphNode.children[0];
+          hasDemo = _htmlNode.value.includes('<Demo') && !_htmlNode.value.includes('.Title');
+        } else if (paragraphNode.children.length >= 2 && paragraphNode.children[0].type === 'html' && paragraphNode.children[paragraphNode.children.length - 1].type === 'html') {
+          // Check if this looks like a Demo component with opening and closing tags
+          var openingTag = paragraphNode.children[0];
+          var closingTag = paragraphNode.children[paragraphNode.children.length - 1];
+          if (openingTag.value.includes('<Demo') && !openingTag.value.includes('.Title') && closingTag.value.includes('</Demo')) {
+            hasDemo = true;
+          }
+        } else {
+          // Check if paragraph contains any HTML nodes with Demo components (mixed content)
+          hasDemo = paragraphNode.children.some(function (child) {
+            return child.type === 'html' && child.value.includes('<Demo') && !child.value.includes('.Title');
+          });
+        }
+      }
+      if (!hasDemo) {
+        continue;
+      }
+      var removedSomething = false;
+
+      // Check if next node is a paragraph containing a "See Demo" link
+      if ((next == null ? void 0 : next.type) === 'paragraph') {
+        var hasSeeDemo = next.children.some(function (child) {
+          return child.type === 'link' && child.children.some(function (linkChild) {
+            return linkChild.type === 'text' && linkChild.value === 'See Demo';
+          });
+        });
+
+        // Check if there's also a thematic break (---) after the paragraph
+        var hasThematicBreak = (separator == null ? void 0 : separator.type) === 'thematicBreak';
+        if (hasSeeDemo) {
+          // Remove the "See Demo" paragraph and any following thematic break
+          if (hasThematicBreak) {
+            // Remove both the "See Demo" paragraph and the thematic break
+            children.splice(i + 1, 2);
+            removedSomething = true;
+          } else {
+            // Remove only the "See Demo" paragraph
+            children.splice(i + 1, 1);
+            removedSomething = true;
+          }
+        } else if (hasThematicBreak) {
+          // No "See Demo" link, but there's a thematic break after the paragraph - remove just the HR
+          children.splice(i + 2, 1);
+          removedSomething = true;
+        }
+      }
+
+      // If we removed something, adjust the loop index to prevent skipping
+      if (removedSomething) {
+        i -= 1;
+      }
+    }
+  };
+};

package/esm/pipeline/transformMarkdownRelativePaths/index.d.ts

@@ -0,0 +1,2 @@
+import { transformMarkdownRelativePaths } from "./transformMarkdownRelativePaths.js";
+export default transformMarkdownRelativePaths;

package/esm/pipeline/transformMarkdownRelativePaths/index.js

@@ -0,0 +1,4 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownRelativePaths } from "./transformMarkdownRelativePaths.js";
+export default transformMarkdownRelativePaths;

package/esm/pipeline/transformMarkdownRelativePaths/transformMarkdownRelativePaths.d.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from 'unified';
+/**
+ * Remark plugin that strips page file extensions from URLs.
+ * Removes /page.tsx, /page.jsx, /page.js, /page.mdx, /page.md from both absolute and relative URLs.
+ * For relative URLs (both ./ and ../), converts them to absolute paths based on the current file's location.
+ *
+ * Examples:
+ * - /components/page.tsx -> /components
+ * - ./code-highlighter/page.mdx -> /components/code-highlighter (when processed from /components/page.mdx)
+ * - ../code-highlighter/page.tsx -> /code-highlighter (when processed from /components/button/page.mdx)
+ * This allows URLs to resolve when reading in VSCode and Github
+ */
+export declare const transformMarkdownRelativePaths: Plugin;

package/esm/pipeline/transformMarkdownRelativePaths/transformMarkdownRelativePaths.js

@@ -0,0 +1,35 @@
+// webpack does not like node: imports
+// eslint-disable-next-line n/prefer-node-protocol
+import path from 'path';
+import { visit } from 'unist-util-visit';
+/**
+ * Remark plugin that strips page file extensions from URLs.
+ * Removes /page.tsx, /page.jsx, /page.js, /page.mdx, /page.md from both absolute and relative URLs.
+ * For relative URLs (both ./ and ../), converts them to absolute paths based on the current file's location.
+ *
+ * Examples:
+ * - /components/page.tsx -> /components
+ * - ./code-highlighter/page.mdx -> /components/code-highlighter (when processed from /components/page.mdx)
+ * - ../code-highlighter/page.tsx -> /code-highlighter (when processed from /components/button/page.mdx)
+ * 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) {
+      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) {
+          var currentDir = path.dirname(file.path);
+          var appIndex = currentDir.indexOf('/app/');
+          var baseDir = appIndex !== -1 ? currentDir.substring(appIndex + 4) : '/';
+
+          // Resolve the relative path from the current directory
+          var resolvedPath = path.resolve('/', baseDir, node.url);
+          node.url = resolvedPath;
+        }
+        node.url = node.url.replace(/\/$/, '');
+      }
+    });
+  };
+};

package/esm/useCode/Pre.js

@@ -128,6 +128,11 @@ export function Pre(_ref) {
   var frames = React.useMemo(function () {
     return hast == null ? void 0 : hast.children.map(function (child, index) {
       if (child.type !== 'element') {
+        if (child.type === 'text') {
+          return /*#__PURE__*/_jsx(React.Fragment, {
+            children: child.value
+          }, index);
+        }
         return null;
       }
       if (child.properties.className === 'frame') {
@@ -150,6 +155,8 @@ export function Pre(_ref) {
   return /*#__PURE__*/_jsx("pre", {
     ref: bindIntersectionObserver,
     className: className,
-    children: typeof children === 'string' ? children : frames
+    children: /*#__PURE__*/_jsx("code", {
+      children: typeof children === 'string' ? children : frames
+    })
   });
 }

package/esm/useCopier/index.js

@@ -32,7 +32,12 @@ export function useCopier(contents, opts) {
             _context.n = 2;
             return copyToClipboard(content);
           case 2:
+            setRecentlySuccessful(true);
             onCopied == null || onCopied();
+            copyTimeoutRef.current = setTimeout(function () {
+              clearTimeout(copyTimeoutRef.current);
+              setRecentlySuccessful(false);
+            }, timeout);
             _context.n = 4;
             break;
           case 3:
@@ -41,10 +46,6 @@ export function useCopier(contents, opts) {
             onError == null || onError(_t);
           case 4:
             onClick == null || onClick(event);
-            copyTimeoutRef.current = setTimeout(function () {
-              clearTimeout(copyTimeoutRef.current);
-              setRecentlySuccessful(false);
-            }, timeout);
           case 5:
             return _context.a(2);
         }

package/esm/useErrors/useErrors.d.ts

@@ -1,5 +1,5 @@
 type Errors = {
   errors?: Error[];
 };
-export declare function useErrors(): Errors;
+export declare function useErrors(props?: Errors): Errors;
 export {};

package/esm/useErrors/useErrors.js

@@ -1,7 +1,11 @@
 import { useErrorsContext } from "./ErrorsContext.js";
-export function useErrors() {
+export function useErrors(props) {
   var context = useErrorsContext();
+
+  // Context errors take precedence over prop errors
+  // This ensures client-side errors override server-side errors
+  var errors = (context == null ? void 0 : context.errors) || (props == null ? void 0 : props.errors);
   return {
-    errors: context == null ? void 0 : context.errors
+    errors: errors
   };
 }

package/esm/withDocsInfra/withDocsInfra.js

@@ -9,7 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 export function getDocsInfraMdxOptions() {
   var _customOptions$remark, _customOptions$additi, _customOptions$rehype, _customOptions$additi2;
   var customOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var defaultRemarkPlugins = [['remark-gfm'], ['@mui/internal-docs-infra/pipeline/transformMarkdownCode']];
+  var defaultRemarkPlugins = [['remark-gfm'], ['@mui/internal-docs-infra/pipeline/transformMarkdownRelativePaths'], ['@mui/internal-docs-infra/pipeline/transformMarkdownBlockquoteCallouts'], ['@mui/internal-docs-infra/pipeline/transformMarkdownCode'], ['@mui/internal-docs-infra/pipeline/transformMarkdownDemoLinks']];
   var defaultRehypePlugins = [['@mui/internal-docs-infra/pipeline/transformHtmlCodePrecomputed']];
 
   // Build final plugin arrays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.2.3-canary.14",
+  "version": "0.2.3-canary.15",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "keywords": [
@@ -167,6 +167,30 @@
         "default": "./esm/withDocsInfra/index.js"
       }
     },
+    "./pipeline/getFileConventions": {
+      "default": {
+        "types": "./esm/pipeline/getFileConventions/index.d.ts",
+        "default": "./esm/pipeline/getFileConventions/index.js"
+      }
+    },
+    "./pipeline/transformMarkdownBlockquoteCallouts": {
+      "default": {
+        "types": "./esm/pipeline/transformMarkdownBlockquoteCallouts/index.d.ts",
+        "default": "./esm/pipeline/transformMarkdownBlockquoteCallouts/index.js"
+      }
+    },
+    "./pipeline/transformMarkdownDemoLinks": {
+      "default": {
+        "types": "./esm/pipeline/transformMarkdownDemoLinks/index.d.ts",
+        "default": "./esm/pipeline/transformMarkdownDemoLinks/index.js"
+      }
+    },
+    "./pipeline/transformMarkdownRelativePaths": {
+      "default": {
+        "types": "./esm/pipeline/transformMarkdownRelativePaths/index.d.ts",
+        "default": "./esm/pipeline/transformMarkdownRelativePaths/index.js"
+      }
+    },
     "./pipeline/hastUtils": {
       "default": {
         "types": "./esm/pipeline/hastUtils/index.d.ts",
@@ -235,5 +259,5 @@
     },
     "./esm": null
   },
-  "gitSha": "8e64ec558ea98ce0a577b4b11cd8ffd78de4f0a3"
+  "gitSha": "34cb67a083eb058dd61fc7961dffbd32ef28e11a"
 }