跳至主要內容

Svelte 最新消息：2022 年 12 月

SvelteKit 1.0 即將到來

Dani Sandoval

SvelteKit 1.0 就在眼前！里程碑問題已完成 99%，上個月有很多新變更需要說明...

開始吧！

SvelteKit 的新功能

  • 使用 willUnload 屬性來判斷導覽是否會導致應用程式卸載（完整頁面重新載入/關閉/離開到另一個頁面）。(#6813)
  • __data.json 請求現在允許快取，同時確保我們快取所有失效情境的相符回應 (#7532)
  • 現在支援連結到 <a name="hash"> 標籤 (#7596)
  • 現在支援在 handle 鉤子中拋出重定向 (#7612)
  • 現在會為沒有 fallback 元件的佈局自動新增一個 fallback 元件 (#7619)
  • resolve 鉤子中的新 preload 函數會決定哪些檔案應該新增到 tag 中以進行預載 (文件, #4963, #7704)
  • 現在可以透過 $app/environment 取得 version (#7689, #7694)
  • handleError 現在可以回傳 Promise (#7780)

重大變更：

  • routeId 現在是 route.id (#7450)
  • beforeNavigate 和 afterNavigate 方法中的 'load' 已重新命名為 'enter'，而 'unload' 已重新命名為 'leave'。beforeNavigate 現在會在外部導覽時以 'unload' 類型呼叫一次，並且不會在重定向期間執行 (#7502, #7529, #7588)
  • redirect 輔助函數現在只允許重定向的狀態碼介於 300-308 之間，且僅允許介於 400-599 之間的 error 狀態碼 (#7767) (#7615, #7767)
  • 特殊字元現在將使用十六進位/Unicode 跳脫序列在路由目錄名稱中編碼 (#7644)
  • 現在使用 devalue 來 (反)序列化動作資料 - 這對於直接擷取動作且未經過 use:enhance 的所有使用者來說，只是一個重大變更 (#7494)
  • trailingSlash 現在是頁面選項，而不是組態 (#7719)
  • 用戶端路由器現在會忽略 %sveltekit.body% 之外的連結 (#7766)
  • prerendering 現在命名為 building，且已移除 config.kit.prerender.enabled (#7762)
  • 已從 builder API 中移除 getStaticDirectory() (#7809)
  • 已從 generateManifest(...) 中移除 format 選項 (#7820)
  • data-sveltekit-prefetch 已被取代為 -preload-code 和 -preload-data，prefetch 現在是 preloadData，而 prefetchRoutes 現在是 preloadCode (#7776, #7776)
  • SubmitFunction 已從 $app/forms 移動到 @sveltejs/kit (#7003)

Svelte 的新功能

  • css: false 和 css: true 的 CSS 編譯器選項已由 'external' | 'injected' | 'none' 設定取代，以加速 ssr 建置的編譯並提高清晰度 (3.53.0)

如需所有 Svelte 編譯器的變更，包括未發布的變更，請查看 CHANGELOG。

社群展示

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

  • Appwrite 的新主控台使其適用於網頁、行動和 Flutter 開發人員的安全後端伺服器可在瀏覽器中使用
  • RepoMagic 是 GitHub 的搜尋和分析工具
  • Podman Desktop 是一個在容器和 Kubernetes 上開發的圖形化工具
  • Ballerine 是一個 Know Your Customer (KYC) UX，適用於任何垂直領域或地理位置，使用模組化建構區塊、元件和第三方整合
  • Budget Pen 是一個類似 Codepen 的瀏覽器程式碼編輯器，其中包含 Tailwind
  • doTogether 可協助您透過重複任務清單追蹤您需要完成的事項
  • Webscraped College Results 是 r/collegeresults 資料視覺化的集合
  • Let’s premortem 可協助避免專案失敗後漫長且令人沮喪的檢討
  • BLKMARKET.COM 是一個供商業和個人使用的插圖庫
  • Sigil 是一個適用於任何事物畫布，其中的空間由投票最多的內容組織而成
  • corpus-activity-streams 是一個非官方的 ActivityStreams 2.0 詞彙資料集和替代文件
  • nodeMyAdmin 是使用 SvelteKit 撰寫的 phpMyAdmin 替代方案
  • Image to Pattern Conversion 是一個十字繡圖案轉換工具，其中包含 預先製作的圖案清單 可供開始使用
  • Verbums 是一個英語詞彙訓練工具，可提高語言理解能力
  • SVGPS 透過將您的圖示轉換為單一 JSON 檔案，免除處理 SVG 檔案叢集的負擔
  • 這個 3D 復古主題的隕石射擊遊戲 是使用 threlte 製作的

學習資源

要聽

要看

要讀

程式庫、工具和元件

  • Skeleton 是一個 UI 工具組，可使用 Svelte + Tailwind CSS 建置快速且反應靈敏的網頁介面
  • svelte-svg-spinners 是 SVG 微調器元件的集合
  • Svelte Floating UI 啟用具有動作的浮動 UI - 不需要包裝元件或元件繫結
  • at-html 可讓您在 Svelte 應用程式中搭配插槽使用 {@html } 標籤
  • html-svelte-parser 是一個 HTML 到 Svelte 的剖析器，可在伺服器 (Node.js) 和用戶端 (瀏覽器) 上運作
  • svelte-switcher 是一個完全可自訂、觸控友善、可存取且小型的切換元件
  • sveltkit-hook-html-minifier 是一個包裝 html-minifier 的鉤子
  • sveltekit-hook-redirect 是一個讓重定向變得簡單的鉤子
  • sveltekit-video-meet 是一個使用 SvelteKit 和 SocketIO 建置的視訊通話網路應用程式
  • svelte-colourpicker 是一個適用於 Svelte 的輕量級、主觀的色彩選擇器元件
  • Svelte-HeadlessUI 是 Tailwind HeadlessUI 的非官方 Svelte 實作
  • svelte-lazyimage-cache 是一個具有 IntersectionObserver 和快取動作的延遲載入圖片元件
  • threlte v5.0 是一種全新的開發人員體驗，速度更快、功能更強大且極為靈活

這個月就到這裡！如果您有任何遺漏，請在 Reddit 或 Discord 上告訴我們

下次再見 🎆