跳至主要內容

Svelte 最新消息：2024 年 11 月

Svelte 5 的新功能以及大量新的社群函式庫

Dani Sandoval

如果你錯過了公告文章、全新的omnisite，或是維護者在 Svelte Summit 期間現場發布...Svelte 5 已經推出了！

在 Svelte Summit 上也宣布了 SvelteHack 2024：Svelte 黑客松（獎品非常優渥）。提交期限至 1 月 9 日截止，只有 10 月 18 日之後開始的專案才有資格參賽。所以，準備好你的 $ 並開始駭客吧！

自 Svelte 5 發布以來，已經有一個小版本推出，引入了一些有用的功能。我們將在本月的總結中深入探討這些功能，以及 CLI、SvelteKit 等方面的許多更新...

Svelte 的新功能

如果你最近才遷移到 Svelte 5，請查看過去幾個月的更新，了解此版本中的所有功能。本月，你會看到一些標記為 -next.XXX 的變更。這些變更在 5.0 版本中。

  • 現在可以使用程式碼片段來填充插槽 (5.0.0-next.262，#13427)
  • hidden until-found 和 beforematch 現在可用於 DOM 元素 (5.0.0-next.266，MDN 文件，#13612)
  • 重大變更： 不允許在邏輯區塊表達式中進行狀態變更 (5.0.0-next.269，#13625)
  • 現在允許在 $derived 符號內使用 getContext() (5.1.0，文件，#13830)

要查看為改進 Svelte 編譯器所做的所有驚人工作（包括讓遷移更輕鬆的所有工作），請查看 變更日誌。

SvelteKit、Svelte CLI 和語言工具的新功能

  • adapter-auto 現在支援 Bun 套件管理員 (3.3.1，#12854)
  • Svelte CLI 現在支援許多用於新專案和現有專案的附加元件。你可以在CLI 儲存庫中找到完整的附加元件列表，或從命令列執行 npx sv create。
  • Svelte 擴充功能現在提供 Svelte 5 元件遷移命令 (extensions-109.1.0)

社群展示

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

  • DocumentCloud 是一個全球新聞編輯室用來管理主要來源文件的多合一平台
  • Chord 是一個用於錄製高品質 podcast 和訪談的應用程式
  • Monokai.pro 現在使用 Svelte 5（詳情請參閱Reddit 貼文）
  • svelte audio visualizations 對於視覺化語音輸入和輸出非常有用
  • avi12 的 YouTube 擴充功能是 Svelte 如何在 Chrome 擴充功能中使用的絕佳範例
  • Multy 是一個簡單的工具，可讓你建立 URL 列表，並使用單一連結分享
  • BlackJack 是一個使用 Svelte 5 建構的卡牌遊戲，展示了 Svelte 的教育和示範功能

學習資源

精選 Svelte 貢獻者和大使

本週 Svelte 的消息

閱讀內容

觀看內容

函式庫、工具和元件

  • Svelte 5 測試範例 是一個很好的範例專案，展示如何使用 Vitest 測試 Svelte 5 應用程式
  • Origin UI - Svelte 是大量複製和貼上元件的集合，可快速建構應用程式 UI
  • Cancellable 是一個建構區塊，將三個反應式屬性新增至按鈕和錨點元素，以在瀏覽器和平台之間建立更一致的使用者體驗
  • svelte-simple-router 是一個為 Svelte 5 製作的用戶端路由器
  • svelte-openai-realtime-api 是一個用於使用 OpenAI 即時 API 的 Svelte 元件
  • FlyonUI 是一個具有語義類別和強大的 JS 外掛程式的開源 Tailwind CSS 元件函式庫
  • Svelte-Next 自動執行 Svelte 版本更新
  • SvelteKit 動態元件載入示範 說明如何根據你的後端 API 提供的內容動態載入不同的 Svelte 元件
  • Tzezar 的資料網格 是一個易於使用、易於自訂，並以 Svelte 5 製作的資料網格
  • svelte-bundle 是一個將 Svelte 元件捆綁到單個 HTML 檔案的工具（包含 SSR！）
  • svelte-virtuallists 可讓你的表格和清單保持高效且快速：只呈現可見項目，而不是在大清單中顯示所有資料
  • Sveltick 是一個適用於 Svelte 應用程式的輕量級流量追蹤函式庫

這就是本月 Svelte 的重大更新！如果我們在Reddit 或 Discord 上遺漏了任何內容，請告訴我們。

下次見 👋