Svelte 五月份更新重點：2023

在深入了解更新內容之前，有幾項值得在開頭提及的公告

新任 Svelte 大使

此電子報的固定內容，以及 Svelte 的全方位優質內容創作者 JoyOfCode 和 HuntaByte 已獲任命為 Svelte 大使。大使是因樂於助人、貢獻良多，並維護 Svelte 作為友善、歡迎社群的聲譽而聞名的人，我們非常感謝他們的參與！

SvelteHack 優勝者將於 5 月 6 日公布

再過幾天，我們就會知道誰贏得了 SvelteHack，即 2 月 17 日至 4 月 17 日之間舉辦的 Svelte 黑客松。請在 5 月 6 日關注Svelte Summit，看看您最喜歡的專案是否入選 👀

本月的展示中收錄了許多黑客松投稿作品... 但首先，讓我們來看看有哪些新內容！

Svelte 的新功能

• style 區塊現在支援 CSS @container 查詢 (3.58.0)
• bind:innerText 現在可用於 contenteditable 元素 (3.58.0)
• 新的輔助功能警告，a11y-interactive-supports-focus 現在會在互動式元素無法聚焦時發出警告 (3.58.0)

如需 Svelte 編譯器的所有變更，包括未發布的變更，請查看更新記錄。

SvelteKit 的新功能

