Libreria Itsi con Web Components

Ing. Jesús Aquileo León Campos

Creación del proyecto

1. Crear un proyecto con npm.

npm init -y

2. Montar un servidor en el entorno de desarrollo para visualizar el proyecto

npm i --save-dev @web/dev-server

3. Agregar el siguiente script para levantar el proyecto con start en el archivo package.json

"start": "web-dev-server --node-resolve --open --watch"

4. Crear archivo index.html con un snippet de html5

5. Levantar el proyecto con:

npm run start

6. Verificar el funcionamiento

Creación de la libreria y configuración

1. Instalar Lit:

npm i lit

2. Crear directorio components en la raíz del proyecto en dónde se construirán los componentes y dentro el fichero index.js

3. En el archivo package.json agregar las siguientes configuraciones: Files y publishConfig:

{
  "name": "lib-itsi",
  "version": "0.0.1",
  "main": "./components/index.js",
  "scripts": {
    "start": "web-dev-server --node-resolve --open --watch"
  },
  "type": "module",
  "files": [
    "src/",
    "components/index.js",
    "components/"
  ],
  "keywords": [],
  "author": "Servicio de Administración Tributaria",
  "license": "ISC",
  "devDependencies": {
    "@web/dev-server": "^0.4.6"
  },
  "dependencies": {
    "lit": "^3.2.1"
  },
  "description": "",
  "repository": {
    "type": "git",
    "url": "https://gitlab.sat.gob.mx/dev_aia/itsi-1/l_itsi"
  },
  "publishConfig": {
    "access": "public"
  }
}

Creación de componentes

Crear un directorio con el nombre del componente con los 3 ficheros:

Contenido CSS:

import { css } from 'lit';

export const counterStyles = (context) => css`
  :host {
    display: inline-block;
  }
`

Contenido HTML:

import { html } from "lit";

export const counterTemplate = (context) => html`
  <div>
    <p class="parrafo">Contador: ${context.counter}</p>
  </div>
`

Contenido JS:

import { LitElement} from 'lit';
import { counterTemplate } from './counter-template';
import { counterStyles } from './counter-styles';

export class ItsiCounter extends LitElement {
    static styles = counterStyles(this);

    static properties = {
        counter: {
            type: Number,
            reflect: true
        },
        title: {type: String},
        quantity: {type: Number}
    }

    constructor() {
        super();
        this.counter = 0;
        this.title = 'Título';
        this.quantity = 1;
    }

    increment() {
        this.counter += parseInt(this.quantity);
    }

    render() {
        return counterTemplate(this);
    }
}
customElements.define('itsi-counter', ItsiCounter);

En JS se tienen las siguientes partes:

• Importación de librerías
• Declaración de estilos (CSS)
• Propiedades
• Contructor
• Funciones
• Función render para importar el maquetado (HTML)

Implementación de componente en Local

Para utilizar cualquier componente de la librería, basta con importarlo y utilizarlo en el fichero index.html o cualquier componente en dónde se desee consumir.

  <itsi-counter counter=0 title="Texto1"></itsi-counter>    
  <script type="module" src="./components/counter/counter.js"></script>

• Se importa como módulo el componente dentro del body de una etiqueta script en el componente o fichero HTML para inyectar el componente de la libreria.

Publicación de librería a NPM

Para publicar la librería en el repositorio NPM se realizan los comandos:

npm adduser
npm publish --access public
npm install @organizacion/lib-name

• Para actualizar la librería es necesario actualizar la versión de la librería definida en el fichero package.json

  ...
    "version": "0.0.1",
  ...

Implementación de componente en Angular

Para realizar la importación e implementación del componente en Angular se realizan los siguientes pasos:

Instalación del componente

Realizar la instalación en el proyecto como cualquier otra librería de NPM:

npm i lib-name

Angular inferior a la versión 17

No es posible utilizar los webcomponets con versiones anteriores debido a que no tiene la opcion de los standalone.

Angular versión 17 o superior

Es necesario importar CUSTOM ELEMENTAL SCHEMA de la siguiente manera dentro de app.component.js donde se vaya a necesitar la libreria y poner el standalone en true(Si la version de angular es 19 no es necesario especificar el stanalone).

import { CUSTOM ELEMENTAL SCHEMA } from '@angular/core';

 @Component { 
  standalone: true,
  schema:[CUSTOM ELEMENTAL SCHEMA]
  }

La importación de los componentes debe hacerse desde el node_modules de cada componente (app.component.js):

import '@../../../../node_modules/src/components/counter/counter.js';

En el maquetado del componente donde se importará (app.component.html).

<itsi-counter counter=0 title=" Parámetro de prueba"></itsi-counter>

• Adicionalmente es posible agregar los parámetros del componente en el maquetado HTML.