https://github.com/aralroca/counter-wc

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.
https://github.com/aralroca/counter-wc

brisa custom-elements javascript ssr typescript web-component web-components web-components-library

Last synced: 20 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/aralroca/counter-wc
• Owner: aralroca
• License: mit
• Created: 2024-08-23T20:25:55.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-05T07:54:17.000Z (3 months ago)
• Last Synced: 2024-11-25T12:05:08.082Z (about 1 month ago)
• Topics: brisa, custom-elements, javascript, ssr, typescript, web-component, web-components, web-components-library
• Language: TypeScript
• Homepage: https://dev.to/aralroca/build-reactive-web-components-with-ssr-3pb9
• Size: 32.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# ``



  



[![npm version](https://badge.fury.io/js/counter-wc.svg)](https://badge.fury.io/js/counter-wc)

![npm](https://img.shields.io/npm/dw/counter-wc)

[![size](https://img.shields.io/bundlephobia/minzip/counter-wc)](https://bundlephobia.com/package/counter-wc)







It is a very silly example of a **Counter** Web Component. 

```sh

> bun install counter-wc

```

The 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.

## How to use this Counter Web Component

```html

  

  

  Brisa Web Component Example

  

    {

      "imports": {

        "brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"

      }

    }

  

  

  

```

> [!NOTE]

>

> 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.

## How to use this Counter Web Component with SSR

For 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`.

```sh

> bun install brisa

> bun install counter-wc

```

And then you can use the `renderToString` function to render the web component on the server.

**ssr.js**

```jsx

import { renderToString } from 'brisa/server';

import { jsx } from 'brisa/jsx-runtime';

import CustomCounter from 'counter-wc/server';

const html = `

	

	

		

		

		

		Brisa Web Component Example

		

			{

				"imports": {

					"brisa/client": "https://unpkg.com/brisa@latest/client-simplified/index.js"

				}

			}

		

		

		

		

			${await renderToString(jsx(CustomCounter, { start: 10 }))}

		

	

`;

console.log(html);

```

Then 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).

## Using the Web Component in Brisa

Brisa 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.

```tsx

import type { WebComponentIntegrations } from "brisa";

export default {

  "counter-wc": {

    client: "counter-wc",

    server: "counter-wc/server",

    types: "counter-wc/types",

  },

} satisfies WebComponentIntegrations;

```

> [!NOTE]

>

> After this integration, you can use the Web Component in your Brisa application directly by typing `` in your JSX code (pages, components, web components, elements). SSR and TypeScript support are automatically handled by Brisa.

## Building the Web Component

You just need to clone the repository, install the dependencies with:

```sh

> bun install

```

After that, you can build the Web Component with:

```sh

> bun run build

```

Below 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.

Feel free to use this reference library to create your own Web Components with Brisa and share them with the community.

## License

MIT