Svelte 最新消息：2023 年 4 月

四月快樂，各位！這個月，我們要介紹 Svelte 編譯器的所有新功能、SvelteKit 的一些優化，以及一個盛大的展示（一如往常）。

在核心團隊新聞方面，Dominic Gannaway 已加入 Vercel，全職投入 Svelte 的開發！Dominic 是在 JavaScript 引擎效能調校、DOM、反應性、可訪問性等方面的世界級專家！您可能認識他，他是 Inferno UI 框架或 Meta 的 WYSIWYG 編輯器 Lexical 的創建者。很高興看到他的才能在 Svelte 生態系統中發光發熱 🌱

別忘了！Svelte 第六屆虛擬會議 Svelte Summit Spring 將在 5 月 6 日舉行。此外，距離 SvelteHack 結束僅剩兩週... 這是一個與社群分享您的創作，甚至可能贏得獎品的好機會！

現在讓我們深入了解本月的變更...

Svelte 新功能

• 從 3.56.0 開始，已推出許多新功能！
  • 為 on:eventname 新增 |stopImmediatePropagation 事件修飾符 (#5085, 文件)
  • 為 slide 過渡新增 axis 參數 (#6182, 文件)
  • 新增 readonly 工具，將 writable store 轉換為唯讀 (#6518, 文件)
  • 為媒體元素新增 readyState 綁定 (#6666, 文件)
  • 為圖片新增 naturalWidth 和 naturalHeight 綁定 (#7771, 文件)
• 支援在元件上使用 <!-- svelte-ignore ... --> (#8082)
• 當 bind:group 中輸入的值設定為 undefined 時，將會清除其值 (3.56.0, #8214)
• 在 {#each} 區塊中使用擴展屬性交換元素時，<input> 值現在將會保留 (3.56.0, #7578)
• 全面改進警告訊息 - 從 noreferrer 到 aria 規則 (3.56.0)
• 新增 svelte:document (3.57.0, #3310)
• style: 指令現在優先於 style= 屬性 (3.57.0, #7475)
• fly 和 blur 過渡現在支援 CSS 單位 (3.57.0, #7623, 文件)

如需了解 Svelte 編譯器的所有變更，包括尚未發布的變更，請查看 變更日誌。

SvelteKit 新功能

• 現在可以使用 cookies.getAll 取得請求的所有 cookies (1.10.0, #9287, 文件)
• 使用 use:enhance 中新公開的 submitter 參數，輕鬆管理 (多個) 表單的提交狀態 (1.12.0, #9425, 文件)
• 預設的錯誤頁面現在具有深色模式樣式 (1.13.0, #9460)
• 您現在可以省略所有對 SvelteKit 具有特殊意義的方法和變數的類型，並且仍然可以受益於完整的型別安全！請在公告部落格文章中閱讀更多相關資訊

---

社群展示

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

• Peerbeer 讓您無需任何第三方或數據限制即可點對點 (p2p) 分享檔案
• unplaneted 是一個用於探索非常大的太空影像的介面
• PokeBook 是一個用於寫詩的數位筆記本，提供一個美麗、不受干擾的環境和自動儲存功能
• papi 讓您為 AI 模型建立提示，並透過獨特的連結與他人分享
• Mathesar 是一個簡單易用的開源工具，提供類似試算表的 PostgreSQL 資料庫介面
• SQLite Playground 讓您了解 SQLite 如何在瀏覽器中執行和儲存資料
• svgl 是一個具有 SVG 標誌的美麗函式庫
• Swehl 是一個為哺乳母親提供的電子商務商店、社群和教學網站
• Codeverter 是一個由 GPT 驅動的程式碼轉換器，可讓您在不同語言和框架之間進行轉換
• Game On Or Not 是一個免費的網路應用程式，可幫助您與朋友一起組織體育活動
• Sveltia CMS 是一個基於 Git 的輕量級無頭 CMS

學習資源

精選 Svelte 貢獻者和大使

• SvelteKit 1.0 以來的串流、快照和其他新功能，作者：Geoff Rich，發表於 svelte.dev 部落格
• 開發者影片網誌：Rich Harris 向我們展示了 Svelte 和 Kit 的最新消息，2023 年 3 月，來自 Svelte Society
  • 如果您錯過了直播，請查看 下一個直播 - 預定於 4 月 5 日舉行
• Svelte Society - 倫敦，2023 年 2 月
• 本月的 Svelte Radio 節目
  • 我們都住在 Svelte 潛水艇裡
  • 與 Bert Bengtson 一起使用 Svelte 建造家具
  • Svelte 黑客松公告
  • LevelUpTuts 六個月後與 Scott Tolinski
  • 我感冒了，做夢夢到 React 😱
• 本週 Svelte 影片
  • 2023 年 3 月 10 日 - 新的提示！為您的連結加上底線！
  • 2023 年 3 月 17 日 - 更多 a11y 警告！如何：動態表單動作！
  • 2023 年 3 月 23 日 - SvelteKit 1.13.0、Vitest 和 Playwright 概述

觀看或收聽

• 使用 Vercel 和 Supabase 免費部署全堆疊 SvelteKit 應用程式，作者：Joy of Code
• 為什麼 Svelte.js 如此受歡迎？，作者：Prismic
• 使用 TanStack Table 在 SvelteKit 中建立互動式表格，作者：hartenfellerdev
• SvelteKit + GraphQL 與 Houdini，作者：Aftab Alam

閱讀

• 關於 Svelte 的想法，作者：Ty Hopp
• Storybook 說明其為何（以及如何）支援 SvelteKit
• 使用 Authorizer 的 Svelte 身份驗證教學，作者：The Thinks
• 使用 Zod 在 SvelteKit 的伺服器上驗證表單，作者：Ross Robino
• 我的 SvelteKit 應用程式需要網站地圖嗎？我該如何建立它？ 和 使用 Zod 補充 SvelteKit 中零成本的型別安全，以獲得更高的型別安全 和 為 SvelteKit 單一儲存庫配置 Turborepo，作者：Thilo Maier
• 在 SvelteKit 中新增頁面過渡，作者：Josh Collinsworth
• 使用 SvelteKit 和 Playwright 進行 E2E 測試 和 為何您應該在下一個 SvelteKit 專案中使用 TypeScript，作者：Justin Ahinon
• 了解 SvelteKit 專案的結構，作者：Igor Nowosad
• 在 Svelte 中使用 Hook 進行安全驗證，作者：Brewhouse Digital

函式庫、工具和元件

• @vavite/node-loader 是一個 Node ESM 加載器，使用 Vite 來轉譯模組，以在 SvelteKit（或任何 Vite）專案中啟用原始碼對應和中斷點支援
• Inlang 正在為 SvelteKit 建立 i18n，並正在尋求回饋
• Skeleton - Svelte 和 Tailwind 的 UI 工具組 - 現在是 1.0 🎉
• SvelteKit-integrated-WebSocket 透過將 WebSocket 伺服器附加到全域狀態，為 SvelteKit 中的 WebSocket 提供一流的支援
• Svelte Legos 是基本 Svelte 組合工具的集合
• svelte-stored-writable 是 Svelte 的 writable 的直接擴充功能，此外還使用 localStorage 儲存和還原其內容。
• svelte-virtual 提供 Svelte 元件，以有效率地渲染大型清單。
• ChatGPT 克隆和啟動器
  • chatwithme.chat 是一個開源的 ChatGPT UI
  • SlickGPT 是一個輕量級的「使用您自己的 API 金鑰」網路用戶端，適用於以 Svelte 撰寫的 OpenAI API
  • AI Chat Bestie 是一個非官方的 ChatGPT 應用程式
  • chatgpt-svelte 是 ChatGPT Open AI API 的簡單 UI

感謝您的閱讀！別忘了試試 Svelte 黑客松 🧑‍💻

一如既往，如果您發現我們遺漏了任何內容，請隨時在 Reddit 或 Discord 上告訴我們。

下次見！