/open-wc

Open Web Components: guides, tools and libraries for developing web components.

Primary LanguageJavaScriptMIT LicenseMIT

Open-wc Logo

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 building-rollup Default configuration for working with rollup.
create create Scaffold web components following open-wc recommendations.
demoing-storybook demoing-storybook Storybook configuration following open-wc recommendations.
eslint-config eslint-config Eslint configuration following open-wc recommendations.
es-dev-server es-dev-server Development server for modern web apps.
polyfills-loader polyfills-loader Load web component polyfills using dynamic imports.
scoped-elements scoped-elements Auto define custom elements to scope them and avoid the name collision.
semantic-dom-diff semantic-dom-diff To compare dom and shadow dom trees. Part of open-wc recommendations.
testing testing Testing following open-wc recommendations.
testing-helpers testing-helpers Testing Helpers following open-wc recommendations.
testing-karma testing-karma Testing with Karma following open-wc recommendations.
testing-karma-bs testing-karma-bs Testing with Karma using Browserstack following open-wc recommendations.
testing-wallaby testing-wallaby Testing with wallaby following open-wc recommendations.

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

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

Sponsored by

Chrome's Web Framework & Tools Performance Fund Logo Divriots Logo

Supported by

Browserstack Logo netlify logo

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