跳至主要內容

Svelte 最新消息：2022 年 10 月

Svelte Summit、use:enhance 和 SvelteKit 候選版本！

Dani Sandoval

本月有很多更新...從 Svelte 和 SvelteKit 的新功能到整整兩天的高峰會！此外，Svelte 擴充功能獲得了一些有用的新工具、新的無障礙 (a11y) 警告，而 Tan Li Hau 教我們如何建立自己的 Svelte 和 Svelte 試算表 😎

Svelte Summit 發生了什麼事？

很多！您可以在下方找到每個直播的各個講座及其時間戳記。活動的精華影片將很快在 Svelte Society 頻道上發布，所以如果您還沒訂閱，請務必訂閱！

第一天

  • 12:31 - 如何在工作場所採用 Svelte
  • 33:21 - 在 Svelte 中為資料視覺化製作動畫
  • 2:20:36 - 紅旗和程式碼異味
  • 2:53:42 - 增強您的 DX
  • 4:42:41 - Svelte 在 UBS 的知識圖譜中
  • 5:06:42 - 如何將 React 函式庫遷移到 Svelte
  • 5:45:27 - Svelte 世界中的 DX 魔力
  • 7:25:39 - 由 Svelte 驅動的資料視覺化
  • 7:59:38 - Svelte 中的部分水合作用，以提高效能
  • 8:20:49 - 更快地建構未來

第二天

  • 24:09 - 滾動式說故事：小菜一碟
  • 2:02:40 - 我告訴過你我的狗不會跑
  • 2:29:43 - 將 Svelte 提升 10 倍
  • 3:04:56 - Svemix？重新 svmix？重新 svelte？：將 Svelte 導入 Remix Router
  • 5:09:39 - 使用 store 玩得開心：Svelte 內建狀態管理函式庫的互動式示範
  • 5:37:06 - 當保持 Svelte 時出錯。我曾經寫過的一些最糟糕的 Svelte 程式碼分析
  • 7:22:05 - 開始使用 Hooks
  • 7:38:14 - 特別公告*

*在高峰會的最後一個講座中，Rich Harris 宣布了 SvelteKit 的第一個候選版本！在沒有計畫中斷變更的情況下，團隊正努力解決錯誤並為 1.0 版本新增剩餘的功能...

