[code-infra] Lint json through eslint (#47056)

Author: Janpot

.circleci/config.yml

@@ -162,9 +162,6 @@ jobs:
       - run:
           name: Stylelint
           command: pnpm stylelint
-      - run:
-          name: Lint JSON
-          command: pnpm jsonlint
       - run:
           name: Lint Markdown
           command: pnpm markdownlint

apps/pigment-css-next-app/src/components/Box.jsx

@@ -50,7 +50,6 @@ const atomics = generateAtomics(({ theme }) => ({
   },
 }));
 
-// eslint-disable-next-line react/prop-types
 export function Box({ children, as = 'div', className = '', style = undefined, ...other }) {
   const Component = as;
   const atomicsResult = atomics(other);
@@ -60,7 +59,6 @@ export function Box({ children, as = 'div', className = '', style = undefined, .
     ...style,
   };
   return (
-    // eslint-disable-next-line react/jsx-filename-extension
     <Component className={componentClass} style={finalStyles}>
       {children}
     </Component>

apps/pigment-css-vite-app/src/Box.jsx

@@ -50,7 +50,6 @@ const atomics = generateAtomics(({ theme }) => ({
   },
 }));
 
-// eslint-disable-next-line react/prop-types
 export function Box({ children, as = 'div', className = '', style = undefined, ...other }) {
   const Component = as;
   const atomicsResult = atomics(other);
@@ -60,7 +59,6 @@ export function Box({ children, as = 'div', className = '', style = undefined, .
     ...style,
   };
   return (
-    // eslint-disable-next-line react/jsx-filename-extension
     <Component className={componentClass} style={finalStyles}>
       {children}
     </Component>

eslint.config.mjs

@@ -5,6 +5,7 @@ import {
   createDocsConfig,
   EXTENSION_TS,
   EXTENSION_TEST_FILE,
+  EXTENSION_DTS,
 } from '@mui/internal-code-infra/eslint';
 import { defineConfig } from 'eslint/config';
 import eslintPluginConsistentName from 'eslint-plugin-consistent-default-export-name';
@@ -53,12 +54,20 @@ const NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED = [
 ];
 
 export default defineConfig(
+  createBaseConfig({
+    enableReactCompiler: ENABLE_REACT_COMPILER_PLUGIN,
+    baseDirectory: dirname,
+  }),
   {
-    name: 'Base ESLint Configuration',
-    extends: createBaseConfig({
-      enableReactCompiler: ENABLE_REACT_COMPILER_PLUGIN,
-      baseDirectory: dirname,
-    }),
+    name: 'Material UI overrides',
+    files: [`**/*${EXTENSION_TS}`],
+    settings: {
+      'import/resolver': {
+        typescript: {
+          project: ['tsconfig.json'],
+        },
+      },
+    },
     rules: {
       'import/prefer-default-export': 'error',
       'material-ui/straight-quotes': 'error',
@@ -71,6 +80,7 @@ export default defineConfig(
       'react/sort-prop-types': 'off', // 228
       '@typescript-eslint/ban-ts-comment': 'off', // 117
       '@typescript-eslint/no-require-imports': 'off', // 133
+      'react/jsx-filename-extension': 'off',
     },
   },
   ...['mui-material', 'mui-system', 'mui-utils', 'mui-lab', 'mui-utils', 'mui-styled-engine'].map(
@@ -91,9 +101,16 @@ export default defineConfig(
       },
     }),
   ),
+  {
+    files: [`packages/**/*${EXTENSION_TS}`],
+    rules: {
+      // Our packages write .js + .d.ts files manually.
+      'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
+    },
+  },
   // Test start
   {
-    files: [`**/*${EXTENSION_TEST_FILE}`, 'packages/mui-codemod/testUtils/**/*'],
+    files: [`**/*${EXTENSION_TEST_FILE}`, `packages/mui-codemod/testUtils/**/*${EXTENSION_TS}`],
     extends: createTestConfig({
       useMocha: true,
     }),
@@ -113,7 +130,7 @@ export default defineConfig(
   // Test end
   // Docs start
   {
-    files: ['docs/**/*'],
+    files: [`docs/**/*${EXTENSION_TS}`],
     extends: createDocsConfig(),
     rules: {
       '@next/next/no-img-element': 'off',
@@ -128,7 +145,7 @@ export default defineConfig(
   },
   // Moved from docs/data/material/components/.eslintrc.js
   {
-    files: ['docs/data/material/components/**/*'],
+    files: [`docs/data/material/components/**/*${EXTENSION_TS}`],
     rules: {
       // useful for interactions feedback
       'no-console': ['off', { allow: ['info'] }],
@@ -138,7 +155,7 @@ export default defineConfig(
   },
   // demos
   {
-    files: ['docs/src/pages/**/*', 'docs/data/**/*'],
+    files: [`docs/src/pages/**/*${EXTENSION_TS}`, `docs/data/**/*${EXTENSION_TS}`],
     rules: {
       // This most often reports data that is defined after the component definition.
       // This is safe to do and helps readability of the demo code since the data is mostly irrelevant.
@@ -150,14 +167,14 @@ export default defineConfig(
   },
   // Next.js entry points pages
   {
-    files: ['docs/pages/**/*', 'packages/*/src/**/*.tsx'],
+    files: [`docs/pages/**/*${EXTENSION_TS}`, `packages/*/src/**/*.tsx`],
     ignores: ['**/*.spec.tsx'],
     rules: {
       'react/prop-types': 'off',
     },
   },
   {
-    files: ['docs/data/**/*'],
+    files: [`docs/data/**/*${EXTENSION_TS}`],
     ignores: [
       // filenames/match-exported sees filename as 'file-name.d'
       // Plugin looks unmaintain, find alternative? (e.g. eslint-plugin-project-structure)
@@ -174,7 +191,7 @@ export default defineConfig(
   },
   // Docs end
   {
-    files: ['**/*.d.ts'],
+    files: [`**/*${EXTENSION_DTS}`],
     rules: {
       'import/export': 'off', // Not sure why it doesn't work
     },
@@ -240,7 +257,7 @@ export default defineConfig(
   },
   // Migrated config from packages/mui-icons-material/.eslintrc.js
   {
-    files: ['packages/mui-icons-material/custom/**/*'],
+    files: [`packages/mui-icons-material/custom/**/*${EXTENSION_TS}`],
     rules: {
       'import/no-unresolved': 'off',
       'import/extensions': 'off',
@@ -249,54 +266,47 @@ export default defineConfig(
   // Migrated config from packages/api-docs-builder/.eslintrc.js
   {
     files: [
-      'packages/api-docs-builder/**/*',
+      `packages/api-docs-builder/**/*${EXTENSION_TS}`,
       // Allow named exports for locales: https://github.com/mui/material-ui/pull/46933
-      'packages/mui-material/src/locale/*',
+      `packages/mui-material/src/locale/*${EXTENSION_TS}`,
     ],
     rules: {
       'import/prefer-default-export': 'off',
     },
   },
   // Migrated config from packages/api-docs-builder-core/.eslintrc.js
   {
-    files: ['packages/api-docs-builder-core/**/*'],
+    files: [`packages/api-docs-builder-core/**/*${EXTENSION_TS}`],
     rules: {
       'import/no-default-export': 'error',
       'import/prefer-default-export': 'off',
     },
   },
   // Migrated config from apps/bare-next-app/.eslintrc.js
   {
-    files: ['apps/**/*', 'examples/**/*'],
+    files: [`apps/**/*${EXTENSION_TS}`, `examples/**/*${EXTENSION_TS}`],
     rules: {
       'import/no-relative-packages': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/prop-types': 'off',
+      'import/prefer-default-export': 'off',
     },
   },
   {
-    files: ['examples/**/*'],
+    files: [`apps/bare-next-app/**/*${EXTENSION_TS}`],
+    extends: [eslintPluginReact.configs.flat['jsx-runtime']],
     rules: {
       'import/extensions': 'off',
       'import/no-unresolved': 'off',
-      'no-console': 'off',
-    },
-  },
-  {
-    files: ['apps/pigment-css-vite-app/**/*'],
-    rules: {
-      'react/jsx-filename-extension': 'off',
-      'import/prefer-default-export': 'off',
+      'react/no-unknown-property': ['error', { ignore: ['sx'] }],
     },
   },
   {
-    files: ['apps/bare-next-app/**/*'],
-    extends: [eslintPluginReact.configs.flat['jsx-runtime']],
+    files: [`examples/**/*${EXTENSION_TS}`],
     rules: {
-      'import/prefer-default-export': 'off',
       'import/extensions': 'off',
       'import/no-unresolved': 'off',
-      'react/no-unknown-property': ['error', { ignore: ['sx'] }],
+      'no-console': 'off',
     },
   },
 );

examples/material-ui-vite/src/main.jsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App';
 import theme from './theme';
 
 const rootElement = document.getElementById('root');
-const root = createRoot(rootElement);
+const root = ReactDOM.createRoot(rootElement);
 
 root.render(
   <React.StrictMode>

package.json

@@ -36,7 +36,6 @@
     "docs:zipRules": "cd docs && rm mui-vale.zip && zip -r mui-vale.zip mui-vale && cd ../ && pnpm vale sync",
     "extract-error-codes": "code-infra extract-error-codes --errorCodesPath docs/public/static/error-codes.json --skip @mui/core-downloads-tracker @mui/envinfo @mui/docs @mui/codemod @mui/icons-material",
     "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots",
-    "jsonlint": "code-infra jsonlint",
     "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
     "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
     "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.?(c|m)[jt]s?(x)\" \"docs/**/*.css\" --ignore-path .lintignore",
@@ -110,7 +109,7 @@
     "@mui-internal/api-docs-builder-core": "workspace:^",
     "@mui/internal-bundle-size-checker": "^1.0.9-canary.47",
     "@mui/internal-babel-plugin-minify-errors": "^2.0.8-canary.10",
-    "@mui/internal-code-infra": "^0.0.3-canary.19",
+    "@mui/internal-code-infra": "^0.0.3-canary.26",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "^0.0.2-canary.0",
     "@mui/internal-scripts": "workspace:^",