跳至主要內容

Svelte 最新消息：2022 年 8 月

SvelteKit 的 load 在 1.0 版本之前的變更，以及對 Vite 3 和 vite.config.js 的支援！

Dani Sandoval

這個月有很多內容要講...在完成 1.0 版本之前，SvelteKit 的設計將會有重大變更。如果您還沒看過，請查看 Rich 的討論，修復 load，並在 1.0 版本之前加強 SvelteKit 的設計 #5748。

此外，@dummdidumm (Simon H) 已加入 Vercel 全職開發 Svelte，而且 @tcc-sejohnson 也加入了 SvelteKit 維護團隊！我們非常高興能有更多維護者專注於 Svelte 和 SvelteKit 的開發，而且已經注意到他們的影響。7 月是 SvelteKit 自成立以來變更第三多的月份！

現在來看看其他更新...

SvelteKit 的新功能

  • 動態導入的樣式現在會在伺服器端渲染 (SSR) 期間包含 (#5138)
  • 改進路由和屬性更新，以防止不必要的重新渲染 (#5654, #5671)
  • 錯誤處理的許多改進 (#4665, #5622, #5619, #5616)
  • 現在在 SSR 建置中會採用自訂 Vite 模式 (#5602)
  • 現在支援自訂 Vite 組態檔位置 (#5705)
  • 私有環境變數（又名「密碼」）現在更加安全。現在，如果您不小心將它們導入到客戶端程式碼中，您會看到錯誤 (#5663, 文件)
  • adapter-vercel 現在使用 Vercel 的 v3 建置輸出 API (#5514)
  • vite-plugin-svelte 已達到 1.0 版本，現在支援 Vite 3。您會注意到 dev (port 5173) 和 preview (port 4173) 的新預設埠 (#5005, vite-plugin-svelte 更新日誌)

重大變更：

  • mode、prod 和 server 在 $app/env 中不再可用 (#5602)
  • svelte-kit CLI 命令現在使用 vite 命令執行，並且需要 vite.config.js。這將允許與 Vite 生態系統中的其他專案（如 Vitest 和 Storybook）進行一流的支援 (#5332, 文件)
  • endpointExtensions 現在是 moduleExtensions，可用於篩選參數比對器 (#5085, 文件)
  • Node 16.9 現在是 SvelteKit 的最低版本 (#5395)
  • 現在允許 % 編碼的檔案名稱。如果您的路由中有 %，您現在必須使用 %25 對其進行編碼 (#5056)
  • 端點方法名稱現在會大寫以符合 HTTP 規範 (#5513, 文件)
  • 已移除 writeStatic 以與 Vite 的組態保持一致 (#5618)
  • transformPage 現在是 transformPageChunk (#5657, 文件)
  • package.json 中不再需要 prepare 腳本 (#5760)
  • adapter-node 在我們等待 compression 函式庫中的錯誤修復 時，不再進行任何壓縮 (#5560)

如需完整變更列表，請查看 kit 的 更新日誌。

Svelte 和語言工具的新功能

  • 現在 Svelte 元件支援 @layer CSS at-rule (3.49.0, PR)
  • 現在 Svelte 的語言工具和外掛程式支援 inert HTML 屬性 (105.20.0, PR)
  • 如果有的話，Svelte 外掛程式現在將使用 SvelteComponentTyped 類型定義 (105.19.0, PR)

社群展示

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

  • PocketBase 是一個開放原始碼的 Go 後端，具有單一檔案和使用 Svelte 建置的管理儀表板
  • Hondo 是一個有多輪的猜字遊戲
  • Hexapipes 是一個用於玩六邊形管道謎題的網站
  • Mail Must Move 是一個為那些想要完成更多事情的人製作的電子郵件應用程式
  • Jot Down 是一個 Visual Studio Code 擴充功能，用於快速簡單的筆記
  • Kadium 是一個用於掌握 YouTube 頻道上傳內容的應用程式
  • Samen zjin we #1metS10 是一個活動網站，透過發送圖畫或祝福來支持荷蘭歐洲歌唱大賽決賽選手 S10
  • On Writing Code 是一個互動式網站，用於學習程式設計設計模式
  • Svelte-In-Motion 讓您在瀏覽器中建立 Svelte 動畫影片
  • Svelte Terminal 是一個類似終端機的網站
  • Bulletlist 是一個簡單的工具，只有一個目的：製作清單
  • Remind Me Again 是一個適用於 Mac、Linux 和 Windows 上可切換提醒的應用程式
  • Heyweek 是一個為渴望額外活力的自由工作者建置的計時應用程式

學習資源

Svelte 團隊主演

觀看

閱讀

技術演示

函式庫、工具和元件

  • Lucia 是一個簡單的、基於 JWT 的 SvelteKit 驗證函式庫，可將您的 SvelteKit 應用程式與您的資料庫連接
  • Skeleton 是一個用於 Svelte + Tailwind 的 UI 元件函式庫
  • pass-composer 可協助您撰寫 threlte 場景的後處理通道
  • @crikey/stores-* 是一組函式庫，用於擴展 Svelte 儲存以用於常見的使用案例
  • Svelte Chrome Storage 是 Svelte 儲存和 Chrome 擴充功能儲存之間的輕量抽象
  • Svelte Schema Form 是一個用於 JSON 結構描述的表單產生器
  • svelte-gesture 是一個函式庫，可讓您將更豐富的滑鼠和觸控事件繫結到任何元件或檢視
  • Snap Layout 和 universal-title-bar 將 Windows 11 快照配置和標題功能帶入 Web 應用程式和 PWA。兩者都可以匯入為 .svelte 模組或 Web 元件
  • svelte-adapter-bun 是 SvelteKit 應用程式的配接器，可產生獨立的 Bun 伺服器
  • json2dir 將 JSON 物件轉換為目錄樹
  • Svelte Command Palette 是一個下拉式命令調色盤元件
  • svelte-use-drop-outside 是一個 Svelte 動作，用於將元素拖放到區域之外
  • PowerTable 是一個 JavaScript 元件，可將 JSON 資料轉換為互動式 HTML 表格
  • svelte-slides 是一個使用 Reveal.js 的 Svelte 投影片範本
  • Svelte Theme Light 是一個基於 Svelte REPL 的 Visual Studio Code 主題

我們有遺漏任何內容嗎？請在 Reddit 或 Discord 上告訴我們！

還在尋找 9 月要做的活動嗎？快來斯德哥爾摩的 Svelte Summit 加入我們吧！立即購票。

下個月見！