Origami Frontend Components & Services

Component versioning

The Origami team maintains and improves the components regularly. This means that we release new versions of the components frequently, and a component’s new version numbers follow the semver specification.

How components are versioned

The version numbers are in the following format: 1.2.3, which is representative of MAJOR.MINOR.PATCH.

How to request a versioned component

We recommend requesting an Origami component by requesting a particular version range, which is indicated by a caret (^). That syntax will specify a version but will also fetch minor and patch releases in the future. So if you request o-message@^2.3.0, you will get v2.3.0. But when we release a minor (v2.4.0) of that component further down the line, it means you’ll automatically get that, too.

By requesting a component’s version range, you’ll have an up-to-date component as soon as we release it.

Version conflicts

Almost all Origami components are built on top of other Origami components.

o-message, for example, relies on o-buttons, o-colors, o-icons and o-typography, which in turn have Origami dependencies of their own, which generates an elaborate dependency tree:

o-message
├── o-buttons
│   ├── o-colors
│   ├── o-icons
│   │   ├── fticons
│   │   └── o-assets
│   └── o-normalise
│       └── o-colors
├── o-colors
├── o-icons
│   ├── fticons
│   └── o-assets
└── o-typography
    ├── o-colors
    ├── o-fonts
    ├── o-grid
    └── o-icons
        ├── fticons
        └── o-assets

Let’s use o-colors as an example.

The full o-message dependency tree requires o-colors four times. In order to avoid downloading four different versions of o-colors, we will flatten the dependencies and try to find a version of o-colors that all of the components requiring it can use. This is possible because Origami components use semver ranges to specify the versions of their dependencies.

However, this can also lead to situations where there is no single version that satisfies all semver ranges. This happens primarily when different ranges for the same component are specified.

If, for instance, o-message requires o-colors@^2.3.4, it will be compatible with any version between v2.3.4 and below v3.0.0.

If the o-typography dependency required o-colors@^1.2.3, any version above and including o-colors@2.0.0 won’t be compatible with the direct o-colors dependency (which is v2.3.4 and above), and will cause a conflict.

The only way to fix these conflicts is to ensure that the dependencies and the dependencies within those dependencies are all requiring the same ranges.