atomico-example

hello.js

import { c, html } from "atomico"; // 3.0kB

function component({ name }) {
  return html`<host shadowDom>Hello, ${name}</host>`;
}

component.props = {
  name: String,
};

customElements.define("my-component", c(component));

hello.jsx

import { c } from "atomico"; // 2.5kB

function component({ name }) {
  return <host shadowDom>Hello, {name}</host>;
}

component.props = {
  name: String,
};

customElements.define("my-component", c(component));

hello.ts

import { Props, c, html } from "atomico"; // 3.0kB

function component({ name }:Props<component.props>) {
  return html`<host shadowDom>Hello, ${name}</host>`;
}

component.props = {
  name: String,
};

customElements.define("my-component", c(component));

hello.tsx

import { Props, c } from "atomico"; // 2.5kB

function component({ name }:Props<component.props>) {
  return <host shadowDom>Hello, {name}</host>;
}

component.props = {
  name: String,
};

customElements.define("my-component", c(component));