Web Component Generator

The Design System Web Component Generator is a project tool intended to assist developers with an easy to configure and execute Web Component development environment for the purpose of building custom elements.

Install

It is suggested that this package be installed globally as to ensure quick and easy access to initializing new web components.

$ npm i @alaskaairux/wc-generator -g

The Auro Web Component Generator is configured to ensure that you have the latest version of the generator prior to starting a new build project.

Execute

Simple API of the npm generator:

wc-generate --name [wc name]

Example

$ wc-generate --name button

See the Auro doc site for a full API description and info for getting started.

General documentation

Please see Auro docs for all information in regard to using and developing HTML custom elements with the Design System.

UI development and browser support

For the most up to date information on UI development browser support, see Auro Web Component Browser Support

Building a Custom element

Once the new development environment has been created, there are some conventions to follow to ensure the success of your new custom element. Please see the following documentation:

1. CSS Development Conventions
2. Web Component Automated Testing
3. The slot element, performance and SEO
4. Web Component Polyfill Support

Custom namespace support

When generating a new WC using the Auro Web Component Generator, you are not restricted to using the Auro namespace for the component.

$ wc-generate -t -N Han -n Solo

Pre-bundled components

The WC-Generator contains automated functionality with each build to generate a pre-bundled version of the new component so that users can consume these assets without needing to bundle the JavaScript assets themselves.

<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/orion-design-tokens@:version/dist/tokens/CSSTokenProperties.css" />
<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/orion-web-core-style-sheets@:version/dist/bundled/baseline.css" />

<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/polyfills.js"></script>
<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js"></script>

Static Styles

The generator takes the opinion of using static styles as a matter of performance.

Static styles apply to all instances of a component. Any expressions in CSS are evaluated once, then reused for all instances.

If there is a requirement for the CSS to be reevaluated, this can either be done by moving the CSS to the render() method or addressed in a lifecycle method.

Moving the CSS to the render() method requires an update to the sassRender script and removing the reference to staticStyles-template.js.