👋Atomico

Una microlibrería inspirada en React Hooks, diseñada y optimizada para la creación de webcomponentes.

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));

TSX

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

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

component.props = {
  name: String,
};

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

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));

Browser

import { c, html } from "https://unpkg.com/atomico"; // 4.0kB


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

component.props = {
  name: String,
};

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

Atomico simplifica el aprendizaje, flujo de trabajo y el mantenimiento al crear webcomponents y lo logra con :

1. Interfaces escalable y reutilizable: con Atomico el código es más simple y podrás aplicar practicas que faciliten la reutilización de tu código.

2. Comunicación abierta: su webcomponent podrá comunicar su estado sea por eventos, propiedades o métodos.

3. Agnóstico: su webcomponent servirá en cualquier librería compatible con la web, ejemplo React, Vue o Svelte.

4. Performance: Atomico posee un performance comparativo a niveles de Svelte, ganando la tercera posición en performance según webcomponents.dev en una comparativa de 55 librerías entre las cuales esta React, Vue, Stencil y Lit.

Api

🧬Props(Propiedades)

✨Sistemas de diseño con Atomico