跳至主要內容

Svelte 最新消息：2021 年 3 月

Svelte 峰會講者招募！改良的 SSR、非 HTML5 編譯目標以及 ESLint TypeScript 支援

Dani Sandoval

本月 Svelte 生態系統發布了許多內容。最重要的是，Svelte Summit Spring 2021 正在公開徵求講者。截止日期為 3 月 14 日，所以如果您有演講的想法，請立即提交！

讓我們深入了解一下新聞 🐬

sveltejs/svelte 的新功能

  • SSR 儲存處理已重新設計為像在 DOM 模式下一樣訂閱和取消訂閱。SSR 儲存現在應該能更一致地運作（3.31.2，請參閱自訂儲存和伺服器端元件 API）
  • 現在允許在元素上使用同一個 action 的多個實例（3.32.0，範例）
  • 新的 foreign 命名空間應該能讓替代編譯目標（如 Svelte Native 和 SvelteGUI）更容易，它會禁用某些 HTML5 特有的行為和檢查（3.32.0，更多資訊）
  • 支援來自預處理器的程式碼中的內聯註解來源對應（3.32.0）
  • 現在允許解構預設值來參考其他變數（3.33.0，範例）
  • 自訂元素現在會在連接時呼叫 onMount 函式，並在斷開連接時清除（3.33.0，請查看此 PR，了解關於人們如何使用 Svelte 和 Web Components 的有趣對話）
  • 編譯器選項中新增了 cssHash 選項，以控制用於 CSS 範圍界定的類別名稱（3.34.0，文件）
  • 持續改進 TypeScript 定義

如需完整的變更列表，包括錯誤修復和 PR 的連結，請查看變更日誌

來自 sveltejs/language-tools 的新功能

  • 對於不支援 didChangeWatchedFiles 的語言伺服器客戶端，將改用備用檔案監看器
  • 新的儲存取值器和元素指令（如 bind: 和 class:）高亮顯示規則
  • 現在可以一起重新命名 HTML 標籤
  • Mustache 標籤解析現在更加穩健，將在更多情況下提供更好的智能感知

還沒試過 language-tools 嗎？請查看適用於 VSCode 的 Svelte 擴充功能或尋找您最喜歡的 IDE 的外掛程式！

來自 sveltejs/* 的其他變更

  • 從 3.1.0 開始，eslint-plugin-svelte3 現在支援 TypeScript
  • prettier-plugin-svelte 發布了一些次要版本，以解決空白和註解修剪問題。
  • svelte-preprocess 本月的錯誤修復包括 postcss 轉換的修復，以及對 postcss-load-config 的 v2 和 v3 的支援
  • sapper 的 0.29.1 版本修復了類型定義中的一些錯誤匯入、更新了與 express/polka 相容的類型，並恢復了所有 CSS 檔案名稱的雜湊處理。

社群展示

應用程式 & 網站

  • 來自 NYTimes 的追蹤冠狀病毒是 SvelteKit 在生產環境中的一個範例
  • Budibase 是一個開源的低程式碼平台，可協助開發人員和 IT 專業人員在自己的基礎架構上更快地建立、自動化和交付內部工具（速度提升 50 倍）。
  • Track the Parcel 是一個一站式工具，用於追蹤所有主要包裹運輸商的包裹狀態。
  • Memo 是電子郵件的替代方案，使用 Svelte 來實現現代訊息傳遞
  • Userscripts Safari 是適用於 Safari 的開源用戶腳本編輯器...一個適用於 Mac OS 的原生 Svelte 應用程式！
  • SVGX 是「設計人員和開發人員一直希望擁有的桌面 SVG 資產管理器。」
  • Armoria 是一個程序紋章產生器和編輯器
  • FictionBoard 是一個虛擬桌面 (VTT) 平台，剛發布了可填寫且響應式的角色表
  • Castles & Crusades Treasure Generator 是一個適用於桌面 RPG：Castles and Crusades 的寶藏產生器。
  • NESBit Studio 是一個工具組，可協助開發自製 NES 遊戲
  • ElectroBlocks 是一個具有內建模擬器的線上 Arduino IDE（僅限 Chrome）
  • Goblin.life 是一個 3D 世界建構器，其 UI 是使用 Svelte 建立的
  • farmbox 是一家位於阿聯酋的雜貨配送服務公司
  • heroeswearmasks.fun 是一個客戶端機器學習工具，可判斷您是否戴著口罩。
  • weatherify 是一個非常漂亮（且開源）的天氣應用程式
  • DSN Live 可讓您即時監控 NASA/JPL 與星際太空任務之間的連線。

演示、程式庫、工具 & 元件

  • spc 是一個適用於網頁的特殊字元選擇器元件
  • svelte-injector 可讓您在 React、Angular、Vue、jQuery、Vanilla JS 中注入 Svelte 元件。
  • Felte 是一個適用於 Svelte 的表單程式庫，具有簡單的驗證報告功能。
  • svelte-use-form 是一個「易於使用且無樣板」的表單程式庫。
  • Formula 為 Svelte 提供「零配置反應式表單」。
  • Houdini 是「為 Sapper 和 Sveltekit 打造的消失式 GraphQL 客戶端」。
  • svelte-split-pane 是一個可拖曳的分隔窗格元件
  • svelte-virtualized-auto-sizer 是一個高階元件，會自動調整單個子系的寬度和高度。
  • svelte-window 是一些元件，用於有效率地渲染大型可捲動的清單和表格資料。
  • Svelte Persistent store 是一個 Svelte 儲存，可在頁面和重新載入時保留其值
  • Svelte Dark 是一個受 svelte.dev REPL 啟發的 VSCode 主題
  • Import Cost 已更新為支援 Svelte 程式庫，並協助開發人員控制他們的套件大小。
  • Tree-sitter-svelte 為 svelte 提供樹狀結構解析器語法
  • Svelte Ripple 是一種 Material Design 波紋效果，不依賴於 @material/ripple（由 Svelte Discord 中的 @karakara 製作）
  • 類比 SVG 時鐘是緩和函數的一個絕佳範例（由 Svelte Discord 中的 @tonmcg 製作）
  • Console Log Styler 可讓您使用虛擬 HTML 和 CSS 產生樣式化的控制台記錄（由 Svelte Discord 中的 @EmNudge 製作）
  • svelte-heroicons 是 Heroicons 圖示程式庫的一個方便的包裝函式
  • supabase-ui-svelte 是用於 Supabase 驗證的 UI 元件

有您自己的 Svelte 元件要分享嗎？將您自己的元件提交至 Svelte Society 網站上的套件清單。

學習資源 & 入門範例

下個月見！

有什麼要補充的嗎？請加入我們的 Svelte Society、Reddit 和 Discord！