Haunted：Web Components 的 Hooks

我刚刚与 Dave 聊天，他告诉我 Haunted。它是 Hooks，但用于 原生 Web Components！非常酷。我认为这类工具的存在使得使用 Web Components 越来越容易接受——特别是在完全原生、无需构建步骤的方式中。

我知道 Web Components 存在各种问题，但通常让我远离它们的原因是 **缺乏良好的模板和重新渲染** 以及 **没有状态管理**。

但如今我们可以快速解决这两个问题……

首先，创建像 <my-app> 这样的组件 非常舒服

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

function App() {
  return html`
    <div class="module">
      Hello, World!
    </div>
  `;
}

customElements.define("my-app", component(App));

然后我们可以使用 Hooks 添加一些状态

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

function App() {
  const [name, setName] = useState("Chris");
  return html`
    <div class="module">
      Hello, ${name}!
    </div>
  `;
}

customElements.define("my-app", component(App));

本周的 CodePen 挑战 是使用星球大战 API，所以让我们发出一个 fetch 请求并使用它来填充状态。这是 useEffect 的一个很好的用例。

import { html } from "https://unpkg.com/lit-html/lit-html.js";
import { component, useState, useEffect } from "https://unpkg.com/haunted/haunted.js";

function App() {
  
  const [planets, setPlanets] = useState([]);
  useEffect(() => {
    fetch('https://swapi.co/api/planets/?page=2')
      .then(response => {
        return response.json();
      })
      .then(data => {
        let planets = data.results;
        // remove ones with no diameters
        planets = planets.filter(planet => planet.diameter !== "0");
        setPlanets(planets);
      });
  }, []);

  return html`
    <style>
      /* Shadow DOM styles */
    </style>
    <div class="all-planets">
      ${planets.map(planet => html`
        <div class="planet" style="--dia: ${planet.diameter}px">
           <span class="planet-name">
              ${planet.name}
           </span>
        </div>
      `)}
    </div>
  `;
}

customElements.define("my-app", component(App));

这是一个合适的 Web Components！

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
使用 Haunted.js 的星球大战 API。
在 CodePen 上。