[code-infra] Move next config to ESM (mui#11882)

Author: Janpot

.eslintrc.js

@@ -122,6 +122,12 @@ module.exports = {
         'filenames/match-exported': ['error'],
       },
     },
+    {
+      files: ['**/*.mjs'],
+      rules: {
+        'import/extensions': ['error', 'ignorePackages'],
+      },
+    },
     {
       files: ['packages/*/src/**/*{.ts,.tsx,.js}'],
       excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx'],

docs/constants.js

@@ -0,0 +1,6 @@
+// These are also loaded by scripts that only undestand CommonJS. (l10n)
+
+module.exports = {
+  SOURCE_CODE_REPO: 'https://github.com/mui/mui-x',
+  SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch
+};

docs/next.config.js renamed to docs/next.config.mjs

@@ -1,28 +1,44 @@
 // @ts-check
-const path = require('path');
-// @ts-ignore
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-// const withTM = require('next-transpile-modules')(['@mui/monorepo']);
+import * as path from 'path';
+import * as url from 'url';
+import * as fs from 'fs';
+import { createRequire } from 'module';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+// const withTM from 'next-transpile-modules')(['@mui/monorepo'];
 // @ts-expect-error This expected error should be gone once we update the monorepo
-const withDocsInfra = require('@mui/monorepo/docs/nextConfigDocsInfra');
-const pkg = require('../package.json');
-const dataGridPkg = require('../packages/grid/x-data-grid/package.json');
-const datePickersPkg = require('../packages/x-date-pickers/package.json');
-const chartsPkg = require('../packages/x-charts/package.json');
-const treeViewPkg = require('../packages/x-tree-view/package.json');
-const { findPages } = require('./src/modules/utils/find');
-const { LANGUAGES, LANGUAGES_SSR } = require('./config');
+import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
+import { findPages } from './src/modules/utils/find.mjs';
+import { LANGUAGES, LANGUAGES_SSR } from './config.js';
+import constants from './constants.js';
 
-const workspaceRoot = path.join(__dirname, '../');
+const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
+const require = createRequire(import.meta.url);
 
-module.exports = withDocsInfra({
+const workspaceRoot = path.join(currentDirectory, '../');
+
+/**
+ * @param {string} pkgPath
+ * @returns {{version: string}}
+ */
+function loadPkg(pkgPath) {
+  const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, pkgPath, 'package.json'), 'utf8');
+  return JSON.parse(pkgContent);
+}
+
+const pkg = loadPkg('.');
+const dataGridPkg = loadPkg('./packages/grid/x-data-grid');
+const datePickersPkg = loadPkg('./packages/x-date-pickers');
+const chartsPkg = loadPkg('./packages/x-charts');
+const treeViewPkg = loadPkg('./packages/x-tree-view');
+
+export default withDocsInfra({
   // Avoid conflicts with the other Next.js apps hosted under https://mui.com/
   assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/x',
   env: {
     // docs-infra
     LIB_VERSION: pkg.version,
-    SOURCE_CODE_REPO: 'https://github.com/mui/mui-x',
-    SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch
+    SOURCE_CODE_REPO: constants.SOURCE_CODE_REPO,
+    SOURCE_GITHUB_BRANCH: constants.SOURCE_GITHUB_BRANCH,
     GITHUB_TEMPLATE_DOCS_FEEDBACK: '6.docs-feedback.yml',
     // MUI X related
     DATA_GRID_VERSION: dataGridPkg.version,
@@ -56,8 +72,8 @@ module.exports = withDocsInfra({
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          docs: path.resolve(__dirname, '../node_modules/@mui/monorepo/docs'),
-          docsx: path.resolve(__dirname, '../docs'),
+          docs: path.resolve(currentDirectory, '../node_modules/@mui/monorepo/docs'),
+          docsx: path.resolve(currentDirectory, '../docs'),
         },
       },
       module: {

docs/package.json

@@ -94,6 +94,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@types/doctrine": "^0.0.9",
     "@types/stylis": "^4.2.5",
+    "@types/webpack-bundle-analyzer": "^4.6.3",
     "cpy-cli": "^5.0.0",
     "gm": "^1.25.0",
     "typescript-to-proptypes": "^2.2.1"

docs/src/modules/utils/find.js renamed to docs/src/modules/utils/find.mjs

@@ -1,15 +1,18 @@
-const fs = require('fs');
-const path = require('path');
+import * as fs from 'fs';
+import * as path from 'path';
+import * as url from 'url';
+
+const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 
 const jsRegex = /\.js$/;
 const blackList = ['/.eslintrc', '/_document', '/_app'];
 
 // Returns the Next.js pages available in a nested format.
 // The output is in the next.js format.
 // Each pathname is a route you can navigate to.
-function findPages(
+export function findPages(
   options = {},
-  directory = path.resolve(__dirname, '../../../pages'),
+  directory = path.resolve(currentDirectory, '../../../pages'),
   pages = [],
 ) {
   fs.readdirSync(directory).forEach((item) => {
@@ -71,7 +74,3 @@ function findPages(
 
   return pages;
 }
-
-module.exports = {
-  findPages,
-};

docs/src/modules/utils/findPages.js

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "allowJs": true,
     "isolatedModules": true,
     /* files are emitted by babel */
     "noEmit": true,
@@ -14,7 +15,7 @@
     "pages/**/*.ts*",
     "data/**/*",
     "src/modules/components/**/*",
-    "next.config.js",
+    "next.config.mjs",
     "../node_modules/@mui/material/themeCssVarsAugmentation",
     "../node_modules/dayjs/plugin/utc.d.ts",
     "../node_modules/dayjs/plugin/timezone.d.ts",

docs/tsconfig.json

@@ -9,7 +9,10 @@ import * as yargs from 'yargs';
 import { Octokit } from '@octokit/rest';
 import { retry } from '@octokit/plugin-retry';
 import localeNames from './localeNames';
-import nextConfig from '../docs/next.config';
+import {
+  SOURCE_CODE_REPO as DOCS_SOURCE_CODE_REPO,
+  SOURCE_GITHUB_BRANCH as DOCS_SOURCE_GITHUB_BRANCH,
+} from '../docs/constants';
 
 const MyOctokit = Octokit.plugin(retry);
 
@@ -344,7 +347,7 @@ const generateDocReport = async (
         localeName,
         missingKeysCount: infoPerPackage[packageKey].missingKeys.length,
         totalKeysCount: baseTranslationsNumber[packageKey],
-        githubLink: `${nextConfig.env.SOURCE_CODE_REPO}/blob/${nextConfig.env.SOURCE_GITHUB_BRANCH}/${info.path}`,
+        githubLink: `${DOCS_SOURCE_CODE_REPO}/blob/${DOCS_SOURCE_GITHUB_BRANCH}/${info.path}`,
       });
     });
 

scripts/l10n.ts

@@ -3373,6 +3373,15 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.10.tgz#04ffa7f406ab628f7f7e97ca23e290cd8ab15efc"
   integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
 
+"@types/webpack-bundle-analyzer@^4.6.3":
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/@types/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.6.3.tgz#53c26f21134ca2e5049fd2af4f2ffbf8dfe87b4f"
+  integrity sha512-XYU3m7oRb1tlE8YhwkKLi1xba2buNB9V4VkQtOVTfJuUm/413pE/UCMVcPDFFBwpzGkr9y1WbSEvdPjKVPt0gw==
+  dependencies:
+    "@types/node" "*"
+    tapable "^2.2.0"
+    webpack "^5"
+
 "@types/ws@^7.4.7":
   version "7.4.7"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702"
@@ -14852,7 +14861,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.90.0:
+webpack@^5, webpack@^5.90.0:
   version "5.90.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.0.tgz#313bfe16080d8b2fee6e29b6c986c0714ad4290e"
   integrity sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w==