{"id":18535565,"url":"https://github.com/beforesemicolon/web-component","last_synced_at":"2025-04-09T15:32:34.557Z","repository":{"id":214022933,"uuid":"418205795","full_name":"beforesemicolon/web-component","owner":"beforesemicolon","description":"A Web Component Framework","archived":false,"fork":false,"pushed_at":"2024-05-27T21:16:56.000Z","size":1480,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-28T03:59:46.179Z","etag":null,"topics":["custom-elements","html","templating-system","web-components","webapp","webcomponents"],"latest_commit_sha":null,"homepage":"https://markup.beforesemicolon.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beforesemicolon.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-17T17:28:36.000Z","updated_at":"2024-05-30T06:01:49.587Z","dependencies_parsed_at":"2023-12-25T08:27:07.437Z","dependency_job_id":"a312a1e2-4b35-4cd4-8d9b-01563123304b","html_url":"https://github.com/beforesemicolon/web-component","commit_stats":null,"previous_names":["beforesemicolon/web-component"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fweb-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fweb-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fweb-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fweb-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beforesemicolon","download_url":"https://codeload.github.com/beforesemicolon/web-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248058165,"owners_count":21040710,"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":["custom-elements","html","templating-system","web-components","webapp","webcomponents"],"created_at":"2024-11-06T19:25:27.423Z","updated_at":"2025-04-09T15:32:34.542Z","avatar_url":"https://github.com/beforesemicolon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Component\n\n[![Static Badge](https://img.shields.io/badge/documentation-blue)](https://markup.beforesemicolon.com/documentation/capabilities/web-component)\n[![Test](https://github.com/beforesemicolon/web-component/actions/workflows/test.yml/badge.svg)](https://github.com/beforesemicolon/web-component/actions/workflows/test.yml)\n[![npm](https://img.shields.io/npm/v/%40beforesemicolon%2Fweb-component)](https://www.npmjs.com/package/@beforesemicolon/web-component)\n![npm](https://img.shields.io/npm/l/%40beforesemicolon%2Fweb-component)\n\nReactive Web Component API enhanced with [Markup](https://markup.beforesemicolon.com/).\n\n## Motivation\n\n-   Native Web Components APIs are too robust. This means you need to write so much code for the simplest components.\n-   Even if you manage to handle all the APIs fine, you still need to deal with DOM manipulation and handle your own reactivity.\n-   [Markup](https://markup.beforesemicolon.com/) offers the simplest and more powerful templating system that can be used\n    on the client without setup.\n\nWith all these reasons, it only made sense to introduce a simple API to handle everything for you.\n\n```ts\n// import everything from Markup as if you are using it directly\nimport { WebComponent, html } from '@beforesemicolon/web-component'\nimport stylesheet from './counter-app.css' with { type: 'css' }\n\ninterface Props {\n    label: string\n}\n\ninterface State {\n    count: number\n}\n\nclass CounterApp extends WebComponent\u003cProps, State\u003e {\n    static observedAttributes = ['label']\n    label = '+' // defined props default value\n    initialState = {\n        // declare initial state\n        count: 0,\n    }\n    stylesheet = stylesheet\n\n    countUp = (e: Event) =\u003e {\n        e.stopPropagation()\n        e.preventDefault()\n\n        this.setState(({ count }) =\u003e ({ count: count + 1 }))\n        this.dispatch('click')\n    }\n\n    render() {\n        return html`\n            \u003cp\u003e${this.state.count}\u003c/p\u003e\n            \u003cbutton type=\"button\" onclick=\"${this.countUp}\"\u003e\n                ${this.props.label}\n            \u003c/button\u003e\n        `\n    }\n}\n\ncustomElements.define('counter-app', CounterApp)\n```\n\nIn your HTML you can simply use the tag normally.\n\n```html\n\u003ccounter-app label=\"count up\"\u003e\u003c/counter-app\u003e\n```\n\n## Install\n\n```\nnpm install @beforesemicolon/web-component\n```\n\nIn the browser\n\n```html\n\u003c!-- use the latest version --\u003e\n\u003cscript src=\"https://unpkg.com/@beforesemicolon/web-component/dist/client.js\"\u003e\u003c/script\u003e\n\n\u003c!-- use a specific version --\u003e\n\u003cscript src=\"https://unpkg.com/@beforesemicolon/web-component@0.0.4/dist/client.js\"\u003e\u003c/script\u003e\n\n\u003c!-- link you app script after --\u003e\n\u003cscript\u003e\n    const { WebComponent } = BFS\n    const { html, state, effect } = BFS.MARKUP\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fweb-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeforesemicolon%2Fweb-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fweb-component/lists"}