The Liberation Machine

MWUI - Stencil

mwui-stencil houses the Web Component library of the MWUI and is built using StencilJs. Stencil provides WebComponents as well as framework-specific integrations to leverage usage of WebComponents in React, Vue and Angular.

Add new components

To create new components, run:

npm run generate

Alternatively you can manually create components by adding them to src/components. Custom Element names are written in kebab-case, prefixed with mw- (e.g. mw-button).

Structure

Name, stylesheet and whether a shadow-dom should be created is defined within @component.

Individual props get defined within by using @Prop(), followed by the name of the prop and its type or the default value. Operators such as ! or ? can be used to mark a prop as optional or required.

The HTML structure of the component is defined within the render() function. You can define slots which can be inserted into the component.

Testing

To run the unit tests for the components, run:

npm test

Check stencil docs here for additional help.