Una microlibrería inspirada en React Hooks, diseñada y optimizada para la creación de webcomponentes.
import { c } from"atomico"; // 2.5kBfunctioncomponent({ name }) {return <hostshadowDom>Hello, {name}</host>;}component.props = { name: String,};customElements.define("my-component",c(component));
import { Props, c } from"atomico"; // 2.5kBfunctioncomponent({ name }:Props<typeofcomponent.props>) {return <hostshadowDom>Hello, {name}</host>;}component.props = { name: String,};customElements.define("my-component",c(component));
import { c, html } from"atomico"; // 3.0kBfunctioncomponent({ name }) {returnhtml`<host shadowDom>Hello, ${name}</host>`;}component.props = { name: String,};customElements.define("my-component",c(component));
import { c, html } from"https://unpkg.com/atomico"; // 4.0kBfunctioncomponent({ name }) {returnhtml`<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 :
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.
Comunicación abierta: su webcomponent podrá comunicar su estado sea por eventos, propiedades o métodos.
Agnóstico: su webcomponent servirá en cualquier librería compatible con la web, ejemplo React, Vue o Svelte.
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.