pharos icon indicating copy to clipboard operation
pharos copied to clipboard

Add exports field to package.json

Open Niznikr opened this issue 3 years ago • 4 comments

The problem Webpack 5 module federation dependency sharing works best with imports from a package's root entry file. Currently to share Pharos, folks would need to list the individual components they'd like to share as their imports go deep into the package:

import '@ithaka/pharos/lib/components/modal/pharos-modal';

The solution Address #3 and then add an exports field to the package.json to define the main entry point and encapsulate the package to prevent other entry points.

"exports": {
    ".": "./lib/index.js",
    "./lib": "./lib/index.js",
    "./lib/index": "./lib/index.js",
    "./lib/index.js": "./lib/index.js",
    "./package.json": "./package.json",
    "./custom-elements.json": "./custom-elements.json"
  }

The first entry would allow consumers to import component definitions in this way:

import { PharosButton } from '@ithaka/pharos';

Thus they would only need to add @ithaka/pharos as a shared dependency in their MFE configuration.

Alternatives considered N/A.

Additional information This will likely be a breaking change as only the entry points defined in the field would be allowed.

Niznikr avatar Sep 02 '21 13:09 Niznikr

Are there any considerations we need to make for our React wrapper components?

eslawski avatar Sep 02 '21 13:09 eslawski

Well an entry point can only be a single file/location. If we want the same experience with sharing the React versions we'd need to define a separate package (something like @ithaka/pharos-react) with its own exports defined. That would be the time to make such a change given #3 and this being breaking changes.

Niznikr avatar Sep 02 '21 14:09 Niznikr

Learned today that modules shared via ModuleFederation are unable to be tree shaken. So it's worth noting that if we go this route the entirety of the @ithaka/pharos module will be bundled and shared. Need to think more on the tradeoffs between the different approaches, but just wanted to raise the important note.

eslawski avatar Sep 02 '21 17:09 eslawski

We need to wait until TypeScript supports finding type definitions for modified export subpaths with using the exports field. 4.5 seems to support this functionality but is still in beta and the feature is buggy.

Niznikr avatar Oct 28 '21 15:10 Niznikr

seems like this should be possible now https://github.com/microsoft/TypeScript/issues/33079

chrisjbrown avatar Jan 13 '23 16:01 chrisjbrown

Resolved by #472

daneah avatar Aug 20 '23 16:08 daneah