Mural design system Semantic Release Stencil exports plugin

We use Semantic Release for version management and the package release workflow. This package is a semantic-release plugin that manages the release process of a Stencil.js export target. Stencil exports have a separate package that don't have their own Semantic Release process. This plugin is in charge of publishing those packages to NPM.

Table of contents

1. Setup
2. Usage
3. How it works

Setup

This plugin must be used only in the @muraldevkit/ds-semrel-config package by adding the plugin name to the plugins array.

const plugins = [
	'@semantic-release/release-notes-generator',
	'@muraldevkit/ds-semrel-stencil-exports'
];

No other configuration is required.

Usage

This plugin is part of our shared Semantic Release configuration. It will run on every Semantic Release pipeline, skipping its functionality if the package is not a Web Component.

At the moment only React components are supported.

To release a React component, create a package for it within the packages/react folder. It should be named @muraldevkit/ds-<component-name>-react in the package.json file.

For more information on how React exported components work please refer to our repository guides.

How it works

This plugin implements the following Semantic Release lifecycles:

| Step | Description | |--------------------|-------------| | verifyConditions | Verify if the package that runs Semantic Release is a Web Component. Check if the component has a valid React package. | | success | If the Web Component package is released successfully, it publishes the corresponding React package to NPM with the same version number. |

Different checks are performed during the verifyConditions step for a Web Component to ensure:

1. It has a name that includes the component keyword (e.g., @muraldevkit/ds-component-button).
2. It has a stencil.config.ts file.
3. It has a matching React package that follows the naming convention @muraldevkit/ds-<component-name>-react.

If the above conditions are not met this plugin will output a log notifying the user that it will not release the React package. It does not affect the Web Component's release process.

Once the Web Component's release process reaches the success step, it will check that a nextRelease object exists within the Semantic Release context. If there is a nextRelease object, it will use the nextRelease.version number to update the React package version number.

After updating the React package version number it will publish that package to NPM using the npm publish command.