WC-Generator is no longer the supported way to scaffold Auro web components and is not actively maintained. Component tooling — build, docs, and Custom Elements Manifest output — now runs through auro-cli, and new-component scaffolding is moving there too.
Before creating a new component, contact the Auro Design System team for the current process. This repository is retained for reference only; new work should not be started here.
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 18.15.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 test changes to the generator, run npm test to generate an auro-test component.