Lit 2.1 版本发布

Lit 团队祝大家新年快乐！本周我们很高兴以 Lit 2.1 版本和一些 Lit Labs 更新的形式与我们出色的社区分享一些更新。

Lit 2.1 包含：

• 新的指令，帮助你在模板中进行循环和条件判断。
• 新的 @queryAssignedElements 装饰器，与现有的 @queryAssignedNodes 装饰器相关。

此外，我们还有一些 Lit Labs 更新让你的节日更加精彩：

• 新的 @lit-labs/observers 包提供了响应式控制器，用于与 MutationObserver 和 ResizeObserver 等 Web 平台 observer 一起工作。
• @lit-labs/task 包的更新。
• @lit-labs/ssr 包的更新。

更多详情请继续阅读。

Lit 带来了一些新的便捷指令，使条件判断和循环更加声明化。它们主要围绕普通 JavaScript 表达式的封装，我们发现许多用户喜欢这些辅助工具减少模板杂乱的方式。

与 Lit 中包含的所有指令一样，这些新指令按需使用：它们作为独立模块发布，因此你只打包你选择导入的指令。

when(cond, t, f) 类似于三元表达式，但 else 子句是可选的。如果条件为 true，则渲染第一个模板，如果条件为 false 且提供了第二个模板，则渲染第二个。

render() {
  return html`
    ${when(this.user, () => html`User: ${this.user.username}`, () => html`Sign In...`)}
  `;
}

map(iter, fn) 类似于 Array.map，但也适用于迭代器。它类似于没有键函数的 repeat()，但代码体积更小。

render() {
  return html`
    <ul>
      ${map(this.items, (i) => html`<li>${i}</li>`)}
    </ul>
  `;
}

join(iter, t) 用一个连接值或函数来交错可迭代对象中的项。适用于在项之间添加分隔符，类似于 Array.join()，但不是返回字符串而是返回可渲染值的可迭代对象。

render() {
  return html`
    ${join(this.items, html`<span class="separator">|</span>`)}
  `;
}

range(start, end, step) 对于在模板中迭代特定次数很有用。

render() {
  return html`
    ${map(range(8), () => html`<div class="cell"></div>`)}
  `;
}

choose(v, cases, defaultCase) 从一组案例中选择一个模板进行渲染。它类似于一个内联 switch 语句。

render() {
  return html`
    ${choose(this.section, [
      ['home', () => html`<h1>Home</h1>`],
      ['about', () => html`<h1>About</h1>`]
    ],
    () => html`<h1>Error</h1>`)}
  `;
}

@queryAssignedElements() 返回给定 slot 的插槽元素或分配的元素。它与现有的 @queryAssignedNodes() 类似，但使用 slot.assignedElements() 方法而不是 slot.assignedNodes()。@queryAssignedNodes() 已更新为接受一个选项对象作为位置参数 API 的替代方案。

@queryAssignedElements({ slot: 'icon' })
private _icon!: Array<HTMLElement>;

在 Lit Labs 中，我们引入了一个名为 @lit-labs/observers 的新包，其中包含响应式控制器，让你可以轻松使用 Web 平台 observer API：MutationObserver、IntersectionObserver、ResizeObserver 和 PerformanceObserver。当控制器观察到变化时，会自动驱动宿主元素的更新生命周期。

import { ResizeController } from '@lit-labs/observers/resize_controller.js';

class MyResizableElement extends LitElement {

  _resizeController = new ResizeController(this, {});

  render() {
    return html`Current size is ${this.offsetWidth} x ${this.offsetHeight}`;
  }
}

我们对 @lit-labs/task 进行了一些更改，允许手动运行任务和没有依赖项的自动任务。没有依赖项的任务将在宿主连接时运行一次，所有任务都可以使用新的 run() 方法手动运行。

我们还对 @lit-labs/ssr 进行了一些 bug 修复，减少了其 NPM 依赖项的占用，并将 importModule 函数重构为一个新的 ImportModule 类，作为即将到来的变更的一些基础工作。

我们希望你的 2022 年有一个好的开始。如果你试用了新版本，我们很乐意听到你的反馈。有问题和讨论，请加入我们的 Discord 或 GitHub Discussions。一如既往，你可以在 lit.tips 查看我们的文档和代码 playground，并在 GitHub issue 追踪器 上报告问题。