){kind=small}
Erstellen einer Webkomponente mit Open-WC
Lesedauer: 6 Minuten
Zuvor haben wir in dieser Serie behandelt was Webkomponenten sind und einige Werkzeuge um sie zu erstellen. Jetzt werden wir eine Webkomponente erstellen, sie veröffentlichen und auf einer Webseite verwenden.
Was werden wir herstellen? Eine Tastaturkomponente mit Material Design Webkomponenten. Der Aufbau einer Webkomponente, die aus Webkomponenten besteht, ziemlich meta, ich weiß.
Die Idee ist, eine Tastatur mit so wenig Aufwand wie möglich in ein Projekt einzufügen. Mit nur ein paar Zeilen Code kann ein Benutzer eine Möglichkeit haben, Numbers in eine Anwendung einzugeben, um einen Anruf zu tätigen, die Temperatur einzustellen, eine Antwort auf ein Quiz auszuwählen, eine Stimme abzugeben und viele andere Anwendungen zu nutzen.
Lassen Sie uns die Merkmale der zu bauenden Tastaturkomponente auflisten:
Die fertige Webkomponente zeigt eine Anzeige und darunter Schaltflächen mit den Ziffern 0-9, * und # an.
Der Benutzer kann die Anzeige und die Schaltflächen *,# ausblenden, indem er Attribute und Eigenschaften festlegt.
Wenn ein Benutzer auf eine Schaltfläche klickt, wird ein Zeichen zu einer Anzeige hinzugefügt. Gleichzeitig wird ein benutzerdefiniertes Ereignis gesendet, damit die Anwendung außerhalb der Komponente weiß, dass eine Schaltfläche gedrückt wurde.
Es wird eine "Aktions"-Schaltfläche geben, die alle gedrückten Ziffern als benutzerdefiniertes Ereignis an die übergeordnete Anwendung sendet, damit diese sie nach eigenem Ermessen verarbeiten kann. Der Text der Schaltfläche kann vom Benutzer über eine Eigenschaft festgelegt werden.
Eine weitere Schaltfläche wird dem Benutzer zur Verfügung stehen, um die Aktion zu beenden. Auch ihr Text ist anpassbar. Bei Betätigung wird die Anzeige gelöscht und ein weiteres benutzerdefiniertes Ereignis an die Anwendung gesendet, die darauf aufmerksam gemacht werden soll.
Der Webkomponente wird eine öffentliche Methode zur Verfügung gestellt, damit die Anwendung in den "aktiven" Zustand wechseln kann, in dem dann die Schaltfläche "Ende" angezeigt wird.
Um der Webkomponente ein gewisses Styling zu verleihen, werden die Material Design-Schaltflächen- und Textfeldkomponenten verwendet.
Hier ist ein funktionierendes Beispiel auf CodePen
Siehe den Stift was-auch-immer-Tastatur by conshus de OUR show (@conshus) auf CodePen.
Geben Sie einige Ziffern ein und drücken Sie die Eingabetaste. Klicken Sie in der Meldung auf OK und dann auf Abbrechen.
Wie werden wir diese Tastaturkomponente erstellen? Wir werden lit-html mit Hilfe von Open Web Components (Open-WC) verwenden. Wie auf deren Website:
Das Ziel von Open Web Components ist es, jedem ein leistungsfähiges und praxiserprobtes Setup für die gemeinsame Nutzung von Open-Source-Webkomponenten zur Verfügung zu stellen. Wir versuchen, dies zu erreichen, indem wir eine Reihe von Empfehlungen und Vorgaben geben, wie Sie Ihr Webkomponenten-Projekt erleichtern können. Unsere Empfehlungen umfassen: Entwickeln, Linting, Testen, Tooling, Demoing, Veröffentlichen und Automatisieren.
Wenn Sie mit Open-WC beginnen, haben alle Mitglieder eines Teams den gleichen Ausgangspunkt für die Entwicklung von Webkomponenten. Wie bei vielen Dingen ist Konsistenz ein Faktor für den Erfolg.
Da Open-WC sehr eigenwillig ist, was die Erstellung von Webkomponenten und Projekten angeht, haben sie ein wirklich gründliches CLI-Tool, um sie zu erzeugen. Lassen Sie uns alles einrichten.
Navigieren Sie in Ihrem Terminal zu dem Ort, an dem sich das Web Component-Projekt befinden wird.
Geben Sie dann npm init @open-wc. Dadurch wird der Installationsprozess von Open-WC gestartet.
Hier sind die Optionen, die ich für das Projekt in diesem Blogbeitrag verwendet habe:
Was würden Sie heute gerne tun? Ein neues Projekt vorbereiten
Was möchten Sie einrüsten? Web-Komponente
Was würden Sie gerne hinzufügen? Linting (eslint & prettier)
Möchten Sie Schreibmaschinenschrift verwenden? Nein
Wie lautet der Tag-Name Ihrer Anwendung/Webkomponente? whatever-you-like-keypad (Sie können die Webkomponente benennen, wie Sie wollen, solange sie aus mindestens zwei durch ein '-' getrennten Wörtern besteht)
Möchten Sie diese Dateistruktur auf die Festplatte schreiben? Ja
Möchten Sie Abhängigkeiten installieren? Ja, mit npm (wenn Sie yarn bevorzugen, können Sie das wählen)
Open-WC cli tool setup process
So installieren Sie die Material Design-Schaltfläche und das Textfeld. Gehen Sie in den neuen Ordner, der durch den Open-WC-Setup-Prozess erstellt wurde, und geben Sie Folgendes ein:
npm i @material/mwc-button
npm i @material/mwc-textfield
Installing Material Design button and text field
Den Code für die Webkomponente finden Sie in diesem GitHub-Repository. Schauen wir uns den Code in der einzigen Datei im src Ordner.
Der erste Schritt sind die Importe. Open-WC empfiehlt die Verwendung von lit-html und das lit-element Basisklasse zu verwenden, um die Webkomponente zu erstellen und zu rendern. Wir importieren auch die Material Design-Schaltfläche und das Textfeld zur Verwendung in der Webkomponente.
import { html, css, LitElement } from 'lit-element';
import '@material/mwc-button/mwc-button';
import '@material/mwc-textfield/mwc-textfield';Unsere neue Webkomponente basiert auf LitElement.
export class WhateverYouLikeKeypad extends LitElement {Gestalten der Webkomponente
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%;
}
`;
}Hier werden die Attribute und Eigenschaften, die die Webkomponente akzeptiert, zusammen mit ihren Typen festgelegt. Auf diese Weise weiß lit-html, wie die übergebenen Werte zu behandeln sind.
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 }
};
}Die Webkomponente erbt alle "Super"-Fähigkeiten des LitElements und definiert die Standardwerte.
constructor() {
super();
this.noAsterisk = false;
this.noHash = false;
this.noDisplay = false;
this.digits = "";
this.actionText = "Enter";
this.cancelText = "Cancel"
this.actionStarted = false;
}Als nächstes folgen die verschiedenen Methoden der Webkomponente. Dazu gehören das Versenden von benutzerdefinierten Ereignissen beim Hinzufügen oder Senden von Ziffern und das Beenden einer Aktion. Es gibt auch eine Methode, die in der Webkomponente aufgerufen werden kann, um ihr mitzuteilen, dass eine Aktion begonnen hat.
__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;
}Sie haben vielleicht bemerkt, dass die __addDigit Funktion nur die Ziffer am Ende hinzufügt. Wenn ein Benutzer den Cursor in die Mitte der Ziffern bewegt, werden neue Ziffern nur am Ende hinzugefügt.
addDigit function only adding digits to the end
Lassen Sie uns nun zur Übung neue Ziffern an der Stelle einfügen, an der sich der Cursor befindet. Hier ist ein Hinweis an welcher Stelle start.
Das Markup zum Rendern der Webkomponente. Je nach Zustand und den eingestellten Attributen/Eigenschaften rendert oder versteckt die Webkomponente verschiedene Elemente.
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>
`;
}
Nun, da die Webkomponente erstellt ist, können wir sie veröffentlichen, damit wir und andere sie in einem Projekt verwenden können.
Dazu verwenden wir eine Registry wie npm. Wenn Sie noch keine haben, melden Sie sich für einen Account an. Hier sind einige Informationen. Hier erfahren Sie nicht nur, wie Sie sich für ein Konto anmelden, sondern auch, wie Sie sich mit Ihrem Terminal in Ihr Konto einloggen und die Webkomponente veröffentlichen können.
Sobald das eingerichtet ist, wird die Webkomponente als öffentliches Paket veröffentlicht. Dies hilft, Konflikte zu vermeiden, falls es eine Webkomponente oder ein Paket mit demselben Namen gibt, das Sie ausgewählt haben. Weitere Informationen über Scopes finden Sie hier.
Geben Sie in Ihrem Terminal im Projektverzeichnis ein (ersetzen Sie Ihren-npm-Benutzernamen durch Ihren npm-Benutzernamen):
npm init --scope=@your-npm-username
Akzeptieren Sie alle Standardoptionen oder ändern Sie sie nach eigenem Ermessen für jeden Schritt.
Using the command line to set the scope of the project
Da sich Ihre Webkomponente nun hinter einem Bereich befindet, ändern wir die Readme die von Open-WC generiert wurde, um dies widerzuspiegeln. Auch hier ersetzen wir die Platzhalter (your-npm-username und whatever-you-like-keypad) durch Ihre eigenen.
Der zu installierende Befehl lautet:
npm i @your-npm-username/whatever-you-like-keypad
Um sie in einem Projekt zu verwenden, benutzen Sie die import Syntax (siehe unten):
import '@your-npm-username/whatever-you-like-keypad/whatever-you-like-keypad.js';
Speichern Sie Ihre Änderungen.
Lassen Sie uns nun die Webkomponente veröffentlichen. Geben Sie in das Terminal ein:
npm publish --access public
Publishing the project to npm
Wenn dies erfolgreich war, sollten Sie die Webkomponente auf der npm-Website finden können unter https://www.npmjs.com/package/@your-npm-username/whatever-you-like-keypad.
Natürlich ist das Ersetzen your-npm-username und whatever-you-like-keypad durch Ihre Werte.
Herzlichen Glückwunsch, Sie sind veröffentlicht! Sie haben nun eine öffentlich verfügbare Webkomponente, die Sie und andere in einem Projekt verwenden können.
Um eine Kopie lokal zu installieren, geben Sie das Verzeichnis eines Projekts in das Terminal ein und ersetzen Sie es durch Ihre Werte:
npm i @your-npm-username/whatever-you-like-keypad
Was aber, wenn Sie das Paket nicht installieren möchten? Vielleicht möchten Sie sicherstellen, dass Sie immer die aktuellste Version laden, oder Sie möchten die Webkomponente in einer Umgebung sehen, die keine Installation zulässt, wie CodePen.
An dieser Stelle kommt ein Content Delivery Network (CDN) ins Spiel. Sie hosten Ihr Paket und Sie können direkt auf Ihre Dateien verlinken. Für diesen Beitrag werden wir unpkg.com. Das CDN kopiert Ihre Dateien automatisch, so dass Sie nichts weiter tun müssen.
Hier ist ein CodePen-Beispiel, das Sie zum Testen Ihrer Webkomponente verwenden können:
Auch hier ersetzen Sie die Platzhalter für den Benutzernamen und den Komponentennamen durch Ihre eigenen Platzhalter sowohl in den HTML und JS Registerkarten.
Siehe den Stift was-auch-immer-Tastatur by conshus de OUR show (@conshus) auf CodePen.
Versuchen Sie, einige der Attribute und Eigenschaften für die von uns erstellte Webkomponente hinzuzufügen (no-asterisk no-hash no-display) und die Werte für den Text der Schaltfläche festzulegen (actionText="Something" cancelText="Something else").
Hinweis: Bei der Verwendung von no-display wird zur Anzeige der Ziffern ein HTML-Element input oder textarea benötigt. Wie in diesem Beispiel:
Siehe den Stift Was-auch-immer-Tastatur (alle Optionen) by conshus de OUR show (@conshus) auf CodePen.
Jetzt, wo Sie eine glänzende neue Webkomponente haben, was können Sie ihr noch hinzufügen? Vielleicht fügen Sie eine Rücktaste hinzu, mit der ein Zeichen gelöscht werden kann, oder erlauben Sie dem Benutzer, seine eigenen Schaltflächen festzulegen. Oder vielleicht einfach etwas ganz Neues schaffen.
Hinterlassen Sie Links zu Ihrer Webkomponente, Fragen und/oder Feedback in unserem Slack-Kanal der Gemeinschaft. Ich freue mich darauf zu sehen, was Sie bauen.