Svelte 2024 年 7 月新訊

本月，我們在 Svelte 5 的候選版本中獲得了一系列新功能，Rich Harris 向 Prismic 的 CEO 解釋了 Svelte 如何針對氛圍進行優化，Geoff Rich 在 CascadiaJS 2024 上分享了更多關於這種理念的資訊。

讓我們開始吧！

Svelte 的新功能

在下方，您將找到 Svelte 5 發行說明的重點（目前為候選版本）

• 您現在可以使用 let props = $props() 更簡潔地在 runes 模式中宣告 props（5.0.0-next.167，#12201）
• 新的 on 從 svelte/events 導入，允許您在更多情況下保留事件處理程序被呼叫的順序 (5.0.0-next.152, 文件, #11912)
• Component 類型現在代表 Svelte 組件的新形狀（5.0.0-next.143, #11775）
• <svelte:document> 有新的 activeElement 和 pointerLockElement 綁定 (5.0.0-next.150, #11879)
• <svelte:element>、CSS 自訂屬性包裝器和字串正規化都已簡化並提高了效能 (5.0.0-next.152, #11773, #11948, #11954, #11792, #11949)
• 如果不需要任何屬性，render、mount 和 hydrate 選項現在實際上是可選的 (5.0.0-next.163, 文件, #12111)

SvelteKit 的新功能

node 和 Cloudflare 适配器本月获得了一些升级

• BODY_SIZE_LIMIT 環境變數為 adapter-node 新增了單位後綴支援 - 使編寫和理解較大的位元組值更容易 (adapter-node@5.2.0, 文件, #11680)
• Node 伺服器現在可以監聽 sveltekit:shutdown 事件（取代更突然的 exit），該事件在 HTTP 伺服器關閉所有連線後發出 (adapter-node@5.1.0, 文件, #12153)
• 當 _routes.json 檔案存在但 svelte.config 中沒有設定路由時，Cloudflare 适配器現在只會拋出錯誤 (adapter-cloudflare@4.5.0, #12360)

---

社群展示

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

• Shootmail 是一個電子郵件範本和內容建立工具
• wplatest 自動化您在多個網站上的 WordPress 外掛程式更新
• Svelte-MiniApps 是一個使用 SvelteKit 建構的輕量級、使用者友善工具集合
• Interior Render AI 在幾秒鐘內使用 AI 重新設計您的室內裝潢

學習資源

以 Svelte 貢獻者和大使為特色

• Prismic 🧡 Svelte：與 Svelte 創作者 Rich Harris 的聚會！ by Prismic
• Svelte 和 RSC 如何透過 Svelte 創作者 Rich Harris 改變 Web 開發 by This Dot Media
• 了解 JavaScript 框架為何喜歡透過實作它們來發出信號 and 現代開發人員的 Svelte 5 反應性指南 and 使用 Svelte 強大的反應性來製作魔法咒語 by Joy Of Code
• 實用的 Svelte 5 - 購物車 by Huntabyte
• CascadiaJS 2024：為氛圍優化 by Geoff Rich（Geoff 的演講直播從 1:08:30 開始）
• 本週在 Svelte - 深入探討 Svelte 變更日誌和本週的新學習
  • Ep. 66 - adapter-node、新的 SvelteKit 文件、在 Svelte 5 中偵錯事件修飾符
  • 6 月 7 日 - 驗證函式庫、$effect.active() 使用
  • 5 月 31 日 - Floating UI、StartStopNotifier
• Svelte Society Vienna
  • Ermin Celikovic — 使用 Svelte 建構 Web Components
  • Domenik Reitzner — 為 Vue 開發人員解釋 Svelte 5 Runes
• Svelte London — 2024 年 6 月
• Svelte Dev Vlog — 2024 年 6 月 with Rich Harris

閱讀

• 使用 sveltekit 建構資料視覺化平台的經驗 by DNLBLN on Reddit
• 2024 年電子商務的前端框架 by Crystallize
• 在 SvelteKit 中使用 Unplugin Icons：逐步指南 by Rishi Raj Jain
• 將 Tronic247 從 WordPress 遷移到 SvelteKit 和 在 Svelte 和 SvelteKit 中載入資料的方法 by tronic247

觀看

• 建構 Web 應用程式最簡單的方法 和 你需要知道的 13 個 Svelte 概念 by Awesome
• 使用 Zod 進行 SvelteKit 表單驗證 by Ross Robino
• 使用 AirBadge 將身份驗證和付款結合在一起 by Stripe Developers
• Svelte 4 vs. Svelte 5 – Runes 和程式碼片段 by SvelteRust

函式庫、工具和組件

• svelte5-commenter 是常見評論區的組件示範
• SSC (Speedy Svelte Compiler) 是用 Rust 編寫的超快 Svelte 編譯器

本月就到這裡！如果您在 Reddit 或 Discord 上錯過了任何內容，請告訴我們。

直到下個月 👋