@maggioli-design-system/magma

Maggioli Design System Web-Component

To generate a new web-component:

nx run stencil:generate mds-component-name

To build a web-component:

nx run stencil:build --skip-nx-cache

To generate an independent package.json, needed to publish the new web-component

nx run stencil:publish.isolate.component --component=mds-component-name

To publish the new web-component

Build Stencil first

npx nx run stencil:build

Isolate component

npx nx run stencil:isolate-component --skip-nx-cache

And follow script instructions

Build and publish isolated component

cd .build/component-name
npm run build
npm publish --access public

---

Tests

All tests paths are from this project design-system/projects/stencil/ path.

Regression tests

To run regression tests you'll need to have Docker installed on your local machine, this will ensure to run the same Chrome render between local machines with different operative systems.

Create references

First, if you don't have a reference images .loki/reference path, you need to run:

nx run stencil:test.regression.reference

Then you should see images inside .loki/reference, these images will be used to check differences after your changes.

You should do it AFTER a git pull and BEFORE starting to work:

git pull
nx run stencil:test.regression.reference

Make changes to the code and then run regression tests

When you have the reference images and you have worked

nx run stencil:test.regression.review

Clean to remove all image references

If for some reason you need to clean loki image cache:

nx run stencil:test.regression.clean

---

Semi-automatic versioning of the component package.json files

We've added a list of terminal commands to ease the updating processo for all component. Updates the component and all components on which it is dependent.

Updating package version

nx run stencil:update -- --version={major | minor | patch} {component}

Assuming we have a mds-foo to default version 1.0.0 and a mds-bar which have a mds-foo as dependencie and version 2.2.3, if you run:

nx run stencil:update -- --version=major mds-foo

Will become:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "2.0.0"
}

{
  "name": "@maggioli-design-system/mds-bar",
  "version": "3.0.0",
  "dependencies": {
    "mds-foo": "2.0.0"
  }
}

Assuming we have a mds-foo to default version 1.0.0, if you run:

nx run stencil:update -- --version=minor mds-foo

Will become:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "1.1.0"
}

Assuming we have a mds-foo to default version 1.0.0, if you run:

nx run stencil:update.version patch mds-foo

Will become:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "1.0.1"
}

Update component dependencies

To synchronize all version components dependencies launch

nx run stencil:update

Assuming we have a mds-foo to default version 1.0.0, with two dependencies to be updated to mds-dep-1@1.3.1 and mds-dep-2@1.1.2, if you run:

nx run stencil:update

Old dependencies:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "1.0.0",
  "dependencies": {
    "@maggioli-design-system/mds-dep-1": "1.2.0",
    "@maggioli-design-system/mds-dep-2": "1.0.0"
  }
}

Will be updated to:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "1.0.1",
  "dependencies": {
    "@maggioli-design-system/mds-dep-1": "1.3.1",
    "@maggioli-design-system/mds-dep-2": "1.1.2"
  }
}

Update component dependencies and core dependencies

The option --common will also update dependencies found also in stencil/package.json file for each component that have the updated dependencies.

nx run stencil:update --common

Note: if you want choose type of version you need to add -- with nx run command:

nx run stencil:update -- --common --version=minor

This means if you have a component mds-foo/package.json:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "1.0.0",
  "dependencies": {
    "@maggioli-design-system/mds-dep-1": "1.1.2",
    "@maggioli-design-system/styles": "11.0.0",
    "@stencil/core": "4.2.0"
  }
}

And this is stencil/package.json:

{
  "name": "stencil",
  "version": "1.0.0",
  "dependencies": {
    "clsx": "2.0.0",
    "@maggioli-design-system/styles": "13.0.0",
    "@stencil/core": "4.6.0",
    "fitty": "2.3.7",
    "idb-keyval": "6.2.1"
  }
}

The command will update the dependecies both found on stencil and mds-foo only:

{
  "name": "@maggioli-design-system/mds-foo",
  "version": "1.0.1",
  "dependencies": {
    "@maggioli-design-system/mds-dep-1": "1.1.2",
    "@maggioli-design-system/styles": "13.0.0",
    "@stencil/core": "4.6.0"
  }
}

So you can update @stencil/core based on stencil/package.json without add unwanted dependencies to mds-foo/package.json.