跳至主要內容

Svelte 最新消息：2024 年 8 月

顯著的 hydration 改善、可自訂的警告和新的 API：createRawSnippet

Dani Sandoval

Svelte 5 版本發布前的準備工作，帶來了性能和可自訂性方面的巨大改進。本月的總結還包括：一些小的 SvelteKit 更新和 Svelte Dev Vlog 的回歸。

讓我們深入了解一下！

Svelte 的新功能

以下是 Svelte 5 發行說明中的重點（目前處於候選版本）。

  • 重大變更：svelte/reactivity 輔助函數的名稱已更新為包含 Svelte 前綴 (5.0.0-next.169, 文件 #12248)
  • 分支效應現在具有更好的 DOM 邊界 - 減少了在 {#each} 區塊和 DOM 操作期間的錯誤 (5.0.0-next.171 和 5.0.0-next.182, #12215, #12258, #12383)
  • 單次 hydration 減少了 DOM 大小並顯著提高了 hydration 速度 (5.0.0-next.179, #12335, #12339)
  • 重大變更：轉換現在預設在掛載時播放 (5.0.0-next.177, #12351)
  • 當啟用 css: 'injected' 編譯器選項時，現在可以將 CSS 包含在 <head> 中。這使得在渲染電子郵件和 OG 卡片之類的內容時可以輕鬆包含樣式，同時也大大簡化了玩具設定，您不必費心弄清楚如何將 CSS 從編譯器導入伺服器渲染的 HTML 中 (5.0.0-next.180, 文件, #12374)
  • Svelte 現在會在開發環境中針對 {@html ...} 區塊 hydration 不匹配發出警告 (5.0.0-next.182, #12396)
  • 新的 warningFilter 編譯器選項可讓您為整個應用程式停用某些警告，而無需到處添加 svelte-ignore 註解 (5.0.0-next.186, #12296)
  • 新的 createRawSnippet API 允許在 Svelte 模板之外低階建立程式碼片段 (5.0.0-next.189, 文件, #12425)

SvelteKit 和其他新功能

  • 現在，對於使用 use:enhance 的表單，HTML 屬性 enctype 和 formenctype 會被尊重（另外，還有一些錯誤修復在變更記錄中）
  • cloudflare、cloudflare-workers、netlify 和 vercel 適配器都已更新為在打包時複製 .eot、.otf、.ttf、.woff 和 .woff2 字體檔案 (變更記錄)
  • svelte-preprocess 是幾乎每個 Svelte 專案中使用的工具，現在沒有依賴項了！該團隊已將其從 5.0.0 中的 44 個依賴項逐漸減少到最新版本中的零 (推文)
  • 預先渲染的重新導向現在將附加到 Cloudflare Pages 適配器中的 _redirects 檔案 (adapter-cloudflare@4.7.0, #12199)

社群展示

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

  • StackOverflow 2024 開發人員調查結果網站是使用 Svelte 建構的。更棒的是，結果顯示，使用它的開發人員中有 73% 希望繼續使用 Svelte（更多資訊請參閱此推文）
  • azigy 是一個即時、多人測驗和問答應用程式
  • on-device-transcription 是一個隨時可用的、最小的應用程式，可將任何語音轉換為文字
  • Whispering 是一個開源的轉錄應用程式，提供全域語音轉文字功能
  • Frogment 是一個 OpenAPI 規格編輯器
  • SticAI Glance 將 reddit 貼文摘要為可操作的見解
  • Over Rice 追蹤紐約市周圍最好的清真餐車
  • earbetter 是一個耳朵訓練器，以及用於播放和編寫音樂和音訊的工具
  • Moonglow 是一個使用 GPGPU 的深度行星模擬
  • opml-editor 是一個線上 OPML 編輯器，專為更輕鬆地管理訂閱列表而設計
  • Praxis 是一個 AI 驅動的交易日誌，可分析您的交易並發現模式
  • Lokal 可讓您與公眾和 https .local 位址分享您的 localhost
  • formcrafts 可讓您建立令人難以置信的表單，例如申請表單、潛在客戶產生表單、調查、付款表單等等
  • Shootmail 是一個以範本優先的郵件平台，具有排程和分析功能
  • Supersaw 是開源的網路數位音訊工作站 (DAW)

學習資源

Svelte 貢獻者和大使的精選

閱讀

觀看

程式庫、工具和元件

  • Sveaflet 是一個開源的 Map 元件程式庫
  • Svelte Magic UI 是使用 Tailwind CSS、Tweened、Spring 和 Svelte Motion 建構的元件
  • Figblocks 是一個開源的 UI 元件程式庫，用於使用 Svelte 建構 Figma 外掛程式
  • VS Code 支援自訂索引標籤標籤（對於尚未設定的用戶來說，這是一個很好的提醒）
  • Storybook 發布了 @storybook/addon-svelte-csf 的預發行版本，其中支援 Svelte v5。如果您正在使用它，請在他們的 RFC 上分享您的意見：storybookjs/addon-svelte-csf#191
  • sveltekit-search-params 發布了 v3.0.0，具有更好的類型
  • optimistikit 經過改版，完全支援 v1.0.0 中的 runes，同時保留 @legacy 標籤，如果您仍然無法從 store 更新

本月就到這裡！如果您在 Reddit 或 Discord 上遺漏了任何內容，請告訴我們。

下個月再見 👋