Codey

Appearance

Report a problem:

Problems can be reported via Microsoft Teams in your team channel within the "IT - Codey" team.

Please include the following information:

Report type:
Docs problem report a bug instead →
Path:
/vnext/contributing/adr/records/002__modular-export-single-entry-for-component-library.html
Message:

DESCRIBE THE PROBLEM BEFORE SUBMITTING TO CODEY

Modular Export Single Entry For Component Library ​

Status: Approved

Decision Date: 27/10/2022

Scope: codey-components

Context ​

  • Current situation:
    • The components are split into folders (e.g. ./src/components/button) to represent a module. This is done to have a modular structure for tree shaking.
    • Every module has a package-build.json used to create a sub package package.json file after bundling.
    • The build script takes the entry point from the package-build.json which can be a Vue file or index.
    • This is currently done to enable the export of multiple formats of the components (js, cjs, sfc (vue)).
  • import after installing the components pacakge outside our monorepo are possible using import XerButton from "@xerius/codey-components/button". This gives a nice modular feel.
  • Importing a component inside our monorepo requires an additional entry point as the package.json of codey-components does not contain any. This is because at build time every component module gets one of its own.
    • An additional index.js needs to be created for internal use
    • Every component needs to be re-exported here to use within the repo
    • This creates a different import/export mechanism for internal/external use

Decision ​

Because of the mixed import structure I decided to simplify the module structure like what is now done with the codey-composables:

  • Every component still remains in his module folder.
  • Every module folder has an index.js.
  • A src index.js is created to re-export all components
  • The package.json of codey-composables has the global index.js set as main & exports. This allows the same import structure for internal and external use.
  • On build time, every module is build separately using the index.js.
  • The src index.js is copied to the dist.
  • This also allows to import all components in one statement: import * as CodeyComponents from '@xerius/codey-components'

Consequences ​

  • Only esm output is supported with this approach, as another index.csj would need to be created. As our components are always used in combination with vue3 this won't be a great issue.
  • Removing the sfc from the dist will not allow SSR to utilize these directly. which can have a performance cost.

Alternatives ​

  • Sticking with the current situation and keep track of 2 separate export & import methods.