Svelte 最新消息：2024 年 1 月

新年快樂！對於 Svelte 維護者來說，這個月非常忙碌 - Svelte 5 預覽版中推出了大量新功能，並且SvelteKit 2 發布了！

您可以在下面找到這兩個專案中的所有新功能，以及社群展示中大量使用 Svelte 建構的資源和網站。

讓我們開始吧...

SvelteKit 的新功能（2.0 及更多！）

隨著 2.0 版本的發布，SvelteKit 現在比以往任何時候都更加強大。請務必查看每個更新中的文件連結，以獲取有關如何使用每個功能的更多資訊，以及新的效能頁面 - 其中說明了 SvelteKit 如何運作以使您的應用程式盡可能高效能。

• resolvePath 已在 $app/paths 中被 resolveRoute 取代。使用它來使用參數填充路由 ID 以解析路徑名稱（1.29.0，文件，#11261）
• response.arrayBuffer() 現在將在 SSR 期間內聯（1.30.0，文件，#10535）
• SvelteKit 2.0.0 新增
  • untrack 到 load 以選擇不失效（文件，#11311）
  • 淺層路由，用於建立歷史記錄項目而不進行導航（文件，#11307）
  • HTML 類型（#11222）
  • 報告組態錯誤時，會刪減內部堆疊追蹤（#11292）
  • 細粒度的搜尋參數失效（文件，#11258）

您可以在 SvelteKit 文件中找到 SvelteKit 2.0 的遷移指南。使用 svelte-migrate 命令為您完成大部分（如果不是全部）工作，應該可以非常順利地進行！

Svelte 的新功能

由於 Svelte 5 處於預覽版，Svelte 4 (@latest) 只會獲得錯誤修復 - 目前版本為 4.2.8。以下更新來自版本 5 的預覽分支

• 新的 $inspect 符號類似於 console.log，只是它會在其參數更改時重新執行（5.0.0-next.16，文件，#9705）
• $state 現在被代理，以預設使反應性巢狀。這是對使用者回饋的回應，PR 中提供了大量上下文 - 因此，如果您對預覽期間語法的改進方式感興趣，請查看（5.0.0-next.18，文件/範例，#9739）
• 由於符號模式中的綁定預設值會令人困惑，而且是錯誤和實作複雜性的來源，因此不允許使用（5.0.0-next.19，#9784）
• 預設屬性現在是唯讀的（除非與 bind: 一起使用）。依此類推，預設值也應為唯讀（5.0.0-next.19，#9789）
• 新的 unstate 函式可讓您從使用 $state 建立的物件和陣列中移除反應性（5.0.0-next.19，文件，#9776）
• 已新增 window.addEventListener 的 GamepadEventHandlers（gamepadconnected 和 gamepaddisconnected）（5.0.0-next.23，文件，#9861）
• {@const} 現在可以在程式碼片段區塊中使用（5.0.0-next.24，#9904）
• 新的 $state.frozen 符號可讓您存取 $state 的唯讀版本，該版本無法變更。如果您想使用不可變模式而不是可變模式來處理資料，這會很有用（5.0.0-next.27，文件，#9851）

如需所有後續版本說明，請查看 main 上的 CHANGELOG。

---

社群展示

使用 Svelte 建構的應用程式和網站

• eCourse 是一個時尚且可自訂的網站範本，旨在輕鬆自託管您的線上課程
• Typogram 是一個具有「一點 AI」的品牌設計工具
• calcium 是一個適用於開發人員的瀏覽器擴充功能，具有針對瀏覽器索引標籤、書籤、歷史記錄和常見開發人員文件的模糊搜尋
• hintable 是一款令人興奮的猜字遊戲
• domian.io 擷取您的網域最有可能的拼寫錯誤清單、其可用性，以及一種輕鬆註冊它們的方法
• Story Scroller 是一個 REPL，展示如何使用 Svelte 製作可捲動的卡片清單
• 2023 年永續發展目標地圖呈現了有關 17 個永續發展目標的互動式故事敘述和資料視覺化。
• Lingotrack 是一個社交平台，讓身為語言學習者的您追蹤進度並找到引人入勝的新媒體
• Lofi Flow 可讓您將最愛的 YouTube Lofi 直播電台和影片儲存在一個地方

學習資源

以 Svelte 貢獻者和大使為特色

• Svelte 在動態電子商務小部件中與 Jacob Stordahl 以及 Svelte Radio 的 Slicing Svelte 與 Sam Littlefair 和 Prismic
• 我已經喜歡 SvelteKit v2，作者是 Huntabyte
• 14 個使用 Svelte 的超棒真實世界專案，作者是 Joy of Code
• 使用 Willow 和 Kev 建立 WinterJS 的 SvelteKit 適配器
• 漸進式啟動畫面，作者是 Quang Phan (Svelte Vietnam)
• 本週 Svelte 新聞
  • 2023 年 12 月 1 日 - Svelte 4.2.8、重複使用 searchParams、peerDependencies！
  • 2023 年 12 月 8 日 - 驗證表單 UX、禁止 ESLint 警告、綁定函式
  • 2023 年 12 月 15 日 - SvelteKit 2.0
  • 2023 年 12 月 22 日 - SvelteKit 2.0.6、處理 peerDependencies、動作參數
  • 2023 年 12 月 29 日

要觀看/收聽

• 讓我們使用 SvelteKit 和 Firebase 🔥、Tailwind css、Shad-cn svelte 等等來建立 Dropbox 克隆 😁，作者是 Lawal Adebola
• 使用 SvelteKit 的「類似應用程式」清單 → 詳細檢視轉換 🦸，作者是 Johnny Magrippis
• 學習 SvelteKit · 使用 SvelteKit 和 TailwindCSS 建立現代登入頁面，作者是 Smoljames

要閱讀

• 將 SvelteKit 應用程式部署到 GitHub Pages，作者是 Captain Codeman
• 使用 Vitest 模擬 Svelte 商店的實用指南，作者是 Ben Tilling
• Svelte 5 不錯，但符號需要改進，作者是 Kyle Nazario
• Shader Park 和 2D，作者是 Untested

程式庫、工具和元件

• Routify 是許多 Svelte 應用程式中使用的熱門路由程式庫，其版本 3 的第一個候選版本已發布
• Superforms v2 現在已推出 - 支援所有驗證程式庫
• SvelteKit-Design-Pattern 是一個範本，展示了 Kreonovo 的 SvelteKit MVC 設計模式（更多資訊請參閱 Reddit 文章）
• Shadcn 的 Svelte VSCode 擴充功能可協助您直接安裝和使用 Shadcn 元件，而無需離開 IDE
• SGSG 是一個基於 Svelte、Go、SQLite 和 gRPC 的替代「全堆疊應用程式」範本
• mistral-kit 是一個使用 mistral-7b 和 ollama 的提示到程式碼網站
• svelte-browser-import 提供的功能可直接在瀏覽器中匯入和呈現 Svelte 應用程式/元件（.svelte 檔案），而無需建置步驟。
• progressbar-svelte 是一個適用於可自訂進度條的 Svelte 套件
• MdCraft 是一個開放原始碼 Web 應用程式，可用作瀏覽器內的 Markdown 編輯器和預覽器

這個月就到此為止！如果您在 Reddit 或 Discord 上錯過了任何內容，請隨時告知我們。

祝您有個美好的一年 🥳