Svelte 最新消息：2022 年 6 月

隨著上個月的 Svelte Summit 落幕，我們已準備好在這個新的六月份應用我們所學的一切！本月的新內容還包括對 createEventDispatcher、@const 宣告的一些生活品質改進，以及 SvelteKit 1.0 的大量進展。

讓我們深入了解！

Svelte 最新消息

• 自訂事件現在可以在 createEventDispatcher 函式中取消 (3.48.0，文件，PR)
• {@const} 標籤現在可以用於 {#if} 區塊中，以有條件地定義變數 (3.48.0，文件，PR)
• 在 <svelte:element>、動畫和各種 DOM 元素中進行了許多錯誤修正。查看 更新日誌 以深入了解！

SvelteKit 最新消息

• Vite 2.9.9 作為最後的 Vite 2 版本之一發布。Svelte 團隊一直努力為 Vite 3 發布做出貢獻，使 SvelteKit 和 Vite 之間的整合比以往更順暢 (Vite 3.0 里程碑)
• config.kit.alias 讓您可以更輕鬆地宣告自訂別名，以取代 import 語句中的值 (文件，PR)
• 標記為預先渲染的頁面現在會在執行階段 SSR 期間失敗 (PR)

重大變更

• 不再支援 Node 14 (PR)
• 對 /favicon.ico 的請求將不再被抑制，而是作為有效的路由處理 (PR)
• AMP 支援已移至單獨的 @sveltejs/amp 套件 (文件，PR)
• 產生的類型現在會寫入 _types 目錄 - 請相應地更新您的匯入 (PR)
• app.html 中的 %svelte.head% 和 %svelte.body% 現在是 %sveltekit.head% 和 %sveltekit.body% (PR)
• LoadInput 現在是 LoadEvent
• 為了支持 Wrangler 2，放棄了對 Wrangler 1 的支持 (PR)

---

社群展示

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

• Plantarium 是一個用於程序產生 3D 植物的工具。
• SPATULA 是一個用於建置著色材料的工具，這些材料可以作為程式碼材料匯出到任何使用 lamina 和 threejs 的專案中
• Waaard 可讓您建立並傳送具有各種 SSO 提供者的受保護連結
• Magidoc 是一個快速且高度可自訂的 GraphQL 文件產生器
• myMarkmap 是 Markmap 的自訂編輯器，使用 SvelteKit 建置
• PassShare 是一種安全且輕鬆地與朋友分享密碼的方式
• DashingOS 是一個工具（類似 Notion + CodeSandbox），可以讓您快速輕鬆地在一個地方原型化和記錄您的工作
• worker-kit-email 可協助您使用一般的 SvelteKit 路由快速開發交易電子郵件
• kaios-weather-svelte 是一個外觀非常熟悉的 KaiOS 天氣應用程式
• svelte-gantt 是一個輕巧快速的互動式甘特圖/資源預訂元件
• Miru 是一個用於貓的 BitTorrent 串流軟體

正在尋找一個很棒的 SvelteKit 網站來貢獻嗎？幫助建立 Svelte Society 網站！

學習資源

閱讀

• Component party 是一個比較不同框架中常見模式的網站
• 快速提示：樣式屬性預設值，作者為 Geoff Rich
• 在 Svelte 中使用減少動態效果，作者為 GHOST
• 使用 Web Audio API 建置樂器，作者為 Tania Rascia
• Svelte-Cubed：在不同裝置上建立可存取且一致的體驗 和 Svelte-Cubed：載入您的 glTF 模型，作者為 Alex Warnes

觀看

來自 Svelte Society

• Svelte Summit Spring 2022 串流錄製 已更新章節標記，方便您一遍又一遍地觀看
• Svelte London, 2022 年 4 月的完整錄製 已經上線！查看來自 Svelte London 社群的精彩演講
• Persian Svelte Society 正在製作關於 Svelte 的波斯語影片
• Svelte Sirens 每月都在與 Svelte 社群的創作者和貢獻者對話
  • SvelteKit + Sanity.io：天作之合，於 5 月 13 日
  • 使用 Prismic 切割您的 Svelte 網站，於 5 月 20 日
  • 在 Render 上渲染您的 Svelte 應用程式，於 5 月 24 日
  • （非官方）Svelte 電子報背後的故事，於 5 月 27 日

網路各地

• 建置 vite-plugin-svelte-inspector、什麼是 Singleton？ 和 什麼是導覽？，作者為 lihautan
• 在 Svelte Kit 中自動匯入元件 - 每週 Svelte，作者為 LevelUpTuts
• 🧪 使用 TDD 和 VITEST 測試 SvelteKit 🧪，作者為 Johnny Magrippis
• 使用 SvelteKit 的 Google Analytics、在 SvelteKit 中使用 WebSockets、使用 Cookie 的 SvelteKit 身份驗證 和 Svelte Headless UI 元件庫，作者為 Joy of Code
• SvelteKit 中巢狀路由的命名版面配置，作者為 The Svelte Junction
• SvelteKit Shiki 語法突顯：Markdown 程式碼區塊 和 Svelte Capsize 樣式設定：排版工具，作者為 Rodney Lab

收聽

• Svelte Radio 每週都會推出新節目
  • 運行 Svelte Meetup 的冒險
  • 另一位 Rich！Geoff！（特別來賓 Geoff Rich）
  • 使用 Dominik G. 檢查 Svelte 程式碼
  • 大量的 Stores
• Svelte 與前端開發的未來（特別來賓 Rich Harris），來自 The New Stack

程式庫、工具和元件

• vite-plugin-svelte-console-remover 是一個 Vite 外掛程式，會在建置期間從 Svelte、JS 和 TS 檔案中移除所有 console 語句（log、group、dir、error 等），以免它們洩漏到生產環境中
• Svelte Headless Tables 是 Svelte 的一個非強制性和可擴展的資料表
• y-presence 是一組輕巧的程式庫，可輕鬆地將存在狀態（即時游標/頭像）新增至任何 Web 應用程式（現在支援 Svelte！）
• Svelcro 是 Svelte 應用程式的元件效能追蹤器
• Svelte-Splitpanes 可讓您建立動態且可預測的檢視面板，以佈置應用程式
• svelte-miniplayer 是一個輕巧、快速、可調整大小和可拖曳的媒體迷你播放器
• svelte-keybinds 是一個簡約的鍵盤綁定介面，具有重新綁定和儲存功能
• svelte-speech-recognition 會將麥克風的語音轉換為文字，並使其可供您的 Svelte 元件使用

特別功能：Svelte Stores

本月有許多來自多位作者發布的 Svelte stores...

• svelte-mutable-store 是一個用於可變值的 Svelte store，帶有 immutable 編譯器選項
• svelte-damped-store 是一個衍生可寫入的 store，可以在 svelte-lens-store 是 Svelte stores 上方的函數式鏡頭時暫停更新
• svelte-persistent-store 是一個可寫入的 svelte store，可從 Window.localStorage 或 Window.sessionStorage 儲存和載入資料。

我們有遺漏任何內容嗎？在 Reddit 或 Discord 上加入我們，發表您的意見。

別忘了您也可以在斯德哥爾摩的 Svelte Summit 親身加入我們！來加入我們，享受兩天精彩的 Svelte 內容！立即取得您的門票。

下個月見！