Versioning DSM Live Components
  • 06 Feb 2023
  • 2 Minutes to read
  • Dark

Versioning DSM Live Components

  • Dark

Article Summary

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.

When viewing live components in the DSM web view, you can quickly identify a component’s version by including a version label on the component page.

A component page in DSM with the component version field highlighted.

Although a common versioning format is numbers following a semantic order, the developer publishing the Storybook story to DSM has complete control over version names. DSM does not assign version names automatically.

There are two main ways to version components: at the library level and the component level. DSM supports both methods. With either option, the version name will appear in the same place on the component page.

Library-level versioning

For library-level versioning, DSM will display the version property included in the package.json file at the root of your Storybook project.

"version": "0.1.2",

Component-level versioning

To indicate a version for a specific component, modify the component’s Storybook story by adding the version argument to the in-dsm property.

For example, if a component is versioned independently from other components, you can indicate version “2.0.2” as shown in the following code snippet.

  'in-dsm': { id: '5c61816f31f7b80016dda83b', version: '2.0.2' }

Alternatively, you can provide a path to a JSON file with the component version specified in a version field. For example:

  'in-dsm': { id: '5d6ef4e3114a469317285290', versionFilePath: '../components/versionFile.json' }

Here’s the corresponding versionFile.json with the version field:

  "version": "1.1.0"

Switching versions

Teams will commonly use a previous version of the component library. Different teams may have different upgrade schedules, so different versions of the library might be in use.

To avoid discrepancies, it’s important that developers can refer to the documentation for the component versions they currently use.

When a new Storybook project is uploaded to DSM, it won’t override the previous project. The previous Storybook project is still available, and DSM allows you to switch between project versions.

By default, DSM shows the latest version per component. You can switch to a different version using the Component version drop-down on the component page.

NoteDSM presents the versions in the order the Storybook projects were uploaded. It does not sort the versions based on a semantic versioning order.

If components are versioned on the library level, DSM persists the version selection throughout the user session. This means that if you view a particular library version for one component, any other components you view will default to the same library version—rather than the latest version.

TipDSM only allows switching between versions of components that differ in version text (or number in semantic versioning). For example, if two DSM projects specify version “1.0.1” for a button component, viewers will not be able to switch between the two versions since the version labels are identical.

Was this article helpful?