跳至主要內容

Svelte 最新消息：2023 年 3 月

SvelteHack、1.0 後的 SvelteKit 改進以及大型展示

Dani Sandoval

3 月的內容 *非常精彩*，SvelteKit 在 1.0 版本發布後新增了許多重要功能。請查看上週的部落格文章以了解更多詳細資訊。

Svelte Society 上個月也推出了SvelteHack，獎金超過 12,000 美元 - 呼籲所有新舊 Svelte 開發人員在 4 月 17 日截止日期前做出令人驚豔的作品！

而且，如果您還沒聽說，將會有另一個 Svelte Summit！前往 SvelteSummit.com 並註冊電子報，以獲取有關下一場活動的最新資訊 📬

現在讓我們跳到這個月的變更...

SvelteKit 的新功能

  • 現在可以在沒有應用程式的情況下使用 $app/paths - 使使用 Vitest 進行元件測試、使用 Storybook 等等變得更容易（1.4.0，#8838）
  • 現在可以在路由級別配置適配器（1.5.0，文件，#8740）
  • 新的快照機制即使在導航和頁面重新載入後也能保留臨時 DOM 狀態（1.5.0，文件，#8710）
  • 現在可以在伺服器方法中使用 OPTIONS（1.6.0，文件，#8731）
  • 針對無效匯出新增了更豐富的錯誤訊息（1.7.0，#9055）
  • 現在伺服器載入函式可以使用串流 promise（1.8.0，文件，#8901）
  • 新的設定選項 preloadStrategy 有助於調整預載，以避免在某些瀏覽器上出現匯入「瀑布」（1.8.4，文件，#9179）
  • 新的 paths.relative 選項可以控制對 paths.assets 和 paths.base 的解釋（1.9.0，文件，#9220）

Svelte 和語言工具的新功能

  • svelte.dev 上的 REPL 現在支援 package.json 中的 exports 欄位（#445）
  • 新的「呼叫階層」功能可讓您查看函式或類別在何處被呼叫，並追蹤呼叫堆疊（extensions-107.1.0，#1889）
  • Svelte 擴充功能已新增 declarationMap 支援。現在，當程式庫具有宣告對應時，在 .svelte 檔案上「前往定義」將導覽至原始程式碼（extensions-107.1.0，#1878）
  • 現在可以透過 Svelte 擴充功能使用TypeScript 內嵌提示支援。使用 javascript.inlayHints.* 或 typescript.inlayHints.* 啟用它們（extensions-107.1.0，#1855）

*如需 Svelte 編譯器的所有變更，包括未發佈的變更，請查看 更新日誌。

社群展示

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

  • win32.run 是瀏覽器中的 Windows XP 版本 - 具有檔案系統、程式、XP 風格的檔案選取器和儲存對話方塊、第三方程式等等
  • Svelte Radial Menu 是一個環形選單實驗 - 基於 Rauno 的環形選單
  • apod color search 可讓您依色彩搜尋每日天文圖片 (APO) 的相片
  • SvHighlight 是一個適用於 SvelteKit 和 TailwindCSS 的程式碼螢光筆，具有模糊和焦點區塊
  • Limey 可讓您在幾分鐘內建立美觀的單頁網站
  • a/links 是適用於簡短、可組合書籤的擴充功能
  • Sprint Cards 是一個設計挑戰產生器
  • Plought 是一個用於減少決策中雜訊的工具
  • ArcOS-Frontend 是在 Svelte 中重寫的 Arc 作業系統的前端
  • Poxi 透過易於協作的拖放、可繪製網站編輯器，為使用者建立的網路提供支援
  • demo-threlte-scroller-rocinante 是一個將 svelte-sequence 與 Threlte 結合的「捲軸敘事」概念驗證
  • Phonics + Stuff 是一套用於學習和教學自然發音的資源

學習資源

以 Svelte 貢獻者和大使為特色

觀看或聆聽

閱讀

程式庫、工具和元件

