@mui/internal-code-infra 0.0.4-canary.5 → 0.0.4-canary.51

package/src/eslint/baseConfig.mjs

@@ -1,11 +1,13 @@
 import { includeIgnoreFile, fixupConfigRules } from '@eslint/compat';
 import eslintJs from '@eslint/js';
-import { defineConfig } from 'eslint/config';
+// TODO: change back to 'eslint/config' once https://github.com/eslint/rewrite/issues/425 is fixed
+import { defineConfig } from '@eslint/config-helpers';
 import prettier from 'eslint-config-prettier/flat';
 import compatPlugin from 'eslint-plugin-compat';
 import importPlugin from 'eslint-plugin-import';
 import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
 import reactPlugin from 'eslint-plugin-react';
+import * as mdx from 'eslint-plugin-mdx';
 import { configs as reactCompilerPluginConfigs } from 'eslint-plugin-react-compiler';
 import reactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
@@ -33,6 +35,7 @@ function includeIgnoreIfExists(filePath, description) {
  * @param {boolean} [params.enableReactCompiler] - Whether to enable React Compiler.
  * @param {boolean} [params.consistentTypeImports] - Whether to enforce consistent type imports.
  * @param {boolean} [params.materialUi] - Whether to enable Material UI specific rules (mui/material-ui-*).
+ * @param {boolean} [params.markdown] - Whether to enable markdown/MDX linting via `eslint-plugin-mdx`. Opt-in so dependents can adopt on their own schedule.
  * @param {string} [params.baseDirectory] - The base directory for the configuration.
  * @returns {import('eslint').Linter.Config[]}
  */
@@ -40,13 +43,53 @@ export function createBaseConfig({
   enableReactCompiler = false,
   consistentTypeImports = false,
   materialUi = false,
+  markdown = false,
   baseDirectory = process.cwd(),
 } = {}) {
   return defineConfig([
+    {
+      name: 'settings',
+      languageOptions: {
+        ecmaVersion: 7,
+        globals: {
+          ...globals.es2020,
+          ...globals.browser,
+          ...globals.node,
+        },
+      },
+      plugins: {
+        mui: muiPlugin,
+      },
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        browserslistOpts: {
+          config: path.join(baseDirectory, '.browserslistrc'),
+          env: 'stable',
+          ignoreUnknownVersions: true,
+        },
+      },
+    },
     includeIgnoreIfExists(path.join(baseDirectory, '.gitignore'), `Ignore rules from .gitignore`),
     includeIgnoreIfExists(path.join(baseDirectory, '.lintignore'), `Ignore rules from .lintignore`),
     createJsonConfig(),
     prettier,
+    // Markdown + MDX linting via eslint-plugin-mdx. Severities for markdown
+    // quality checks live in the project's `.remarkrc` (see
+    // `@mui/internal-code-infra/remark`), not here.
+    markdown
+      ? [
+          {
+            ...mdx.flat,
+            rules: {
+              ...mdx.flat.rules,
+              'mdx/remark': 'error',
+            },
+          },
+          mdx.flatCodeBlocks,
+        ]
+      : [],
     {
       name: 'Base config',
       files: [`**/*${EXTENSION_TS}`],
@@ -62,25 +105,7 @@ export function createBaseConfig({
         enableReactCompiler ? reactCompilerPluginConfigs.recommended : {},
         compatPlugin.configs['flat/recommended'],
         {
-          name: 'typescript-eslint-parser',
-          languageOptions: {
-            ecmaVersion: 7,
-            globals: {
-              ...globals.es2020,
-              ...globals.browser,
-              ...globals.node,
-            },
-          },
-          plugins: {
-            mui: muiPlugin,
-          },
-          settings: {
-            browserslistOpts: {
-              config: path.join(baseDirectory, '.browserslistrc'),
-              env: 'stable',
-              ignoreUnknownVersions: true,
-            },
-          },
+          name: 'core',
           extends: createCoreConfig({ enableReactCompiler, consistentTypeImports, materialUi }),
         },
         // Lint rule to disallow usage of typescript namespaces.We've seen at least two problems with them:

package/src/eslint/docsConfig.mjs

@@ -1,5 +1,6 @@
 import nextjs from '@next/eslint-plugin-next';
-import { defineConfig } from 'eslint/config';
+// TODO: change back to 'eslint/config' once https://github.com/eslint/rewrite/issues/425 is fixed
+import { defineConfig } from '@eslint/config-helpers';
 
 /**
  * @returns {import('eslint').Linter.Config[]}

package/src/eslint/jsonConfig.mjs

@@ -1,4 +1,5 @@
-import { defineConfig } from 'eslint/config';
+// TODO: change back to 'eslint/config' once https://github.com/eslint/rewrite/issues/425 is fixed
+import { defineConfig } from '@eslint/config-helpers';
 import json from '@eslint/json';
 
 /**

package/src/eslint/mui/config.mjs

@@ -1,4 +1,6 @@
-import { defineConfig } from 'eslint/config';
+// TODO: change back to 'eslint/config' once https://github.com/eslint/rewrite/issues/425 is fixed
+import { defineConfig } from '@eslint/config-helpers';
+import { EXTENSION_DTS } from '../extensions.mjs';
 
 const restrictedMethods = ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'];
 
@@ -414,10 +416,12 @@ export function createCoreConfig(options = {}) {
               'mui/material-ui-no-styled-box': 'error',
             }
           : {}),
+        'mui/no-guarded-throw': 'error',
         'mui/straight-quotes': 'off',
         'mui/consistent-production-guard': 'error',
         'mui/add-undef-to-optional': 'off',
         'mui/flatten-parentheses': 'warn',
+        'mui/no-presentation-role': 'off',
 
         'react-hooks/exhaustive-deps': [
           'error',
@@ -499,6 +503,15 @@ export function createCoreConfig(options = {}) {
             message: 'Do not call `Error(...)` without `new`. Use `new Error(...)` instead.',
             selector: "CallExpression[callee.name='Error']",
           },
+          {
+            // xmlns="http://www.w3.org/2000/svg" is only needed on standalone .svg files so the
+            // browser treats them as SVG instead of generic XML. Inside HTML the <svg> element is
+            // already recognised by the browser, so the attribute is dead weight.
+            // https://github.com/mui/mui-public/pull/1321
+            message:
+              'Remove xmlns from inline <svg>. The attribute is redundant in HTML and adds unnecessary bytes.',
+            selector: 'JSXOpeningElement[name.name="svg"] > JSXAttribute[name.name="xmlns"]',
+          },
           ...restrictedSyntaxRules,
         ],
 
@@ -525,5 +538,12 @@ export function createCoreConfig(options = {}) {
         '@typescript-eslint/return-await': 'off',
       },
     },
+    {
+      name: 'mui-base/dts',
+      files: [`**/*${EXTENSION_DTS}`],
+      rules: {
+        '@typescript-eslint/consistent-type-imports': 'off',
+      },
+    },
   ]);
 }

package/src/eslint/mui/index.mjs

@@ -4,6 +4,7 @@ import disallowReactApiInServerComponents from './rules/disallow-react-api-in-se
 import docgenIgnoreBeforeComment from './rules/docgen-ignore-before-comment.mjs';
 import muiNameMatchesComponentName from './rules/mui-name-matches-component-name.mjs';
 import noEmptyBox from './rules/no-empty-box.mjs';
+import noGuardedThrow from './rules/no-guarded-throw.mjs';
 import noRestrictedResolvedImports from './rules/no-restricted-resolved-imports.mjs';
 import noStyledBox from './rules/no-styled-box.mjs';
 import requireDevWrapper from './rules/require-dev-wrapper.mjs';
@@ -11,6 +12,7 @@ import rulesOfUseThemeVariants from './rules/rules-of-use-theme-variants.mjs';
 import straightQuotes from './rules/straight-quotes.mjs';
 import addUndefToOptional from './rules/add-undef-to-optional.mjs';
 import flattenParentheses from './rules/flatten-parentheses.mjs';
+import noPresentationRole from './rules/no-presentation-role.mjs';
 
 /** @type {import('eslint').ESLint.Plugin} */
 const muiPlugin = {
@@ -22,6 +24,7 @@ const muiPlugin = {
     'consistent-production-guard': consistentProductionGuard,
     'disallow-active-element-as-key-event-target': disallowActiveElementAsKeyEventTarget,
     'docgen-ignore-before-comment': docgenIgnoreBeforeComment,
+    'no-guarded-throw': noGuardedThrow,
     'material-ui-name-matches-component-name': muiNameMatchesComponentName,
     'material-ui-rules-of-use-theme-variants': rulesOfUseThemeVariants,
     'material-ui-no-empty-box': noEmptyBox,
@@ -33,6 +36,7 @@ const muiPlugin = {
     // Some discrepancies between TypeScript and ESLint types - casting to any
     'add-undef-to-optional': /** @type {any} */ (addUndefToOptional),
     'flatten-parentheses': /** @type {any} */ (flattenParentheses),
+    'no-presentation-role': noPresentationRole,
   },
 };
 

package/src/eslint/mui/rules/no-guarded-throw.mjs

@@ -0,0 +1,115 @@
+import { isProcessEnvNodeEnv } from './nodeEnvUtils.mjs';
+
+/**
+ * Recursively checks if process.env.NODE_ENV appears anywhere in the node tree
+ * @param {import('estree').Node | null | undefined} node
+ * @returns {boolean}
+ */
+function containsProcessEnvNodeEnv(node) {
+  if (!node || typeof node !== 'object') {
+    return false;
+  }
+
+  if (isProcessEnvNodeEnv(node)) {
+    return true;
+  }
+
+  // Traverse all child nodes, skipping parent references to avoid circular traversal
+  for (const key of Object.keys(node)) {
+    if (key === 'parent') {
+      continue;
+    }
+    const child = /** @type {unknown} */ (/** @type {any} */ (node)[key]);
+    if (Array.isArray(child)) {
+      if (child.some(containsProcessEnvNodeEnv)) {
+        return true;
+      }
+    } else if (
+      child &&
+      typeof child === 'object' &&
+      /** @type {import('estree').Node} */ (child).type
+    ) {
+      if (containsProcessEnvNodeEnv(/** @type {import('estree').Node} */ (child))) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * ESLint rule that disallows throw statements guarded by process.env.NODE_ENV checks.
+ *
+ * NODE_ENV guards cause throw statements to only execute in certain environments,
+ * leading to inconsistent control flow between development and production. Whether
+ * the guard excludes production (tree-shaking the throw away) or targets production
+ * specifically, the result is environment-dependent behavior that should be avoided.
+ *
+ * The rule stops at function boundaries, so throws inside functions defined within
+ * a NODE_ENV guard are not flagged, as the function may be called from other contexts.
+ *
+ * @example
+ * // Invalid - throw only in development, removed in production
+ * if (process.env.NODE_ENV !== 'production') {
+ *   throw new Error('Missing required prop');
+ * }
+ *
+ * @example
+ * // Invalid - throw only in production
+ * if (process.env.NODE_ENV === 'production') {
+ *   throw new Error('Production-only error');
+ * }
+ *
+ * @example
+ * // Valid - unconditional throw
+ * throw new Error('Something went wrong');
+ *
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow throw statements guarded by process.env.NODE_ENV checks, as they cause environment-dependent control flow',
+    },
+    messages: {
+      guardedThrow:
+        'Do not guard `throw` statements with `process.env.NODE_ENV` checks. Guarded throws execute only in certain environments, causing inconsistent control flow between development and production.',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ThrowStatement(node) {
+        /** @type {import('eslint').Rule.Node | null} */
+        let current = node.parent;
+        /** @type {import('eslint').Rule.Node} */
+        let currentChild = node;
+
+        while (current) {
+          if (
+            current.type === 'FunctionDeclaration' ||
+            current.type === 'FunctionExpression' ||
+            current.type === 'ArrowFunctionExpression'
+          ) {
+            break;
+          }
+          if (current.type === 'IfStatement') {
+            const isInConsequent = current.consequent === currentChild;
+            const isInAlternate = current.alternate === currentChild;
+
+            if ((isInConsequent || isInAlternate) && containsProcessEnvNodeEnv(current.test)) {
+              context.report({ node, messageId: 'guardedThrow' });
+              return;
+            }
+          }
+          currentChild = current;
+          current = current.parent;
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/src/eslint/mui/rules/no-guarded-throw.test.mjs

@@ -0,0 +1,206 @@
+import eslint from 'eslint';
+import parser from '@typescript-eslint/parser';
+import rule from './no-guarded-throw.mjs';
+
+const ruleTester = new eslint.RuleTester({
+  languageOptions: {
+    parser,
+  },
+});
+
+ruleTester.run('no-guarded-throw', rule, {
+  valid: [
+    // Should pass: Unconditional throw
+    {
+      code: `
+throw new Error('Something went wrong');
+      `,
+    },
+    // Should pass: Throw inside a non-NODE_ENV conditional
+    {
+      code: `
+if (value == null) {
+  throw new TypeError('value is required');
+}
+      `,
+    },
+    // Should pass: Throw inside a catch block (no NODE_ENV guard)
+    {
+      code: `
+try {
+  doSomething();
+} catch (error) {
+  throw new Error('Failed');
+}
+      `,
+    },
+    // Should pass: Throw inside arrow function inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  const fn = () => {
+    throw new Error('inside arrow function');
+  };
+}
+      `,
+    },
+    // Should pass: Throw inside function expression inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  const fn = function () {
+    throw new Error('inside function expression');
+  };
+}
+      `,
+    },
+    // Should pass: Throw inside function declaration inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  function validate() {
+    throw new Error('inside function declaration');
+  }
+}
+      `,
+    },
+  ],
+  invalid: [
+    // Should fail: Throw inside !== 'production' guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  throw new Error('Dev-only error');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw inside === 'production' guard
+    {
+      code: `
+if (process.env.NODE_ENV === 'production') {
+  throw new Error('Prod-only error');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw in else block of === 'production' check
+    {
+      code: `
+if (process.env.NODE_ENV === 'production') {
+  // production path
+} else {
+  throw new Error('Non-production error');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw nested inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  if (value == null) {
+    throw new TypeError('value is required');
+  }
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Reversed comparison (literal on left)
+    {
+      code: `
+if ('production' !== process.env.NODE_ENV) {
+  throw new Error('Dev-only error');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw in loop inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  for (const item of items) {
+    throw new Error('Invalid item');
+  }
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: NODE_ENV combined with other conditions using &&
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production' && value == null) {
+  throw new TypeError('value is required');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: NODE_ENV combined with other conditions using ||
+    {
+      code: `
+if (condition || process.env.NODE_ENV === 'test') {
+  throw new Error('Test or condition error');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Unary not on process.env.NODE_ENV
+    {
+      code: `
+if (!process.env.NODE_ENV) {
+  throw new Error('NODE_ENV not set');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: NODE_ENV passed to a function
+    {
+      code: `
+if (fn(process.env.NODE_ENV)) {
+  throw new Error('Function check failed');
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw inside try/catch inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  try {
+    doSomething();
+  } catch (error) {
+    throw new Error('caught inside guard');
+  }
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw deeply nested in control flow inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  if (value == null) {
+    for (const item of items) {
+      if (!item.valid) {
+        throw new Error('invalid item');
+      }
+    }
+  }
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+    // Should fail: Throw inside switch/case inside NODE_ENV guard
+    {
+      code: `
+if (process.env.NODE_ENV !== 'production') {
+  switch (type) {
+    case 'a':
+      throw new Error('invalid type a');
+  }
+}
+      `,
+      errors: [{ messageId: 'guardedThrow' }],
+    },
+  ],
+});

package/src/eslint/mui/rules/no-presentation-role.mjs

@@ -0,0 +1,60 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    docs: {
+      description:
+        'Disallow role="presentation" in favor of role="none". Both are equivalent, but role="none" is clearer and shorter.',
+    },
+    messages: {
+      noPresentation:
+        'Use role="none" instead of role="presentation". They are equivalent, but role="none" is preferred.',
+    },
+    fixable: 'code',
+    type: 'suggestion',
+    schema: [],
+  },
+  create(context) {
+    return {
+      /** @param {import('estree-jsx').JSXAttribute} node */
+      JSXAttribute(node) {
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'role') {
+          return;
+        }
+
+        const { value } = node;
+
+        // role="presentation"
+        if (value !== null && value.type === 'Literal' && value.value === 'presentation') {
+          context.report({
+            node,
+            messageId: 'noPresentation',
+            fix(fixer) {
+              return fixer.replaceText(value, '"none"');
+            },
+          });
+          return;
+        }
+
+        // role={'presentation'}
+        if (
+          value !== null &&
+          value.type === 'JSXExpressionContainer' &&
+          value.expression.type === 'Literal' &&
+          value.expression.value === 'presentation'
+        ) {
+          context.report({
+            node,
+            messageId: 'noPresentation',
+            fix(fixer) {
+              return fixer.replaceText(value, '"none"');
+            },
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/src/eslint/mui/rules/no-presentation-role.test.mjs

@@ -0,0 +1,33 @@
+import eslint from 'eslint';
+import parser from '@typescript-eslint/parser';
+import rule from './no-presentation-role.mjs';
+
+const ruleTester = new eslint.RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+ruleTester.run('no-presentation-role', rule, {
+  valid: ['<div role="none" />', '<div role="button" />', '<div />', '<div role={presentation} />'],
+  invalid: [
+    {
+      code: '<div role="presentation" />',
+      errors: [{ messageId: 'noPresentation' }],
+      output: '<div role="none" />',
+    },
+    {
+      code: "<div role={'presentation'} />",
+      errors: [{ messageId: 'noPresentation' }],
+      output: '<div role="none" />',
+    },
+    {
+      code: '<table role="presentation"><tr><td /></tr></table>',
+      errors: [{ messageId: 'noPresentation' }],
+      output: '<table role="none"><tr><td /></tr></table>',
+    },
+  ],
+});

package/src/eslint/mui/rules/nodeEnvUtils.mjs

@@ -39,3 +39,55 @@ export function isLiteralEq(node, value) {
 export function isLiteralNeq(node, value) {
   return node.type === 'Literal' && node.value !== value;
 }
+
+/**
+ * Checks if a BinaryExpression compares process.env.NODE_ENV with === or !==
+ * @param {import('estree').Node} node
+ * @returns {boolean}
+ */
+export function isNodeEnvBinaryComparison(node) {
+  return (
+    node.type === 'BinaryExpression' &&
+    (node.operator === '===' || node.operator === '!==') &&
+    (isProcessEnvNodeEnv(node.left) || isProcessEnvNodeEnv(node.right))
+  );
+}
+
+/**
+ * Walks up the parent chain and checks if the node is inside an IfStatement
+ * whose test is a NODE_ENV binary comparison.
+ * If a callback is provided, it is called with the IfStatement and the direct
+ * child that leads to the node. The function returns true only when the callback
+ * returns true. Without a callback the function returns true when the node is
+ * inside any branch (consequent or alternate) of such an IfStatement.
+ * @param {import('eslint').Rule.Node} node
+ * @param {(ifStatement: import('estree').IfStatement & import('eslint').Rule.NodeParentExtension, child: import('eslint').Rule.Node) => boolean} [callback]
+ * @returns {boolean}
+ */
+export function isInsideNodeEnvCheck(node, callback) {
+  /** @type {import('eslint').Rule.Node | null} */
+  let current = node.parent;
+  /** @type {import('eslint').Rule.Node} */
+  let currentChild = node;
+
+  while (current) {
+    if (current.type === 'IfStatement' && isNodeEnvBinaryComparison(current.test)) {
+      if (callback) {
+        if (callback(current, currentChild)) {
+          return true;
+        }
+      } else {
+        const isInConsequent = current.consequent === currentChild;
+        const isInAlternate = current.alternate === currentChild;
+        if (isInConsequent || isInAlternate) {
+          return true;
+        }
+      }
+    }
+
+    currentChild = current;
+    current = current.parent;
+  }
+
+  return false;
+}