• 當啟用熱模組重載 (HMR) 時，頁面將在錯誤修正後重新載入 (1.14.0，#9497)
• 現在，以「嵌入式」模式同時載入到同一個 html 頁面的兩個應用程式 (1.15.7，#9610)
• Vite 的編譯現在會記錄使用 svelte 欄位以不同於標準 Vite 解析方式來解析 Svelte 檔案的套件的警告 (vite-plugin-svelte@2.1.0，kit@1.15.8)

語言工具的新功能

• 支援 <svelte:document> (#1958) 和新的繫結的智慧感知報告 (#1957) (107.3.0)
• 「快速修正...」的新「全部修正」選單選項可輕鬆「新增所有遺失的匯入」和其他偵測到的錯誤 (107.3.0，#1939)
• 我們推出了一個全新的、更棒的官方 ESLint 外掛程式！先前在 ESLint 中對 Svelte 的支援無法很好地處理範本 AST，導致誤判和假陰性，以及自訂 ESLint 規則的高門檻。這個新的官方版本是以 ota-meshi 的 svelte-eslint-parser 為基礎，而且已經準備好投入使用。試用看看，並分享您的意見回饋！

---

社群展示

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

• 戰爭之聲 是一個講述故事的資料視覺化專案，旨在幫助了解烏克蘭的破壞規模
• Syntax FM 的周邊商品店現在使用 SvelteKit、PlanetScale 和 Prisma 建立
• 感謝瓶是您自己的私人空間，您可以在這裡向您的伴侶發送鼓勵和感謝的訊息
• Japanese Jouzu 是一個日語發音和符號學習應用程式
• MarkMyImages 是一種批量浮水印、調整圖片大小、重新命名、套用效果等的工具，所有操作都在裝置上進行，以提高速度和隱私性
• Immich 是一種直接從您的手機進行自我託管的照片和影片備份解決方案
• Earbetter 是一個耳朵訓練遊戲，以及用於播放和程式設計音樂和音訊的工具
• Tune Twisters 是一個反向猜歌遊戲
• ResponseHunt 是一個基於瀏覽器請求的神秘遊戲，運用您的程式設計技能來獲得「黃金」回應
• Wolfensvelte 3D 是 Wolfenstein 3D 的 Svelte「移植」版
• 程式碼解決教導如何使用程式碼解決問題
• 製作書籤小工具是一種使用程式碼檢查、智慧感知和自動縮小化來快速建立 JavaScript 書籤小工具的方法
• GeniePM 是一種人工智慧工具，可幫助產品經理撰寫使用者故事和需求
• Bitesized News 是一種人工智慧，可透過聊天傳送新聞摘要並回答問題
• 開放調音是一個探索替代吉他調音的地方，而無需重新調整吉他的音調
• BlinkSMS 是一種斯德哥爾摩學生宿舍的文字提醒工具，可協助預訂洗衣時間
• Dev Links 協助開發人員在單一位置展示多個連結，類似於 Linktree 和 Kofi
• Audiogest 是一種將語音轉換為文字並摘要任何音訊的工具
• MineSweep 是使用 Svelte 和 JavaScript 建構的踩地雷遊戲
• Biolytics 可讓您匯入您的實驗室檢測，以便在一個地方查看所有實驗室檢測
• Zero share 是一種使用 WebRTC 的安全 P2P 檔案共用方式
• Svelte lab 是一個用於建立和共用 SvelteKit 專案的沙箱

學習資源

由 Svelte 貢獻者和大使撰寫

• 開發部落格：2023 年 4 月 - TypeScript 與 JSDoc、Transitions API、Dominic Gannaway 加入 Svelte 團隊
• Rich Harris 論框架、網路和邊緣運算。來自 Vercel 在紐約市舉辦的 Svelte 見面會
• Svelte 和 SvelteKit，由 Rich Harris 在 Frontend Masters 上教授
• 本週的 Svelte
  • 2023 年 3 月 31 日 - SvelteKit、Svelte；靜態網站和無頭 CMS 演示
  • 2023 年 4 月 22 日 - SvelteKit 1.15.7、跳過連結、錯誤處理、靜態資產
  • 2023 年 4 月 14 日 - SvelteKit 1.15.5、可存取按鈕、進階切換狀態 🧪🔥
  • 2023 年 4 月 21 日 - SvelteKit 1.15.7、跳過連結、錯誤處理、靜態資產
• Svelte Radio
  • 在 React 中使用 Svelte，由 Puru Vijay 主講
  • Eric Brehault 和 Nuclia
  • 在 AppWrite 使用 Svelte，由 Alex Patterson 主講
  • 在達特茅斯使用 Svelte 進行研究，由 Wasita 和 Eshin 主講

值得一看

• 用於建構現代 Web 應用程式的完整 SvelteKit 課程和 簡易 SvelteKit 頁面轉換，由 Joy of Code 主講
• 適用於 React 開發人員的 Svelte | 您的下一個 JavaScript 框架？，由 Cretezy 主講
• Svelte 和 SvelteKit：完整指南，由 Ali Alaa 在 Udemy 上教授
• 使用 SvelteKit 的 ChatGPT-4 🤖 邊緣的生成式 AI 🌍，由 Johnny Magrippis 主講

值得一讀

• 具有 GraphQL 和 SvelteKit 的無頭 WordPress 和 如何在 SvelteKit 中修正重複的 Meta 標籤問題，由 Justin Ahinon 主講
• 如何在 SvelteKit 專案中設定 tRPC，由 Raqueebuddin Aziz 主講
• 使用 Svelte 進行更好的資料視覺化，由 newline 主講
• 使用 SvelteKit + SQLite 的離線應用程式第 1 部分：設定 WebAssembly SQLite，由 hartenfellerdev 主講

程式庫、工具和元件

• Sveltris 可讓您在框架之間混合使用 UI 基礎元素（例如元件）和狀態基礎元素（例如 Hook），而不會注意到
• SwiftMarket 是一種使用 SvelteKit、Pocketbase 作為資料庫以及 Stripe 作為付款方式建立的電子商務解決方案
• Svelegante 是一個適用於 Svelte 的時尚可寫入儲存區
• 表格產生器可讓您使用圖形編輯器線上建立、設計和自訂您自己的表格
• Svelte 動畫標題是一個動畫標題元件，可以引人注目地提供資訊
• SvelteKit 音樂應用程式範例示範如何連接和處理資料，以及如何使用 TailwindCSS 開發前端元件的一些實用範例
• Socio 是一個 WebSocket 即時通訊 (RTC) API 框架，可將您的前端邏輯與後端資料庫反應式地連接
• Flowbite Svelte 是適用於 Svelte 的官方 Flowbite 元件程式庫
• Wundergraph，一個前端框架的後端，剛發布他們的 Svelte Query 用戶端
• Lucia 針對其適用於 SvelteKit 的簡單且彈性的身份驗證程式庫，剛剛達到 1.0 版
• svelte-stepper 是一個使用 Svelte 建構動畫步驟流程的簡單程式庫

與往常一樣，如果您錯過了任何內容，請隨時在Reddit 或 Discord 上告知我們。

下次見！