Lit 3.0 预发布版 2 及更多！

今天我们发布 Lit 3.0 的第二个预发布版。

此预发布版包含：

• Lit 3.0 核心包
• Lit Labs 的首批毕业包：Task、Context 和 React
• 我们新的优化模板编译器的首个预览
• Preact Signals 集成库

此预发布版中还有许多其他包。请参阅完整列表和试用方法此处。

正如我们在第一个预发布版公告中所宣布的，Lit 3.0 是一个破坏性变更，其中最显著的是移除了对 IE11 的支持。作为一个新的主版本，Lit 3.0 本不应包含新功能，因为新功能可以在非破坏性的次版本中添加。

• 不再支持 IE11。
• Lit 的 npm 模块现在以 ES2021 格式发布。
• 随 Lit 2.0 发布已弃用的 API 已被移除。
• SSR hydration 支持模块已移至 @lit-labs/ssr-client 包。
• TypeScript 实验性装饰器和标准装饰器之间的装饰器行为已统一。
• 移除了对 Babel decorators 版本 "2018-09" 的支持。

这些破坏性变更对大多数用户的影响很小——根据对 Google 代码库的测试，它们影响大约千分之一的元素——并使我们的项目能够更高效地向前推进。

我们_确实_添加到 Lit 3.0 的一个新功能是对 TC39 标准装饰器规范的支持，扩展到了我们_现有的_装饰器。

新的装饰器规范已在 TC39 达到第 3 阶段，这意味着浏览器和编译器现在正在实现它们。这对 Lit 来说是一个巨大的进步！标准装饰器的到来使我们能够开始过渡到不需要编译器的装饰器实现。

对我们来说，使从实验性装饰器的升级路径尽可能平滑是非常重要的。为此，我们让现有的装饰器支持标准规范，并使它们能在实验性装饰器模式下与新的 accessor 关键字配合使用。

这样你就可以将 Lit 装饰器与自动访问器（使用 accessor 关键字）一起使用，使得同一个调用点在两种设置下都能工作：

class MyElement extends LitElement {
  @property()
  accessor myProperty = 'hello';
}

一旦你项目中的所有装饰器调用点都使用了 accessor 关键字，你就可以在 experimentalDecorators 设置为 true 或 false 的情况下构建，而不会改变行为。

但为了使这些混合装饰器在两种模式下具有一致的行为，我们必须对实验性装饰器做一些小的破坏性更改：

• 我们现在对 @property 和 @state 装饰的访问器自动调用 requestUpdate()，而以前这是 setter 的责任。
• 访问器的值在首次渲染时被读取，并用作 changedProperties 和特性反射的初始值。
• @property 和 @state 必须用于手写访问器的 setter。

标准装饰器模式需要 TypeScript 5.2 或 Babel 7.23 配合 @babel/plugin-proposal-decorators 插件使用装饰器版本 "2023-05"。

1. 我们仍需更新 lit.tips 上的装饰器文档
2. TypeScript 和 Babel 对标准装饰器的生成代码比 TypeScript 实验性装饰器要大得多。我们仍然建议生产环境使用 experimentalDecorators: true。

今天的发布还包括我们新模板编译器的首个预览：@lit-labs/compiler。

我们的编译器是一个 TypeScript 转换器，它将 lit-html 模板重写为准备好的表示形式，以便在运行时跳过模板准备步骤。这可以提高首次渲染性能，有时效果显著。所有模板行为保持完全相同。

我们计划以多种工具插件格式提供编译器，但目前我们只有一个 TypeScript 转换器。使用它最简单的方法之一是通过 Rollup 的 TypeScript 插件，该插件允许你添加转换器：

rollup.config.js：

import typescript from '@rollup/plugin-typescript';
import {compileLitTemplates} from '@lit-labs/compiler';

export default {
  // ...
  plugins: [
    typescript({
      transformers: {
        before: [compileLitTemplates()],
      },
    }),
    // other rollup plugins
  ],
};

Signals：它们现在非常热门！

许多框架正在采用 signals——状态和计算的可观察持有者——来提高性能和开发体验。Lit 已经拥有非常高效的渲染系统，在初步测试中，signals 并没有带来明显的性能提升。

对于 Lit 开发者，我们认为 signals 有望为共享可观察状态提供一个方便且相对简单的选项，这是我们社区中反复出现的需求。因此我们开始探索通过新的 @lit-labs/preact-signals 包将 signals 与 Lit 集成的方式。

这个包提供了三种使用 Preact Signals 的方式：

1. 一个 SignalWatcher mixin，使组件自动监视更新期间使用的所有 signals。
2. 一个 watch() 指令，监视一个 signal 并用它更新绑定。
3. 一个特殊的 html 模板标签，自动对所有使用 signals 的绑定应用 watch() 指令。

以下是使用 SignalWatcher mixin 的示例：

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit';
import {SignalWatcher, signal} from '@lit-labs/preact-signals';

const count = signal(0);

@customElement('signal-example')
export class SignalExample extends SignalWatcher(LitElement) {

  render() {
    return html`
      <p>The count is ${count.value}</p>
      <button @click=${this._onClick}>Increment<button></button></button>
    `;
  }

  private _onClick() {
    // signal 值的改变会导致元素重新渲染！
    count.value = count.value + 1;
  }
}

Signals 对 Web Components 提出的一个问题是，有许多不同的 signals 实现，它们之间没有互操作性。这违背了 Web Components 的互操作性目标，因此目前，与其构建我们自己的 signals 包或只挑选一个我们认可的，我们计划提供集成包，以便能够将各种 signal 库与 Lit 一起使用。

这些集成将相对简单，因为我们有两种直接的方式来使用 signals：

1. 将组件的更新生命周期视为一个 effect，以便在访问的任何 signals（如在模板中）发生变化时运行。这将 signals 与 Lit 的批量异步生命周期集成在一起，在许多 signals 变化时获得良好的性能。
2. 使用指令将 signal 直接连接到 DOM 中的位置。

我们选择 Preact 的 signals 库作为我们的第一个集成，因为它是一个相对较小、快速且易于理解的实现，以标准 JS 模块形式发布到 npm。

我们还在毕业我们的第一批 Lit Labs 包：Context、Task 和 React。

这些包在 @lit npm scope 下有了新的家园，但除此之外与当前的 labs 版本完全相同。labs 包已更新为依赖并重新导出非 labs 版本，以便它们共享单一实现。

要试用预发布版，请更新你的 package.json 以依赖预发布版的包版本。

预发布版中的包有：

• lit@3.0.0-pre.1
• lit-element@4.0.0-pre.1
• lit-html@3.0.0-pre.1
• @lit/reactive-element@2.0.0-pre.1
• @lit/context@1.0.0-pre.0
• @lit/react@1.0.0-pre.0
• @lit/task@1.0.0-pre.0
• @lit-labs/compiler@1.0.0-pre.0
• @lit-labs/preact-signals@1.0.0-pre.0

你还应该更新对其他包的依赖，以便它们也能使用 Lit 预发布版。

请记住，Lit 2.x 和 Lit 3.0 是可互操作的，因此即使你的一些依赖使用 Lit 2.x，你也可以在你的组件上试用 Lit 3.0 预发布版！

你可以在 lit.tips 的 https://lit.tips/docs/v3/ 查看 Lit 3.0 的文档。

我们仍在更新部分文档，这是我们在 Lit 3.0 正式发布之前的主要任务。

我们希望你喜欢 Lit 3.0！如果你有问题或反馈，请在 GitHub issues 或我们的 Lit and Friends Discord 上告诉我们。

谢谢！- Lit 团队