Haunted: cangkuk untuk komponen web

Dave baru-baru ini memperkenalkan saya kepada Haunted, sebuah perpustakaan yang menarik yang menyediakan fungsi cangkuk seperti reaksi untuk komponen web asli. Ini meningkatkan pengalaman pembangunan komponen web, terutamanya rayuannya untuk projek yang mengutamakan fungsi asli dan mengelakkan proses membina.

Walaupun komponen web mempunyai cabaran mereka, pencegahan umum seperti templating rumit dan pengurusan negeri mudah ditangani dengan alat moden.

Mewujudkan mudah<my-app></my-app> Komponen adalah mudah:

 import {html} dari "https://unpkg.com/lit-html/lit-html.js";
import {component} dari "https://unpkg.com/haunted/haunted.js";

aplikasi fungsi () {
  kembali html`
    <div>
      Helo, dunia!
    </div>
  `;
}

customElements.define ("my-app", komponen (app));

Menambah keadaan menggunakan cangkuk Haunted sama -sama mudah:

 import {html} dari "https://unpkg.com/lit-html/lit-html.js";
import {komponen, useState} dari "https://unpkg.com/haunted/haunted.js";

aplikasi fungsi () {
  const [nama, setName] = useState ("chris");
  kembali html`
    <div>
      Helo, $ {name}!
    </div>
  `;
}

customElements.define ("my-app", komponen (app));

Cabaran Codepen minggu ini menggunakan API Star Wars. Mari kita tunjukkan data dan mengemas kini keadaan dengan useEffect :

 import {html} dari "https://unpkg.com/lit-html/lit-html.js";
import {komponen, useState, useeffect} dari "https://unpkg.com/haunted/haunted.js";

aplikasi fungsi () {
  const [planet, setplanets] = useState ([]);
  useeffect (() => {
    Ambil ('https://swapi.co/api/planets/?page=2')
      .then (response => response.json ())
      .THEN (data => {
        biarkan planet = data.results.filter (planet => planet.diameter! == "0");
        setplanet (planet);
      });
  }, []);

  kembali html`
    <div>
      $ {planets.map (planet => html`
        <div style="--dia: ${planet.diameter}px">
          $ {planet.name}
        </div>
      `)}
    </div>
  `;
}

customElements.define ("my-app", komponen (app));

Ini mempamerkan komponen web yang berfungsi sepenuhnya dan ringkas yang memanfaatkan keupayaan Haunted.

Atas ialah kandungan terperinci Haunted: cangkuk untuk komponen web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!