Svelte 最新動態：2020 年 10 月

歡迎來到我們「Svelte 最新動態」系列的第一篇！我們將盡力使這成為一個每月發布的部落格文章，您可以在其中找到新功能、錯誤修復，以及來自社群的 Svelte 專案展示。

新功能

1. use:obj.method 允許在物件內定義的函式在動作中使用（範例，3.26.0，警告在 3.27.0 中移除）
2. _ 現在支援作為「數字分隔符」，類似於 . 或 ,（範例，3.26.0）
3. import.meta 現在可以在模板表達式中使用（範例，3.26.0）
4. 現在支援帶有 ~ 和 + 組合器的 CSS 選擇器（範例，3.27.0，編譯器修復在 3.29.0 中）
5. 現在可以使用 {#key} 區塊來根據表達式為任意內容設定鍵值。每當表達式更改時，{#key} 區塊內的內容將被銷毀並重新建立。如需深入解釋並了解其實現方式，請查看 Svelte 團隊成員 Tan Li Hau 的新部落格文章。（更多資訊，3.29.0）
6. 插槽現在可以透過子元件轉發！以前這只能透過新增額外的包裝 <div> 來實現（更多資訊，3.29.0）
7. 當使用 TypeScript 時，現在可以為 createEventDispatcher 方法設定類型

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher<{
		/**
		 * you can also add docs
		 */
		checked: boolean; // Will translate to `CustomEvent<boolean>`
		hello: string;
	}>();

	// ...
</script>

這將確保您只能使用指定的事件名稱及其類型來呼叫 dispatch。Svelte for VS Code 擴充功能也已更新以處理此新功能。它將為這些事件提供強型別，以及自動完成和懸停資訊。

Sapper 的新功能！

Sapper 0.28.9 剛剛發布。其中的重點包括對 CSP nonce 的更好支援、匯出頁面的資產預載支援，以及錯誤詳細資訊現在可在錯誤頁面的 $page 儲存中使用。

此外，Sapper 的 CSS 處理在最近的發布過程中進行了重寫，以修復現有的 CSS 處理錯誤、將 CSS 處理重構為完全在 Rollup 外掛程式中發生，並消除在路由系統中內部註冊 CSS 的需求。恭喜並感謝 Sapper 團隊的所有辛勤工作！

有影響的錯誤修復

• CSS 編譯將不再移除 <details> 元素上 open 屬性的規則（範例，3.26.0）
• prettier-plugin-svelte 現在在處理空白字元方面會做得更好，尤其是在內嵌元素周圍。它還將保留 <pre> 標籤內的格式，並且不再格式化 Prettier 不支援的語言，例如 SASS、Pug 或 Stylus。

即將推出

• Svelte Summit，Svelte 的第二次全球線上會議，將於 10 月 18 日舉行！免費註冊以獲得提醒和演講更新！

有關所有功能和錯誤修復，請參閱 Svelte 和 Sapper 的 CHANGELOG。

Svelte 展示

• 此 CustomMenu 範例 展示如何取代作業系統的右鍵選單
• GitHub Tetris 讓您可以在 git 提交歷史中玩類似俄羅斯方塊的遊戲
• Who are my representatives? 是一個使用 Svelte 建立的網站，旨在幫助美國居民取得有關其國會代表的更多資訊
• Pick Palette 是一個使用 Svelte 製作的調色板管理器！

深入學習：

• Svelte 3 Up and Running 是一本關於使用 Svelte 3 建立可投入生產的靜態 Web 應用程式的新書
• Sapper Tutorial (Crash Course) 逐步講解 Sapper（Svelte 驅動的應用程式框架）的來龍去脈
• Svelte Society Day France 於 9 月 27 日舉行，內容涵蓋各種法語主題！您可以在此處找到完整錄影。

隨插即用元件：

• svelte-zoom 將「接近原生」的平移和縮放功能帶到桌面和行動裝置上的圖片
• svelte-materialify 是一個適用於 Svelte 的 Material 元件庫，其中包含 50 多個元件
• svelte-undoable 可以使用 bind: 輕鬆引入復原和重做功能
• 此 Tilt 元件 實作了一個常見的 UX 模式，其中懸停的元素會傾斜以跟隨滑鼠

本月出現了許多如何使用 JS 技術的範例：

• Sapper 與 PostCSS 和 Tailwind
• PrismJS（程式碼區塊語法醒目提示）
• Filepond（拖放檔案上傳）
• Ionic（UI 元件）
• Pell（WYSIWYG 編輯器）
• Leaflet（地圖）

提醒：有一個 Svelte 整合儲存庫 展示將 Svelte 整合到您的堆疊中的方法（反之亦然）。如果您對如何將特定技術與 Svelte 一起使用有疑問，您可能會在那裡找到答案... 如果您已讓某些東西與 Svelte 配合使用，請考慮貢獻！

如需更多令人驚豔的 Svelte 專案，請查看 Svelte Society、Reddit 和 Discord… 並務必張貼您自己的專案！

下個月見！

順帶一提，Svelte 現在有一個 OpenCollective！所有捐款和所有支出都會發佈在我們的透明公開帳本中。了解誰在捐款、捐款金額、這些錢的去向、提交支出、獲得報銷等等！