{"id":15387990,"url":"https://github.com/break-stuff/web-components-workshop","last_synced_at":"2025-04-15T18:30:48.517Z","repository":{"id":211791400,"uuid":"611822648","full_name":"break-stuff/web-components-workshop","owner":"break-stuff","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-10T11:40:55.000Z","size":2912,"stargazers_count":8,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T00:34:11.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/break-stuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-03-09T16:06:07.000Z","updated_at":"2024-07-19T16:06:18.000Z","dependencies_parsed_at":"2023-12-10T22:29:45.646Z","dependency_job_id":"41f99bb9-77cd-4c0d-9690-356d089e635b","html_url":"https://github.com/break-stuff/web-components-workshop","commit_stats":{"total_commits":25,"total_committers":3,"mean_commits":8.333333333333334,"dds":"0.19999999999999996","last_synced_commit":"2ea3cbdc90aaf6c90e1c00ac82cf6f253cac18b1"},"previous_names":["break-stuff/web-components-workshop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fweb-components-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fweb-components-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fweb-components-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fweb-components-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/break-stuff","download_url":"https://codeload.github.com/break-stuff/web-components-workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249128904,"owners_count":21217240,"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":[],"created_at":"2024-10-01T14:55:13.636Z","updated_at":"2025-04-15T18:30:48.048Z","avatar_url":"https://github.com/break-stuff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Component Workshop\n\nThis repo is used as a template for conducting a web component workshop. The components are written using the [Lit library](https://lit.dev/).\n\n## Getting Started\n\nBefore getting started you will need to install the dependencies and create an initial build. Run the following command in your terminal:\n\n```bash\nnpm i \u0026\u0026 npm run build\n```\n\n## Creating Components\n\nA component generator has been set up in this project using [Plop templates](https://plopjs.com/). Creating a new component can be done using the following command and following the instructions:\n\n```bash\nnpm run plop\n```\n\n## Running Storybook\n\n```bash\nnpm run dev\n```\n\nRunning this command will start the [Storybook](https://storybook.js.org/) instance. The Storybook experienced has been enhanced using the [Web Component Storybook Helpers](https://www.npmjs.com/package/wc-storybook-helpers) to provides better integration for web components.\n\n## Running Tests\n\nTests are done using [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and [Playwright](https://modern-web.dev/docs/test-runner/browser-launchers/playwright/), so tests are run in _actual_ browsers (Chrome, Firefox, and Safari/WebKit). Tests can be run using the following command:\n\n```bash\nnpm run test\n```\n\n## Framework Integrations\n\nFramework support for web components is getting better and better every day. For a detailed report of framework compatibility for web components, check out [Custom Elements Everywhere](https://custom-elements-everywhere.com/).\n\n### Angular\n\nAngular has great web component integration. Including the `CUSTOM_ELEMENTS_SCHEMA` in the module allows the use of the web components in the HTML markup without the compiler producing errors. This code should be added into the `AppModule` and in every other modules that use your custom elements.\n\nHere is an example of adding it to `AppModule`:\n\n```ts\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from \"@angular/core\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\n\u003e The `CUSTOM_ELEMENTS_SCHEMA` needs to be included in any module that uses custom elements.\n\nThe `CUSTOM_ELEMENTS_SCHEMA` does not provide any additional data about your components, so i recommend using the tools in the IDE Support Section\n\n### Vue.js\n\nIf you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure the components work correctly.\n\nTo provide type safety and autocomplete, you can generate custom types using the [Custom Elements Vuejs Integration](https://www.npmjs.com/package/custom-element-vuejs-integration) package.\n\n### React\n\nReact does not have great web component support, but fortunately there are a number of tools out there to the wrap components to provide better compatibility. There are some framework-specific tools to generate wrappers, but this project uses a framework agnostic tool that generates them from the Custom Elements Manifest called the [Custom Element React Wrappers](https://www.npmjs.com/package/custom-element-react-wrappers).\n\n### Additional Integrations\n\nThe following tools generate types that provide inline documentation, autocomplete, and type-safe validation for your custom elements.\n\n- [JSX Integration](https://www.npmjs.com/package/custom-element-jsx-integration) -  for non-react frameworks that use JSX like [Preact](https://preactjs.com/) and [StencilJS](https://stenciljs.com/)\n- [SolidJS Integration](https://www.npmjs.com/package/custom-element-solidjs-integration)\n \n\n## IDE Integration\n\n- [VS Code Data Generator](https://www.npmjs.com/package/custom-element-vs-code-integration) - creates intellisense/autocomplete for our components in [VS Code](https://code.visualstudio.com/)\n- [JetBrains Web Type Generator](https://www.npmjs.com/package/custom-element-jet-brains-integration) - creates intellisense/autocomplete for our components in [JetBrains IDEs](https://www.jetbrains.com/) (WebStorm, Rider, IntelliJ, PHPStorm...)\n\n\n## Additional Links\n\n- [Custom Elements Manifest (CEM) Analyzer](https://custom-elements-manifest.open-wc.org/) - serializes the component metadata\n- [Custom Element Lazy-Loader](https://www.npmjs.com/package/custom-element-lazy-loader) - Automatically loads components from a single entry point.\n- [Custom Element Expanded Types](https://www.npmjs.com/package/cem-plugin-expanded-types) - Parses TypeScript types to provide better tooling integration.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fweb-components-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbreak-stuff%2Fweb-components-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fweb-components-workshop/lists"}