Upgradegids voor aangepaste componenten

Waarom zou u uw aangepaste componenten upgraden?

Vanaf juli 2021 ondersteunt Google Web Designer aangepaste componenten met de v0-specificatie niet meer. Upgrade verouderde aangepaste componenten zodat ze voldoen aan de Custom Elements v1-specificatie.

Is mijn aangepaste component verouderd?

Google Web Designer waarschuwt u wanneer u een document opent dat een verouderde aangepaste component bevat. Ook wordt een waarschuwingsindicator  getoond in het deelvenster Componenten naast de naam van de component. Met een ander icoon  worden verouderde aangepaste componenten op het werkvlak aangegeven.

U kunt ook de bronbestanden van de component controleren. In het volgende voorbeeld gebruiken we de verouderde versie van de aangepaste component voor een QR-code.

manifest.json

Nieuwe aangepaste componenten bevatten een veld met de naam customElementsVersion in het manifest. In dit veld wordt aangegeven voor welke versie van de Custom Elements-specificatie de component is geschreven:

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

Manifesten van verouderde aangepaste componenten bevatten dit veld niet.

myqrcode.js

Verouderde componenten gebruiken de document.registerElement()-methode tijdens registratie.

Verouderd (Custom Elements v0)

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

Geüpdatete componenten gebruiken in plaats daarvan de customElements.define()-methode.

Actueel (Custom Elements v1)

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

Als uw componentbestand de term document.registerElement bevat, is deze verouderd. U kunt uw component updaten door de onderstaande stappen te volgen.

Upgradestappen

1. Update het componentmanifest

Update het manifest van de component zodat dit het nieuwe veld customElementsVersion bevat. Verhoog ook het versienummer zodat Google Web Designer ziet dat de component is gewijzigd.

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. Update de JavaScript-code van de component

Het JavaScript voor nieuwe componenten moet worden opgesteld met de ES2015-klassesyntaxis.

De JavaScript API is gewijzigd naar de Custom Elements v1-specificatie. De oude v0 API-methoden sluiten goed aan op de nieuwe v1-methoden.

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

Hier volgt een voorbeeld van de geüpdatete component my-qrcode:

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);
}

Aandachtspunten:

• De nieuwe component moet een uitbreiding van HTMLElement zijn.
• super() moet worden aangeroepen in de constructor.
• attributeChangedCallback wordt niet geactiveerd, tenzij het kenmerk wordt vermeld onder observedAttributes.

Lees meer informatie over de nieuwe Custom Elements v1-specificatie en de ontwikkeling van aangepaste elementen.

3. Transpileer de JavaScript-code naar ES5 (aanbevolen)

De geüpdatete QR-codecomponent hierboven werkt in Google Chrome en andere browsers die de ES2015-klassesyntaxis (ES6) ondersteunen. Oudere browsers herkennen deze nieuwe JavaScript-syntaxis niet en vereisen transpilatie. Het is zeer raadzaam een transpiler te gebruiken om de JavaScript-code in gedeelte 2 te converteren naar ES5. Zo zorgt u ervoor dat uw aangepaste component naar behoren werkt in alle browsers.

Babel is een populaire transpiler op babeljs.io en kan op elk besturingssysteem worden uitgevoerd. Er is online een web-appversie beschikbaar op babeljs.io/repl.

Zorg er bij het gebruik van de web-app van Babel voor dat de voorinstelling es2015 is aangevinkt.

Neem de getranspileerde code op in uw componentpakket in plaats van uw oorspronkelijke JavaScript-code.

4. Installeer de geüpdatete component

Verwijder in Google Web Designer de verouderde component uit het deelvenster Componenten via de knop Verwijderen . Installeer daarna het zip-bestand van de geüpdatete versie via de knop Aangepaste component toevoegen .