){kind=small}
Creación de un componente web con Open-WC
Tiempo de lectura: 7 minutos
Anteriormente en esta serie cubrimos qué son los Web Components y algunas herramientas utilizadas para crearlos. Ahora, vamos a crear un Web Component, publicarlo y utilizarlo en una página web.
¿Qué vamos a fabricar? Un componente de teclado utilizando Componentes Web Material Design. Construir un Web Component hecho de Web Components, bastante meta, lo sé.
La idea es poder insertar un teclado en un proyecto con las menores complicaciones posibles. Con sólo un par de líneas de código, un usuario puede tener una forma de introducir números en una aplicación para hacer una llamada telefónica, ajustar la temperatura, seleccionar una respuesta a un cuestionario, emitir un voto, y muchas otras aplicaciones.
Vamos a enumerar las características del componente de teclado que se va a construir:
El Componente Web listo para usar mostrará una pantalla y debajo de ella, botones con los dígitos 0-9, * y #.
El usuario podrá ocultar la pantalla y los botones *,# estableciendo atributos y propiedades.
Cuando un usuario pulse un botón, se añadirá un carácter a la pantalla. Al mismo tiempo, se enviará un evento personalizado para que la aplicación externa al componente sepa que se ha pulsado un botón.
Habrá un botón de 'Acción' que enviará todos los dígitos pulsados como un evento personalizado para que la aplicación mayor lo procese como crea conveniente. El texto del botón puede ser configurado por el usuario a través de una propiedad.
El usuario dispondrá de otro botón para "Finalizar" la acción. Su texto también será personalizable. Al pulsarlo, se borrará la pantalla y se enviará otro evento personalizado a la aplicación que deba ser informada.
El Web Component tendrá un método público disponible para que la aplicación pueda cambiar al estado 'activo' que mostrará el botón 'Finalizar'.
Para añadir algo de estilo al Web Component, se utilizarán los componentes de botón y campo de texto de Material Design.
He aquí un ejemplo práctico en CodePen
Ver el bolígrafo lo-que-sea-el-teclado de conshus de OUR show (@conshus) en CodePen.
Introduce algunos dígitos y pulsa intro. Haga clic en Aceptar en la alerta y, a continuación, haga clic en Cancelar.
¿Cómo construiremos este componente de teclado? Utilizaremos lit-html a través de Open Web Components (Open-WC). Como se indica en su sitio web:
El objetivo de Open Web Components es dotar a todo el mundo de una configuración potente y probada para compartir componentes web de código abierto. Intentamos conseguirlo dando una serie de recomendaciones y valores por defecto sobre cómo facilitar tu proyecto de componentes web. Nuestras recomendaciones incluyen: desarrollo, linting, pruebas, herramientas, demostraciones, publicación y automatización.
Al empezar con Open-WC, todos los miembros de un equipo pueden tener el mismo punto de partida para construir componentes web. Como en muchas otras cosas, la coherencia es un factor de éxito.
Como Open-WC es muy obstinado en cómo se construyen los Web Components y los proyectos, tienen una herramienta CLI muy completa para generarlos. Vamos a configurarlo todo.
En su terminal, navegue hasta el lugar donde vivirá el proyecto Web Component.
A continuación, escriba npm init @open-wc. Esto iniciará el proceso de configuración de Open-WC.
Aquí están las opciones que he utilizado para el proyecto en esta entrada del blog:
¿Qué te gustaría hacer hoy? Andamiar un nuevo proyecto
¿Qué le gustaría andamiar?: Componente web
¿Qué le gustaría añadir? Linting (eslint & prettier)
¿Desea utilizar typescript? No
¿Cuál es el nombre de etiqueta de su aplicación/componente web? whatever-you-like-keypad (Puede nombrar el componente web como quiera siempre que sean al menos 2 palabras separadas por un '-')
¿Desea escribir esta estructura de archivos en el disco? Sí
¿Quieres instalar dependencias? Sí, con npm (si prefieres yarn, puedes elegirlo)
Open-WC cli tool setup process
Para instalar el botón y el campo de texto Material Design. Vaya a la nueva carpeta creada por el proceso de instalación de Open-WC y escriba lo siguiente:
npm i @material/mwc-button
npm i @material/mwc-textfield
Installing Material Design button and text field
El código del Web Component puede encontrarse en este repositorio GitHub. Revisemos el código en el único archivo de la carpeta src carpeta.
En primer lugar están las importaciones. Open-WC recomienda utilizar lit-html y el lit-elemento para construir y renderizar el Web Component. También importamos el botón Material Design y el campo de texto para utilizarlos en el Web Component.
import { html, css, LitElement } from 'lit-element';
import '@material/mwc-button/mwc-button';
import '@material/mwc-textfield/mwc-textfield';Basamos nuestro nuevo Web Component en LitElement.
export class WhateverYouLikeKeypad extends LitElement {Estilizar el componente web
static get styles() {
return css`
:host {
display: block;
padding: 25px;
color: var(--vwc-dialer-text-color, #000);
}
#container {
width: 75vw;
max-width: 300px;
}
.button-row {
display: flex;
justify-content: space-evenly;
}
.full-width {
width: 100%;
}
mwc-button {
margin: 10px;
}
mwc-textfield {
--mdc-notched-outline-leading-width: 28px;
--mdc-notched-outline-leading-border-radius: 28px 0 0 28px;
--mdc-notched-outline-trailing-border-radius: 0 28px 28px 0;
width: 100%;
}
`;
}Aquí se establecen los atributos y propiedades que acepta el Web Component junto con sus Tipos. De esta manera, lit-html sabe cómo manejar los valores pasados.
static get properties() {
return {
noAsterisk: { attribute: 'no-asterisk', type: Boolean },
noHash: { attribute: 'no-hash', type: Boolean },
noDisplay: { attribute: 'no-display', type: Boolean },
actionText: { type: String },
cancelText: { type: String },
actionStarted: { type: Boolean },
digits: { type: String }
};
}El Web Component hereda todos los "super" poderes del LitElement y define los valores por defecto.
constructor() {
super();
this.noAsterisk = false;
this.noHash = false;
this.noDisplay = false;
this.digits = "";
this.actionText = "Enter";
this.cancelText = "Cancel"
this.actionStarted = false;
}A continuación se describen los distintos métodos del componente web. Cosas como enviar eventos personalizados al añadir o enviar dígitos, y finalizar una acción. También está el método que puede ser llamado en el Web Component que le permite saber que una acción ha comenzado.
__addDigit(digit){
this.digits += digit;
const digitAdded = new CustomEvent('digit-added', {
detail: { digit },
bubbles: true,
composed: true });
this.dispatchEvent(digitAdded);
}
__sendDigits(){
const digitsSent = new CustomEvent('digits-sent', {
detail: { digits: this.digits },
bubbles: true,
composed: true });
this.dispatchEvent(digitsSent);
}
createAction(){
this.actionStarted = true;
}
__endAction(){
const actionEnded = new CustomEvent('action-ended', {
detail: { },
bubbles: true,
composed: true });
this.dispatchEvent(actionEnded);
this.digits = "";
this.actionStarted = false;
}Se habrá dado cuenta de que la función __addDigit sólo añade el dígito al final. Si un usuario mueve el cursor a la mitad de los dígitos, los nuevos dígitos sólo se añadirán al final.
addDigit function only adding digits to the end
Ahora, como ejercicio, vamos a permitir que se añadan nuevos dígitos allí donde esté el cursor. He aquí una sugerencia sobre dónde start.
El marcado para representar el Web Component. Dependiendo del estado y de los atributos/propiedades establecidos, el Web Component mostrará u ocultará diferentes elementos.
render() {
return html`
<div id="container">
${this.noDisplay ? "" : html`<mwc-textfield outlined label="" .value=${this.digits}></mwc-textfield>`}
<div class="button-row">
<mwc-button unelevated @click=${()=>this.__addDigit('1')}>1</mwc-button>
<mwc-button unelevated @click=${()=>this.__addDigit('2')}>2</mwc-button>
<mwc-button unelevated @click=${()=>this.__addDigit('3')}>3</mwc-button>
</div>
<div class="button-row">
<mwc-button unelevated @click=${()=>this.__addDigit('4')}>4</mwc-button>
<mwc-button unelevated @click=${()=>this.__addDigit('5')}>5</mwc-button>
<mwc-button unelevated @click=${()=>this.__addDigit('6')}>6</mwc-button>
</div>
<div class="button-row">
<mwc-button unelevated @click=${()=>this.__addDigit('7')}>7</mwc-button>
<mwc-button unelevated @click=${()=>this.__addDigit('8')}>8</mwc-button>
<mwc-button unelevated @click=${()=>this.__addDigit('9')}>9</mwc-button>
</div>
<div class="button-row">
${this.noAsterisk ?
""
: html`<mwc-button unelevated @click=${()=>this.__addDigit('*')}>*</mwc-button>`
}
<mwc-button unelevated @click=${()=>this.__addDigit('0')}>0</mwc-button>
${this.noHash ?
""
:html`<mwc-button unelevated @click=${()=>this.__addDigit('#')}>#</mwc-button>`
}
</div>
<div class="button-row">
${this.actionStarted ?
html`<mwc-button unelevated fullwidth @click=${this.__endAction}>${this.cancelText}</mwc-button>`
:html`<mwc-button unelevated fullwidth @click=${this.__sendDigits}>${this.actionText}</mwc-button>`
}
</div>
</div>
`;
}
Ahora que el Web Component está construido, vamos a publicarlo para que nosotros y otros puedan utilizarlo en un proyecto.
Para ello, utilizaremos un registro como npm. Si aún no tienes uno, regístrate para obtener una Account. Aquí tienes información. Esto no sólo le mostrará cómo registrarse para obtener una Account, sino también cómo acceder a su Account utilizando su terminal para poder publicar el Web Component.
Una vez configurado, el Web Component se publicará como un paquete de ámbito público. Esto ayudará a prevenir conflictos en caso de que exista un Web Component o paquete con el mismo nombre que el que usted eligió. Puede encontrar más información sobre ámbitos aquí.
En su terminal, en el directorio del proyecto, escriba (sustituyendo su-nombre-de-usuario-npm por su nombre de usuario npm):
npm init --scope=@your-npm-username
Acepte todas las opciones predeterminadas o modifíquelas según le convenga en cada paso.
Using the command line to set the scope of the project
Ya que su Web Component está ahora detrás de un scope, modifiquemos el archivo Readme generado por Open-WC para reflejarlo. De nuevo reemplazando los placeholders (your-npm-username y whatever-you-like-keypad) por los tuyos.
El comando a instalar será:
npm i @your-npm-username/whatever-you-like-keypad
Para utilizarlo en un proyecto, se utilizará la sintaxis import que se muestra a continuación:
import '@your-npm-username/whatever-you-like-keypad/whatever-you-like-keypad.js';
Guarde los cambios.
Ahora, vamos a publicar el Web Component. Escriba en el terminal:
npm publish --access public
Publishing the project to npm
Si tiene éxito, debería poder encontrar el Web Component en el sitio web de npm en https://www.npmjs.com/package/@your-npm-username/whatever-you-like-keypad.
Por supuesto, sustituir your-npm-username y whatever-you-like-keypad por sus valores.
Enhorabuena, ¡ya está publicado! Ahora tiene un Web Component disponible públicamente que usted y otros pueden utilizar en un proyecto.
Para instalar una copia localmente, escriba el directorio de un proyecto en el terminal, sustituyéndolo de nuevo por sus valores:
npm i @your-npm-username/whatever-you-like-keypad
Pero, ¿y si no quieres instalar el paquete? Tal vez quieras asegurarte de cargar siempre la última versión o quieras ver el Web Component en un entorno que no permite la instalación, como por ejemplo CodePen.
Aquí es donde entra en juego una red de distribución de contenidos (CDN). Ellos alojan su paquete y usted puede enlazar directamente a sus archivos. En este artículo utilizaremos unpkg.com. Copian automáticamente tus archivos, así que no tienes que hacer nada.
Aquí tiene un ejemplo de CodePen que puede utilizar para probar su Web Component:
Una vez más, sustituya los marcadores de posición del nombre de usuario y del nombre del componente por los suyos propios en los campos HTML y JS .
Ver el bolígrafo lo-que-sea-el-teclado de conshus de OUR show (@conshus) en CodePen.
Intenta añadir algunos de los atributos y propiedades para el Web Component que hemos creado (no-asterisk no-hash no-display) y establece los valores para el texto del botón (actionText="Algo" cancelText="Otra cosa").
Nota: Cuando se utiliza no-display, para ver los dígitos, se necesitará un elemento HTML input o textarea. Como en este ejemplo:
Ver el bolígrafo teclado-lo-que-sea (todas las opciones) de conshus de OUR show (@conshus) en CodePen.
Ahora que tienes un nuevo y brillante Web Component, ¿qué más puedes añadirle? Tal vez, añadir un botón de retroceso que borrará un carácter o tal vez permitir al usuario establecer sus propios botones. O tal vez simplemente crear algo totalmente nuevo.
Deje enlaces a su Web Component, preguntas y/o comentarios en nuestro Canal Slack de la Comunidad. Estoy deseando ver lo que construyes.