Export ActionMenu/index for backward compatibility with #3713

[siddharthkp]

• Companion PR for Deduplicate ActionMenu.tsx #3713

Short story:

To keep backward compatibility for ActionMenu import (used a bunch in dotcom), we are telling rollup to keep lib-esm/ActionMenu/index.js and not optimise it away

import {ActionMenu} from '@primer/react/lib-esm/ActionMenu'

There are no unintended changes, see package-diff (with release candidate canary) here: https://npmdiff.dev/%40primer%2Freact/35.30.0-rc.debc9d55/0.0.0-20230913142005/

- Added: package/lib-esm/ActionMenu/index.js
- Added: package/lib/ActionMenu/index.js

Lots of research, one line change, classic 🙃

---

Long story:

Background

The ActionMenu component was published with the index.js root and in lib-esm/ActionMenu.js, this means it can be imported from 2 paths:

import {ActionMenu} from '@primer/react'
// 👍 this ActionMenu resolves from lib-esm/index.js which points to lib-esm/ActionMenu.js

import {ActionMenu} from '@primer/react/lib-esm/ActionMenu
// 👍 also completely valid, this resolves to the same lib-esm/ActionMenu.js

Following ADR 012: File structure, we copied to src/ActionMenu and publishing that from index.js root and in lib-esm/ActionMenu/index.js

However, we didn't remove src/ActionMenu.js as part of this change, which means there are 2 ActionMenus which are out of sync! And depending on your import statement, you may be using the old one still!

import {ActionMenu} from '@primer/react' 
// 👍 this resolves from lib-esm/index.js which NOW points to lib-esm/ActionMenu/ActionMenu.js

import {ActionMenu} from '@primer/react/lib-esm/ActionMenu'
// 😮  this still resolves to lib-esm/ActionMenu.js which is not the same as lib-esm/ActionMenu/ActionMenu.js

import {ActionMenu} from '@primer/react/lib-esm/ActionMenu/ActionMenu' 
// 👍 this would resolve to lib-esm/ActionMenu/ActionMenu.js

In #3713, we removed the src/ActionMenu.js for good! However, that means one of the imports is now breaking

import {ActionMenu} from '@primer/react' 
// 👍 this resolves from lib-esm/index.js which points to lib-esm/ActionMenu/ActionMenu.js

import {ActionMenu} from '@primer/react/lib-esm/ActionMenu'
// ❗ this NOW resolves to lib-esm/ActionMenu/index.js, which doesn't exist!

src/ActionMenu/index.ts exists, so why doesn't lib-esm/ActionMenu/index.js exist?

Because src/ActionMenu/index.ts simply exports everything from src/ActionMenu/ActionMenu.ts, rollup optimises the output and doesn't the index file to the build! This is true for most components.

// ActionMenu/index.ts
export * from './ActionMenu'

Check out the difference between src/index.ts and lib-esm/index.js:

// src/index.ts
....
export {ActionMenu} from './ActionMenu'
....

// lib-esm/index.ts
....
export { ActionMenu } from './ActionMenu/ActionMenu.js';
...

 

Is not publishing index.js file a bad thing?!

In general, I don't think it's a bad thing because we recommend folks to import components from the root.

There is no real benefit for a index.js file. If really necessary, folks can still grab the component from it's deeply nested path.

// recommended:
import {ActionMenu, Dialog} from '@primer/react'

// if you really have to:
import {ActionMenu} from '@primer/react/lib-esm/ActionMenu/ActionMenu'
import {Dialog} from '@primer/react/lib-esm/Dialog/Dialog'

Backward compatibility for ActionMenu import path

Because we used to export ActionMenu from @primer/react/lib-esm/ActionMenu, to keep backward compatibility, we can tell rollup to not optimise this specific path and add it to the build.

Check out the package diff as a result of this change: https://npmdiff.dev/%40primer%2Freact/35.30.0-rc.debc9d55/0.0.0-20230913142005/

- Added: package/lib-esm/ActionMenu/index.js
- Added: package/lib/ActionMenu/index.js

[changeset-bot]

⚠️ No Changeset found

Latest commit: 503426b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	100.7 KB (0%)
dist/browser.umd.js	101.29 KB (0%)