Auro's Design System web component generator is a project tool intended to assist developers with an easy to configure and execute HTML custom element development environment.
WC-Generator example use:
$ npx @aurodesignsystem/wc-generator --name [wc-name]
The WC-Generator requires a minimum install of Node.js 16.13.0.
Be sure to check out our getting started page for helpful tips when starting a new project.
For the most up to date information on UI development browser support, see Auro Web Component Browser Support
When generating a new custom element using the Auro WC-Generator, you are not restricted to using the Auro namespace for your new element. The following example will crate the project, @aurodesignsystem/auro-ticker
$ npx @aurodesignsystem/wc-generator --name Auro-TickerBy default, the WC-Generator will output a project that the custom element is for the @aurodesignsystem npm namespace. The following example illustrates how you can customize this to @mynamespace/auro-ticker for example.
$ npx @aurodesignsystem/wc-generator --name Auro-Ticker --npm @mynamespace| Command | Description |
|---|---|
build:test |
Will test the generate pipeline w/o the install process at ./auro-test |
build:complete |
Will build a new custom element with complete install process at ../auro-test |
sweep |
Will delete auro-test directory |
test |
Runs build:test |
For help with the WC-Generator API and to see what version you have installed, run $ npx @aurodesignsystem/wc-generator --help.
With each new repo created, the version of the generator will be added to the bottom of the ./README.md file. As versions of the WC-Generator progress this will help authors to understand where the feature gap is.
<small>Built from WC-Generator v[genVersion]</small>To migrate a repo from one version of the generator to another, please reference Auro migrate shell script.
The WC-Generator contains automated functionality for each build to generate pre-bundled versions of the new component so that users can consume without needing to bundle the JavaScript assets themselves. Both a modern and legacy bundle are produced.
To test changes to the generator, run npm test to generate an auro-test component.