跳至主要內容

Svelte 最新動態：2022 年 2 月

Svelte、SvelteKit 和社群的快速發布

Dani Sandoval

二月快樂，各位！在過去的一個月左右，我們看到 Svelte 和 SvelteKit 以驚人的速度發展，Reddit、GitHub 和 Discord 上出現新的社群規則，以及許多令人驚嘆的應用程式、教學和函式庫。

讓我們來看看...

Svelte 更新日誌的重點

SvelteKit 的新功能

  • inlineStyleThreshold 允許您指定內嵌樣式表插入頁面的位置 (文件、#2620)
  • beforeNavigate / afterNavigate 生命周期函式可讓您在頁面導覽之前或之後新增功能 (文件、#3293)
  • 平台上下文現在可以從适配器傳遞 (文件、#3429)
  • Hooks 現在在 resolve 中有一個 ssr 參數，以便在需要時更輕鬆地跳過 SSR (文件、#2804)
  • $page.stuff 提供了一種機制，讓頁面將資料「向上」傳遞到版面配置 (文件、#3252)
  • Fallthrough 路由允許您指定在無法載入路由時的路由位置 (#3217)

新的設定

  • 內容安全性原則 (CSP) 現在支援在使用內嵌 JavaScript 或樣式表時提高安全性 (文件、#3499)
  • kit.routes 設定允許您在建置期間自訂公用/私有模組 (#3576)
  • prerender.createIndexFiles 設定可讓您將 index.html 檔案預先渲染為其子資料夾名稱 (#2632)
  • 現在可以使用 kit.methodOverride 覆寫 HTTP 方法 (文件、#2989)

設定變更

  • config.kit.hydrate 和 config.kit.router 現在巢狀於 config.kit.browser 之下 (3578)

重大變更

  • 在端點和 Hooks 中使用 Request 和 Response 物件 (#3384)

社群展示

應用程式和網站

  • timb(re) 是一個即時音樂程式設計環境
  • Music for Programming 是一系列混音，旨在讓您在 ${task} 時聆聽，以集中大腦並激發思維
  • Team Tale 允許兩位作者以接力的方式寫同一個故事
  • Puzzlez 是一個線上玩數獨和 Wordle 的地方
  • Closed Caption Creator 可以讓您輕鬆地在 Windows、Mac 和 Google Chrome 上將字幕新增到影片中
  • SC3Lab 是一個程式碼產生器，用於實驗 svelte-cubed 和 three.js
  • Donkeytype 是一個簡約且輕巧的打字測試，靈感來自 Monkeytype。
  • Above 是一個為 ADHD/自閉症人士建立的視覺化例行計時器
  • base.report 是一個現代研究平台，適合嚴肅的投資者
  • String 將您的手機變成安全的攜帶式錄音機，讓您可以輕鬆擷取和分享個人筆記、家庭時刻、課堂講座等等
  • The Raytracer Challenge REPL 提供了一個即時編輯器介面，用於設定光線追蹤的場景並在任何現代瀏覽器中即時渲染
  • awesome-svelte-kit 是一個在野外使用 SvelteKit 的絕佳範例清單
  • Map Projection Explorer 可讓您探索不同的地圖投影並說明它們之間的差異
  • Rubiks 是一個魔術方塊模擬器
  • Pianisto 是一個用 SVG、ToneJS 和許多耐心製作而成的工作鋼琴

想與他人一起開發 SvelteKit 網站嗎？試著為 Svelte Society 網站貢獻一份心力！

學習和聆聽

閱讀

觀看

收聽

函式庫、工具和元件

  • threlte 是一個適用於 Svelte 的 three.js 元件函式庫
  • svelte-formify 是一個管理和驗證表單的函式庫，它使用修飾詞來定義驗證
  • gQuery 是一個適用於 Svelte Kit 的 GraphQL Fetcher 和快取
  • Unlock-protocol 是一個整合，可協助使用 MetaMask、Firebase 登入並為客戶設定付費牆
  • AgnosticUI 是一組 UI 原始元件，它們的生命始於乾淨的 HTML 和 CSS
  • Vitebook 是一個快速輕巧的 Storybook 替代方案，由 Vite 提供支援
  • SwyxKit 是一個針對 SvelteKit + Tailwind + Netlify 的固執部落格入門範本。已針對 2022 年重新整理！
  • svelte-themes 是 SvelteKit 應用程式中主題的抽象化
  • svelte-transition 是一個 Svelte 元件，可讓您更輕鬆地使用基於 CSS 類別的轉換 - 非常適合與 TailwindCSS 一起使用
  • Svelte Inview 是一個 Svelte 動作，用於監視元素進入或離開可視區域/父元素
  • svelte-inline-compile 是一個 Babel 轉換，可在使用 Jest 和 @testing-library/svelte 測試 Svelte 元件時提供更愉悅的體驗
  • @feltcoop/svelte-mutable-store 是一個具有 immutable 編譯器選項的可變值的 Svelte 儲存
  • headless-svelte-ui 是一組可以在建置 Svelte 應用程式時使用的無頭元件。

我們遺漏了什麼嗎？需要協助將您的下一個想法在 Svelte 中實現嗎？在 Reddit 或 Discord 上加入我們。

下個月見！