{"id":20638266,"url":"https://github.com/lippiece/webcomponent-constructor","last_synced_at":"2026-04-21T14:33:34.171Z","repository":{"id":191647044,"uuid":"685083219","full_name":"Lippiece/webcomponent-constructor","owner":"Lippiece","description":"A tool for creating web components that automatically implement best practices.","archived":false,"fork":false,"pushed_at":"2024-02-21T02:54:51.000Z","size":235,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T09:35:46.431Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lippiece.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}},"created_at":"2023-08-30T13:34:36.000Z","updated_at":"2023-08-30T13:34:48.000Z","dependencies_parsed_at":"2023-08-30T23:16:29.658Z","dependency_job_id":"93264896-a351-4663-8c8c-8e91fa996ef7","html_url":"https://github.com/Lippiece/webcomponent-constructor","commit_stats":null,"previous_names":["lippiece/webcomponent-constructor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lippiece/webcomponent-constructor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lippiece%2Fwebcomponent-constructor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lippiece%2Fwebcomponent-constructor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lippiece%2Fwebcomponent-constructor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lippiece%2Fwebcomponent-constructor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lippiece","download_url":"https://codeload.github.com/Lippiece/webcomponent-constructor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lippiece%2Fwebcomponent-constructor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32095909,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-16T15:17:30.159Z","updated_at":"2026-04-21T14:33:34.142Z","avatar_url":"https://github.com/Lippiece.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web component constructor in Typescript\nWelcome! This readme explains the functionality and usage of the `createWebComponentBaseClass` function for creating reusable web components in TypeScript.\n\n### What is it?\nThis library is my pet project. It provides a base class for building web components with `lit-html`, `nanostores` and `immer`. It simplifies the setup process by handling several boilerplate tasks:\n\n- State management: Creates a `nanostores`' `atom` with the provided default state using `immer`'s `produce` for immutable updates.\n- Templating: Accepts a lit `TemplateResult` and updates the shadow DOM whenever it changes.\n- Basic setup: Extends `HTMLElement`, attaches a shadow DOM, and provides access to state and template.\n\n### How to use it\n\n#### Install:\n```bash\nnpm install webcomponent-constructor\n```\n\n#### Write your configuration:\nCreate an object that defines the name, default state, and template for your web component.\n\n```ts\nimport createWebComponentBaseClass from \"webcomponent-constructor\";\n\nconst configuration = {\n  name: \"my-component\",\n  defaultState: { count: 0 },\n  template: html`\u003ch1\u003eNo event listeners here, just static HTML\u003c/h1\u003e`,\n};\n\nconst Base = createWebComponentBaseClass(configuration);\n```\n\n#### Create the web component:\nUse the createWebComponentBaseClass function with your configuration.\n\n```ts\nclass YourOwnClass extends Base {\n  constructor() {\n    super()\n    this.state.subscribe((state =\u003e {\n      this.template.set(html`\u003cbutton @click=${() =\u003e this.state.set(()=\u003e({ count: state.count + 1 }))}\u003eClick Me: ${state.count}\u003c/button\u003e`)\n    }\n    // ^ ^ ^\n    // `@`-stuff is ok here since you have access to `this`.\n    // Just don't forget about arrow functions or binding `this` inside the listeners.\n  }\n}\n\ncustomElements.define(configuration.name, YourOwnClass);\n```\n\n#### Then import the script where you defined the customElement:\n- Into the HTML, and then declare your component there (`\u003cmy-component\u003e\u003c/my-component\u003e`).\n- Or into some other script, and do your magic there.\n\n#### Extend and customize:\nYou can further extend the generated class to add methods, lifecycle hooks, and additional functionality specific to your component.\n\n### Features\n- Simple and concise: Focuses on essential tasks, keeping the codebase clean and easy to understand.\n- State management with `immer`: Enables immutable updates with a familiar API. The state is automatically subscribed to to re-rendeer on change.\n- `lit-html` integration: Renders templates efficiently using `lit`'s virtual DOM. Technically, it's just another `nanostores` `atom`, which is also subscribed to.\n- Open shadow DOM: Allows direct styling of component internals.\n\n### Benefits\n- Reduced boilerplate: Save time and effort by focusing on your component logic.\n- Consistent structure: Provides a standardized base for all your web components.\n- Improved maintainability: Code is easier to understand and extend.\n\n### Why?\nI wanted my own `Lit` with bells and whistles.\n\n### Feedback and contributions\nSure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flippiece%2Fwebcomponent-constructor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flippiece%2Fwebcomponent-constructor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flippiece%2Fwebcomponent-constructor/lists"}