@ow3/hello-world-elements NPM

@ow3/hello-world-elements

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

💡 Get Started

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 reusable component library.

# you may use this GitHub template or the following command:
npx degit openwebstacks/stacks-framework hello-world-stack
cd hello-world-stack

pnpm i # install deps for all packages
pnpm dev # stubs the libraries for local use
pnpm dev:vite-wc # starts the dev server
pnpm build # builds all packages for production-ready use

Additionally, the package.json contains some useful snippets you likely want to be aware of.

🤖 Usage

Because this project is optimized toward the development of easily reusable & composable component libraries, it's very easy to use (and distribute):

<html>
  <body>
    <hello-world name="Jane Doe"></hello-world>
    <script src="elements.js"></script>
  </body>
</html>

Tips

This project also includes a simple way to handle your versioning. Through semantic commit names, it will also generate the two changelogs: one as part of the GitHub releases & the one markdown file that's stored within the root of the project.

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

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

Dev Tools

TypeScript 4.7
Vite 2.9 - "Next Generation Frontend Tooling"
Vue 3.2 - make easy use of Vue's powerful SFCs
UnoCSS - create your own style guide with ease (e.g. Tailwind CSS)
Commitizen & git-cz - Automate git commits, versioning, and CHANGELOG generation
Vitest - Unit testing powered by Vite
Cypress - E2E testing
Renovate - automatic PR dependency updates
GitHub Actions - automatically fixes code style issues, tags releases, and runs the test suite
VS Code Extensions
- Volar - Vue 3 <script setup> IDE support
- cspell - spell checking
- Intellisense - Tailwind CSS (or Windi CSS) class name sorter

Plugins

unplugin-vue-components - components auto import
unplugin-auto-import - Directly use Vue Composition API and others without importing
VueUse - Collection of useful composition APIs

Coding Style

Composition API with <script setup> SFC syntax
ESLint - statically analyzes, fixes and formats your code without the need of Prettier

When using this template, feel free to adjust it to your needs. It simply is a framework to help you quickly & efficiently bootstrap & design component libraries using industry best-practices.