Open Web Component Recommendations

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

# in a new or existing folder:
npm init @open-wc
# requires node 10 & npm 6 or higher

This will kickstart a menu guiding you through all available actions.

$ npm init @open-wc
npx: installed 14 in 4.074s
What would you like to do today?
  > Scaffold a new project
    Upgrade an existing project
    Nah, I am fine thanks! => exit

Homepage

For more details please visit us at open-wc.org.

Packages

Package	Version	Description
building-rollup		Default configuration for working with rollup.
building-webpack		Default configuration for working with webpack.
chai-dom-equals		Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations.
create		Scaffold web components following open-wc recommendations.
demoing-storybook		Storybook configuration following open-wc recommendations.
eslint-config		Eslint configuration following open-wc recommendations.
es-dev-server		Development server for modern web apps.
polyfills-loader		Load web component polyfills using dynamic imports.
prettier-config		Prettier configuration following open-wc recommendations.
scoped-elements		Auto define custom elements to scope them and avoid the name collision.
semantic-dom-diff		To compare dom and shadow dom trees. Part of open-wc recommendations.
testing		Testing following open-wc recommendations.
testing-helpers		Testing Helpers following open-wc recommendations.
testing-karma		Testing with Karma following open-wc recommendations.
testing-karma-bs		Testing with Karma using Browserstack following open-wc recommendations.
testing-wallaby		Testing with wallaby following open-wc recommendations.
webpack-import-meta-loader		Webpack loader plugin to support import.meta.

Contact

Feel free to reach out to us on twitter or create a github issue for any feedback or questions you might have.

You can also find us on the Polymer slack in the #open-wc channel.

You can join the Polymer slack by visiting https://www.polymer-project.org/slack-invite.

We Proudly Use

Guide

# bootstrap/setup
yarn install

# linting
npm run lint

# local testing
npm run test

# testing via browserstack
npm run test:bs

# run commands only for a specific scope
lerna run <command> --scope @open-wc/<package-name> --stream