{"id":13429304,"url":"https://github.com/ow3org/web-components-starter","last_synced_at":"2025-03-16T03:31:18.131Z","repository":{"id":37006437,"uuid":"482377292","full_name":"ow3org/web-components-starter","owner":"ow3org","description":"🏝 Web Components Starter template to help kick-start development of a framework-agnostic component library.","archived":false,"fork":false,"pushed_at":"2024-10-23T23:53:33.000Z","size":713,"stargazers_count":18,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-24T22:17:22.019Z","etag":null,"topics":["library","starter-kit","template","typescript","vite","vue","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ow3org.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-16T22:47:03.000Z","updated_at":"2024-10-07T19:24:21.000Z","dependencies_parsed_at":"2024-08-29T22:49:20.407Z","dependency_job_id":"99eb92dd-e63c-4593-9dc2-8bf3f724a8db","html_url":"https://github.com/ow3org/web-components-starter","commit_stats":null,"previous_names":[],"tags_count":11,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ow3org%2Fweb-components-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ow3org%2Fweb-components-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ow3org%2Fweb-components-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ow3org%2Fweb-components-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ow3org","download_url":"https://codeload.github.com/ow3org/web-components-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822312,"owners_count":20353496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library","starter-kit","template","typescript","vite","vue","web-components"],"created_at":"2024-07-31T02:00:33.872Z","updated_at":"2025-03-16T03:31:17.803Z","avatar_url":"https://github.com/ow3org.png","language":"JavaScript","funding_links":[],"categories":["Projects Using Stacks"],"sub_categories":["Scaffold"],"readme":"# Web Component Library Starter Kit\n\n\"Why create components for a specific framework when it can be written to be understood by all — including browsers?\"\n\n## 🤝 Introduction\n\nBefore 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.\n\n### 👩🏽‍💻 Dev Tools\n\n- [Vite 3.1](https://vitejs.dev/) - \"Next Generation Frontend Tooling\"\n- [Vue 3.2](https://vuejs.org/) - write Web Components the same way you would write SFCs\n- [UnoCSS](https://github.com/unocss/unocss) - create your own style guide with ease (e.g. Tailwind CSS)\n- [TypeScript 4.8](https://www.typescriptlang.org/)\n- [Commitizen \u0026 commitlint](https://www.npmjs.com/package/@commitlint/cz-commitlint) - Automate git commits, versioning, and CHANGELOG generation\n- [Vitest](https://github.com/vitest-dev/vitest) - Unit \u0026 e2e testing powered by Vite\n- [Renovate](https://renovatebot.com/) - automatic PR dependency updates\n- [GitHub Actions](https://github.com/features/actions) - automatically fixes code style issues, tags releases, and runs the test suite\n- [VS Code Extensions](./.vscode/extensions.json)\n  - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `\u003cscript setup\u003e` IDE support\n  - [cspell](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - spell checking\n  - [Windi Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - Tailwind CSS (or Windi CSS) class name sorter\n\n### 🧩 Plugins\n\n- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import\n- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing\n- [VueUse](https://github.com/vueuse/vueuse) - Collection of useful composition APIs\n\n### 🥰 Coding Style\n\n- Use Composition API with [`\u003cscript setup\u003e` SFC syntax](https://github.com/vuejs/rfcs/pull/227)\n- [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled\n- [ESLint](https://eslint.org/) - statically analyzes your code to quickly find problems\n\nWhen using this template, feel free to adjust it to your needs. This is simply a framework to help you quickly \u0026 efficiently develop and design components using industry best-practices.\n\n## 💡 Get Started\n\nIt'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.\n\n```bash\nnpx degit ow3org/web-components-library-starter my-lib\ncd my-lib\npnpm i # if you don't have pnpm installed, run `npm install -g pnpm`\n\n# starts the local server at http://localhost:3333 \u0026 watches for changes\npnpm dev\n\n# builds the component library for production-ready use\npnpm build\n\n# check out the `package.json` to see the remainder of scripts\n```\n\n### Tips\n\nWhen using VS Code as your code editor, you may want to consider keeping the [vscode.html-data.json](.vscode/vscode.html-data.json) file updated. It provides hints to your code editor and you can find more examples [here](https://github.com/microsoft/vscode-custom-data/blob/main/web-data/html/htmlTags.json).\n\n```bash\n# how to create a git commit?\ngit add . # select the changes you want to commit\npnpm run commit # then simply answer the questions\n\n# after you have successfully committed, you may create a \"release\"\npnpm run release # automates git commits, versioning, and CHANGELOG generation\n```\n\n## 🖥️ Browsers\n\nThis 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][caniuse-custom-el-v1].\n\n- Edge 79+\n- Firefox 63+\n- Chrome 67+\n- Safari 13.1+\n- Opera 64+\n- iOS Safari 13.7+\n- Android Browser 81+\n- Opera Mobile 59+\n- Chrome for Android 88+\n\n[caniuse-custom-el-v1]: https://caniuse.com/custom-elementsv1\n\n## 🧪 Testing\n\n```bash\nyarn test\n```\n\n## 📈 Changelog\n\nPlease see our [releases](https://github.com/ow3org/web-components-library-starter/releases) page for more information on what has changed recently.\n\n## 💪🏼 Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## 🏝 Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discussions on GitHub](https://github.com/ow3org/web-components-library-starter/discussions)\n\nFor casual chit-chat with others using this package:\n\n[Join the Open Web Discord Server](https://discord.ow3.org)\n\n## 📄 License\n\nThe MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.\n\nMade with ❤️ by Open Web Labs. And many thanks to [antfu](https://github.com/antfu)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fow3org%2Fweb-components-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fow3org%2Fweb-components-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fow3org%2Fweb-components-starter/lists"}