From c4c1a7ecd0cad3bf82abb91fea7e9eb253fd706e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Wed, 2 Oct 2024 08:56:36 +0200 Subject: [PATCH 1/3] Change the output directory layout --- packages/mui-base/package.json | 7 ++++++- packages/mui-base/tsconfig.build.json | 2 +- scripts/build.mjs | 24 ++++++------------------ scripts/copyFiles.mjs | 3 --- scripts/copyFilesUtils.mjs | 19 ++++++++----------- 5 files changed, 21 insertions(+), 34 deletions(-) diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index eb9bf5135..a98474bc1 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -4,7 +4,6 @@ "private": false, "author": "MUI Team", "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.", - "main": "./src/index.ts", "keywords": [ "react", "react-component", @@ -26,9 +25,15 @@ "type": "opencollective", "url": "https://opencollective.com/mui-org" }, + "exports": { + "./*": { + "import": "./src/*/index.ts" + } + }, "imports": { "#test-utils": "./test/index.ts" }, + "type": "commonjs", "scripts": { "build": "pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:node": "node ../../scripts/build.mjs node", diff --git a/packages/mui-base/tsconfig.build.json b/packages/mui-base/tsconfig.build.json index 0ea89a8bd..8b13c86ad 100644 --- a/packages/mui-base/tsconfig.build.json +++ b/packages/mui-base/tsconfig.build.json @@ -10,7 +10,7 @@ "moduleResolution": "bundler", "noEmit": false, "rootDir": "./src", - "outDir": "build" + "outDir": "build/types" }, "include": ["src/**/*.ts*"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"] diff --git a/scripts/build.mjs b/scripts/build.mjs index 4310c1638..7e1c3cfa3 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -1,5 +1,4 @@ import childProcess from 'child_process'; -import glob from 'fast-glob'; import path from 'path'; import { promisify } from 'util'; import yargs from 'yargs'; @@ -40,26 +39,11 @@ async function run(argv) { '**/*.d.ts', ]; - const topLevelNonIndexFiles = glob - .sync(`*{${extensions.join(',')}}`, { cwd: srcDir, ignore }) - .filter((file) => { - return path.basename(file, path.extname(file)) !== 'index'; - }); - const topLevelPathImportsCanBePackages = topLevelNonIndexFiles.length === 0; - const outDir = path.resolve( relativeOutDir, - // We generally support top level path imports e.g. - // 1. `import ArrowDownIcon from '@mui/icons-material/ArrowDown'`. - // 2. `import Typography from '@mui/material/Typography'`. - // The first case resolves to a file while the second case resolves to a package first i.e. a package.json - // This means that only in the second case the bundler can decide whether it uses ES modules or CommonJS modules. - // Different extensions are not viable yet since they require additional bundler config for users and additional transpilation steps in our repo. - // - // TODO v6: Switch to `exports` field. { - node: topLevelPathImportsCanBePackages ? './node' : './', - stable: topLevelPathImportsCanBePackages ? './' : './esm', + node: './cjs', + stable: './esm', }[bundle], ); @@ -91,6 +75,10 @@ async function run(argv) { throw new Error(`'${command}' failed with \n${stderr}`); } + if (bundle === 'stable') { + await exec(`echo { "type": "module" } > ${path.join(outDir, 'package.json')}`); + } + if (verbose) { // eslint-disable-next-line no-console console.log(stdout); diff --git a/scripts/copyFiles.mjs b/scripts/copyFiles.mjs index 20bd9d2dd..a59613526 100644 --- a/scripts/copyFiles.mjs +++ b/scripts/copyFiles.mjs @@ -1,7 +1,6 @@ /* eslint-disable no-console */ import path from 'path'; import { - createModulePackages, createPackageFile, includeFileInBuild, prepend, @@ -52,8 +51,6 @@ async function run() { ); await addLicense(packageData); - - await createModulePackages({ from: srcPath, to: buildPath }); } catch (err) { console.error(err); process.exit(1); diff --git a/scripts/copyFilesUtils.mjs b/scripts/copyFilesUtils.mjs index 40b055426..2f0713267 100644 --- a/scripts/copyFilesUtils.mjs +++ b/scripts/copyFilesUtils.mjs @@ -93,22 +93,19 @@ export async function typescriptCopy({ from, to }) { export async function createPackageFile() { const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8'); - const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } = + const { imports, exports, nyc, scripts, devDependencies, workspaces, ...packageDataOther } = JSON.parse(packageData); const newPackageData = { ...packageDataOther, private: false, - ...(packageDataOther.main - ? { - main: fse.existsSync(path.resolve(buildPath, './node/index.js')) - ? './node/index.js' - : './index.js', - module: fse.existsSync(path.resolve(buildPath, './esm/index.js')) - ? './esm/index.js' - : './index.js', - } - : {}), + exports: { + './*': { + types: './types/*/index.d.ts', + import: './esm/*/index.js', + require: './cjs/*/index.js', + }, + }, }; const typeDefinitionsFilePath = path.resolve(buildPath, './index.d.ts'); From d976136c1e3b97560b469e45e73c268c235b5b7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Fri, 18 Oct 2024 09:17:18 +0200 Subject: [PATCH 2/3] Add extensions to imports --- babel.config.js | 1 + package.json | 1 + pnpm-lock.yaml | 14 +++++++++++++- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/babel.config.js b/babel.config.js index 600a3b4d3..439471095 100644 --- a/babel.config.js +++ b/babel.config.js @@ -68,6 +68,7 @@ module.exports = function getBabelConfig(api) { mode: 'unsafe-wrap', }, ], + 'babel-plugin-add-import-extension', ]; if (process.env.NODE_ENV === 'production') { diff --git a/package.json b/package.json index cb382a4d9..0946e2bd7 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "babel-loader": "^9.2.1", + "babel-plugin-add-import-extension": "^1.6.0", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-macros": "^3.1.0", "babel-plugin-module-resolver": "^5.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10b07a828..791b00bb2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -109,6 +109,9 @@ importers: babel-loader: specifier: ^9.2.1 version: 9.2.1(@babel/core@7.25.2)(webpack@5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0))) + babel-plugin-add-import-extension: + specifier: ^1.6.0 + version: 1.6.0(@babel/core@7.25.2) babel-plugin-istanbul: specifier: ^6.1.1 version: 6.1.1 @@ -3287,6 +3290,11 @@ packages: '@babel/core': ^7.25.2 webpack: '>=5' + babel-plugin-add-import-extension@1.6.0: + resolution: {integrity: sha512-JVSQPMzNzN/S4wPRoKQ7+u8PlkV//BPUMnfWVbr63zcE+6yHdU2Mblz10Vf7qe+6Rmu4svF5jG7JxdcPi9VvKg==} + peerDependencies: + '@babel/core': ^7.25.2 + babel-plugin-istanbul@6.1.1: resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==} engines: {node: '>=8'} @@ -7247,7 +7255,6 @@ packages: engines: {node: '>=0.6.0', teleport: '>=0.2.0'} deprecated: |- You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other. - (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) qjobs@1.2.0: @@ -11904,6 +11911,11 @@ snapshots: schema-utils: 4.2.0 webpack: 5.94.0(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.94.0)) + babel-plugin-add-import-extension@1.6.0(@babel/core@7.25.2): + dependencies: + '@babel/core': 7.25.2 + '@babel/helper-plugin-utils': 7.25.7 + babel-plugin-istanbul@6.1.1: dependencies: '@babel/helper-plugin-utils': 7.25.7 From 59f88c13b98c33fdc6535411aa4395376f91f75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Fri, 18 Oct 2024 09:42:24 +0200 Subject: [PATCH 3/3] Fix esm package.json --- scripts/build.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/build.mjs b/scripts/build.mjs index 7e1c3cfa3..3a57a7ab9 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -76,7 +76,7 @@ async function run(argv) { } if (bundle === 'stable') { - await exec(`echo { "type": "module" } > ${path.join(outDir, 'package.json')}`); + await exec(`echo "{ \\"type\\": \\"module\\" }" > ${path.join(outDir, 'package.json')}`); } if (verbose) {