@mui/internal-code-infra 0.0.3-canary.6 → 0.0.3-canary.60

package/src/eslint/baseConfig.mjs

@@ -1,102 +1,120 @@
 import { includeIgnoreFile } from '@eslint/compat';
 import eslintJs from '@eslint/js';
+import { defineConfig } from 'eslint/config';
 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 { configs as reactCompilerPluginConfigs } from 'eslint-plugin-react-compiler';
-import { configs as reactHookConfigs } from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
-import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as tseslint from 'typescript-eslint';
-
+import fs from 'node:fs';
 import { createCoreConfig } from './material-ui/config.mjs';
 import muiPlugin from './material-ui/index.mjs';
+import { EXTENSION_TS } from './extensions.mjs';
+import { createJsonConfig } from './jsonConfig.mjs';
+
+/**
+ * @param {string} filePath
+ * @param {string | undefined} description
+ */
+function includeIgnoreIfExists(filePath, description) {
+  if (fs.existsSync(filePath)) {
+    return includeIgnoreFile(filePath, description);
+  }
+  return [];
+}
+
 /**
  * @param {Object} [params]
  * @param {boolean} [params.enableReactCompiler] - Whether the config is for spec files.
- * @param {string} params.baseDirectory - The base directory for the configuration.
+ * @param {string} [params.baseDirectory] - The base directory for the configuration.
  * @returns {import('eslint').Linter.Config[]}
  */
