{"id":21293748,"url":"https://github.com/emolr/wc-library-starter","last_synced_at":"2025-08-17T08:07:22.305Z","repository":{"id":73125332,"uuid":"169566740","full_name":"emolr/wc-library-starter","owner":"emolr","description":"A starter template for creating a webcomponent library using typescript, inspired by google material design webcomponents and open-wc","archived":false,"fork":false,"pushed_at":"2019-02-08T20:05:13.000Z","size":1160,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-30T06:08:15.776Z","etag":null,"topics":["design-system","designsystem","library","styleguide","typescript","webcomponents"],"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/emolr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-02-07T12:15:53.000Z","updated_at":"2024-01-12T18:46:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"59c3b5a3-8168-45be-abc1-04118f98c5df","html_url":"https://github.com/emolr/wc-library-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/emolr/wc-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emolr%2Fwc-library-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emolr%2Fwc-library-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emolr%2Fwc-library-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emolr%2Fwc-library-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emolr","download_url":"https://codeload.github.com/emolr/wc-library-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emolr%2Fwc-library-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270820793,"owners_count":24651534,"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","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["design-system","designsystem","library","styleguide","typescript","webcomponents"],"created_at":"2024-11-21T13:56:22.331Z","updated_at":"2025-08-17T08:07:22.292Z","avatar_url":"https://github.com/emolr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WC-library-starter\n\nWeb component library starter provides a starting point for creating a web component library with typescript, SCSS, browser testing, style guide (storybook) and a mono repo structure for publishing components individually.\n\n\n## Getting started\n\n### Install dependencies and bootstrap\n\nStart by downloading this repository\n\n```sh\ngit clone https://github.com/emolr/wc-library-starter.git\n```\n\nBootstrap project and make the first build\n\n```sh\nnpm run bootstrap\n```\nThis command will install dependencies in subfolders located in `/packages/*/package.json`\n\n### Watch for changes and update storybook\n\n* Add components in `/packages/*`, see the [example button component](https://github.com/emolr/wc-library-starter/tree/master/packages/button) to learn the component structure.\n* `/packages/*/src/*.scss` files automatically generates `/packages/*/src/*.css.ts` exposing `export const style = css`\\`css_from_scss...`, to be imported in components.\n* Add new storybook stories in `/stories/*.stories.js`, see the [example story](https://github.com/emolr/wc-library-starter/blob/master/stories/button.stories.js) and learn more about [storybook](https://storybook.js.org/).\n\nTranspile typescript, and generate styles on file changes\n```sh\nnpm start\n```\n*This also starts the storybook on http://localhost:9001/*\n\nBuild all components\n```sh\nnpm run build\n```\n\nBuild storybook\n```sh\nnpm run build \u0026\u0026 npm run storybook:build\n```\n*This generates `/_site` that can be hosted using eg. [netlify](https://www.netlify.com)*\n\n### Running tests\nTests should be written in `.js` and be located in `/test/**/*.test.js`. Read more about the test suite on [open-wc](https://open-wc.org/testing/#example-tests)\n\nRun all tests\n```sh\nnpm run test\n```\n\nRun tests on test file changes\n```sh\nnpm run test:watch\n```\n\nRun all test in es5 mode\n```sh\nnpm run test:es5\n```\n\nRun tests on test file changes in es5 mode\n```sh\nnpm run test:es5:watch\n```\n\n## Publish components on NPM\n\nLerna is integrated with the project, make sure all `/packages/*/package.json` files look correct and run:\n```sh\nnpm run publish\n```\n\n\n## Differences from eg. [PWA-starter-kit](https://github.com/Polymer/pwa-starter-kit)\n\nThis starter kit does not provide the tools and setup for building an application to run itself but is targeted component libraries similar to the [Material web components](https://github.com/material-components/material-components-web-components) repository, to build a set of components to be used in applications and published via npm with a storybook serving as documentation.\n\n\n## How to Contribute\n\nEveryone is welcome to contribute to this project. The best way to\nstart is by checking our [open issues](https://github.com/emolr/wc-library-starter/issues),\n[submit a new issue](https://github.com/emolr/wc-library-starter/issues/new?labels=bug) or\n[feature request](https://github.com/emolr/wc-library-starter/issues/new?labels=enhancement),\nparticipate in discussions, upvote or downvote the issues you like or dislike, send pull requests.\n\n## Under early development\nThis project is a personal project with the goals of a component driven workflow without hassle while supporting multiple frameworks without writing framework specific code, but instead use state of the art tools to transpile, test, and document components.\n\nCompiling / bundling of the components to be consumed must happen by the consumer and it is not expected for the components to work without a module bundler of some sort until the browsers support implicit node_modules import paths.\n\nRead more about building and consuming web components on [LitElement](https://lit-element.polymer-project.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femolr%2Fwc-library-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femolr%2Fwc-library-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femolr%2Fwc-library-starter/lists"}