Versioning DSM Live Components

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.

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.

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.