tomzhang / open-wc

Open Web Components: guides, tools and libraries for modern web development and web components

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 30 in 1.762s

        _.,,,,,,,,,._
     .d''           ``b.       Open Web Components Recommendations
   .p'      Open       `q.
 .d'    Web Components  `b.    Start or upgrade your web component project with
 .d'                     `b.   ease. All our recommendations at your fingertips.
 ::   .................   ::
 `p.                     .q'   See more details at https://open-wc.org/init/
  `p.    open-wc.org    .q'
   `b.     @openWc     .d'
     `q..            ..,'      Note: you can exit any time with Ctrl+C or Esc
        '',,,,,,,,,,''


? What would you like to do today? › - Use arrow-keys. Return to submit.
❯   Scaffold a new project
    Upgrade an existing project

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