{"id":14990082,"url":"https://github.com/aralroca/counter-wc","last_synced_at":"2026-02-27T11:40:58.157Z","repository":{"id":254503353,"uuid":"846725040","full_name":"aralroca/counter-wc","owner":"aralroca","description":"An example of Web Component library that works with SSR Declarative Shadow DOM in any framework or Vanilla.js. Thanks to Brisa Web Component Compiler.","archived":false,"fork":false,"pushed_at":"2024-10-05T07:54:17.000Z","size":33,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-24T12:24:38.518Z","etag":null,"topics":["brisa","custom-elements","javascript","ssr","typescript","web-component","web-components","web-components-library"],"latest_commit_sha":null,"homepage":"https://dev.to/aralroca/build-reactive-web-components-with-ssr-3pb9","language":"TypeScript","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/aralroca.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":"2024-08-23T20:25:55.000Z","updated_at":"2025-10-05T13:36:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"851dd069-18a6-4d18-856c-16446e77aaae","html_url":"https://github.com/aralroca/counter-wc","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"229d1747608158c80d0b6fb7d993e9b603ab1b17"},"previous_names":["aralroca/counter-wc"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/aralroca/counter-wc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fcounter-wc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fcounter-wc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fcounter-wc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fcounter-wc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aralroca","download_url":"https://codeload.github.com/aralroca/counter-wc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aralroca%2Fcounter-wc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29892297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T09:48:51.284Z","status":"ssl_error","status_checked_at":"2026-02-27T09:48:43.992Z","response_time":57,"last_error":"SSL_read: 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":["brisa","custom-elements","javascript","ssr","typescript","web-component","web-components","web-components-library"],"created_at":"2024-09-24T14:19:26.055Z","updated_at":"2026-02-27T11:40:58.138Z","avatar_url":"https://github.com/aralroca.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# `\u003ccounter-wc /\u003e`\n\n\u003ca href=\"https://brisa.build\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg\n    width=\"150\"\n    height=\"42\"\n    src=\"https://aralroca.com/images/blog-images/brisa_badge.svg\"\n    alt=\"Made with Brisa\"\n  /\u003e\n\u003c/a\u003e\n\n\n[![npm version](https://badge.fury.io/js/counter-wc.svg)](https://badge.fury.io/js/counter-wc)\n![npm](https://img.shields.io/npm/dw/counter-wc)\n[![size](https://img.shields.io/bundlephobia/minzip/counter-wc)](https://bundlephobia.com/package/counter-wc)\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=aralroca\"\u003e\n\u003cimg src=\"https://img.shields.io/twitter/follow/aralroca?style=social\u0026logo=x\"\n            alt=\"follow on Twitter\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\nIt is a very silly example of a **Counter** Web Component. \n\n```sh\n\u003e bun install counter-wc\n```\n\nThe idea of this library is to show how you can use the [Brisa](https://brisa.build) Web Component compiler to transform JSX with Signals into two files; one to load the web component on the client, and another to load the web component on the server to make the SSR of the Web Component easy.\n\n## How to use this Counter Web Component\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eBrisa Web Component Example\u003c/title\u003e\n  \u003cscript type=\"importmap\"\u003e\n    {\n      \"imports\": {\n        \"brisa/client\": \"https://unpkg.com/brisa@latest/client-simplified/index.js\"\n      }\n    }\n  \u003c/script\u003e\n  \u003cscript type=\"module\" src=\"https://unpkg.com/counter-wc@latest\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ccounter-wc start=\"15\"\u003e\u003c/counter-wc\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e The importmap is necessary because all the compiled web components are only the rendering function so that they take up little space, but they need the Brisa wrapper to work correctly.\n\n\n## How to use this Counter Web Component with SSR\n\nFor this, you need Bun.js or Node.js. You can integrate it with any framework without the need to have JSX. What you will need is to have the Brisa library installed to use its `renderToString`.\n\n```sh\n\u003e bun install brisa\n\u003e bun install counter-wc\n```\n\nAnd then you can use the `renderToString` function to render the web component on the server.\n\n**ssr.js**\n\n```jsx\nimport { renderToString } from 'brisa/server';\nimport { jsx } from 'brisa/jsx-runtime';\nimport CustomCounter from 'counter-wc/server';\n\nconst html = `\n\t\u003c!DOCTYPE html\u003e\n\t\u003chtml lang=\"en\"\u003e\n\t\t\u003chead\u003e\n\t\t\u003cmeta charset=\"UTF-8\"\u003e\n\t\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\t\t\u003ctitle\u003eBrisa Web Component Example\u003c/title\u003e\n\t\t\u003cscript type=\"importmap\"\u003e\n\t\t\t{\n\t\t\t\t\"imports\": {\n\t\t\t\t\t\"brisa/client\": \"https://unpkg.com/brisa@latest/client-simplified/index.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t\u003c/script\u003e\n\t\t\u003cscript type=\"module\" src=\"https://unpkg.com/counter-wc@latest\"\u003e\u003c/script\u003e\n\t\t\u003c/head\u003e\n\t\t\u003cbody\u003e\n\t\t\t${await renderToString(jsx(CustomCounter, { start: 10 }))}\n\t\t\u003c/body\u003e\n\t\u003c/html\u003e\n`;\n\nconsole.log(html);\n```\n\nThen run `bun run ssr.js` and you will see the HTML with the rendered web component using the [Declarative Shadow DOM](https://web.dev/articles/declarative-shadow-dom).\n\n## Using the Web Component in Brisa\n\nBrisa uses a special integration file located at `web-components/_integrations.(tsx|ts|js|jsx)`. This file maps Web Component selectors to their respective libraries, ensuring they are correctly loaded when needed.\n\n```tsx\nimport type { WebComponentIntegrations } from \"brisa\";\n\nexport default {\n  \"counter-wc\": {\n    client: \"counter-wc\",\n    server: \"counter-wc/server\",\n    types: \"counter-wc/types\",\n  },\n} satisfies WebComponentIntegrations;\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e After this integration, you can use the Web Component in your Brisa application directly by typing `\u003ccounter-wc\u003e\u003c/counter-wc\u003e` in your JSX code (pages, components, web components, elements). SSR and TypeScript support are automatically handled by Brisa.\n\n## Building the Web Component\n\nYou just need to clone the repository, install the dependencies with:\n\n```sh\n\u003e bun install\n```\n\nAfter that, you can build the Web Component with:\n\n```sh\n\u003e bun run build\n```\n\nBelow the build script runs the `brisa build -w src/counter-wc.tsx` command that does the magic of transforming the JSX with Signals into two files, one for the client and one for the server.\n\nFeel free to use this reference library to create your own Web Components with Brisa and share them with the community.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faralroca%2Fcounter-wc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faralroca%2Fcounter-wc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faralroca%2Fcounter-wc/lists"}