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. | | create | | Scaffold web components following open-wc recommendations. | | demoing-storybook | | Storybook configuration following open-wc recommendations. | | eslint-config | | Eslint configuration following open-wc recommendations. | | @web/dev-server | | Modern development server for web applications, replacing es-dev-server. | | polyfills-loader | | Load web component polyfills using dynamic imports. | | 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. |

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 Lit & Friends slack in the #open-wc channel.

You can join the Lit & Friends slack by visiting https://lit.dev/slack-invite/.

Sponsored by

Supported by

Guide

# bootstrap/setup
npm 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