更多 SvelteKit 更新

  • use:enhance 是逐步增強表單的最簡單方法 (文件、#6633、#6828、#7012)
  • 範例應用程式已更新，新增了 Sverdle 遊戲，Rich 在 Svelte Summit 中示範過該遊戲，並且展示了 use:enhance (#6979)
  • adapter-cloudflare 現在支援 Cloudflare Pages _routes.json 規格 (#6530)
  • 透過平行執行資產和頁面壓縮來提高建置效能 (#6710)

重大變更：

  • Node 16.14 現在是執行 SvelteKit 的最低版本 (#6388)
  • App.PrivateEnv 和 App.PublicEnv 已移除，改為產生類型 (#6413)
  • %sveltekit.message% 已替換為 %sveltekit.error.message% (6659)
  • App.PageError 現在是 App.Error - 在您的 hooks 中檢查 (文件、#6963)
  • externalFetch 現在是 handleFetch，將針對在伺服器上執行的 load 中所有 fetch 呼叫執行 (#6565)

如需完整的變更清單，請查看 SvelteKit 的 CHANGELOG。

Svelte 更新

  • 針對 incorrect-aria-attribute-type、no-abstract-role、interactive-element-to-noninteractive-role 和 role-has-required-aria-props 新增了新的 a11y 警告。no-noninteractive-tabindex 和 click-events-have-key-events 即將推出！(3.50.0)
  • ComponentEvents 和 SveltePreprocessor 的新類型 (3.50.0)
  • 遇到大量空白時，提高了剖析速度 (3.50.0)
  • 所有全域 JavaScript 物件和函式現在都被視為已知全域變數 (3.50.1)

如需 Svelte 編譯器的所有變更 (包括即將推出的變更)，請查看 CHANGELOG。

語言工具的新功能

  • 針對編輯器建議提供更好的程式碼格式 (106.0.0，#1598)
  • 從內容選單或命令調色盤輕鬆建立 SvelteKit 路由檔案 (106.1.0，#1620)

在 Svelte Discord 中提問

如果您錯過了公告，Svelte Discord 有一個令人興奮的新更新...一個論壇！新的問題頻道利用 Discord 的新論壇功能，協助社群更好地提問、尋找和回答問題！

它可以被用來處理您可能嘗試使用 Svelte 完成的任何事情，包括使用 SvelteKit、社群函式庫、工具等。所以盡情提問吧！

社群展示

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

  • Timeflow 是一個智慧型行事曆和任務管理器，可動態安排您的事件之間的任務
  • GeoQuest 是一個開放原始碼的地理遊戲
  • Houses Of 是一個展示世界各地魅力住宅的專案
  • Greenfield Brewery 是一個用於快速安裝大量自釀酒桶的工具
  • Gram Jam 是一個以三消遊戲和 Scrabble 為靈感的文字益智遊戲
  • Beatbump 是 YouTube Music 的一個尊重隱私的替代前端
  • RoomOS Device Widgets 是一個應用程式，用於在資訊站/PWA 模式下示範 RoomOS 裝置功能
  • World Seed 是一個完全成熟的線上多人遊戲
  • Lirify 是一個在拉脫維亞製作的歌曲歌詞寫作 Web 應用程式工具
  • Splet Tech Konferencija 是塞爾維亞的一個科技研討會，有一個非常精美的網站
  • Unbounded 是一個開放原始碼的可變字型 - 由區塊鏈資助 (和一個看起來很棒的網站)
  • Porter’s Paints 是一個使用 Svelte 建構的油漆電子商務網站 (您猜對了)
  • CRAN/E 是一個現代 R 套件的搜尋引擎

學習資源

由 Svelte 團隊主演

觀看

閱讀

函式庫、工具和元件

  • Svelte Fit 是一個非常簡單、無相依性的文字調整大小函式庫
  • svelte-switch-case 是 Svelte 元件的 switch case 語法。
  • svelte-canvas-confetti 使用單一 canvas 來渲染全螢幕的彩帶。
  • @slidy/svelte 是一個簡單、可配置且可重複使用的輪播元件，基於 @slidy/core 使用 Svelte 建構而成。
  • svelte-currency-input 是一個表單輸入元件，可以在您輸入時將數字轉換為本地化的貨幣格式。
  • Adria 是一個超簡單的表單驗證函式庫，具有自動完成和數值/類型檢查功能。
  • Canopy 是一個用於 Chrome 開發人員工具面板的 Svelte 除錯應用程式。
  • MenuFramework 是一個為 alt:V 撰寫的選單框架。
  • whyframe 賦予 iframe 超能力，使其可以輕鬆地隔離渲染任何內容。
  • @svelte-put/modal 是一個在 Svelte 中實現非同步、宣告式、型別安全的模態視窗的解決方案。
  • Kitty 是一個用於開發安全前端應用程式的函式庫和處理程式集合。
  • svelte-turnstile 是一個用於 Cloudflare Turnstile 的元件，Turnstile 是一個注重隱私的 CAPTCHA 替代方案。

UI 套件和起始範本

  • QWER 是一個使用 SvelteKit 建構的部落格起始範本。
  • SvelteKit Zero API 提供前端和後端之間的型別安全，為輕鬆的 API 創建結構。
  • sveltekit-monorepo 是一個包含 2022 年技術的 monorepo 起始範本。
  • svelte-component-test-recipes 使用 vitest、@testing-library/svelte 和 svelte-htm 來測試看似難以測試的 Svelte 元件。

哇！更新真多。如果我們遺漏了任何內容，請在 Reddit 或 Discord 上告訴我們！

下個月見 👋