@mui/internal-code-infra 0.0.4-canary.7 → 0.0.4-canary.71

package/src/eslint/baseConfig.mjs

@@ -6,6 +6,7 @@ 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';
@@ -34,19 +35,60 @@ function includeIgnoreIfExists(filePath, description) {
  * @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 {string} [params.baseDirectory] - The base directory for the configuration.
+ * @param {boolean} [params.markdown] - @deprecated Markdown/MDX linting is enabled by default; this option no longer needs to be passed. To skip markdown linting, use eslint ignore patterns for the relevant files.
  * @returns {import('eslint').Linter.Config[]}
  */
 export function createBaseConfig({
   enableReactCompiler = false,
   consistentTypeImports = false,
   materialUi = false,
+  markdown = true,
   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 +104,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:
@@ -116,6 +140,14 @@ export function createBaseConfig({
             'no-unassigned-vars': 'off',
           },
         },
+        // @TODO: Remove this once @typescript-eslint/no-shadow supports wrapped functions
+        //   See https://github.com/eslint/eslint/pull/20982 (once merged also needs port to `typescript-eslint`)
+        {
+          name: 'Disabled tseslint-plugins',
+          rules: {
+            '@typescript-eslint/no-shadow': 'off',
+          },
+        },
       ]),
     },
     {

package/src/eslint/docsConfig.mjs

@@ -1,5 +1,6 @@
 import nextjs from '@next/eslint-plugin-next';
 import { defineConfig } from 'eslint/config';
+import { EXTENSION_TS } from './extensions.mjs';
 
 /**
  * @returns {import('eslint').Linter.Config[]}
@@ -24,7 +25,7 @@ export function createDocsConfig() {
         rootDir: 'docs',
       },
     },
-    files: ['**/*.js', '**/*.mjs', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+    files: [`**/*${EXTENSION_TS}`],
     rules: {
       'compat/compat': 'off',
       'jsx-a11y/anchor-is-valid': 'off',

package/src/eslint/mui/config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from 'eslint/config';
+import { EXTENSION_DTS } from '../extensions.mjs';
 
 const restrictedMethods = ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'];
 
@@ -414,10 +415,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',
@@ -460,9 +463,9 @@ export function createCoreConfig(options = {}) {
         'react/state-in-constructor': 'off',
         // stylistic opinion. For conditional assignment we want it outside, otherwise as static
         'react/static-property-placement': 'off',
-        // noopener is enough
-        // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md#rule-options
-        'react/jsx-no-target-blank': ['error', { allowReferrer: true }],
+        // This rule is outdated, rel are no longer needed for security on target="_blank" links.
+        // See https://github.com/mui/material-ui/pull/40447 for more details.
+        'react/jsx-no-target-blank': 'off',
 
         'no-restricted-syntax': [
           'error',
@@ -499,6 +502,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,
         ],
 
@@ -515,9 +527,10 @@ export function createCoreConfig(options = {}) {
               '@typescript-eslint/consistent-type-imports': [
                 'error',
                 {
-                  fixStyle: 'inline-type-imports',
+                  fixStyle: 'separate-type-imports',
                 },
               ],
+              'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
             }
           : {}),
         // Prevent the use of `e` as a shorthand for `event`, `error`, etc.
@@ -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,8 @@ 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';
+import noFloatingCleanup from './rules/no-floating-cleanup.mjs';
 
 /** @type {import('eslint').ESLint.Plugin} */
 const muiPlugin = {
@@ -22,6 +25,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 +37,8 @@ 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,
+    'no-floating-cleanup': /** @type {any} */ (noFloatingCleanup),
   },
 };
 

package/src/eslint/mui/rules/no-floating-cleanup.mjs

@@ -0,0 +1,187 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+import ts from 'typescript';
+
+/**
+ * no-floating-cleanup
+ *
+ * Like `@typescript-eslint/no-floating-promises`, but for functions: reports
+ * call expressions used as statements whose return value is a function
+ * (e.g. an `unsubscribe` / cleanup callback). Ignoring such a value usually
+ * means the subscription can never be torn down — a leak.
+ *
+ * Requires type information (parserOptions.project / projectService).
+ *
+ * Calls whose resolved signature declares a `this` return type are never
+ * reported: fluent / builder APIs (e.g. d3 scales) chain by returning `this`,
+ * so the discarded result is callable but not a leaked cleanup function.
+ *
+ * Opt-out at a call site, same convention as no-floating-promises:
+ *   void subscribe(cb);
+ */
+
+const RULE_NAME = 'no-floating-cleanup';
+
+const createRule = ESLintUtils.RuleCreator(
+  (name) =>
+    `https://github.com/mui/mui-public/blob/master/packages/code-infra/src/eslint/mui/rules/${name}.mjs`,
+);
+
+export default createRule({
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow ignoring returned cleanup/unsubscribe functions, which leaks subscriptions.',
+    },
+    messages: {
+      floatingCleanup:
+        "Return value of type '{{typeName}}' is ignored. This likely leaks a subscription — " +
+        'store the cleanup function, or discard it explicitly with the `void` operator.',
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  defaultOptions: [],
+  create(context) {
+    const services = ESLintUtils.getParserServices(context);
+    const checker = services.program.getTypeChecker();
+
+    /**
+     * Does this type (or any union member) look like a cleanup function?
+     * @param {import('typescript').Type} type
+     * @returns {boolean}
+     */
+    function isCleanupType(type) {
+      if (type.isUnion()) {
+        return type.types.some(isCleanupType);
+      }
+      // Never fire on any/unknown/never — too noisy and not provable.
+      // eslint-disable-next-line no-bitwise -- TypeScript type flags are a bitmask
+      if (type.flags & (ts.TypeFlags.Any | ts.TypeFlags.Unknown | ts.TypeFlags.Never)) {
+        return false;
+      }
+
+      return checker.getSignaturesOfType(type, ts.SignatureKind.Call).length > 0;
+    }
+
+    /**
+     * @param {import('typescript').Type} type
+     * @returns {string}
+     */
+    function describeType(type) {
+      return (type.aliasSymbol && type.aliasSymbol.getName()) || checker.typeToString(type);
+    }
+
+    /**
+     * Does this call resolve to a signature that returns `this`? Fluent /
+     * builder APIs (e.g. d3 scales) chain by returning `this`, so the
+     * discarded result is callable but never a leaked cleanup function —
+     * those calls should not be reported. Covers both an explicit `: this`
+     * annotation and an inferred `this` return (no annotation).
+     * @param {import('@typescript-eslint/utils').TSESTree.Node} estreeCall
+     * @returns {boolean}
+     */
+    function returnsThis(estreeCall) {
+      /** @type {import('typescript').Node | undefined} */
+      let tsNode = services.esTreeNodeToTSNodeMap.get(estreeCall);
+      // Unwrap `await (...)` / parens down to the underlying call.
+      while (tsNode && (ts.isAwaitExpression(tsNode) || ts.isParenthesizedExpression(tsNode))) {
+        tsNode = tsNode.expression;
+      }
+      if (!tsNode || !(ts.isCallExpression(tsNode) || ts.isNewExpression(tsNode))) {
+        return false;
+      }
+      const declaration = checker.getResolvedSignature(tsNode)?.getDeclaration();
+      if (!declaration) {
+        return false;
+      }
+      // Explicit `: this` annotation.
+      if (declaration.type?.kind === ts.SyntaxKind.ThisType) {
+        return true;
+      }
+      // Inferred `this` return: the *declared* (uninstantiated) signature's
+      // return type is the polymorphic `this` type, which prints as `this`.
+      // (The resolved signature would have it bound to the receiver type.)
+      const declaredSignature = checker.getSignatureFromDeclaration(declaration);
+      return (
+        !!declaredSignature &&
+        checker.typeToString(checker.getReturnTypeOfSignature(declaredSignature)) === 'this'
+      );
+    }
+
+    /**
+     * Unwrap an expression-statement expression down to the calls whose
+     * results are being discarded. Mirrors the cases no-floating-promises
+     * handles: plain calls, optional chains, `await`, comma sequences,
+     * and the operand(s) of unary / logical / conditional expressions.
+     * A top-level `void` operator is the explicit opt-out, so we stop there.
+     * @param {import('@typescript-eslint/utils').TSESTree.Node} expr
+     * @param {import('@typescript-eslint/utils').TSESTree.Node[]} [out]
+     * @returns {import('@typescript-eslint/utils').TSESTree.Node[]}
+     */
+    function findDiscardedCalls(expr, out = []) {
+      switch (expr.type) {
+        case 'CallExpression':
+        case 'NewExpression':
+          out.push(expr);
+          break;
+        case 'ChainExpression':
+          findDiscardedCalls(expr.expression, out);
+          break;
+        case 'AwaitExpression':
+          // type of the AwaitExpression node is already the awaited type
+          if (expr.argument.type === 'CallExpression' || expr.argument.type === 'ChainExpression') {
+            out.push(expr);
+          }
+          break;
+        case 'UnaryExpression':
+          // `void expr` is the explicit opt-out; any other unary operator
+          // (e.g. `!subscribe()`) still discards the operand's result.
+          if (expr.operator !== 'void') {
+            findDiscardedCalls(expr.argument, out);
+          }
+          break;
+        case 'LogicalExpression':
+          // `a && subscribe()`, `a || subscribe()`, `a ?? subscribe()`:
+          // either side may be the discarded value.
+          findDiscardedCalls(expr.left, out);
+          findDiscardedCalls(expr.right, out);
+          break;
+        case 'ConditionalExpression':
+          // `cond ? subscribe() : other()`: the branches are discarded,
+          // not the test.
+          findDiscardedCalls(expr.consequent, out);
+          findDiscardedCalls(expr.alternate, out);
+          break;
+        case 'SequenceExpression':
+          // every value except the last is discarded; the last one is the
+          // statement's value, which is also discarded here
+          expr.expressions.forEach((subExpr) => findDiscardedCalls(subExpr, out));
+          break;
+        default:
+          break;
+      }
+      return out;
+    }
+
+    return {
+      /** @param {import('@typescript-eslint/utils').TSESTree.ExpressionStatement} node */
+      ExpressionStatement(node) {
+        findDiscardedCalls(node.expression).forEach((call) => {
+          // Fluent/builder calls return `this` for chaining — not a leak.
+          if (returnsThis(call)) {
+            return;
+          }
+          const type = services.getTypeAtLocation(call);
+          if (isCleanupType(type)) {
+            context.report({
+              node: call,
+              messageId: 'floatingCleanup',
+              data: { typeName: describeType(type) },
+            });
+          }
+        });
+      },
+    };
+  },
+});

