Svelte 最新消息：2023 年 8 月

這個月 Svelte 和 SvelteKit 都推出了一些很棒的新功能。很高興看到這麼多產品和 Side Project 使用 Svelte 作為核心技術推出！

更多詳細資訊如下...

Svelte 與語言工具的新功能

自 Svelte 4 版本發佈以來，已進行了許多小錯誤修復。您可以在 更新日誌 中找到它們。

4.1.0 版本新增了進一步自訂包裝底層 Svelte 元件的自訂元素類別的功能。請查看 自訂元素 API 文件 或 PR 以取得更多資訊！

除了支援 SvelteKit 新的 HEAD 伺服器方法外，Svelte 的語言工具現在支援 Prettier v3 (extensions-107.9.0)，並且工作區信任設定現在用於支援工作區中的所有設定 (extensions-107.8.0)。

SvelteKit 的新功能

• HEAD 伺服器方法現在可用於 API 路由 (1.22.0, 文件, #9753)
• 具有 Vary 標頭的回應現在也會被快取（Vary: * 除外）(1.22.0, 文件, #9993)
• 如果 SvelteKit 的建置輸出不存在，現在會有一個更有幫助的預覽錯誤訊息 (1.22.2, #10337)

如需本月的所有修補程式和效能更新，請查看 SvelteKit 更新日誌。您也可以在 adapter 目錄 中找到特定於轉接器的更新日誌。

---

社群展示

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

• GitLight 將 GitHub 和 GitLab 通知帶到您的桌面
• Days 是 paprikka 以天為單位的生命，靈感來自 Buster Benson 的 Life in Weeks
• Mofi 是一個適用於音樂的內容感知填充和修剪工具
• JSON Bucket 儲存您的 JSON 資料，以便您可以透過產生的 API 路由從任何地方存取
• Soggy Planet 是一個互動式地球地圖，其中海平面上升和下降，文明之光照亮夜晚 (來源)
• PaperClip 是一個 Chrome 擴充功能，可讓您輕鬆記住機器學習、電腦視覺和自然語言處理論文中的詳細資訊。
• Maktaba 是一個「您實際上會使用」的書籤管理器
• Whispering 是一個 Chrome 擴充功能，可讓您存取 OpenAI 的 Whisper API，以便在瀏覽器中快速轉錄（包括 ChatGPT）
• DocuTalk 是您網站的 AI 客戶支援聊天機器人
• Krello 是一個使用 Svelte、Appwrite 和 Flowbite 建置的 Trello 複製品
• Been 是一個地圖建置器，具有造訪過的國家/地區、極端造訪點等旅行統計資料。
• image-to-social-media-thumbnail 可讓您將任何影像轉換為社群媒體縮圖
• Svelte Capacitor Store 是一個持久儲存，在原生裝置上使用 capacitor（偏好設定）儲存，否則使用 localStorage，使其成為多平台專案的理想選擇

學習資源

Svelte 貢獻者和大使的精選

• 與 Kevin AK 一起探索 Svelte 4：效能、相容性和 Web 元件支援 | Modern Web Pod，由 This Dot Media 提供
• Svelte Sirens Stream Design Systems：經驗教訓，Eric Liu（Carbon Components Svelte 和 sveld 文件生成庫的建立者）參與
• 本週 Svelte 新聞
  • 2023 年 6 月 30 日 - Svelte 4.0.1、SK 1.21、列表、螢幕閱讀器、載入
  • 2023 年 7 月 7 日 - Svelte 4.0.5、Kit 1.22.1、Svelte 5、本機儲存和 Markdown
  • 2023 年 7 月 21 日 - Svelte 4.1.1、SvelteKit 1.22.3、漸進式增強

觀看/收聽

• 什麼是過渡性 Web？與 Chris Ferdinandi，由 Smashing Podcast 提供
• 100 秒搞懂 SvelteKit，由 Fireship 提供
• Primo V2 介紹，由 Primo 提供（一個基於 Svelte 的視覺化 CMS）
• 理解 Svelte（與 React 比較），由 Kodaps Academy 提供
• 有這麼簡單嗎？- 精通 SvelteKit，由 Threeveloper 提供
• 在 SvelteKit 中使用自訂元件的 Markdown：mdsvex，由 hartenfellerdev 提供
• 如何為 Svelte 和 Sveltekit 新增紙屑 🎉 和 使用 Rust 和 WebAssembly 將您的 SvelteKit 程式碼加快 10 倍，由 SvelteRust 提供

閱讀

• SvelteJS：我的生態系統比你的大，由 roguegpu 提供
• 避免在 SvelteKit 的伺服器上共用狀態，由 Aakash Goplani 提供
• SvelteKit Fontaine：減少自訂字體 CLS，由 Rodney Lab 提供
• Svelte Kit 中重新導向的簡單指南，由 Justin Golden 提供
• React 與 Svelte（2023 年第三季），由 Gee 提供
• 使用 Upstash Redis 的 SvelteKit 頁面反應元件，由 Scott Spence 提供
• 使用 SvelteKit 建置注重隱私的自架應用程式架構 和 使用 SvelteKit 建置注重隱私的自架應用程式架構，由 Stanislav Khromov 提供
• 在 IIS 上部署 Sveltekit，由 Nutchapon Makelai 提供
• 簡化的驗證和機密管理，由 Eman 提供

程式庫、工具和元件

• Melt UI 是一組用於 Svelte 的無頭、可存取元件建構器
• MDsveX 已更新為可與 Svelte 4 搭配使用
• Svelte Sonner 是一個用於 Svelte 的固執己見 Toast 元件
• WebExtensionTemplate 可讓您跳過樣板程式碼並使用 TypeScript 和 Svelte 或 React 撰寫 Web 擴充功能
• svelte-rust 可讓您在 Svelte 應用程式中執行 Rust 程式碼
• SvelteKit SSE 提供了一種簡單的方法來產生和使用伺服器傳送事件
• better-svelte-writable 提供了一個型別安全的 writable，可讓您更好地控制容器
• Svetch.ts 是 API 端點的用戶端/類型/結構描述/文件產生器
• sveltekit-localize-url 處理 URL 本地化和路由
• elegua 是一個適用於 Svelte 的小型、反應式 PWA 路由器
• Molly 是一個 bash 腳本和 npm 模組，可協助您清除專案中未使用的 Svelte 元件
• sveltekit-bot 是一個使用 SvelteKit 和 Vercel 製作的 Telegram 機器人

感謝您的閱讀！一如既往，如果您在 Reddit 或 Discord 上遺漏任何內容，請隨時告知我們。

下次見 👋