跳至主要內容

Svelte 最新消息：2021 年 5 月

朝 SvelteKit 1.0 版本邁進，並展示滿滿的 SvelteKit 網站！

Dani Sandoval

上週，Svelte Summit 以大量的內容讓我們驚艷！查看完整錄影或在 Svelte Radio 上收聽（預覽版）。現在讓我們來看看這個月的新聞...

Svelte 編譯器的新功能

  • 現在支援 :global() 作為複合 CSS 選擇器的一部分 (3.38.0, 範例)
  • 現在可以將 CSS 自訂屬性傳遞給元件，用於諸如主題化的案例 (3.38.0, 文件即將推出)

SvelteKit 的新功能

  • kit.svelte.dev 煥然一新，而 SvelteKit 示範網站也獲得了全新的樣貌。透過執行 npm init svelte@next 來查看
  • 您現在可以使用 @sveltejs/adapter-static 來建立單頁應用程式 (SPA)，方法是指定一個後備頁面 (PR, 文件)
  • 在應用程式範圍內或逐頁禁用伺服器端渲染 (SSR) (PR)
  • 在預先渲染期間拋出的錯誤訊息現在更具資訊性且更容易閱讀 (PR, 文件)
  • 現在可以重設版面配置，以防止頁面繼承根版面配置。如果您有特定頁面或 i18n 變體的版面配置，這會很有用 (PR, 文件)
  • SvelteKit 程式碼中的 fetch 現在會盡可能使用環境提供的實作。如果 fetch 不可用，則會由适配器進行 polyfill (PR, 文件)

Svelte 與語言工具的新功能

  • svelte-preprocess 現在支援 tsconfig.json 的 "extends" 欄位 (4.7.2)
  • HTML style 屬性現在具有懸停 & 自動完成功能。Svelte 語言伺服器 & 擴充功能現在支援外部命名空間和 ESM 設定
  • 如果定義了插槽/事件類型之間的通用關係，則 Svelte 語言工具現在可以從它們的屬性中推斷出插槽/事件類型

社群展示

應用程式 & 網站

  • gitpod.io 最近使用 SvelteKit 重寫了其網站
  • highlight eel 是一個基於 Web 的編輯器，用於標記您最喜歡的任何 YouTube 影片部分，以便剪輯並與任何人分享
  • The Far Star Mission 是 Apotheus 專輯《The Far Star》的互動式有聲讀物伴侶
  • JavaScript quiz 是一個小型測驗應用程式，可將您的答案儲存在本機
  • ExtensionPay 讓開發人員無需後端伺服器程式碼即可在瀏覽器擴充功能中接受安全付款。
  • mk48.io 是一款使用 SvelteKit 製作的海軍戰艦遊戲
  • Frog Safety 是關於非洲爪蛙和 API 淡水大師套件的指南
  • Stardew Valley Character Preview 從您的 Stardew Valley 儲存檔案載入您角色的屬性，並讓您試用不同的服裝、顏色和配件。

示範、函式庫、工具 & 元件

  • svelte-parallax 是一個基於彈簧的 Svelte 視差元件
  • @svelte-plugins/viewable 是一種基於簡單規則的方法，用於追蹤元素的可見性。
  • Sveltekit-JUI 是一組 UI 元件，與 Svelte 和 Svelte Kit 一起使用。
  • EZGesture 可輕鬆使用簡單的原生 DOM 事件新增手勢功能

想貢獻您自己的元件嗎？ 將您自己的元件提交到 Svelte Society 網站上的 套件清單。

入門套件

正在尋找入門套件或整合方案嗎？ 請查看 svelte-adders 和社群網站 sveltesociety.dev 上的其他範本範例

學習資源

下個月見！

有任何內容要補充嗎？加入我們的 Svelte Society、Reddit 和 Discord！