🚀Comenzando con Webcomponents

Esta guía conocerás lo esencial para comenzar a desarrollar webcomponents con Atomico

Gracias por estar aquí e iniciarte con Atomico. Hablemos un poco de lo que hoy ofrece atomico:

1. Agilidad de desarrollo, el enfoque funcional de Atomico simplifica el código en todas las etapas de desarrollo.

2. Ligero por dentro y por fuera, Atomico te permite crear un componente con menos código y con un bajo impacto de dependencias 3kb Aproximadamente.

3. Realmente rapido, Atomico posee un buen performance en el browser y una experiencia de desarrollo ágil.

Entendamos el como luce un webcomponent creado con Atomico:

MyComponent.jsx

// Importaciones 
import { c, css } from "atomico";

// Creando nuestro webcomponents: Definiendo el customElement
export const MyComponent = c(
  // Definiendo el renderizado del componente
  ({ message }) => {
    return <host shadowDom>{message}</host>;
  },
  {
    // Definiendo propiedades(props) y atributos
    props: {
      message: String,
    },
    // Definiendo estilo css encapsulado 
    styles: css`
      :host {
        font-size: 30px;
      }
    `,
  }
);

// Registro del custom tag del Web Component
customElements.define("my-component", c(component));

Analicemos el código por partes...

1.0 Importaciónes

import { c, css } from "atomico";

¿Qué hemos importado?

1. c: Función que transforma el componente funcional en un customElement estándar.

2. css: Función que permite crear el CSSStyleSheet(CSS) para nuestro componente siempre y cuando este declare el shadowDom.

2.0 Creando nuestro webcomponents: Definiendo el customElement

2.1. Definiendo el renderizado del componente

MyComponent.tsx - Linea: 7 a 9

// Definiendo el renderizado del componente
({ message }) => {
    return <host shadowDom>{message}</host>;
}

Nuestra función recibe todas las props(Propiedades y Atributos) declaradas en props(linea 12) la función declara toda la lógica y plantilla del webcomponent. Una regla importante dentro de Atomico es "todo componente creado con Atomico debe siempre retornar el tag <host>".

2.2 Definiendo propiedades(props) y atributos

Atomico detecta las prop(Propiedades y Atributos) del componente gracias a la asociación del objeto props, esto mediante el uso de índices y valores te permite definir:

1. índice: Nombre de la propiedad y atributo.

2. Valor: tipo de la prop.

MyComponent.tsx - Lina: 12 a 14

// Defining Component Properties(props) and Attributes
props: {
  message: String,
},

Del ejemplo podemos inferir que Atomico creará en nuestro webcomponente una propiedad y atributo llamada mensaje y esta solo puede recibir valores del tipo String.

2.3 Definiendo estilo css encapsulado

Atomico detecta los estilos estáticos de tu componente gracias a la asociación de la propiedad styles:

MyComponent.tsx - Linea: 16 a 19

styles: css`
  :host {
    font-size: 30px;
  }
`,

styles acepta valores CSSStyleSheet(CSS) de forma individual o en lista, el retorno de la función css es un CSSStyleSheet estándar, por lo que puede ser compartido fuera de Atomico.

3.0 Registro del custom tag del Web Component

MyComponent.tsx - Linea: 25

// Web Component Registration and Definition
customElements.define("my-component", MyComponent);

Para crear nuestro customElement estándar deberemos entregar nuestro componente funcional a la función c del módulo de Atomico, la función c generará como retorno un customElement que puede ser definido o extendido.

Ejemplo

WebComponents.devWebComponents.dev