From 1bdda70b7c4fe02079f2a20631c505e6c19d80b3 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 13 May 2024 10:18:32 +0200 Subject: [PATCH] Shift aliasing from babel to webpack (#13051) --- docs/babel.config.js | 31 +------------- docs/next.config.mjs | 69 +++++++++++++++++++++++--------- docs/package.json | 1 + docs/scripts/formattedTSDemos.js | 5 ++- pnpm-lock.yaml | 30 ++++++++++++++ 5 files changed, 85 insertions(+), 51 deletions(-) diff --git a/docs/babel.config.js b/docs/babel.config.js index 939795a4f573d..b7c85c75e8f34 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -1,25 +1,6 @@ const fse = require('fs-extra'); const getBaseConfig = require('../babel.config'); -const alias = { - '@mui/x-data-grid': '../packages/x-data-grid/src', - '@mui/x-data-grid-generator': '../packages/x-data-grid-generator/src', - '@mui/x-data-grid-pro': '../packages/x-data-grid-pro/src', - '@mui/x-data-grid-premium': '../packages/x-data-grid-premium/src', - '@mui/x-date-pickers': '../packages/x-date-pickers/src', - '@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src', - '@mui/x-charts': '../packages/x-charts/src', - '@mui/x-tree-view': '../packages/x-tree-view/src', - '@mui/x-tree-view-pro': '../packages/x-tree-view-pro/src', - '@mui/x-license': '../packages/x-license/src', - '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src', - '@mui/monorepo': '../node_modules/@mui/monorepo', - '@mui/material-nextjs': '../node_modules/@mui/monorepo/packages/mui-material-nextjs/src', - '@mui-internal/api-docs-builder': '../node_modules/@mui/monorepo/packages/api-docs-builder', - docs: '../node_modules/@mui/monorepo/docs', - docsx: './', -}; - const { version: transformRuntimeVersion } = fse.readJSONSync( require.resolve('@babel/runtime-corejs2/package.json'), ); @@ -33,17 +14,7 @@ module.exports = function getBabelConfig(api) { // backport of https://github.com/zeit/next.js/pull/9511 ['next/babel', { 'transform-runtime': { corejs: 2, version: transformRuntimeVersion } }], ], - plugins: [ - ...baseConfig.plugins, - 'babel-plugin-preval', - [ - 'babel-plugin-module-resolver', - { - alias, - transformFunctions: ['require', 'require.context'], - }, - ], - ], + plugins: [...baseConfig.plugins, 'babel-plugin-preval'], ignore: [...baseConfig.ignore, /@mui[\\|/]docs[\\|/]markdown/], }; }; diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 4b157e63382f4..f72e1399a49fc 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -19,14 +19,34 @@ import constants from './constants.js'; const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url)); const require = createRequire(import.meta.url); -const workspaceRoot = path.join(currentDirectory, '../'); +const WORKSPACE_ROOT = path.resolve(currentDirectory, '../'); +const MONOREPO_PATH = path.resolve(WORKSPACE_ROOT, './node_modules/@mui/monorepo'); +const MONOREPO_ALIASES = { + '@mui/docs': path.resolve(MONOREPO_PATH, './packages/mui-docs/src'), +}; + +const WORKSPACE_ALIASES = { + '@mui/x-data-grid': path.resolve(WORKSPACE_ROOT, './packages/x-data-grid/src'), + '@mui/x-data-grid-generator': path.resolve( + WORKSPACE_ROOT, + './packages/x-data-grid-generator/src', + ), + '@mui/x-data-grid-pro': path.resolve(WORKSPACE_ROOT, './packages/x-data-grid-pro/src'), + '@mui/x-data-grid-premium': path.resolve(WORKSPACE_ROOT, './packages/x-data-grid-premium/src'), + '@mui/x-date-pickers': path.resolve(WORKSPACE_ROOT, './packages/x-date-pickers/src'), + '@mui/x-date-pickers-pro': path.resolve(WORKSPACE_ROOT, './packages/x-date-pickers-pro/src'), + '@mui/x-charts': path.resolve(WORKSPACE_ROOT, './packages/x-charts/src'), + '@mui/x-tree-view': path.resolve(WORKSPACE_ROOT, './packages/x-tree-view/src'), + '@mui/x-tree-view-pro': path.resolve(WORKSPACE_ROOT, './packages/x-tree-view-pro/src'), + '@mui/x-license': path.resolve(WORKSPACE_ROOT, './packages/x-license/src'), +}; /** * @param {string} pkgPath * @returns {{version: string}} */ function loadPkg(pkgPath) { - const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, pkgPath, 'package.json'), 'utf8'); + const pkgContent = fs.readFileSync(path.resolve(WORKSPACE_ROOT, pkgPath, 'package.json'), 'utf8'); return JSON.parse(pkgContent); } @@ -38,10 +58,18 @@ const treeViewPkg = loadPkg('./packages/x-tree-view'); let localSettings = {}; try { + // eslint-disable-next-line import/no-unresolved localSettings = require('./next.config.local.js'); -} catch (_) {} +} catch (_) { + // Ignore +} export default withDocsInfra({ + transpilePackages: [ + // TODO, those shouldn't be needed in the first place + '@mui/monorepo', // Migrate everything to @mui/docs until the @mui/monorepo dependency becomes obsolete + '@mui/docs', + ], // Avoid conflicts with the other Next.js apps hosted under https://mui.com/ assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/x', env: { @@ -73,20 +101,29 @@ export default withDocsInfra({ ); } - const includesMonorepo = [/(@mui[\\/]monorepo)$/, /(@mui[\\/]monorepo)[\\/](?!.*node_modules)/]; - return { ...config, plugins, + // TODO, this shouldn't be needed in the first place + // Migrate everything from @mui/monorepo to @mui/docs and embed @mui/internal-markdown in @mui/docs + resolveLoader: { + ...config.resolveLoader, + alias: { + ...config.resolveLoader.alias, + '@mui/internal-markdown/loader': path.resolve( + MONOREPO_PATH, + './packages/markdown/loader', + ), + }, + }, resolve: { ...config.resolve, alias: { ...config.resolve.alias, - '@mui/docs': path.resolve( - currentDirectory, - '../node_modules/@mui/monorepo/packages/mui-docs/src', - ), - docs: path.resolve(currentDirectory, '../node_modules/@mui/monorepo/docs'), + ...MONOREPO_ALIASES, + ...WORKSPACE_ALIASES, + // TODO: get rid of this, replace with @mui/docs + docs: path.resolve(MONOREPO_PATH, './docs'), docsx: path.resolve(currentDirectory, '../docs'), }, }, @@ -102,9 +139,9 @@ export default withDocsInfra({ use: [ options.defaultLoaders.babel, { - loader: require.resolve('@mui/internal-markdown/loader'), + loader: '@mui/internal-markdown/loader', options: { - workspaceRoot, + workspaceRoot: WORKSPACE_ROOT, ignoreLanguagePages: LANGUAGES_IGNORE_PAGES, languagesInProgress: LANGUAGES_IN_PROGRESS, env: { @@ -119,13 +156,7 @@ export default withDocsInfra({ }, { test: /\.+(js|jsx|mjs|ts|tsx)$/, - include: includesMonorepo, - use: options.defaultLoaders.babel, - }, - { - test: /\.(js|mjs|ts|tsx)$/, - include: [workspaceRoot], - exclude: /node_modules/, + include: [/(@mui[\\/]monorepo)$/, /(@mui[\\/]monorepo)[\\/](?!.*node_modules)/], use: options.defaultLoaders.babel, }, { diff --git a/docs/package.json b/docs/package.json index 88735bebc31da..98aa0f26f34e9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,6 +32,7 @@ "@mui/joy": "^5.0.0-beta.32", "@mui/lab": "^5.0.0-alpha.169", "@mui/material": "^5.15.14", + "@mui/material-nextjs": "^5.15.11", "@mui/styles": "^5.15.14", "@mui/system": "^5.15.14", "@mui/utils": "^5.15.14", diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index 586c5f9e8565c..10ca79e00b422 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -20,7 +20,8 @@ const yargs = require('yargs'); const ts = require('typescript'); const { fixBabelGeneratorIssues, fixLineEndings } = require('./helpers'); -const tsConfigPath = path.resolve(__dirname, '../tsconfig.json'); +const DOCS_ROOT = path.resolve(__dirname, '..'); +const tsConfigPath = path.resolve(DOCS_ROOT, './tsconfig.json'); const tsConfigFile = ts.readConfigFile(tsConfigPath, (filePath) => fs.readFileSync(filePath).toString(), ); @@ -95,7 +96,7 @@ async function transpileFile(tsxPath, program, ignoreCache = false) { if (enableJSXPreview) { transformOptions.plugins = transformOptions.plugins.concat([ [ - require.resolve('docsx/src/modules/utils/babel-plugin-jsx-preview'), + path.resolve(DOCS_ROOT, './src/modules/utils/babel-plugin-jsx-preview'), { maxLines: 16, outputFilename: `${tsxPath}.preview` }, ], ]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ab7762170c9f..cbc91420bc576 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -431,6 +431,9 @@ importers: '@mui/material': specifier: ^5.15.14 version: 5.15.15(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0) + '@mui/material-nextjs': + specifier: ^5.15.11 + version: 5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.15)(@types/react@18.2.60)(next@14.2.3)(react@18.2.0) '@mui/styles': specifier: ^5.15.14 version: 5.15.15(@types/react@18.2.60)(react@18.2.0) @@ -3673,6 +3676,33 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@mui/material-nextjs@5.15.11(@emotion/cache@11.11.0)(@emotion/server@11.11.0)(@mui/material@5.15.15)(@types/react@18.2.60)(next@14.2.3)(react@18.2.0): + resolution: {integrity: sha512-cp5RWYbBngyi7NKP91R9QITllfxumCVPFjqe4AKzNROVuCot0VpgkafxXqfbv0uFsyUU0ROs0O2M3r17q604Aw==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/cache': ^11.11.0 + '@emotion/server': ^11.11.0 + '@mui/material': ^5.0.0 + '@types/react': ^17.0.0 || ^18.0.0 + next: ^13.0.0 || ^14.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/cache': + optional: true + '@emotion/server': + optional: true + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/cache': 11.11.0 + '@emotion/server': 11.11.0 + '@mui/material': 5.15.15(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.60 + next: 14.2.3(@babel/core@7.24.4)(@playwright/test@1.43.1)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + dev: false + /@mui/material@5.15.15(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.60)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==} engines: {node: '>=12.0.0'}