[core] Add exports field and build proper ES modules (no import extensions variant) (mui#821)

Author: michaldudak

.circleci/config.yml

@@ -375,6 +375,19 @@ jobs:
           name: Run danger on PRs
           command: pnpm danger ci --fail-on-errors
       # TODO test bundle size https://github.com/mui/base-ui/issues/201
+  test_package:
+    <<: *default-job
+    steps:
+      - checkout
+      - install_js:
+          react-version: << parameters.react-version >>
+      - run:
+          name: Build packages
+          command: pnpm release:build
+      - run:
+          name: Are the types wrong?
+          command: pnpm -r test:package-types
+
 workflows:
   version: 2
   pipeline:
@@ -419,6 +432,10 @@ workflows:
           <<: *default-context
           requires:
             - checkout
+      - test_package:
+          <<: *default-context
+          requires:
+            - checkout
   profile:
     when:
       equal: [profile, << pipeline.parameters.workflow >>]

babel.config.js

@@ -8,12 +8,8 @@ function resolveAliasPath(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', 'stable', 'rollup']);
+  const useESModules = !api.env(['node']);
 
   const defaultAlias = {
     '@base-ui-components/react': resolveAliasPath('./packages/react/src'),
@@ -70,9 +66,16 @@ module.exports = function getBabelConfig(api) {
     ],
   ];
 
-  if (process.env.NODE_ENV === 'production') {
-    plugins.push(...productionPlugins);
-  }
+  const devPlugins = [
+    [
+      'babel-plugin-module-resolver',
+      {
+        root: ['./'],
+        alias: defaultAlias,
+      },
+    ],
+    'babel-plugin-add-import-extension',
+  ];
 
   return {
     assumptions: {
@@ -98,39 +101,17 @@ module.exports = function getBabelConfig(api) {
     ],
     env: {
       coverage: {
-        plugins: [
-          'babel-plugin-istanbul',
-          [
-            'babel-plugin-module-resolver',
-            {
-              root: ['./'],
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: ['babel-plugin-istanbul', ...devPlugins],
       },
       development: {
-        plugins: [
-          [
-            'babel-plugin-module-resolver',
-            {
-              root: ['./'],
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: devPlugins,
       },
       test: {
         sourceMaps: 'both',
-        plugins: [
-          [
-            'babel-plugin-module-resolver',
-            {
-              root: ['./'],
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: devPlugins,
+      },
+      production: {
+        plugins: ['babel-plugin-add-import-extension'],
       },
     },
   };

docs/vitest.config.ts docs/vitest.config.mts

@@ -1,5 +1,5 @@
 import { mergeConfig, defineProject } from 'vitest/config';
-import sharedConfig from '../vitest.shared';
+import sharedConfig from '../vitest.shared.mts';
 
 export default mergeConfig(
   sharedConfig,

package.json

@@ -97,6 +97,7 @@
     "@vitest/coverage-v8": "^2.1.4",
     "@vitest/ui": "2.1.4",
     "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",
@@ -130,6 +131,7 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
+    "jsonc-parser": "^3.3.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "~1.6.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -165,6 +167,7 @@
     "tailwindcss": "4.0.0-alpha.36",
     "terser": "^5.31.0",
     "terser-webpack-plugin": "^5.3.10",
+    "tsc-alias": "^1.8.10",
     "tsx": "^4.8.2",
     "typescript": "^5.6.3",
     "unist-util-visit": "^5.0.0",

packages/react/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,15 +25,25 @@
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
   },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./*": {
+      "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",
     "build:stable": "node ../../scripts/build.mjs stable",
     "build:copy-files": "node ../../scripts/copyFiles.mjs",
-    "build:types": "tsc -b tsconfig.build.json",
+    "build:types": "tsx ../../scripts/buildTypes.mjs --project tsconfig.build.json --copy build/cjs",
+    "test:package-types": "attw --pack ./build --include-entrypoints ./Accordion ./Menu ./Tooltip",
     "prebuild": "rimraf --glob build build-tests \"*.tsbuildinfo\"",
     "release": "pnpm build && pnpm publish",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/react/**/*.test.{js,ts,tsx}'",
@@ -52,6 +61,7 @@
     "use-sync-external-store": "^1.2.2"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.16.4",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -63,7 +73,6 @@
     "@types/sinon": "^17.0.3",
     "@types/use-sync-external-store": "^0.0.6",
     "chai": "^4.5.0",
-    "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",

packages/react/tsconfig.build.json

@@ -10,8 +10,11 @@
     "moduleResolution": "bundler",
     "noEmit": false,
     "rootDir": "./src",
-    "outDir": "build"
+    "outDir": "build/esm"
   },
   "include": ["src/**/*.ts*"],
-  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
+  "tsc-alias": {
+    "resolveFullPaths": true
+  }
 }

packages/react/vitest.config.ts packages/react/vitest.config.mts

@@ -1,5 +1,5 @@
 import { mergeConfig, defineProject } from 'vitest/config';
-import sharedConfig from '../../vitest.shared';
+import sharedConfig from '../../vitest.shared.mts';
 
 export default mergeConfig(
   sharedConfig,