Skip to content

🏝 Web Components Starter template to help kick-start development of a framework-agnostic component library.

License

Notifications You must be signed in to change notification settings

ow3org/web-components-starter

Repository files navigation

Web Component Library Starter Kit

"Why create components for a specific framework when it can be written to be understood by all β€” including browsers?"

🀝 Introduction

Before you get started, it is important to understand what a Web Component is. Think of it as a (custom) HTML element. This custom element can natively be used within your framework-of-choice. That being said, this is an opinionated starter kit, employing many best-practices, to help you expedite the development of your web component library.

πŸ‘©πŸ½β€πŸ’» Dev Tools

🧩 Plugins

πŸ₯° Coding Style

When using this template, feel free to adjust it to your needs. This is simply a framework to help you quickly & efficiently develop and design components using industry best-practices.

πŸ’‘ Get Started

It's very easy to get started, especially if you have designed/developed Vue Single File Components before. Check out the index.html and how the HelloWorld-component is defined within this repo. Feel free to create any component.

npx degit ow3org/web-components-library-starter my-lib
cd my-lib
pnpm i # if you don't have pnpm installed, run `npm install -g pnpm`

# starts the local server at http://localhost:3333 & watches for changes
pnpm dev

# builds the component library for production-ready use
pnpm build

# check out the `package.json` to see the remainder of scripts

Tips

When using VS Code as your code editor, you may want to consider keeping the vscode.html-data.json file updated. It provides hints to your code editor and you can find more examples here.

# how to create a git commit?
git add . # select the changes you want to commit
pnpm run commit # then simply answer the questions

# after you have successfully committed, you may create a "release"
pnpm run release # automates git commits, versioning, and CHANGELOG generation

πŸ–₯️ Browsers

This starter kit is built for the modern web and avoids bloated polyfills and outdated environments as much as possible. Currently, it supports all browsers that fully implement the Custom Elements V1.

  • Edge 79+
  • Firefox 63+
  • Chrome 67+
  • Safari 13.1+
  • Opera 64+
  • iOS Safari 13.7+
  • Android Browser 81+
  • Opera Mobile 59+
  • Chrome for Android 88+

πŸ§ͺ Testing

yarn test

πŸ“ˆ Changelog

Please see our releases page for more information on what has changed recently.

πŸ’ͺ🏼 Contributing

Please see CONTRIBUTING for details.

🏝 Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Open Web Discord Server

πŸ“„ License

The MIT License (MIT). Please see LICENSE for more information.

Made with ❀️ by Open Web Labs. And many thanks to antfu!