跳至主要內容

Svelte 最新消息：2024 年 4 月

Svelte Summit 春季大會將於 4 月 27 日舉行！此外：還有響應式的 Map、Date 和 Set

Dani Sandoval

春天即將來臨（至少對地球的一半而言），這意味著Svelte Summit 春季大會即將到來！該活動將於 4 月 27 日在Svelte Society YouTube 頻道上直播。

此外，本月，大量新功能已合併到 Svelte 5 中，使其成為 Svelte 有史以來最好的版本。我們將在下面詳細介紹所有這些功能，所以讓我們馬上開始吧！

Svelte 的新功能

Svelte 5 正在預覽，並且每天都更接近發佈。您可以在下面找到其變更日誌中的一些重點

  • 現在可以從 svelte/reactivity 導入新的 Map、Date 和 Set 類別，並像它們的原生對應物一樣使用，以適應 Svelte 的響應模型（5.0.0-next.79，文件，#10803，#10622，#10781）
  • 可以再次從元件中明確匯出 state/derived/props (5.0.0-next.62，#10523)
  • bind:value 現在允許動態的 type 屬性 - 修復常見的輸入綁定問題 (5.0.0-next.66，#10608)
  • SSR HTML 不匹配驗證已得到改進，並提供更清晰的錯誤訊息 (5.0.0-next.69，#10658)
  • 重大變更：具有 shadowrootmode 屬性的範本內部的插槽現在將被保留 (5.0.0-next.73，#10721)
  • 重大變更： $props() 不再接受泛型類型參數。相反，元件作者應該像對待任何其他變數宣告一樣對其 props 進行類型化 (5.0.0-next.76，#10694)
  • 新的 $bindable rune 允許父元件使用 :bind 來綁定元件的 prop，此外還可以將其用作常規 prop (文件，#10851)
  • 現在支援 webkitdirectory DOM 布林屬性 (5.0.0-next.81，#10847)
  • 現在雙向綁定會考慮表單重置 (5.0.0-next.82，文件，#10617)

SvelteKit 的新功能

  • adapter-vercel 現在具有 Skew Protection，可確保客戶端和伺服器在任何特定部署中保持同步 (@sveltejs/adapter-vercel@5.2.0，文件，#11987)
  • adapter-vercel 的建置輸出檔案現在包含框架元數據 - 提高平台的可觀察性 (@sveltejs/adapter-vercel@5.2.0，#11800)
  • adapter-cloudflare 和 adapter-cloudflare-workers 現在實作 adapter.emulate，允許適配器在開發和預覽期間模擬 Cloudflare 平台 (#11732)
  • 重大變更： adapter-node 現在可以正常關閉，並支援新的 IDLE_TIMEOUT 和 SHUTDOWN_TIMEOUT 環境變數 (@sveltejs/adapter-node@5.0.1，文件，#11653)
  • 重大變更： adapter-node 中 precompress 的預設值現在為 true - 預設情況下使網站更快 (@sveltejs/adapter-node@5.0.0，文件，#11945)
  • 現在 adapter-auto 中支援 Google Cloud，無需任何額外的配置 (@sveltejs/adapter-auto@3.2.0，文件，#12015)

有關 SvelteKit 中的所有變更，包括錯誤修復和特定於適配器的變更，請查看每個套件中的 CHANGELOG。

社群展示

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

  • notepad 是自由工作者的工作空間。在一個工具中提供時間追蹤、任務、報告、發票和聯絡人。
  • Tokenbase 是一個用於建立、管理和分發設計令牌的免費工具。輕鬆建立您的設計系統，並在幾次點擊中將其匯出到程式碼中。
  • MelloOS 是模仿 Windows 95 風格的虛擬作業系統桌面
  • PowerHound 是一個用於追蹤科羅拉多州滑雪勝地和偏遠地區雪況的應用程式
  • ProductSurveys 直接在您的產品內部收集使用者回饋
  • WAIfinder 是一個互動式地圖，顯示在英國人工智慧產業中運作的實體
  • talkmedown 是一款使用 SvelteKit UI 和 Three.js 圖形的緊急迫降生存遊戲。
  • Bird Flapping 是一款有拍打翅膀的鳥的遊戲（不要與 FlappyBird 混淆）
  • 踩地雷 FUNNYMODE 是踩地雷，但很有趣
  • Routickr 是一款具有 Firefox 和 Chrome 擴充功能的習慣追蹤應用程式
  • immich 是一個自我託管的照片和影片管理解決方案

學習資源

Svelte 貢獻者和大使特輯

閱讀/觀看

函式庫、工具和元件

  • Svisualize 是一個 VS Code 擴充功能，可在您編寫程式碼時視覺化您的元件
  • Neel/UI 是一組受 shadcn 啟發的可自訂元件，您可以將其複製並貼上到您的 SvelteKit 應用程式中
  • BLICKCSS 是一個小型 (~30kb) 的 CSS 函式庫，可讓您快速輕鬆地建置出色的網站和 Web 應用程式

這就是本月的所有內容！如果您認為我們錯過了任何內容，請隨時在Reddit 或 Discord 上告訴我們。

下個月見 👋