Components

// click-counter.relax

--- typescript
import { reactive } from 'relax/reactivity.ts';

export let startAt = 0;

this.attachShadow({ mode: 'open' });

@reactive
const count = startAt;
---

# Click counter

<button onclick={() => count--}>Decrement</button>
{count}
<button onclick={() => count++}>Increment</button>

// mod.ts

import { compile } from 'relax/components/compiler.ts';
import { template } from 'relax/templating.ts'

const source = await Deno.readTextFile('click-counter.relax');
const compiled = await compile(source, new URL(import.meta.url));
const blob = new Blob([compiled], { type: 'text/javascript' });
const objectURL = URL.createObjectURL(blob);

const { default: ClickCounter } = await import(objectURL);

customElements.define('click-counter', ClickCounter);

const clickCounter = template`<click-counter startAt="3" />`;

document.body.append(clickCounter);

Click counter

Decrement 3 Increment