0.0.15 • Published 7 months ago

lib-itsi v0.0.15

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
7 months ago

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
  1. Montar un servidor en el entorno de desarrollo para visualizar el proyecto
npm i --save-dev @web/dev-server
  1. Agregar el siguiente script para levantar el proyecto con start en el archivo package.json
"start": "web-dev-server --node-resolve --open --watch"
  1. Crear archivo index.html con un snippet de html5

  2. Levantar el proyecto con:

npm run start
  1. Verificar el funcionamiento

Creación de la libreria y configuración

  1. Instalar Lit:
npm i lit
  1. Crear directorio components en la raíz del proyecto en dónde se construirán los componentes y dentro el fichero index.js

  2. 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.
0.0.15

7 months ago

0.0.14

7 months ago

0.0.13

8 months ago

0.0.12

8 months ago

0.0.11

8 months ago

0.0.10

8 months ago

0.0.9

9 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago