feat: only publish esm bundles from @primer/react (#6425)

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: joshblack

.changeset/slick-months-cry.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update @primer/react to only export ESM bundles

.github/workflows/ci.yml

@@ -176,4 +176,4 @@ jobs:
       - name: Build
         run: npm run build
       - name: Get export sizes
-        run: node packages/react/script/get-export-sizes.js
+        run: node packages/react/script/get-export-sizes.cjs

.github/workflows/size.yml

@@ -1,4 +1,4 @@
-const defines = require('./babel-defines')
+const defines = require('./babel-defines.cjs')
 const {isSupported} = require('./script/react-compiler.mjs')
 
 function replacementPlugin(env) {

package-lock.json

@@ -1,44 +1,43 @@
 {
   "name": "@primer/react",
+  "type": "module",
   "version": "38.0.0-rc.2",
   "description": "An implementation of GitHub's Primer Design System using React",
-  "main": "lib/index.js",
-  "module": "lib-esm/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./lib-esm/index.js",
-      "require": "./lib/index.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./experimental": {
-      "import": "./lib-esm/experimental/index.js",
-      "require": "./lib/experimental/index.js"
+      "types": "./dist/experimental/index.d.ts",
+      "default": "./dist/experimental/index.js"
     },
     "./deprecated": {
-      "import": "./lib-esm/deprecated/index.js",
-      "require": "./lib/deprecated/index.js"
+      "types": "./dist/deprecated/index.d.ts",
+      "default": "./dist/deprecated/index.js"
     },
     "./next": {
-      "import": "./lib-esm/next/index.js",
-      "require": "./lib/next/index.js"
+      "types": "./dist/next/index.d.ts",
+      "default": "./dist/next/index.js"
     },
     "./test-helpers": {
-      "import": "./lib-esm/test-helpers.js",
-      "require": "./lib/test-helpers.js"
+      "types": "./dist/utils/test-helpers.d.ts",
+      "default": "./dist/test-helpers.js"
     },
     "./generated/components.json": "./generated/components.json",
     "./generated/hooks.json": "./generated/hooks.json"
   },
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": [
-    "lib-esm/**/*.css",
-    "lib/**/*.css",
+    "dist/**/*.css",
     "src/**/test-helpers.tsx",
-    "lib-esm/**/test-helpers.js",
-    "lib/**/test-helpers.js"
+    "dist/**/test-helpers.js"
   ],
   "scripts": {
     "build": "./script/build",
-    "clean": "rimraf dist lib lib-esm css",
+    "clean": "rimraf dist generated",
     "start": "concurrently npm:start:*",
     "start:storybook": "STORYBOOK=true storybook dev -p 6006",
     "build:storybook": "storybook build",
@@ -47,6 +46,7 @@
     "build:components.json": "tsx script/components-json/build.ts",
     "build:hooks.json": "tsx script/hooks-json/build.ts",
     "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
+    "lint:npm": "publint --types",
     "storybook": "storybook",
     "type-check": "tsc --noEmit",
     "type-css-modules": "tcm -p src/**/*.module.css"
@@ -59,19 +59,7 @@
     "design-system"
   ],
   "files": [
-    "codemods",
     "dist",
-    "lib",
-    "lib/node_modules",
-    "lib-esm",
-    "css",
-    "index.d.ts",
-    "deprecated/package.json",
-    "experimental/package.json",
-    "!lib/__tests__",
-    "!lib/stories",
-    "!lib-esm/__tests__",
-    "!lib-esm/stories",
     "generated",
     "CHANGELOG.md"
   ],
@@ -182,6 +170,7 @@
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
     "postcss-preset-primer": "^0.0.0",
+    "publint": "^0.3.12",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-is": "18.3.1",

packages/react/babel-defines.js renamed to packages/react/babel-defines.cjs

@@ -37,15 +37,6 @@ function getEntrypointsFromInput(input) {
 }
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
-const ESM_ONLY = new Set([
-  '@github/combobox-nav',
-  '@github/markdown-toolbar-element',
-  '@github/paste-markdown',
-  '@github/relative-time-element',
-  '@github/tab-container-element',
-  '@lit-labs/react',
-  '@oddbird/popover-polyfill',
-])
 const dependencies = [
   ...Object.keys(packageJson.peerDependencies ?? {}),
   ...Object.keys(packageJson.dependencies ?? {}),
@@ -230,97 +221,10 @@ export default [
     external: dependencies.map(createPackageRegex),
     output: {
       interop: 'auto',
-      dir: 'lib-esm',
+      dir: 'dist',
       format: 'esm',
       preserveModules: true,
       preserveModulesRoot: 'src',
     },
   },
-
-  // CommonJS
-  {
-    ...baseConfig,
-    external: dependencies.filter(name => !ESM_ONLY.has(name)).map(createPackageRegex),
-    output: {
-      interop: 'auto',
-      dir: 'lib',
-      format: 'commonjs',
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      exports: 'auto',
-    },
-  },
-
-  // Bundles
-  {
-    ...baseConfig,
-    input: 'src/index.ts',
-    external: ['styled-components', 'react', 'react-dom'],
-    plugins: [
-      replace({
-        'process.env.NODE_ENV': JSON.stringify('production'),
-        preventAssignment: true,
-      }),
-      babel({
-        extensions,
-        exclude: /node_modules/,
-        babelHelpers: 'inline',
-        babelrc: false,
-        configFile: false,
-        presets: [
-          '@babel/preset-typescript',
-          [
-            '@babel/preset-react',
-            {
-              modules: false,
-            },
-          ],
-        ],
-        plugins: [
-          'macros',
-          'add-react-displayname',
-          'dev-expression',
-          'babel-plugin-styled-components',
-          '@babel/plugin-proposal-nullish-coalescing-operator',
-          '@babel/plugin-proposal-optional-chaining',
-          [
-            'babel-plugin-transform-replace-expressions',
-            {
-              replace: {
-                __DEV__: "process.env.NODE_ENV !== 'production'",
-              },
-            },
-          ],
-        ],
-      }),
-      resolve({
-        extensions,
-      }),
-      commonjs({
-        extensions,
-      }),
-      // PostCSS plugins are defined in postcss.config.js
-      postcss({
-        extract: 'components.css',
-        autoModules: false,
-        modules: {
-          generateScopedName: 'prc_[local]_[hash:base64:5]',
-        },
-      }),
-      terser(),
-      visualizer({sourcemap: true}),
-    ],
-    output: ['esm', 'umd'].map(format => ({
-      interop: 'auto',
-      file: `dist/browser.${format}.js`,
-      format,
-      sourcemap: true,
-      name: 'primer',
-      globals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        'styled-components': 'styled',
-      },
-    })),
-  },
 ]

packages/react/babel.config.js renamed to packages/react/babel.config.cjs

@@ -17,12 +17,6 @@ npx rollup -c
 # Type check
 npx tsc --project tsconfig.build.json
 
-# Copy type declarations
-npx copyfiles -u 1 "./lib/**/*.d.ts" ./lib-esm
-
-# Copy css
-npx copyfiles --flat ./lib/components.css ./css
-
 # Build components.json file for documentation
 npm run build:components.json
 

packages/react/package.json

@@ -1,6 +1,7 @@
-import generate from '@babel/generator'
+// @ts-expect-error there seems to be a mismatch in the types for this package
+import {generate} from '@babel/generator'
 import {parse} from '@babel/parser'
-import traverse from '@babel/traverse'
+import {traverse} from '@babel/core'
 import type {ArrowFunctionExpression, Identifier, FunctionDeclaration} from '@babel/types'
 import path from 'node:path'
 import {parseArgs} from 'node:util'