Upgrade-Anleitung für benutzerdefinierte Komponenten – Google Web Designer-Hilfe [gg-webdesigner-en]

Upgrade-Anleitung für benutzerdefinierte Komponenten

Warum sollten Sie Ihre benutzerdefinierten Komponenten aktualisieren?

Ab Juli 2021 unterstützt Google Web Designer keine benutzerdefinierten v0-Komponenten mehr. Sie sollten alle veralteten benutzerdefinierten Komponenten aktualisieren, damit sie der Custom Elements v1-Spezifikation entsprechen.

Ist meine benutzerdefinierte Komponente veraltet?

Google Web Designer warnt Sie, wenn Sie ein Dokument öffnen, das eine veraltete benutzerdefinierte Komponente enthält. Zusätzlich eine Warnanzeige wird im Bedienfeld „Komponenten" neben dem Komponentennamen und einem anderen Symbol angezeigt weist auf veraltete benutzerdefinierte Komponenten auf der Bühne hin.

Sie können auch die Quelldateien der Komponente überprüfen. Im folgenden Beispiel verwenden wir die veraltete Version der benutzerdefinierten QR-Code-Komponente .

manifest.json

Neue benutzerdefinierte Komponenten verfügen in ihren Manifesten über ein Feld namens customElementsVersion . Dieses Feld gibt an, für welche Version der Custom Elements-Spezifikation die Komponente geschrieben wurde:

  {    ...    "customElementsVersion": 1,    ...  }

Veraltete benutzerdefinierte Komponentenmanifeste verfügen überhaupt nicht über dieses Feld.

myqrcode.js

Veraltete Komponenten verwenden bei der Registrierung die Methode document.registerElement() .

Veraltet (Custom Elements v0)

  document.registerElement('my-qrcode', {prototype: proto});

Aktualisierte Komponenten verwenden stattdessen die Methode customElements.define() .

Aktuell (Benutzerdefinierte Elemente v1)

  customElements.define('my-qrcode', MyQrcode);

Wenn Ihre Komponentendatei den Begriff document.registerElement enthält, ist er veraltet. Sie können Ihre Komponente aktualisieren, indem Sie die folgenden Schritte ausführen.

Upgrade-Schritte

1. Aktualisieren Sie das Komponentenmanifest

Aktualisieren Sie das Manifest der Komponente, um das neue Feld customElementsVersion einzuschließen. Erhöhen Sie außerdem die Versionsnummer, damit Google Web Designer erkennt, dass sich die Komponente geändert hat.

manifest.json

  {    "name": "QR Code",    "type": "my-qrcode",    "tagName": "my-qrcode",    "customElementsVersion": 1,    "version": 2,    "description": "Generates a QR code image for the specified data.",    "files": {      "js": [        "qr.js",        "myqrcode.js"      ]    },    "attributes": [     {      "name": "data",      "label": "Data",      "type": "string",      "required": true,      "description": "The data to encode in the QR code image"     }    ],    "events": [    ],    "methods": [    ],    "nestable": false  }

2. Aktualisieren Sie den JavaScript-Code der Komponente

Das JavaScript für neue Komponenten muss mit der ES2015- Klassensyntax geschrieben werden.

Die JavaScript-API hat sich in der Custom Elements v1-Spezifikation geändert. Glücklicherweise lassen sich die alten v0-API-Methoden gut mit den neuen v1-Methoden kombinieren.

v0-Methode	v1-Methode
document.registerElement()	customElements.define()
createdCallback()	constructor()
attachedCallback()	connectedCallback()
detachedCallback()	disconnectedCallback()
attributeChangedCallback()	attributeChangedCallback() (erfordert observedAttributes )

Hier ist ein funktionierendes Beispiel der aktualisierten my-qrcode-Komponente:

myqrcode.js

  /** @fileoverview Implementation of the my-qrcode component. */  if (window.customElements && window.customElements.define) {    class MyQrcode extends HTMLElement {      constructor() {        super();        this.img = null;      }        connectedCallback() {        this.generateImage();      }        static get observedAttributes() {        return ['data'];      }        attributeChangedCallback(attributeName) {        if (!this.img) {          return;        }        switch (attributeName) {          case 'data':            this.generateImage();            break;        }      }        generateImage() {        const data = this.getAttribute('data');        if (data) {          if (!this.img) {            this.img = document.createElement('img');            this.img.style.height = '100%';            this.appendChild(this.img);          }          this.img.setAttribute('src', QRCode.generatePNG(data));        }       }    }      customElements.define('my-qrcode', MyQrcode);  }

Zu beachten:

• Die neue Komponente muss HTMLElement erweitern.
• super() muss im Konstruktor aufgerufen werden.
• Der attributeChangedCallback wird nur dann ausgelöst, wenn das Attribut unter observedAttributes aufgeführt ist.

Erfahren Sie mehr über die neue Custom Elements v1-Spezifikation und das Erstellen benutzerdefinierter Elemente .

3. Transpilieren Sie den JavaScript-Code nach ES5 (empfohlen)

Die oben aktualisierte QR-Code-Komponente funktioniert in Google Chrome und anderen Browsern, die die Klassensyntax ES2015 (ES6) unterstützen. Ältere Browser erkennen diese neue JavaScript-Syntax nicht und erfordern eine Transpilierung. Damit Ihre benutzerdefinierte Komponente in allen Browsern korrekt funktioniert, empfehlen wir dringend, einen Transpiler zu verwenden, um den JavaScript-Code in Abschnitt 2 nach ES5 zu konvertieren.

Babel ist ein beliebter Transpiler bei babeljs.io , der auf jedem Betriebssystem ausgeführt werden kann. Es gibt auch eine Web-App-Version, die online unter babeljs.io/repl verfügbar ist.

Stellen Sie bei Verwendung der Babel-Web-App sicher, dass die Voreinstellung es2015 aktiviert ist.

Fügen Sie den transpilierten Code anstelle Ihres ursprünglichen JavaScript-Codes in Ihr Komponentenpaket ein.

4. Installieren Sie die aktualisierte Komponente

Entfernen Sie in Google Web Designer die veraltete Komponente aus dem Bedienfeld „Komponenten ", indem Sie die Schaltfläche „ Löschen" verwenden Klicken Sie auf die Schaltfläche und installieren Sie dann die ZIP-Datei der aktualisierten Version mithilfe der Option „Benutzerdefinierte Komponente hinzufügen". Taste.