package/src/eslint/mui/rules/no-floating-cleanup.test.mjs

@@ -0,0 +1,141 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import TSESlintParser from '@typescript-eslint/parser';
+import rule from './no-floating-cleanup.mjs';
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parser: TSESlintParser,
+    parserOptions: {
+      tsconfigRootDir: import.meta.dirname,
+      projectService: {
+        allowDefaultProject: ['*.ts'],
+      },
+    },
+  },
+});
+
+ruleTester.run('no-floating-cleanup', rule, {
+  valid: [
+    {
+      name: 'stored cleanup function',
+      code: `
+type Unsubscribe = () => void;
+declare function subscribe(cb: () => void): Unsubscribe;
+function f() {
+  const un = subscribe(() => {});
+  un();
+}
+      `,
+    },
+    {
+      name: 'explicit void opt-out',
+      code: `
+type Unsubscribe = () => void;
+declare function subscribe(cb: () => void): Unsubscribe;
+function f() {
+  void subscribe(() => {});
+}
+      `,
+    },
+    {
+      name: 'call returning void',
+      code: `
+declare function noop(): void;
+function f() {
+  noop();
+}
+      `,
+    },
+    {
+      name: 'fluent builder methods returning `this`',
+      code: `
+interface Scale {
+  (value: number): number;
+  domain(d: number[]): this;
+  range(r: number[]): this;
+}
+declare const scale: Scale;
+function f() {
+  scale.domain([0, 1]);
+  scale.range([0, 100]);
+}
+      `,
+    },
+    {
+      name: 'fluent builder method with an inferred `this` return',
+      code: `
+class Builder {
+  configure() {
+    return this;
+  }
+}
+declare const builder: Builder;
+function f() {
+  builder.configure();
+}
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'discarded unsubscribe function',
+      code: `
+type Unsubscribe = () => void;
+declare function subscribe(cb: () => void): Unsubscribe;
+function f() {
+  subscribe(() => {});
+}
+      `,
+      errors: [{ messageId: 'floatingCleanup', line: 5 }],
+    },
+    {
+      name: 'call returning a fresh callable (not `this`)',
+      code: `
+interface Scale {
+  (value: number): number;
+  copy(): Scale;
+}
+declare const scale: Scale;
+function f() {
+  scale.copy();
+}
+      `,
+      errors: [{ messageId: 'floatingCleanup', line: 8 }],
+    },
+    {
+      name: 'discarded cleanup behind a unary operator',
+      code: `
+type Unsubscribe = () => void;
+declare function subscribe(cb: () => void): Unsubscribe;
+function f() {
+  !subscribe(() => {});
+}
+      `,
+      errors: [{ messageId: 'floatingCleanup', line: 5 }],
+    },
+    {
+      name: 'discarded cleanup in a logical expression',
+      code: `
+type Unsubscribe = () => void;
+declare function subscribe(cb: () => void): Unsubscribe;
+declare const enabled: boolean;
+function f() {
+  enabled && subscribe(() => {});
+}
+      `,
+      errors: [{ messageId: 'floatingCleanup', line: 6 }],
+    },
+    {
+      name: 'discarded cleanup in a conditional expression',
+      code: `
+type Unsubscribe = () => void;
+declare function subscribe(cb: () => void): Unsubscribe;
+declare const enabled: boolean;
+function f() {
+  enabled ? subscribe(() => {}) : undefined;
+}
+      `,
+      errors: [{ messageId: 'floatingCleanup', line: 6 }],
+    },
+  ],
+});

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;