Svelte 最新消息：2020 年 12 月

這是今年最後一期的「Svelte 最新消息」，有很多值得慶祝的！本月的內容包括來自 rollup-plugin-svelte、Sapper 和 SvelteKit 的更新，以及 Svelte 社群的一系列展示！

新功能與重大錯誤修復

1. 自訂 Web 元件現在皆支援 $$props、$$restProps 和 $$slots (3.29.5，範例)，而且 slot 元件現在支援展開 props：<slot {...foo} /> (3.30.0)
2. 新的 hasContext 生命週期函式讓檢查父元件的上下文中是否已設定 key 變得容易 (3.30.0 & 3.30.1，文件)
3. 現在有一個新的 SvelteComponentTyped 類別，可以更容易新增擴充基本 Svelte 元件的強型別元件。元件庫和框架作者可以歡呼了！範例：export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0，RFC)
4. {:else} 區塊內的轉場現在應該可以順利完成 (3.29.5，範例)
5. Svelte 現在包含一個導出映射，明確說明可以從其 npm 套件匯入哪些檔案 (3.29.5，並在 3.29.6、3.29.7 和 3.30.0 中進行了一些修正)
6. rollup-plugin-svelte 有一個新的 7.0.0 版本。最大的變更是移除了 css 選項。使用該選項的使用者應該新增另一個外掛程式，例如 rollup-plugin-css-only，如範本中所示

Sapper 的最新動態？

大量新的 TypeScript 定義改進，讓編輯 Sapper 應用程式更容易！動態匯入的 CSS 現在也應該可以在 client.js 檔案中運作。（尚未發佈）

SvelteKit 的情況如何？

很高興你問了！如果你沒有看到 Rich 上個月初的部落格文章，可以在這裡找到它！

如需所有功能和錯誤修復，請參閱 Svelte 和 Sapper 的變更日誌。

---

社群展示

應用程式與網站

• narration.studio (僅限 Chrome) 是一個用於旁白配音的自動瀏覽器內錄音和編輯平台。
• Vippet 是一個用於瀏覽器的影片錄製和編輯工具。
• Pattern Monster 是一個簡單的線上圖案產生器，用於建立可重複的 SVG 圖案。
• 植物性飲食 是世界自然基金會 (WWF) 使用 Svelte 建立的網站。
• johnells.se 是一個瑞典時尚電子商務網站，使用 Crown (一個由 Svelte 驅動的框架) 建立。
• sentence-length 是一個學習和分析工具，用於顯示一些作者如何使用不同的長度，而另一些則堅持使用一種。
• svelte-presenter 讓你可以使用 Svelte 和 mdsvex 快速製作美觀的簡報。

示範

• u/loopcake 在 Java Spring Boot 中讓 SSR 運作，為所有想要進行 Svelte 伺服器端渲染的 Java 商店服務。
• svelte-liquid-swipe 使用 svg 路徑展示了一個花俏的互動模式。
• 交叉淡入淡出連結動畫示範如何使用交叉淡入淡出在導覽連結之間進行動畫處理 (由 Discord 社群的 Blu 製作)
• 剪裁路徑轉場展示如何使用剪裁路徑和自訂轉場來建立神奇的進出轉場 (由 Discord 社群的 Faber 製作)

學習資源

• lihautan 一直在製作易於遵循的影片，以分享他對 Svelte 的深入知識。
• 從建立靜態網站產生器中學到的教訓分享了 Elder.js 背後的故事和思考，以及過程中做出的設計決策。
• Svelte 教學與專案課程是 John Smilga 在 Udemy 上的課程，學生可以在其中透過建立有趣的專案來學習 Svelte.js。
• 使用 FastAPI、Svelte 和 IPFS 在 IPFS 上建立 Pastebin 解釋如何建立分散式類似 Pastebin 的應用程式。

元件、程式庫與工具

• svelte-crossword 是一個可自訂的 Svelte 填字遊戲元件。
• svelte-cloudinary 可以輕鬆將 Cloudinary 與 Svelte 整合 (包括 TypeScript 和 SSR 支援)
• Svelte Nova 擴充了新的 Nova 編輯器以支援 Svelte
• saos 是一個小型 svelte 元件，可在捲動時為元素新增動畫效果。
• Svelte-nStore 是一個通用的儲存替換，符合 Svelte 儲存合約，並新增了 getter 和計算功能。
• svelte-slimscroll 是一個 Svelte Action，可將任何 div 轉換為帶有美觀捲軸的可捲動區域。
• svelte-typewriter 是一個簡單且可重複使用的打字機效果，適用於你的 Svelte 應用程式
• svelte-store-router 是一個基於儲存的 Svelte 路由器，它認為路由只是另一個全域狀態，而 History API 的變更只是此狀態的可選副作用。
• Routify 剛發佈了其 Svelte 路由器的第 2 版。
• svelte-error-boundary 為 Svelte 提供了一個簡單的錯誤邊界元件，可用於 DOM 和 SSR 目標。
• svelte2dts 從 svelte 檔案產生 d.ts 檔案，建立真正可共用且型別良好的元件。

下個月見！

有任何想法想要添加到展示嗎？想要更深入參與 Svelte 嗎？我們一直在尋找維護者、貢獻者和狂熱粉絲... 查看 Svelte Society、Reddit 和 Discord 來參與！

這是一整年的內容了！一月見 😎