Generator Open WC
Part of Open Web Components
Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.
Usage
This generator is based on yeoman. Simply use it like this:
# in a new or existing folder: npm init yo open-wc# requires npm 6 or higher
For running specific generators you can do as demonstrated:
npm i -g yeomannpm i -g generator-open-wc yo open-wc:{generator-name}
or
npx -p yo -p generator-open-wc -c 'yo open-wc:{generator-name}'
Scaffold generators
These generators help you kickstart a web component. You can use these in an empty folder to set up everything you need to get started immediately.
Example usage:
mkdir foo-barcd foo-baryo open-wc:scaffold-vanilla# this will scaffold a new web component + run all available scaffold generators
Available application generators:
-
yo open-wc:starter-app
This generator scaffolds a new starter application. We recommend using this generator at the start of your web component project.More info
This generator will internally run:- open-wc:bundling-webpack - open-wc:testing - open-wc:linting - A frontend setup
Available scaffold generators:
-
yo open-wc:scaffold-vanilla
This generator scaffolds a new web component project for you with all of our recommendations. We recommend using this generator at the start of your web component project.More info
This generator will internally run:- open-wc:linting - open-wc:scaffold-testing - open-wc:scaffold-demoing - open-wc:automating
-
yo open-wc:scaffold-building
This generator scaffolds a webpack configuration for you with examples to your existing project.More info
This generator will internally run:- open-wc:building-webpack - Plus an index.html and index.js using the [@open-wc/polyfills-loader](https://www.npmjs.com/package/@open-wc/polyfills-loader)
-
yo open-wc:scaffold-demoing
This generator scaffolds a Storybook setup for you with examples to your existing project.More info
This generator will internally run:- open-wc:demoing - Plus Storybook examples
-
yo open-wc:scaffold-testing
This generator scaffolds a Karma setup for you with examples to your existing project.More info
This generator will internally run:- open-wc:testing - Plus example tests
Upgrade generators
These generators help you to align your current project with the open-wc
recommendations.
You can use these to add to an existing project that already contains code for your web component.
Example usage:
cd existing-web-componentyo open-wc:upgrade# this will execute all available upgrade generators
Available upgrade generators
-
yo open-wc:linting
This generator adds a complete linting setup with ESLint, Prettier, Husky and commitlint to your existing project.More info
This generator will internally run:- open-wc:linting-eslint - open-wc:linting-prettier - open-wc:linting-commitlint
-
yo open-wc:building
This generator adds a complete building setup with webpack to your existing project.More info
This generator will internally run:- open-wc:building-webpack
-
yo open-wc:testing
This generator adds a complete testing setup with Karma, and Karma Browserstack to your existing project.More info
This generator will internally run:- open-wc:testing-karma - open-wc:testing-karma-bs
-
yo open-wc:demoing
This generator adds a complete demoing setup with Storybook to your existing project.More info
This generator will internally run:- open-wc:demoing-storybook
-
yo open-wc:automating
This generator adds a complete automating setup with CircleCi to your existing project.More info
This generator will internally run:- open-wc:automating-circleci
Optional upgrade generators
These generators are not executed with the default upgrade generator.
yo open-wc:testing-wallaby
This will set up Wallaby to enable testing directly in your IDE. For more information, see testing-wallaby.
Sub generators
These generators are executed with the default upgrade generator. You can use these generators if you already have an existing project that you would like to add to.
-
yo open-wc:building-webpack
This generator adds a build configuration with Webpack to your existing project. -
yo open-wc:linting-eslint
This generator adds linting with ESLint to your existing project. -
yo open-wc:linting-prettier
This generator adds code formatting with Prettier to your existing project. -
yo open-wc:linting-commitlint
This generator adds linting to your git commits with commitlint to your existing project. -
yo open-wc:testing-karma
This generator adds a testing setup with Karma to your existing project. -
yo open-wc:testing-karma-bs
This generator adds a testing setup with Karma and Browserstack to your existing project. This generator requires a manual step of adding your Browserstack credentials to your.bashrc
. For more information, see this page. -
yo open-wc:automating-circleci
This generator adds continuous integration with CircleCi to your existing project.