UI 工具組和元件

  • Pink 是 Appwrite 的框架獨立設計系統
  • quick-pick 是一個簡單的搜尋工具，您可以在其中控制搜尋目錄
  • Grail UI 提供一組元件基本型別、動作和公用程式，可協助您更快地建置可存取且高品質的 Svelte 應用程式，同時提供良好的開發人員體驗
  • svelte-image-comparison 是一個用於比較影像或畫布元素的 Svelte 元件
  • simple-font-select 是一個簡單的字型選取元件，可將所有本機字型顯示為 CSS 字型系列
  • svelte-datatables-net 是一個將資料轉換為互動式 HTML 表格的 Svelte 元件
  • svelte-flextable 是一個用於使用 Svelte 建立伺服器端處理資料表元件的工具組
  • svelte-algolia-instantsearch 是圍繞 instantsearch.js 為 Svelte 社群開發的包裝器
  • svelte-deep-zoom 是一個 Svelte 元件，可轉譯互動式深度縮放影像（並排影像金字塔）
  • SVoast 是一個適用於 Svelte 的簡單快顯通知元件
  • svelte-otp 是一個適用於 Svelte 的簡單輕量級 OTP 輸入元件
  • trace-svelte 是一個適用於 Svelte 的逐行螢光筆
  • Svelte Auth UI 是一組適用於 Svelte 的驗證元件
  • KitDocs 是適用於 SvelteKit 的文件整合 - 一個適用於 Svelte 的 VitePress 替代方案
  • svelte-signature-pad 是一個 Svelte 動作，可使用出色的 perfect-freehand 程式庫擷取平滑的簽名作為 SVG 路徑

協助程式、儲存和動作

  • SvelteKit-Document 是一個小巧的 SvelteKit 工具，讓您可以從任何頁面或版面配置中更改 <html>、<head> 和 <body> 標籤 - 並完全支援 SSR（伺服器端渲染）。
  • SvelteKit Form Data 是一個自動化的 SvelteKit 表單資料解析器中介軟體。
  • sveltekit-superforms 為您的 SvelteKit 表單增添了許多便利的功能。號稱是一個「強大的函式庫」。
  • Houdini - 這個為 SvelteKit 設計的「消失的」GraphQL 客戶端 - 現在已經來到 1.0 版本。
  • sveltekit-modal-langchain 是一個使用 sveltekit-modal 的 SvelteKit 範例專案，展示了在 SvelteKit 中撰寫 Python 端點是多麼容易。
  • mdsvex-excerpt 允許您在特定的版面配置中只顯示文件的一部分。
  • Svelte Action Balancer 是一個簡單的 Svelte 行動，可以讓標題更易於閱讀。
  • svelte-object 幫助使用元件建立和維護物件。值是儲存的，因此可以直觀地訂閱和更新。
  • svelte-relative-time 是一個小巧的 Svelte 行動和元件，用於呈現相對時間。
  • svelte-disable-preload 是一個簡單的行動，可將無操作事件偵聽器應用於元素，以防止呼叫文件層級的 SvelteKit 事件處理常式。
  • SvelteKit Static Sitemap 在建置期間為您的頁面產生 sitemap.xml。
  • svelte-intersection-observer-action 是一個 Svelte 行動，使用 IntersectionObserver 進行元素位置通知。
  • svelte-sequence 提供自訂的儲存，以在多個步驟中組合補間動畫序列。
  • @svelte-put/inline-svg 是一個 Svelte 行動，用於內嵌動態 SVG（從網路獲取）。

其他酷炫工具

  • sveltekit-modal 讓您可以使用 Modal 在 SvelteKit 中撰寫 Python 端點。
  • svelte-kit-bot-block 是一個伺服器掛鉤，用於處理 SvelteKit 中的垃圾請求。
  • Svelte Email 讓您可以使用 Svelte 撰寫和設計電子郵件範本，並將其呈現為 HTML 或純文字。
  • Inertia.js 讓您可以使用經典的伺服器端路由和控制器，快速建立現代單頁 React、Vue 和 Svelte 應用程式。
  • svelte-adapter-bun 是一個適用於 SvelteKit 應用程式的轉接器，會產生一個獨立的 Bun 伺服器。
  • React in Svelte 是一個讓您可以在 Svelte 中使用 React 元件的函式庫。
  • SvelteKit Redis Session Manager 是 SvelteKit 中用於會話管理的 Redis 整合。

感謝您的閱讀！別忘了嘗試參加 Svelte 黑客松！

如果您認為我們遺漏了任何內容，請隨時在 Reddit 或 Discord 上告知我們