Lit 2 穩定版本發布公告

今天我們宣布 Lit 2 的穩定版本發布。Lit 2 是一次重大更新：它比以前更小、更快、更好，它為伺服器端渲染奠定了基礎，並且全部打包在 npm 上的新 lit 套件中。

自從四月我們宣布 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 中移除時收到通知，這允許指令進行清理工作。例如，非同步指令可以使用回呼來訂閱和取消訂閱 observable。

• 反應式控制器。反應式控制器是一個可以掛鉤到元件生命週期的物件，因此它們可以在元件更新以及元件被新增到 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}>`

• 支援伺服器端渲染。Lit 2 已重建為支援伺服器端渲染。新的 @lit-labs/ssr 套件為 Node.js 上的 Lit 實作了快速的串流伺服器端渲染。伺服器端渲染支援仍然是實驗性的；目前正在進行工作以完成並測試伺服器端渲染函式庫。

除了 Lit 函式庫中的新功能外，我們還對 Lit 進行了一些其他變更

• 所有與 Lit 相關的專案都在一個新的 GitHub 組織中。大多數與 Lit 相關的程式碼已移至 monorepo，以方便測試變更。

• monorepo 還包括許多實驗性專案，包括對 Lit 和其他網頁元件的伺服器端渲染支援；動畫輔助程式；以及用於非同步任務的 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 和網頁元件，或在我們的GitHub 討論版上開啟討論。