Skip to main content

Support Single and Multi Line Import

  • Status: Approved
  • Authors: Michael White
  • Deciders: Abyss Team
  • Date: 4/26/2024

Context​

Currently, all our components, hooks and tools are always exported directly from their file. For example, if I wanted to import the Badge and Chip components, the structure would be:

import { Badge } from '@uhg-abyss/mobile/ui/Badge';
import { Chip } from '@uhg-abyss/mobile/ui/Chip';

Although there is no problem with this, most libraries give the option to import direct from one main entry file. If we were to do this, we would import the components as:

import { Badge, Chip } from '@uhg-abyss/mobile';

or if a developer wanted to separate imports by components, hooks, and tools they can do:

import { Badge, Chip } from '@uhg-abyss/mobile/ui';
import { useToken } from '@uhg-abyss/mobile/hooks';

Decision​

Decision TBD as of 4/26/2024

Plan​

  1. Place our components, hooks, and tools into a main index file.
  2. Create documentation section/global page on new structure that explains the multiple way to import a component

Consequences​

Pros:

  • Control what we intend to be exported from our library.
  • Allow consuming teams to create multiple imports from a single line.
  • Allows tree-shaking to potentially trim consuming teams bundle size.
  • Still allow the old import structure if a consuming team prefers that method to prevent breaking.
  • Improves code cleanliness, quality, and readability.

Cons:

  • Will have to support multiple import structures.
  • Will have to check for potential naming conflicts.
Table of Contents