and-svelte-component-library v1.3.1

And Component Library

This is shared component library project built with Svelte

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd and-component-library
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

As this is a component library project, we would be creating the components with Svelte Tag options to be exported as a Web component.

This project is integrated with the Storybook for documentation.

Conventioanl commit:

Always follow conventional commits (https://www.conventionalcommits.org/en/v1.0.0/)

The commit message should be structured as follows:

optional scope:

optional body

optional footer(s)

The commit contains the following structural elements, to communicate intent to the consumers of your library:

fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in semantic versioning). feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in semantic versioning). BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in semantic versioning). A BREAKING CHANGE can be part of commits of any type.

How to commit your file?

we use commitizen, so to commit your files always run the commands:

git add .   
npm run commit

and follow the type and options provided as per the above mentioned conventional commits section

Building and running in production mode

To create an optimised version of the app:

npm run build

Releasing and publishing the package

After developing the feature/fixing issues in the code, when you're ready to commit the code, always follow conventional commits (https://www.conventionalcommits.org/en/v1.0.0/) (refer to the section above)

Once committed the code to git, run the release script:

npm run release

This command would automatically update the package.version(refer the next session to see how it works) and also tries to push the git tag. If the git push command fails due to the remote branch not created, do create/push/set the remote branch first and then run

git push --follow-tags

Do commit and push the changes files(package-lock.json file) before you raise the merge request

Visual Regression Testing

Visual regression testing deals with preventing unintentional changes to our application’s visuals. We are using a tool called Chromatic to visual test our web components library (https://www.chromatic.com/docs/).

To run this, use command:

npm run chromatic

(Note: to run this command you will need the .env file in your local directory which should have the project token, to get access to the project token, please get in touch with another developer from the team)

Once it's complete, you will be able to see the results here: https://www.chromatic.com/builds?appId=5f4e20940a54fa0022594834 (it is also integrated into our CI/CD pipeline)