LitElement 3.0 & lit-html 2.0:搶先預覽版

預覽 LitElement 和 lit-html 的下一個主要版本。

Photo of Lit Team
Lit 團隊

今天,我們發布了我們旗艦程式庫 LitElement 和 lit-html 的下一個主要版本的首個預覽版。

這些版本包含我們打算進行的大部分重大變更,以及我們想要從先前版本繼承的大部分功能。它們尚未完成所有功能,或 API 尚未完全穩定。值得注意的是,它們尚不支援舊版瀏覽器(如 IE11)或需要 Web Components Polyfill 的瀏覽器。

動機

我們對目前版本的程式庫感到非常滿意,它們速度快、體積小且穩定(太棒了!),在某些方面,我們並沒有很迫切需要進行重大變更。我們不會輕易進行重大變更。但是,有一些令人信服的變更理由,我們認為這些變更將改善使用 LitElement 建置的元件和應用程式的使用者體驗。

  1. 效能

    我們發現,我們的一些瀏覽器錯誤修正程式碼和自訂抽象化會阻礙我們想要進行的優化。

  2. 大小

    相同的程式碼以及我們廣泛的公開 API 會佔用位元組。我們始終希望找到縮減程式庫大小的方法。

  3. 功能與 API 清理

    某些功能很難在目前的架構下以符合成本效益的方式新增,或者如果不進行重大變更,就無法真正改善。

  4. 伺服器端算繪

    lit-html 具有極為彈性和可自訂的 API,在某些方面,它更像是一個範本系統建構套件,而不是單一範本系統。但是,這種彈性使得伺服器端算繪(SSR)變得複雜,因為 SSR 需要對伺服器算繪的 HTML 如何對應到範本做出假設。SSR 只能與預設、未經自訂的 lit-html 良好搭配使用,因此限制自訂可讓 SSR 更可靠。無論如何,很少有開發人員使用自訂 API。

我們還希望透過限制對 DOM 的存取,使 Directive API 與 SSR 相容。

變更內容

這些是新的主要版本,因此有一些重大變更,但我們希望盡可能減少對使用者的干擾。我們限制了重大變更,使其不影響大多數使用者,或者只需要進行機械性的變更(例如變更匯入)。

如需最詳細的變更列表,請參閱 README(LitElementlit-html)和 CHANGELOG(LitElementlit-html)。

最重要的變更

  • 不再直接支援自訂 lit-html 的語法。已移除 templateFactory 和 TemplateProcessor API。

  • 為了促進更好的縮小化和未來演變,已將公開 API 縮小到最小。

  • lit-html Directive API 已變更為以類別為基礎,並保留 Directive 執行個體。Directive 應該更容易編寫,並且更容易與 SSR 相容。

  • LitElement 修飾詞不再從主模組匯出,它們必須個別匯入或從新的 lit-element/decorators.js 模組匯入。這表示非修飾詞使用者的應用程式大小會縮小,並為實作目前 TC39 JavaScript 提案的新修飾詞打開大門(當這些修飾詞出現時)。

  • lit-html 不再使用 instanceof 或模組級別的 WeakMaps 來偵測特殊物件(如範本結果和指令),這應改善單一應用程式中多個 lit-html 副本的相容性。我們仍然建議重複使用 npm 套件,但現在會有更多情況可行。

  • Safari 12 有一個嚴重的 範本字面值錯誤,lit-html 中不再修復該錯誤。如果您支援 Safari 12,則必須將範本字面值編譯為其 ES5 等效版本。請注意,babel-preset-env 已針對損壞的 Safari 版本執行此操作。

變更日誌中列出了較小的變更。總體而言,我們希望這些版本對大多數使用者來說是直接替代,或者只需要更新修飾詞匯入。

安裝

執行

及/或

提交意見反應

我們正在將下一個版本的 LitElement 和 lit-html 移至單一儲存庫的過程中。請使用 [lit-html][lit-element] 的前綴,在目前的 lit-html 儲存庫上提交問題。我們預期,與任何預先發布版本一樣,都會有一些常見的問題需要我們修正。請先搜尋您的問題。下一個主要版本的問題將標示為 lit-next。

接下來

在下一個預覽版中,我們將專注於瀏覽器和 Polyfill 支援,特別是 IE11。

閱讀更多文章