fix(bundle): add entrypoints for nested directories (#2419)

* feat(bundle): add exports for test-helpers

* chore: update input pattern

* chore: ignore theme-preval

* chore: add changeset

* docs: update comments

* Update rollup.config.js

* chore: remove fast-glob dep

* fix: add support for hooks, polyfills, and utils

* chore: add ignore patterns

* fix: add constants so all members are exported

* fix: update rollup config to not process process.env.NODE_ENV outside of umd build

* refactor(rollup): inline babel config to prevent commonjs transform from running

.changeset/plenty-eagles-refuse.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Refactor rollup to support all lib-esm/\* export patterns and include utils entrypoint

package.json

@@ -116,6 +116,7 @@
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "14.1.0",
+    "@rollup/plugin-replace": "5.0.0",
     "@rollup/plugin-typescript": "8.5.0",
     "@size-limit/preset-big-lib": "7.0.3",
     "@storybook/addon-a11y": "6.5.9",
@@ -169,6 +170,7 @@
     "eslint-plugin-primer-react": "0.7.4",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "fast-glob": "3.2.12",
     "front-matter": "4.0.2",
     "husky": "7.0.4",
     "jest": "29.0.1",

rollup.config.js

@@ -1,15 +1,59 @@
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import babel from '@rollup/plugin-babel'
+import replace from '@rollup/plugin-replace'
+import glob from 'fast-glob'
 import {terser} from 'rollup-plugin-terser'
 import visualizer from 'rollup-plugin-visualizer'
 import packageJson from './package.json'
 
+const input = new Set([
+  // "exports"
+  // "."
+  'src/index.ts',
+
+  // "./drafts"
+  'src/drafts/index.ts',
+
+  // "./deprecated"
+  'src/deprecated/index.ts',
+
+  // Make sure all members are exported
+  'src/constants.ts',
+
+  ...glob.sync(
+    [
+      // "./lib-esm/hooks/*"
+      'src/hooks/*',
+
+      // "./lib-esm/polyfills/*"
+      'src/polyfills/*',
+
+      // "./lib-esm/utils/*"
+      'src/utils/*'
+    ],
+    {
+      cwd: __dirname,
+      ignore: [
+        '**/__tests__/**',
+        '*.stories.tsx',
+
+        // File currently imports from package.json
+        'src/utils/test-deprecations.tsx',
+
+        // Files use dependencies which are not listed by package
+        'src/utils/testing.tsx',
+        'src/utils/test-matchers.tsx'
+      ]
+    }
+  )
+])
+
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
 const external = [
-  ...Object.keys(packageJson.peerDependencies),
-  ...Object.keys(packageJson.dependencies),
-  ...Object.keys(packageJson.devDependencies)
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.devDependencies ?? {})
 ]
 function isExternal(external) {
   return id => {
@@ -36,15 +80,41 @@ function isExternal(external) {
 }
 
 const baseConfig = {
-  input: ['src/index.ts', 'src/drafts/index.ts', 'src/deprecated/index.ts'],
+  input: Array.from(input),
   plugins: [
     // Note: it's important that the babel plugin is ordered first for plugins
     // like babel-plugin-preval to work as-intended
     babel({
       extensions,
       exclude: /node_modules/,
       babelHelpers: 'inline',
-      babelrc: false
+      babelrc: false,
+      configFile: false,
+      presets: [
+        '@babel/preset-typescript',
+        [
+          '@babel/preset-react',
+          {
+            modules: false
+          }
+        ]
+      ],
+      plugins: [
+        'macros',
+        'preval',
+        'add-react-displayname',
+        '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'"
+            }
+          }
+        ]
+      ]
     }),
     commonjs(),
     resolve({
@@ -84,7 +154,15 @@ export default [
     ...baseConfig,
     input: 'src/index.ts',
     external: ['styled-components', 'react', 'react-dom'],
-    plugins: [...baseConfig.plugins, terser(), visualizer({sourcemap: true})],
+    plugins: [
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        preventAssignment: true
+      }),
+      ...baseConfig.plugins,
+      terser(),
+      visualizer({sourcemap: true})
+    ],
     output: ['esm', 'umd'].map(format => ({
       file: `dist/browser.${format}.js`,
       format,

script/build

@@ -6,7 +6,7 @@ set -e
 npm run clean
 
 # Bundle
-npx cross-env NODE_ENV=production rollup -c
+npx rollup -c
 
 # Type check
 npx tsc --project tsconfig.build.json