-export function createBaseConfig(
-  { enableReactCompiler = false, baseDirectory } = { baseDirectory: process.cwd() },
-) {
-  const ignoreRules = /** @type {import('@eslint/compat').FlatConfig[]} */ (
-    // All repos should use .lintignore going forward.
-    // .eslintignore is for backward compatibility. Should be removed in future.
-    ['.gitignore', '.lintignore', '.eslintignore']
-      .map((file) => {
-        if (fs.existsSync(`${baseDirectory}/${file}`)) {
-          return includeIgnoreFile(path.join(baseDirectory, file), `Ignore rules from ${file}`);
-        }
-        return null;
-      })
-      .filter(Boolean)
-  );
-
-  return /** @type {import('eslint').Linter.Config[]} */ (
-    tseslint.config(
-      ...ignoreRules,
-      eslintJs.configs.recommended,
-      importPlugin.flatConfigs.recommended,
-      importPlugin.flatConfigs.react,
-      jsxA11yPlugin.flatConfigs.recommended,
-      reactPlugin.configs.flat.recommended,
-      reactHookConfigs.recommended,
-      tseslint.configs.recommended,
-      importPlugin.flatConfigs.typescript,
-      enableReactCompiler ? reactCompilerPluginConfigs.recommended : {},
-      prettier,
-      {
-        name: 'typescript-eslint-parser',
-        languageOptions: {
-          ecmaVersion: 7,
-          globals: {
-            ...globals.es2020,
-            ...globals.browser,
-            ...globals.node,
+export function createBaseConfig({
+  enableReactCompiler = false,
+  baseDirectory = process.cwd(),
+} = {}) {
+  return defineConfig([
+    includeIgnoreIfExists(path.join(baseDirectory, '.gitignore'), `Ignore rules from .gitignore`),
+    includeIgnoreIfExists(path.join(baseDirectory, '.lintignore'), `Ignore rules from .lintignore`),
+    createJsonConfig(),
+    prettier,
+    {
+      name: 'Base config',
+      files: [`**/*${EXTENSION_TS}`],
+      extends: defineConfig([
+        eslintJs.configs.recommended,
+        importPlugin.flatConfigs.recommended,
+        importPlugin.flatConfigs.react,
+        jsxA11yPlugin.flatConfigs.recommended,
+        reactPlugin.configs.flat.recommended,
+        reactHooks.configs.flat.recommended,
+        tseslint.configs.recommended,
+        importPlugin.flatConfigs.typescript,
+        enableReactCompiler ? reactCompilerPluginConfigs.recommended : {},
+        compatPlugin.configs['flat/recommended'],
+        {
+          name: 'typescript-eslint-parser',
+          languageOptions: {
+            ecmaVersion: 7,
+            globals: {
+              ...globals.es2020,
+              ...globals.browser,
+              ...globals.node,
+            },
           },
-        },
-        plugins: {
-          'material-ui': muiPlugin,
-        },
-        extends: createCoreConfig({ reactCompilerEnabled: enableReactCompiler }),
-      },
-      {
-        files: ['**/*.mjs'],
-        rules: {
-          'import/extensions': [
-            'error',
-            'ignorePackages',
-            {
-              js: 'always',
-              mjs: 'always',
+          plugins: {
+            'material-ui': muiPlugin,
+          },
+          settings: {
+            browserslistOpts: {
+              config: path.join(baseDirectory, '.browserslistrc'),
+              env: 'stable',
+              ignoreUnknownVersions: true,
             },
-          ],
+          },
+          extends: createCoreConfig({ enableReactCompiler }),
         },
-      },
-      // Lint rule to disallow usage of typescript namespaces.We've seen at least two problems with them:
-      //   * Creates non-portable types in base ui. [1]
-      //   * This pattern [2] leads to broken bundling in codesandbox [3].
-      // Gauging the ecosystem it also looks like support for namespaces in tooling is poor and tends to
-      // be treated as a deprecated feature.
-      // [1] https://github.com/mui/base-ui/pull/2324
-      // [2] https://github.com/mui/mui-x/blob/1cf853ed45cf301211ece1c0ca21981ea208edfb/packages/x-virtualizer/src/models/core.ts#L4-L10
-      // [3] https://codesandbox.io/embed/kgylpd?module=/src/Demo.tsx&fontsize=12
-      {
-        rules: {
-          '@typescript-eslint/no-namespace': 'error',
+        // Lint rule to disallow usage of typescript namespaces.We've seen at least two problems with them:
+        //   * Creates non-portable types in base ui. [1]
+        //   * This pattern [2] leads to broken bundling in codesandbox [3].
+        // Gauging the ecosystem it also looks like support for namespaces in tooling is poor and tends to
+        // be treated as a deprecated feature.
+        // [1] https://github.com/mui/base-ui/pull/2324
+        // [2] https://github.com/mui/mui-x/blob/1cf853ed45cf301211ece1c0ca21981ea208edfb/packages/x-virtualizer/src/models/core.ts#L4-L10
+        // [3] https://codesandbox.io/embed/kgylpd?module=/src/Demo.tsx&fontsize=12
+        {
+          rules: {
+            '@typescript-eslint/no-namespace': 'error',
+          },
         },
-      },
-      // Part of the migration away from airbnb config. Turned of initially.
-      {
-        rules: {
-          '@typescript-eslint/no-explicit-any': 'off',
-          '@typescript-eslint/no-unsafe-function-type': 'off',
-          '@typescript-eslint/no-empty-object-type': 'off',
+        // Part of the migration away from airbnb config. Turned off initially.
+        {
+          rules: {
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-unsafe-function-type': 'off',
+            '@typescript-eslint/no-empty-object-type': 'off',
+          },
         },
+      ]),
+    },
+    {
+      name: 'ESM JS files',
+      files: ['**/*.mjs'],
+      rules: {
+        'import/extensions': [
+          'error',
+          'ignorePackages',
+          {
+            js: 'always',
+            mjs: 'always',
+          },
+        ],
       },
-    )
-  );
+    },
+  ]);
 }

package/src/eslint/docsConfig.mjs

@@ -1,21 +1,21 @@
 import nextjs from '@next/eslint-plugin-next';
-import * as tseslint from 'typescript-eslint';
+import { defineConfig } from 'eslint/config';
 
 /**
  * @returns {import('eslint').Linter.Config[]}
  */
 export function createDocsConfig() {
-  return /** @type {import('eslint').Linter.Config[]} */ (
-    tseslint.config(nextjs.flatConfig.recommended, {
-      settings: {
-        next: {
-          rootDir: 'docs',
-        },
+  return defineConfig(nextjs.flatConfig.recommended, {
+    settings: {
+      next: {
+        rootDir: 'docs',
       },
-      rules: {
-        'jsx-a11y/anchor-is-valid': 'off',
-        'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
-      },
-    })
-  );
+    },
+    files: ['**/*.js', '**/*.mjs', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+    rules: {
+      'compat/compat': 'off',
+      'jsx-a11y/anchor-is-valid': 'off',
+      'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
+    },
+  });
 }

package/src/eslint/extensions.mjs

@@ -1,8 +1,8 @@
-export const EXTENSION_JS = '?(c|m)js?(x)';
-export const EXTENSION_JS_NO_MODULE = 'js?(x)';
-export const EXTENSION_TS = '?(c|m)[jt]s?(x)';
-export const EXTENSION_TS_NO_MODULE = '[jt]s?(x)';
-export const EXTENSION_TS_ONLY = '?(c|m)ts?(x)';
-export const EXTENSION_TS_ONLY_NO_MODULE = 'ts?(x)';
-export const EXTENSION_DTS = `.d.${EXTENSION_TS_ONLY}`;
-export const EXTENSION_TEST_FILE = `.test.${EXTENSION_TS}`;
+export const EXTENSION_JS = '.?(c|m)js?(x)';
+export const EXTENSION_JS_NO_MODULE = '.js?(x)';
+export const EXTENSION_TS = '.?(c|m)[jt]s?(x)';
+export const EXTENSION_TS_NO_MODULE = '.[jt]s?(x)';
+export const EXTENSION_TS_ONLY = '.?(c|m)ts?(x)';
+export const EXTENSION_TS_ONLY_NO_MODULE = '.ts?(x)';
+export const EXTENSION_DTS = `.d${EXTENSION_TS_ONLY}`;
+export const EXTENSION_TEST_FILE = `.test${EXTENSION_TS}`;

package/src/eslint/jsonConfig.mjs

@@ -0,0 +1,40 @@
+import { defineConfig } from 'eslint/config';
+import json from '@eslint/json';
+
+/**
+ * @returns {import('eslint').Linter.Config[]}
+ */
+export function createJsonConfig() {
+  return defineConfig([
+    {
+      name: 'JSON files',
+      files: ['**/*.json'],
+      ignores: ['package-lock.json'],
+      plugins: { json },
+      language: 'json/json',
+      extends: [json.configs.recommended],
+    },
+
+    {
+      name: 'JSONC files',
+      files: [
+        '**/*.jsonc',
+        '**/tsconfig.json',
+        '**/tsconfig.*.json',
+        '.vscode/**/*.json',
+        'renovate.json',
+      ],
+      plugins: { json },
+      language: 'json/jsonc',
+      extends: [json.configs.recommended],
+    },
+
+    {
+      name: 'JSON5 files',
+      files: ['**/*.json5'],
+      plugins: { json },
+      language: 'json/json5',
+      extends: [json.configs.recommended],
+    },
+  ]);
+}

package/src/eslint/material-ui/config.mjs

@@ -1,3 +1,5 @@
+import { defineConfig } from 'eslint/config';
+
 const restrictedMethods = ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'];
 
 const restrictedSyntaxRules = restrictedMethods.map((method) => ({
@@ -42,9 +44,6 @@ const criticalAirbnbRules = {
   'no-restricted-globals': ['error', 'isFinite', 'isNaN'],
 
   // Styles
-  // require or disallow an empty line between class members
-  // https://eslint.org/docs/rules/lines-between-class-members
-  'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: false }],
   // require a capital letter for constructors
   'new-cap': [
     'error',
@@ -302,11 +301,11 @@ const airbnbJsxA11y = {
 
 /**
  * @param {Object} [options]
- * @param {boolean} [options.reactCompilerEnabled] - Whether the config is for spec files.
- * @returns {import('typescript-eslint').InfiniteDepthConfigWithExtends[]}
+ * @param {boolean} [options.enableReactCompiler] - Whether the config is for spec files.
+ * @returns {import('eslint').Linter.Config[]}
  */
 export function createCoreConfig(options = {}) {
-  return [
+  return defineConfig([
     {
       name: 'material-ui-base',
       settings: {
@@ -433,7 +432,7 @@ export function createCoreConfig(options = {}) {
         'react/forbid-prop-types': 'off', // Too strict, no time for that
         'react/jsx-curly-brace-presence': 'off', // broken
         // airbnb is using .jsx
-        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
+        'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
         // Prefer <React.Fragment> over <>.
         'react/jsx-fragments': ['error', 'element'],
         // Enforces premature optimization
@@ -501,11 +500,11 @@ export function createCoreConfig(options = {}) {
 
         'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
         'lines-around-directive': 'off',
-        ...(options.reactCompilerEnabled ? { 'react-compiler/react-compiler': 'error' } : {}),
+        ...(options.enableReactCompiler ? { 'react-compiler/react-compiler': 'error' } : {}),
         // Prevent the use of `e` as a shorthand for `event`, `error`, etc.
         'id-denylist': ['error', 'e'],
         '@typescript-eslint/return-await': 'off',
       },
     },
-  ];
+  ]);
 }

package/src/eslint/material-ui/rules/mui-name-matches-component-name.mjs

@@ -88,7 +88,8 @@ const rule = {
           callee.name === 'useDefaultProps' || callee.name === 'useThemeProps';
         if (isUseDefaultPropsCall) {
           let isCalledFromCustomHook = false;
-          let { parent } = node;
+          /** @type {import('eslint').Rule.Node | null} */
+          let parent = node.parent;
           while (parent != null) {
             if (parent.type === 'FunctionExpression' || parent.type === 'FunctionDeclaration') {
               if (
@@ -112,7 +113,8 @@ const rule = {
 
         if (nameLiteral !== null) {
           let componentName = null;
-          let { parent } = node;
+          /** @type {import('eslint').Rule.Node | null} */
+          let parent = node.parent;
           while (parent != null && componentName === null) {
             if (parent.type === 'FunctionExpression' || parent.type === 'FunctionDeclaration') {
               componentName = /** @type {import('estree').Identifier} */ (parent.id).name;

package/src/eslint/material-ui/rules/rules-of-use-theme-variants.mjs

@@ -32,8 +32,9 @@ export default {
      * @param {import("estree").CallExpression & import("eslint").Rule.NodeParentExtension} hookCallNode
      */
     function getComponentBlockNode(hookCallNode) {
+      /** @type {import("eslint").Rule.Node | null} */
       let node = hookCallNode.parent;
-      while (node !== undefined) {
+      while (node) {
         if (node.type === 'BlockStatement') {
           return node;
         }

package/src/eslint/testConfig.mjs

@@ -1,14 +1,19 @@
 import mochaPlugin from 'eslint-plugin-mocha';
+import vitestPlugin from '@vitest/eslint-plugin';
 import testingLibrary from 'eslint-plugin-testing-library';
+import { defineConfig } from 'eslint/config';
 import globals from 'globals';
 import * as tseslint from 'typescript-eslint';
+import { EXTENSION_TS } from './extensions.mjs';
 
 /**
  * @type {import('eslint').Linter.Config}
  */
 export const baseSpecRules = {
-  files: ['**/*.spec.*'],
+  name: 'Spec files rules',
+  files: [`**/*.spec${EXTENSION_TS}`],
   rules: {
+    'compat/compat': 'off',
     'no-alert': 'off',
     'no-console': 'off',
     'no-empty-pattern': 'off',
@@ -41,79 +46,80 @@ export const baseSpecRules = {
 /**
  * @param {Object} [options]
  * @param {boolean} [options.useMocha]
+ * @param {boolean} [options.useVitest]
  * @returns {import('eslint').Linter.Config[]}
  */
 export function createTestConfig(options = {}) {
-  const { useMocha = true } = options;
-  return /** @type {import('eslint').Linter.Config[]} */ (
-    tseslint.config(
-      // @ts-expect-error The types don't make sense here.
-      useMocha ? mochaPlugin.configs.recommended : {},
-      testingLibrary.configs['flat/dom'],
-      testingLibrary.configs['flat/react'],
-      {
-        languageOptions: {
-          parser: tseslint.parser,
-          parserOptions: {
-            ecmaVersion: 7,
-          },
-          globals: globals.mocha,
+  const { useMocha = true, useVitest = false } = options;
+  return defineConfig(
+    useMocha ? mochaPlugin.configs.recommended : {},
+    useVitest ? vitestPlugin.configs.recommended : {},
+    testingLibrary.configs['flat/dom'],
+    testingLibrary.configs['flat/react'],
+    {
+      name: 'Test files',
+      languageOptions: {
+        parser: tseslint.parser,
+        parserOptions: {
+          ecmaVersion: 7,
         },
-        rules: {
-          // does not work with wildcard imports. Mistakes will throw at runtime anyway
-          'import/named': 'off',
-          'material-ui/disallow-active-element-as-key-event-target': 'error',
+        globals: globals.mocha,
+      },
+      rules: {
+        'compat/compat': 'off',
+        // does not work with wildcard imports. Mistakes will throw at runtime anyway
+        'import/named': 'off',
+        'material-ui/disallow-active-element-as-key-event-target': 'error',
 
-          // disable eslint-plugin-jsx-a11y
-          // tests are not driven by assistive technology
-          // add `jsx-a11y` rules once you encounter them in tests
-          'jsx-a11y/click-events-have-key-events': 'off',
-          'jsx-a11y/control-has-associated-label': 'off',
-          'jsx-a11y/iframe-has-title': 'off',
-          'jsx-a11y/label-has-associated-control': 'off',
-          'jsx-a11y/mouse-events-have-key-events': 'off',
-          'jsx-a11y/no-noninteractive-tabindex': 'off',
-          'jsx-a11y/no-static-element-interactions': 'off',
-          'jsx-a11y/tabindex-no-positive': 'off',
-          'jsx-a11y/anchor-is-valid': 'off',
+        // disable eslint-plugin-jsx-a11y
+        // tests are not driven by assistive technology
+        // add `jsx-a11y` rules once you encounter them in tests
+        'jsx-a11y/click-events-have-key-events': 'off',
+        'jsx-a11y/control-has-associated-label': 'off',
+        'jsx-a11y/iframe-has-title': 'off',
+        'jsx-a11y/label-has-associated-control': 'off',
+        'jsx-a11y/mouse-events-have-key-events': 'off',
+        'jsx-a11y/no-noninteractive-tabindex': 'off',
+        'jsx-a11y/no-static-element-interactions': 'off',
+        'jsx-a11y/tabindex-no-positive': 'off',
+        'jsx-a11y/anchor-is-valid': 'off',
 
-          // In tests this is generally intended.
-          'react/button-has-type': 'off',
-          // They are accessed to test custom validator implementation with PropTypes.checkPropTypes
-          'react/forbid-foreign-prop-types': 'off',
-          // components that are defined in test are isolated enough
-          // that they don't need type-checking
-          'react/prop-types': 'off',
-          'react/no-unused-prop-types': 'off',
-          // Part of the migration away from airbnb config. Turned of initially.
-          '@typescript-eslint/no-empty-function': 'off',
-          '@typescript-eslint/ban-ts-comment': 'off',
-          'testing-library/no-node-access': 'off',
-          '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-          // end migration
-          ...(useMocha
-            ? {
-                'mocha/consistent-spacing-between-blocks': 'off',
+        // In tests this is generally intended.
+        'react/button-has-type': 'off',
+        // They are accessed to test custom validator implementation with PropTypes.checkPropTypes
+        'react/forbid-foreign-prop-types': 'off',
+        // components that are defined in test are isolated enough
+        // that they don't need type-checking
+        'react/prop-types': 'off',
+        'react/no-unused-prop-types': 'off',
+        // Part of the migration away from airbnb config. Turned of initially.
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'testing-library/no-node-access': 'off',
+        '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+        // end migration
+        ...(useMocha
+          ? {
+              'mocha/consistent-spacing-between-blocks': 'off',
 
-                // upgraded level from recommended
-                'mocha/no-pending-tests': 'error',
+              // upgraded level from recommended
+              'mocha/no-pending-tests': 'error',
 
-                // no rationale provided in /recommended
-                'mocha/no-mocha-arrows': 'off',
-                // definitely a useful rule but too many false positives
-                // due to `describeConformance`
-                // "If you're using dynamically generated tests, you should disable this rule.""
-                'mocha/no-setup-in-describe': 'off',
-                // `beforeEach` for a single case is optimized for change
-                // when we add a test we don't have to refactor the existing
-                // test to `beforeEach`.
-                // `beforeEach`+`afterEach` also means that the `beforeEach`
-                // is cleaned up in `afterEach` if the test causes a crash
-                'mocha/no-hooks-for-single-case': 'off',
-              }
-            : {}),
-        },
+              // no rationale provided in /recommended
+              'mocha/no-mocha-arrows': 'off',
+              // definitely a useful rule but too many false positives
+              // due to `describeConformance`
+              // "If you're using dynamically generated tests, you should disable this rule.""
+              'mocha/no-setup-in-describe': 'off',
+              // `beforeEach` for a single case is optimized for change
+              // when we add a test we don't have to refactor the existing
+              // test to `beforeEach`.
+              // `beforeEach`+`afterEach` also means that the `beforeEach`
+              // is cleaned up in `afterEach` if the test causes a crash
+              'mocha/no-hooks-for-single-case': 'off',
+            }
+          : {}),
       },
-    )
+    },
   );
 }

package/src/stylelint/index.mjs

@@ -0,0 +1,46 @@
+import postcssStylesSyntax from 'postcss-styled-syntax';
+import standardConfig from 'stylelint-config-standard';
+
+/** @type {import('stylelint').Config} */
+export default {
+  extends: standardConfig,
+  rules: {
+    // Too opinionated?
+    'no-descending-specificity': null,
+
+    // Adopted from mui/material-ui repo
+    'alpha-value-notation': null,
+    'custom-property-pattern': null,
+    'media-feature-range-notation': null,
+    'no-empty-source': null,
+    'selector-class-pattern': null,
+    'string-no-newline': null, // not compatible with prettier
+    'value-keyword-case': null,
+    'import-notation': null,
+
+    // Responsibility of prettier:
+    'at-rule-empty-line-before': null,
+    'comment-empty-line-before': null,
+    'custom-property-empty-line-before': null,
+    'declaration-empty-line-before': null,
+    'rule-empty-line-before': null,
+
+    // Tailwind
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['theme', 'config'] }],
+
+    // Don't assume we use a preprocessor
+    'property-no-vendor-prefix': null,
+    'property-no-deprecated': null,
+    'declaration-property-value-keyword-no-deprecated': null,
+
+    // Responsibility of a minifier
+    'color-hex-length': null,
+    'declaration-block-no-redundant-longhand-properties': null,
+  },
+  overrides: [
+    {
+      files: ['**/*.?(c|m)[jt]s?(x)'],
+      customSyntax: /** @type {any} */ (postcssStylesSyntax),
+    },
+  ],
+};

package/src/untyped-plugins.d.ts

@@ -154,3 +154,16 @@ declare module '@babel/preset-typescript' {
   declare const preset: PluginItem;
   export default preset;
 }
+
+declare module 'stylelint-config-standard' {
+  import type { Config } from 'stylelint';
+
+  declare const configExtends: Config['extends'];
+  export default configExtends;
+}
+declare module 'postcss-styled-syntax' {
+  import type { Syntax } from 'postcss';
+
+  declare const syntax: Syntax;
+  export default syntax;
+}