diff --git a/babel.config.js b/babel.config.js index 4b2db95b51a9b5..68a4460b4a757b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,38 +1,16 @@ const path = require('path'); +const getMuiAliases = require('./scripts/muiAliases'); const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json'); const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate'; -function resolveAliasPath(relativeToBabelConf) { - const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf)); - return `./${resolvedPath.replace('\\', '/')}`; -} - const productionPlugins = [ ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }], ]; module.exports = function getBabelConfig(api) { const useESModules = api.env(['regressions', 'legacy', 'modern', 'stable', 'rollup']); - - const defaultAlias = { - '@mui/material': resolveAliasPath('./packages/mui-material/src'), - '@mui/docs': resolveAliasPath('./packages/mui-docs/src'), - '@mui/icons-material': resolveAliasPath( - `./packages/mui-icons-material/lib${useESModules ? '/esm' : ''}`, - ), - '@mui/lab': resolveAliasPath('./packages/mui-lab/src'), - '@mui/markdown': resolveAliasPath('./packages/markdown'), - '@mui/styled-engine': resolveAliasPath('./packages/mui-styled-engine/src'), - '@mui/styled-engine-sc': resolveAliasPath('./packages/mui-styled-engine-sc/src'), - '@mui/styles': resolveAliasPath('./packages/mui-styles/src'), - '@mui/system': resolveAliasPath('./packages/mui-system/src'), - '@mui/private-theming': resolveAliasPath('./packages/mui-private-theming/src'), - '@mui/base': resolveAliasPath('./packages/mui-base/src'), - '@mui/utils': resolveAliasPath('./packages/mui-utils/src'), - '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'), - '@mui/joy': resolveAliasPath('./packages/mui-joy/src'), - }; + const muiAliases = getMuiAliases({ type: 'src', isRelative: true, useESIcons: useESModules }); const presets = [ [ @@ -94,8 +72,8 @@ module.exports = function getBabelConfig(api) { plugins.push([ 'babel-plugin-module-resolver', { - alias: defaultAlias, root: ['./'], + alias: muiAliases, }, ]); } @@ -121,7 +99,7 @@ module.exports = function getBabelConfig(api) { 'babel-plugin-module-resolver', { root: ['./'], - alias: defaultAlias, + alias: muiAliases, }, ], ], @@ -131,12 +109,8 @@ module.exports = function getBabelConfig(api) { [ 'babel-plugin-module-resolver', { - alias: { - ...defaultAlias, - modules: './modules', - 'typescript-to-proptypes': './packages/typescript-to-proptypes/src', - }, root: ['./'], + alias: muiAliases, }, ], ], @@ -154,7 +128,7 @@ module.exports = function getBabelConfig(api) { 'babel-plugin-module-resolver', { root: ['./'], - alias: defaultAlias, + alias: muiAliases, }, ], ], @@ -165,7 +139,7 @@ module.exports = function getBabelConfig(api) { [ 'babel-plugin-module-resolver', { - alias: defaultAlias, + alias: muiAliases, }, ], ], diff --git a/docs/babel.config.js b/docs/babel.config.js index 2ac385186d98eb..57d4fab1b602af 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -3,27 +3,6 @@ const fse = require('fs-extra'); const errorCodesPath = path.resolve(__dirname, './public/static/error-codes.json'); -const alias = { - '@mui/material': '../packages/mui-material/src', - '@mui/docs': '../packages/mui-docs/src', - '@mui/icons-material': '../packages/mui-icons-material/lib', - '@mui/lab': '../packages/mui-lab/src', - '@mui/styles': '../packages/mui-styles/src', - '@mui/styled-engine-sc': '../packages/mui-styled-engine-sc/src', - // Swap the comments on the next two lines for using the styled-components as style engine - '@mui/styled-engine': '../packages/mui-styled-engine/src', - // '@mui/styled-engine': '../packages/mui-styled-engine-sc/src', - '@mui/system': '../packages/mui-system/src', - '@mui/private-theming': '../packages/mui-private-theming/src', - '@mui/utils': '../packages/mui-utils/src', - '@mui/base': '../packages/mui-base/src', - '@mui/material-next': '../packages/mui-material-next/src', - '@mui/joy': '../packages/mui-joy/src', - docs: './', - modules: '../modules', - pages: './pages', -}; - const { version: transformRuntimeVersion } = fse.readJSONSync( require.resolve('@babel/runtime-corejs2/package.json'), ); @@ -55,13 +34,6 @@ module.exports = { 'babel-plugin-optimize-clsx', // for IE11 support '@babel/plugin-transform-object-assign', - [ - 'babel-plugin-module-resolver', - { - alias, - transformFunctions: ['require', 'require.context'], - }, - ], ], ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue. env: { diff --git a/docs/next.config.js b/docs/next.config.js index 69338cc64e730f..4bd942475e6f71 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -3,6 +3,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const pkg = require('../package.json'); const withDocsInfra = require('./nextConfigDocsInfra'); const { findPages } = require('./src/modules/utils/find'); +const getMuiAliases = require('../scripts/muiAliases'); const { LANGUAGES, LANGUAGES_SSR, @@ -115,7 +116,7 @@ module.exports = withDocsInfra({ }, ], }, - // transpile 3rd party packages with dependencies in this repository + // Transpile dependencies outside this repository with dependencies in this repository { test: /\.(js|mjs|jsx)$/, resourceQuery: { not: [/raw/] }, @@ -131,22 +132,7 @@ module.exports = withDocsInfra({ [ 'babel-plugin-module-resolver', { - alias: { - // all packages in this monorepo - '@mui/material': '../packages/mui-material/src', - '@mui/docs': '../packages/mui-docs/src', - '@mui/icons-material': '../packages/mui-icons-material/lib', - '@mui/lab': '../packages/mui-lab/src', - '@mui/styled-engine': '../packages/mui-styled-engine/src', - '@mui/styles': '../packages/mui-styles/src', - '@mui/system': '../packages/mui-system/src', - '@mui/private-theming': '../packages/mui-private-theming/src', - '@mui/utils': '../packages/mui-utils/src', - '@mui/base': '../packages/mui-base/src', - '@mui/material-next': '../packages/mui-material-next/src', - '@mui/joy': '../packages/mui-joy/src', - }, - // transformFunctions: ['require'], + alias: getMuiAliases({ type: 'src' }), }, ], ], diff --git a/docs/package.json b/docs/package.json index ae72f60128c557..018f2f6feb83fa 100644 --- a/docs/package.json +++ b/docs/package.json @@ -59,7 +59,6 @@ "@react-spring/web": "^9.7.3", "autoprefixer": "^10.4.15", "autosuggest-highlight": "^3.3.4", - "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-optimize-clsx": "^2.6.2", "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", diff --git a/examples/base-ui-cra-ts/src/App.tsx b/examples/base-ui-cra-ts/src/App.tsx index e9c3576e76b3db..20b0d82bd5463d 100644 --- a/examples/base-ui-cra-ts/src/App.tsx +++ b/examples/base-ui-cra-ts/src/App.tsx @@ -6,10 +6,9 @@ export default function App() {

Base UI + Create React App scaffold (TypeScript)

- Base UI is a library of - unstyled React UI components which includes prebuilt components with production-ready - functionality, along with low-level hooks for transferring that functionality to other - components. + Base UI is a library of unstyled React UI components + which includes prebuilt components with production-ready functionality, along with low-level + hooks for transferring that functionality to other components.
Create React App is a framework for quickly diff --git a/packages/mui-joy/tsconfig.build.json b/packages/mui-joy/tsconfig.build.json index 92aea03c9be6b9..08d063fe1554a9 100644 --- a/packages/mui-joy/tsconfig.build.json +++ b/packages/mui-joy/tsconfig.build.json @@ -13,7 +13,8 @@ "include": ["./src/**/*.ts*"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"], "references": [ - { "path": "../mui-base/tsconfig.build.json" }, - { "path": "../mui-system/tsconfig.build.json" } + { "path": "../mui-utils/tsconfig.build.json" }, + { "path": "../mui-system/tsconfig.build.json" }, + { "path": "../mui-base/tsconfig.build.json" } ] } diff --git a/packages/mui-lab/tsconfig.build.json b/packages/mui-lab/tsconfig.build.json index f3c9573d726cf3..05bed3c5989845 100644 --- a/packages/mui-lab/tsconfig.build.json +++ b/packages/mui-lab/tsconfig.build.json @@ -3,16 +3,18 @@ // Actual .ts source files are transpiled via babel "extends": "./tsconfig.json", "compilerOptions": { - "noEmit": false, + "composite": true, "declaration": true, - "rootDir": "./src", - "outDir": "./build", - "emitDeclarationOnly": true + "noEmit": false, + "emitDeclarationOnly": true, + "outDir": "build", + "rootDir": "./src" }, "include": ["src/**/*.ts*"], "exclude": ["src/**/*.d.ts", "src/**/*.test.*", "./**/*.spec.*"], "references": [ - { "path": "../mui-material/tsconfig.build.json" }, - { "path": "../mui-system/tsconfig.build.json" } + { "path": "../mui-utils/tsconfig.build.json" }, + { "path": "../mui-system/tsconfig.build.json" }, + { "path": "../mui-material/tsconfig.build.json" } ] } diff --git a/packages/mui-material-next/tsconfig.build.json b/packages/mui-material-next/tsconfig.build.json index 99aed0580da8a7..3afca6763e8300 100644 --- a/packages/mui-material-next/tsconfig.build.json +++ b/packages/mui-material-next/tsconfig.build.json @@ -13,8 +13,8 @@ "include": ["./src/**/*.ts*"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"], "references": [ + { "path": "../mui-utils/tsconfig.build.json" }, { "path": "../mui-base/tsconfig.build.json" }, - { "path": "../mui-material/tsconfig.build.json" }, - { "path": "../mui-system/tsconfig.build.json" } + { "path": "../mui-material/tsconfig.build.json" } ] } diff --git a/packages/mui-material/tsconfig.build.json b/packages/mui-material/tsconfig.build.json index 92aea03c9be6b9..08d063fe1554a9 100644 --- a/packages/mui-material/tsconfig.build.json +++ b/packages/mui-material/tsconfig.build.json @@ -13,7 +13,8 @@ "include": ["./src/**/*.ts*"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"], "references": [ - { "path": "../mui-base/tsconfig.build.json" }, - { "path": "../mui-system/tsconfig.build.json" } + { "path": "../mui-utils/tsconfig.build.json" }, + { "path": "../mui-system/tsconfig.build.json" }, + { "path": "../mui-base/tsconfig.build.json" } ] } diff --git a/scripts/muiAliases.js b/scripts/muiAliases.js new file mode 100644 index 00000000000000..7fb2889ac3b4bd --- /dev/null +++ b/scripts/muiAliases.js @@ -0,0 +1,46 @@ +const path = require('path'); + +/** + * @param {object} params The parameters of the function. + * @param {'build' | 'src'} params.type Define if the target should be the built version or the source. + * @param {boolean | undefined} params.isRelative If `true` the path will be relative to the repository root. + * @param {boolean | undefined} params.useESIcons If `true` will use the ES version of `@mui/icons-material`. + */ +function getMuiAliases({ type, isRelative = false, useESIcons = false }) { + const workspaceRoot = path.join(__dirname, '..'); + + const resolveAliasPath = (aliasPath) => { + const fullPath = path.join(workspaceRoot, aliasPath); + + if (!isRelative) { + return fullPath; + } + + const resolvedPath = path.relative(process.cwd(), fullPath); + return `./${resolvedPath.replace('\\', '/')}`; + }; + + return { + '@mui/base': resolveAliasPath(`packages/mui-base/${type}`), + '@mui/docs': resolveAliasPath(`packages/mui-docs/${type}`), + '@mui/icons-material': resolveAliasPath( + `packages/mui-icons-material/lib${useESIcons ? '/esm' : ''}`, + ), + '@mui/joy': resolveAliasPath(`packages/mui-joy/${type}`), + '@mui/lab': resolveAliasPath(`packages/mui-lab/${type}`), + '@mui/markdown': resolveAliasPath('packages/markdown'), + '@mui/material': resolveAliasPath(`packages/mui-material/${type}`), + '@mui/material-next': resolveAliasPath(`packages/mui-material-next/${type}`), + '@mui/private-theming': resolveAliasPath(`packages/mui-private-theming/${type}`), + '@mui/styled-engine': resolveAliasPath(`packages/mui-styled-engine/${type}`), + '@mui/styled-engine-sc': resolveAliasPath(`packages/mui-styled-engine-sc/${type}`), + '@mui/styles': resolveAliasPath(`packages/mui-styles/${type}`), + '@mui/system': resolveAliasPath(`packages/mui-system/${type}`), + '@mui/utils': resolveAliasPath(`packages/mui-utils/${type}`), + docs: resolveAliasPath('docs'), + modules: resolveAliasPath('modules'), + 'typescript-to-proptypes': resolveAliasPath('packages/typescript-to-proptypes/src'), + }; +} + +module.exports = getMuiAliases; diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index fe935fd850052a..628c5d943dd7d6 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -3,6 +3,7 @@ const CompressionPlugin = require('compression-webpack-plugin'); const glob = require('fast-glob'); const TerserPlugin = require('terser-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const getMuiAliases = require('../muiAliases'); const workspaceRoot = path.join(__dirname, '..', '..'); @@ -175,7 +176,7 @@ function createWebpackConfig(entry, environment) { const configuration = { // ideally this would be computed from the bundles peer dependencies // Ensure that `react` as well as `react/*` are considered externals but not `react*` - externals: /^(date-fns|dayjs|luxon|moment|react|react-dom)(\/.*)?$/, + externals: /^(react|react-dom)(\/.*)?$/, mode: 'production', optimization: { concatenateModules, @@ -208,19 +209,7 @@ function createWebpackConfig(entry, environment) { }), ], resolve: { - alias: { - '@mui/material': path.join(workspaceRoot, 'packages/mui-material/build'), - '@mui/lab': path.join(workspaceRoot, 'packages/mui-lab/build'), - '@mui/styled-engine': path.join(workspaceRoot, 'packages/mui-styled-engine/build'), - '@mui/styled-engine-sc': path.join(workspaceRoot, 'packages/mui-styles-sc/build'), - '@mui/styles': path.join(workspaceRoot, 'packages/mui-styles/build'), - '@mui/system': path.join(workspaceRoot, 'packages/mui-system/build'), - '@mui/private-theming': path.join(workspaceRoot, 'packages/mui-private-theming/build'), - '@mui/utils': path.join(workspaceRoot, 'packages/mui-utils/build'), - '@mui/base': path.join(workspaceRoot, 'packages/mui-base/build'), - '@mui/material-next': path.join(workspaceRoot, 'packages/mui-material-next/build'), - '@mui/joy': path.join(workspaceRoot, 'packages/mui-joy/build'), - }, + alias: getMuiAliases({ type: 'build' }), }, entry: { [entry.id]: path.join(workspaceRoot, entry.path) }, // TODO: 'browserslist:modern' diff --git a/test/karma.conf.js b/test/karma.conf.js index 2f975fb47822bc..e7721be2e35ea0 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,6 +1,7 @@ const path = require('path'); const playwright = require('playwright'); const webpack = require('webpack'); +const getMuiAliases = require('../scripts/muiAliases'); const CI = Boolean(process.env.CI); // renovate PRs are based off of upstream branches. @@ -133,36 +134,22 @@ module.exports = function setKarmaConfig(config) { envName: 'stable', }, }, - // transpile 3rd party packages with dependencies in this repository + // Transpile dependencies outside this repository with dependencies in this repository + // TODO: Remove when the lab will stop exporting components from `@mui/x-tree-view` { test: /\.(js|mjs|jsx)$/, - include: - /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers|@mui(\/|\\)x-tree-view)/, + include: /node_modules(\/|\\)@mui(\/|\\)x-tree-view/, use: { loader: 'babel-loader', options: { - // We have to apply `babel-plugin-module-resolve` to the files in `@mui/x-date-pickers`. - // Otherwise we can't import `@mui/material` from `@mui/x-date-pickers` in `yarn test:karma`. + // We have to apply `babel-plugin-module-resolve` to the files in `@mui/x-tree-view`. + // Otherwise, we can't import `@mui/material` from `@mui/x-tree-view` in `yarn test:karma`. sourceType: 'unambiguous', plugins: [ [ 'babel-plugin-module-resolver', { - alias: { - // all packages in this monorepo - '@mui/material': './packages/mui-material/src', - '@mui/docs': './packages/mui-docs/src', - '@mui/icons-material': './packages/mui-icons-material/lib', - '@mui/lab': './packages/mui-lab/src', - '@mui/styled-engine': './packages/mui-styled-engine/src', - '@mui/styles': './packages/mui-styles/src', - '@mui/system': './packages/mui-system/src', - '@mui/private-theming': './packages/mui-private-theming/src', - '@mui/utils': './packages/mui-utils/src', - '@mui/base': './packages/mui-base/src', - '@mui/material-next': './packages/mui-material-next/src', - '@mui/joy': './packages/mui-joy/src', - }, + alias: getMuiAliases({ type: 'src', isRelative: true }), transformFunctions: ['require'], }, ], diff --git a/tsconfig.json b/tsconfig.json index f18dfa4f29d3ca..1b2a7bdb457b90 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,36 +14,44 @@ "noErrorTruncation": false, "allowJs": true, "paths": { - "@mui/material": ["./packages/mui-material/src"], - "@mui/material/*": ["./packages/mui-material/src/*"], + "@mui/base": ["./packages/mui-base/src"], + "@mui/base/*": ["./packages/mui-base/src/*"], + "@mui/docs": ["./packages/mui-docs/src"], + "@mui/docs/*": ["./packages/mui-docs/src/*"], + "@mui/icons-material": ["./packages/mui-icons-material/lib"], + "@mui/icons-material/*": ["./packages/mui-icons-material/lib/*"], + "@mui/joy": ["./packages/mui-joy/src"], + "@mui/joy/*": ["./packages/mui-joy/src/*"], "@mui/lab": ["./packages/mui-lab/src"], "@mui/lab/*": ["./packages/mui-lab/src/*"], "@mui/markdown": ["./packages/markdown"], "@mui/markdown/*": ["./packages/markdown/*"], + "@mui/material": ["./packages/mui-material/src"], + "@mui/material/*": ["./packages/mui-material/src/*"], + "@mui/material-next": ["./packages/mui-material-next/src"], + "@mui/material-next/*": ["./packages/mui-material-next/src/*"], + "@mui/private-theming": ["./packages/mui-private-theming/src"], + "@mui/private-theming/*": ["./packages/mui-private-theming/src/*"], + // Swap the comments on the next four lines for using the styled-components as style engine "@mui/styled-engine": ["./packages/mui-styled-engine/src"], "@mui/styled-engine/*": ["./packages/mui-styled-engine/src/*"], + // "@mui/styled-engine": ["./packages/mui-styled-engine-sc/src"], + // "@mui/styled-engine/*": ["./packages/mui-styled-engine-sc/src/*"], "@mui/styled-engine-sc": ["./packages/mui-styled-engine-sc/src"], "@mui/styled-engine-sc/*": ["./packages/mui-styled-engine-sc/src/*"], "@mui/styles": ["./packages/mui-styles/src"], "@mui/styles/*": ["./packages/mui-styles/src/*"], "@mui/system": ["./packages/mui-system/src"], "@mui/system/*": ["./packages/mui-system/src/*"], - "@mui/private-theming": ["./packages/mui-private-theming/src"], - "@mui/private-theming/*": ["./packages/mui-private-theming/src/*"], "@mui/types": ["./packages/mui-types"], - "@mui/base": ["./packages/mui-base/src"], - "@mui/base/*": ["./packages/mui-base/src/*"], "@mui/utils": ["./packages/mui-utils/src"], "@mui/utils/*": ["./packages/mui-utils/src/*"], - "@mui/docs": ["./packages/mui-docs/src"], - "@mui/docs/*": ["./packages/mui-docs/src/*"], - "@mui/material-next": ["./packages/mui-material-next/src"], - "@mui/material-next/*": ["./packages/mui-material-next/src/*"], - "@mui/joy": ["./packages/mui-joy/src"], - "@mui/joy/*": ["./packages/mui-joy/src/*"], "@mui/zero-runtime/*": ["./packages/zero-runtime/src/*"], "@mui/zero-tag-processor/*": ["./packages/zero-tag-processor/src/*"], "@mui/zero-vite-plugin/*": ["./packages/zero-vite-plugin/src/*"], + "docs/*": ["./docs/*"], + "modules/*": ["./modules/*"], + "pages/*": ["./docs/pages"], "test/*": ["./test/*"], "typescript-to-proptypes": ["./packages/typescript-to-proptypes/src"] }, diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 0b9c59bdf248fb..a136cd4c3ca07d 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -1,4 +1,5 @@ const path = require('path'); +const getMuiAliases = require('./scripts/muiAliases'); // WARNING: Use this module only as an inspiration. // Cherry-pick the parts you need and inline them in the webpack.config you need. @@ -8,24 +9,7 @@ module.exports = { context: path.resolve(__dirname), resolve: { modules: [__dirname, 'node_modules'], - alias: { - '@mui/markdown': path.resolve(__dirname, './packages/markdown'), - '@mui/material': path.resolve(__dirname, './packages/mui-material/src'), - '@mui/docs': path.resolve(__dirname, './packages/mui-docs/src'), - '@mui/icons-material': path.resolve(__dirname, './packages/mui-icons-material/lib/esm'), - '@mui/lab': path.resolve(__dirname, './packages/mui-lab/src'), - '@mui/styled-engine': path.resolve(__dirname, './packages/mui-styled-engine/src'), - '@mui/styled-engine-sc': path.resolve(__dirname, './packages/mui-styled-engine-sc/src'), - '@mui/styles': path.resolve(__dirname, './packages/mui-styles/src'), - '@mui/system': path.resolve(__dirname, './packages/mui-system/src'), - '@mui/private-theming': path.resolve(__dirname, './packages/mui-private-theming/src'), - '@mui/base': path.resolve(__dirname, './packages/mui-base/src'), - '@mui/utils': path.resolve(__dirname, './packages/mui-utils/src'), - '@mui/material-next': path.resolve(__dirname, './packages/mui-material-next/src'), - '@mui/joy': path.resolve(__dirname, './packages/mui-joy/src'), - 'typescript-to-proptypes': path.resolve(__dirname, './packages/typescript-to-proptypes/src'), - docs: path.resolve(__dirname, './docs'), - }, + alias: getMuiAliases({ type: 'src', useESIcons: true }), extensions: ['.js', '.ts', '.tsx', '.d.ts'], }, };