Özel bileşenler için yeni sürüme geçme kılavuzu

Özel bileşenlerinizi neden yeni sürüme geçirmelisiniz?

Google Web Designer, Temmuz 2021'den itibaren v0 özel bileşenleri desteklemeyecek. Tüm eski özel bileşenleri Custom Elements v1 spesifikasyonuna uyacak şekilde güncellemeniz gerekir.

Özel bileşenim eski mi?

Google Web Designer, eski özel bileşen içeren bir dokümanı açarken sizi uyarır. Ayrıca, Bileşenler panelinde bileşen adının yanında bir uyarı göstergesi ve sahnede eski özel bileşenleri gösteren farklı bir simge görünür.

Ayrıca, bileşenin kaynak dosyalarını da kontrol edebilirsiniz. Aşağıdaki örnekte, QR kodu özel bileşeninin eski sürümü kullanılmıştır.

manifest.json

Yeni özel bileşenlerin manifest dosyalarında customElementsVersion adlı bir alan vardır. Bu alan, bileşenin Custom Elements spesifikasyonunun hangi sürümüne uygun olarak yazıldığını gösterir:

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

Bu alan, eski özel bileşen manifest dosyalarında yoktur.

myqrcode.js

Eski bileşenler kayıt sırasında document.registerElement() yöntemini kullanır.

Eski (Custom Elements v0)

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

Güncellenen bileşenler bunun yerine customElements.define() yöntemini kullanır.

Geçerli (Custom Elements v1)

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

Bileşen dosyanız document.registerElement terimini içeriyorsa eskidir. Aşağıdaki adımları uygulayarak bileşeninizi güncelleyebilirsiniz.

Yeni sürüme geçiş adımları

1. Bileşenin manifest dosyasını güncelleyin

Bileşenin manifest dosyasını yeni customElementsVersion alanını içerecek şekilde güncelleyin. Ayrıca, Google Web Designer'ın bileşenin değiştiğini fark etmesi için sürüm numarasını artırın.

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. Bileşenin JavaScript kodunu güncelleyin

Yeni bileşenler için JavaScript, ES2015 sınıfı söz dizimi kullanılarak yazılmalıdır.

JavaScript API, Custom Elements v1 spesifikasyonunda değişti. Neyse ki, eski v0 API yöntemleri, yeni v1 yöntemleriyle sorunsuz eşleşiyor.

v0 yöntemi	v1 yöntemi
document.registerElement()	customElements.define()
createdCallback()	constructor()
attachedCallback()	connectedCallback()
detachedCallback()	disconnectedCallback()
attributeChangedCallback()	attributeChangedCallback() (zorunlu observedAttributes)

Aşağıda, güncellenmiş my-qrcode bileşeninin çalışan bir örneği verilmiştir:

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

Önemli noktalar:

• Yeni bileşen, HTMLElement öğesini genişletmelidir.
• super(), oluşturucuda çağrılmalıdır.
• Özellik, observedAttributes altında listelenmediği sürece attributeChangedCallback tetiklenmez.

Custom Elements v1 spesifikasyonu ve özel öğeler yazma hakkında daha fazla bilgi edinin .

3. JavaScript kodunu ES5'e aktarın (önerilir)

Yukarıdaki güncellenmiş QR kodu bileşeni, Google Chrome'da ve ES2015 (ES6) sınıfı söz dizimini destekleyen diğer tarayıcılarda çalışır. Eski tarayıcılar bu yeni JavaScript söz dizimini tanımadıklarından aktarılmaları gerekir. Özel bileşeninizin tüm tarayıcılarda düzgün çalışması için 2. bölümdeki JavaScript kodunu ES5'e dönüştürmek üzere bir aktarıcı kullanmanızı önemle öneririz.

Popüler bir aktarıcı olan Babel (babeljs.io) tüm işletim sistemlerinde çalıştırılabilir. Ayrıca, babeljs.io/repl adresinde web uygulaması sürümü de bulunmaktadır.

Babel web uygulamasını kullanırken es2015 hazır ayarının işaretli olduğundan emin olun.

Orijinal JavaScript kodunuzun yerine aktarılan kodu bileşen paketinize dahil edin.

4. Güncellenen bileşeni yükleyin

Google Web Designer'da Sil düğmesini kullanarak eski bileşeni Bileşenler panelinden kaldırın. Ardından, Özel bileşen ekle düğmesini kullanarak güncellenmiş sürümün .zip dosyasını yükleyin.