宣布 Lit 2 稳定版发布

今天，我们宣布 Lit 2 的稳定版发布。Lit 2 是一个重大更新：它比以前更小、更快、更好，它为服务器端渲染奠定了基础，并且全部打包在 npm 上的新 lit 包中。

自从 4 月份我们 宣布 Lit 2 的第一个候选版本以来，Lit 已经走过了漫长的道路。在此期间，许多合作伙伴在大型应用程序上测试了候选版本，并报告了轻松升级、性能提升和更小的包体积。此外，一些合作伙伴和社区成员一直在探索新的功能，例如响应式控制器和实验性的服务器端渲染支持。

与此同时，在 Google，我们通过将数千个 Google 内部组件升级到新版本，对 Lit 2 进行了广泛的测试。

今天，我们很高兴地宣布 Lit 2 已准备好投入使用。

**更正：** lit-analyzer CLI 和 VS Code Lit 插件正在更新以支持 Lit 2。本文的最初版本错误地指出这些插件已经发布。

Lit 2 在保持向后兼容性的同时添加了一些新功能和增强功能；在大多数情况下，Lit 2 应该可以作为以前版本的直接替换。Lit 2 中的重要新功能包括

• **新的指令 API**。Lit 2 引入了一个新的基于类的 API 来编写 自定义指令，这些指令可以自定义 Lit 的渲染方式。指令并非新事物，但新的 API 使它们更强大，更易于定义。

• **异步指令**。异步指令可以在它们被添加到 DOM 和从 DOM 中移除时收到通知，这使得指令能够进行清理工作。例如，异步指令可以使用回调来订阅和取消订阅可观察对象。

• **响应式控制器**。 响应式控制器 是一个可以钩入组件 生命周期 的对象，因此它们可以响应组件更新以及组件被添加到或从 DOM 中移除。控制器可以捆绑与功能相关的状态和行为，使其在多个组件定义中可重用。响应式控制器可以简化在组件中添加状态管理、动画、异步任务等等。

• **元素表达式**。Lit 2 中的新功能是添加可以作用于整个元素的表达式，而不是修改属性、属性或元素的子元素。 元素表达式 对于需要操纵多个属性或调用元素方法的指令很有用。

  例如，一个实验性的动画包 @lit-labs/motion 提供了一个 animate() 指令，它在元素状态发生变化时执行动画。例如，以下代码片段在列表重新排序时为列表项执行动画。

  html`
    ${repeat(items,
      (item) => item.id,
      (item) => html`<div ${animate()}>${item}</div>`)
    }`

  有关 animate 指令的更完整示例，请参阅包 README。

• **静态表达式**。Lit 2 中的另一个新功能是 静态表达式，它允许你将常量或很少更改的值在处理之前插值到模板中。静态表达式可以在普通表达式无法使用的地方使用，例如在标签名称位置。

  const tagName = literal`button`;
  html`<${tagName}></${tagName}>`

• **支持 SSR**。Lit 2 经过重新构建，可以支持 SSR。新的 @lit-labs/ssr 包在 Node.js 上为 Lit 实现快速流式 SSR。SSR 支持仍然处于实验阶段；正在进行的工作是完成并测试 SSR 库。

除了 Lit 库中的新功能外，我们还对 Lit 周围进行了一些其他更改

• 所有与 Lit 相关的项目都在 新的 GitHub 组织 中。大多数与 Lit 相关的代码已迁移到一个单一仓库，以便于测试更改。

• 单一仓库还包含许多实验性项目，包括为 Lit 和其他 Web 组件提供 服务器端渲染 支持； 动画助手；以及一个用于 异步任务 的 Lit 控制器。实验性项目发布在 @lit-labs npm 范围下。

• 一个全新的网站， lit.dev，提供指南、API 文档、教程和交互式代码编辑器。我们在发布第一个 Lit 候选版本时启动了该网站；从那时起，我们添加了两个最受欢迎的功能：站点搜索，以及对 JavaScript 用户的更好支持，具有可切换的 JavaScript/TypeScript 代码片段。

自第一个 RC 发布以来，大多数更改都是错误修复。以下是一些值得注意的更改

• 元素断开连接时生命周期不会暂停。这恢复了 Lit 中导致一些细微错误的更改。如果你使用 Lit 2 候选版本之一开发了异步指令，你可能需要进行一些更改。有关详细信息，请参阅 PR #2034。

• 开发版构建中的更好的运行时警告。有关使用开发版构建的信息，请参阅 开发版和生产版构建。

有关更改的完整列表，请参阅 变更日志。

想要试用 Lit 2 吗？访问 lit.dev 开始使用。该网站提供 交互式教程目录，帮助你开始使用 Lit 2，以及一个交互式 游乐场 用于实时编码、指南和 API 文档。

想聊聊 Lit 吗？加入 Lit Discord，参与关于 Lit 和 Web 组件的讨论，或者在我们的 GitHub Discussions 板上发起讨论。