Lit 2 安定版リリースのお知らせ

Lit 2: より小さく、より良く、より速く、SSR対応、そして本番環境に対応

2021年9月21日

Litチーム

Twitter

本日、Lit 2 の安定版リリースを発表します。Lit 2 は大幅なアップデートです。以前よりも小さく、速く、良くなっており、サーバーサイドレンダリングの基礎を築き、すべてが npm の新しい lit パッケージにまとめられています。

Lit は、4月に Lit 2 の最初のリリース候補を発表して以来、大きく進歩しました。それ以来、多くのパートナーが大規模アプリケーションでリリース候補をテストし、簡単なアップグレード、パフォーマンスの向上、バンドルの小型化を報告しています。さらに、一部のパートナーとコミュニティメンバーは、リアクティブコントローラーや実験的なサーバーサイドレンダリングのサポートなどの新機能を模索しています。

一方、Google では、何千もの Google の内部コンポーネントを新しいバージョンにアップグレードすることで、Lit 2 を広範囲にテストしました。

本日、Lit 2 が利用可能になったことを発表できて嬉しく思います。

訂正： lit-analyzer CLIとVS Code Litプラグインは、Lit 2で動作するように更新されています。この投稿のオリジナルバージョンでは、これらがすでにリリースされたと誤って記載していました。

Lit 2 の内容

Lit 2 は、後方互換性を維持しながら、多くの新機能と機能強化を追加しています。ほとんどの場合、Lit 2 は以前のバージョンと置き換えて使用できます。Lit 2 の重要な新機能には、以下が含まれます。

新しいディレクティブAPI。Lit 2 では、Lit のレンダリング方法をカスタマイズできるオブジェクトであるカスタムディレクティブを作成するための新しいクラスベースのAPIが導入されました。ディレクティブは新しいものではありませんが、新しいAPIにより、より強力になり、定義が簡単になりました。
非同期ディレクティブ。非同期ディレクティブは、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 関連コードは、変更のテストを容易にするためにモノレポに移動されました。
モノレポには、サーバーサイドレンダリングサポートや他のWebコンポーネントを含む、多くの実験的なプロジェクトも含まれています。アニメーションヘルパー。そして、非同期タスクのためのLitコントローラー。実験的なプロジェクトは、@lit-labs npmスコープで公開されています。
ガイド、APIドキュメント、チュートリアル、およびインタラクティブなコードエディターを備えた、まったく新しいWebサイトであるlit.dev。最初のLitリリース候補でサイトを立ち上げました。それ以来、最も要望の多かった2つの機能、サイト検索、およびJavaScriptユーザー向けのより良いサポート（切り替え可能なJavaScript/TypeScriptコードスニペット）を追加しました。

RC 1以降の変更点

最初のRC以降、ほとんどの変更はバグ修正でした。いくつかの注目すべき変更点

要素のライフサイクルは、要素が切断されたときに一時停止されません。これにより、いくつかの微妙なバグを引き起こしていたLitの変更が元に戻ります。Lit 2リリース候補のいずれかを使用して非同期ディレクティブを開発した場合は、いくつかの変更が必要になる場合があります。詳細については、PR #2034を参照してください。
開発ビルドでのより良いランタイム警告。開発ビルドの使用に関する詳細については、開発ビルドと本番ビルドを参照してください。

変更の完全なリストについては、変更ログを参照してください。

Lit 2 を使い始める

Lit 2 を試してみませんか？開始するには、lit.devにアクセスしてください。このサイトには、Lit 2 を始めるためのインタラクティブなチュートリアルのカタログ、ライブコーディングのためのインタラクティブなプレイグラウンド、ガイド、APIドキュメントが用意されています。

Litについて話しませんか？LitとWebコンポーネントに関するディスカッションについては、Lit Discordに参加するか、GitHub Discussionsボードでディスカッションを開始してください。

他の投稿を読む