Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/open-wc/open-wc
Open Web Components: guides, tools and libraries for developing web components.
https://github.com/open-wc/open-wc
hacktoberfest javascript lit-element web-components
Last synced: 5 days ago
JSON representation
Open Web Components: guides, tools and libraries for developing web components.
- Host: GitHub
- URL: https://github.com/open-wc/open-wc
- Owner: open-wc
- License: mit
- Created: 2018-09-16T16:35:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-01T17:25:45.000Z (5 months ago)
- Last Synced: 2024-10-29T10:00:18.717Z (3 months ago)
- Topics: hacktoberfest, javascript, lit-element, web-components
- Language: JavaScript
- Homepage: https://open-wc.org/
- Size: 27 MB
- Stars: 2,271
- Watchers: 48
- Forks: 423
- Open Issues: 176
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - open-wc - Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. (JavaScript)
- awesome-github-star - open-wc - wc | 2096 | (JavaScript)
- awesome-list - open-wc - wc | 1566 | (JavaScript)
README
# 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
```bash
# 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](https://open-wc.org).
## Packages
| Package | Version | Description |
| ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| [building-rollup](./packages/building-rollup) | [](https://www.npmjs.com/package/@open-wc/building-rollup) | Default configuration for working with rollup. |
| [create](./packages/create) | [](https://www.npmjs.com/package/@open-wc/create) | Scaffold web components following open-wc recommendations. |
| [demoing-storybook](./packages/demoing-storybook) | [](https://www.npmjs.com/package/@open-wc/demoing-storybook) | Storybook configuration following open-wc recommendations. |
| [eslint-config](./packages/eslint-config) | [](https://www.npmjs.com/package/@open-wc/eslint-config) | Eslint configuration following open-wc recommendations. |
| [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) | [](https://www.npmjs.com/package/@web/dev-server) | Modern development server for web applications, replacing es-dev-server. |
| [polyfills-loader](./packages/polyfills-loader) | [](https://www.npmjs.com/package/@open-wc/polyfills-loader) | Load web component polyfills using dynamic imports. |
| [scoped-elements](./packages/scoped-elements) | [](https://www.npmjs.com/package/@open-wc/scoped-elements) | Auto define custom elements to scope them and avoid the name collision. |
| [semantic-dom-diff](./packages/semantic-dom-diff) | [](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) | To compare dom and shadow dom trees. Part of open-wc recommendations. |
| [testing](./packages/testing) | [](https://www.npmjs.com/package/@open-wc/testing) | Testing following open-wc recommendations. |
| [testing-helpers](./packages/testing-helpers) | [](https://www.npmjs.com/package/@open-wc/testing-helpers) | Testing Helpers following open-wc recommendations. |
| [testing-karma](./packages/testing-karma) | [](https://www.npmjs.com/package/@open-wc/testing-karma) | Testing with Karma following open-wc recommendations. |
| [testing-karma-bs](https://github.com/open-wc/legacy/tree/master/packages/testing-karma-bs) | [](https://www.npmjs.com/package/@open-wc/testing-karma-bs) | Testing with Karma using Browserstack following open-wc recommendations. |
| [testing-wallaby](./packages/testing-wallaby) | [](https://www.npmjs.com/package/@open-wc/testing-wallaby) | Testing with wallaby following open-wc recommendations. |
## Contact
Feel free to reach out to us on [𝕏 (Twitter)](https://twitter.com/OpenWc) or create [a github issue](https://github.com/open-wc/open-wc/issues/new) for any feedback or questions you might have.
You can also find us on the Lit & Friends slack in the [#open-wc](https://lit-and-friends.slack.com/archives/CE6D9DN05) channel.
You can join the Lit & Friends slack by visiting [https://lit.dev/slack-invite/](https://lit.dev/slack-invite/).
## Sponsored by
## Supported by
## Guide
```bash
# 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 --scope @open-wc/ --stream
```