Svelte 最新消息：2021 年 6 月

這個月，我們看到了許多對 SvelteKit 及其文件的貢獻。語言工具也獲得了一些新功能，最值得注意的是在 JavaScript 或 TypeScript 檔案中更深入地整合 Svelte 檔案。讓我們來看看更新內容...

SvelteKit 的新功能

• svelte.config.js 配置文件現在以 ESM 格式加載 (.js 而不是 .cjs)。
• AMP 頁面現在將使用渲染後的 CSS，而不是發出的 CSS。
• 已將 svelte-check 加入 TypeScript 範本中 (sveltejs/kit#1556)
• 支援 https 金鑰對 sveltejs/kit#1456
• 現在將 Vite 與 SvelteKit 捆綁在一起，並使用升級版本。如果您的 package.json 中有 Vite，請將其移除。
• 二進制回應的 Etags sveltejs/kit#1382
• 將 $layout 重新命名為 __layout，將 $error 重新命名為 __error
• 移除 getContext，改用 request.locals
• 將 .svelte 輸出目錄重新命名為 .svelte-kit。請相應地更新您的 .gitignore。
• trailingSlash: 'never' | 'always' | 'ignore' 現在可在配置中使用。這應該可以更容易地建構與期望 index.html 頁面使用尾部斜線的靜態託管供應商一起使用的網站，並為任何需要更複雜行為的人提供一個逃生出口。

SvelteKit 中值得注意的錯誤修復

• adapter-netlify 獲得了一個修復 sveltejs/kit#1467，並且在 readme 中新增了文件 https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
• 路由器將不再攔截應用程式不擁有的 URL 的導航。這修復了頁面上有 <a> 元素，且具有相同來源但不與應用程式共享基本路徑的應用程式的崩潰問題。
• 現在由路由器處理僅變更雜湊的行為，修復了某些情況下瀏覽器在雜湊變更之間的「返回」導航。

Svelte 和語言工具的新功能

• Svelte 3.38.1 和 3.38.2 修復了一個導致重複元素的水合問題。如果您在專案中看到這個問題，請務必更新到最新版本！
• 新的 TypeScript 外掛程式提供了 JavaScript 或 TypeScript 檔案中更深入的 Svelte 檔案整合。這包括診斷、參考和變數的重新命名。它與 VS Code 擴充功能一起打包，但目前預設關閉。您可以透過 此設定啟用它。我們鼓勵您測試它並提供意見反應
• 在最新版本的 svelte-check 中，您現在可以提供 tsconfig.json 或 jsconfig.json 的路徑。範例：svelte-check --tsconfig "./tsconfig.json"。這可確保診斷僅在該配置中引用的檔案上執行。它還會在 JavaScript 和/或 TypeScript 檔案上執行診斷，這消除了為非 Svelte 檔案執行另一個檢查 (例如 tsc --noEmit) 的需要 (svelte-check 版本 1.6.0)
• VS Code 擴充功能和 svelte-check 獲得了一個新的主要版本。先前，如果使用者同時使用 TypeScript 並啟用了 strict 模式，則沒有初始化程式的屬性 (export let foo;) 才是必需的。現在已更改：使用 TypeScript 的人，以及在 JavaScript 檔案中使用 checkJs 的人，現在始終會將這些屬性標示為必需 (svelte-check 版本 2.0.0，擴充功能版本 105.0.0)

---

社群展示

應用程式和網站

• vidu 是一個最小化的網路分析收集器和儀表板
• River Runner 是一種虛擬方式，可追蹤河流的下游 - 使用 Mapbox 和 Svelte 建構。
• JSDoc Type Generator 為有效的 JSON 生成 JSDoc 類型。
• pagereview.io 是一個網站意見回饋工具，可讓您直接在被檢閱的網站上留下評論。
• gamesroom.io 是一個內建視訊聊天的線上棋盤遊戲平台。
• Greedy Goblin 是一個針對老派 Runescape 玩家的食譜應用程式。
• hashbrown.geopjr.dev 是一個 GNOME-shell 風格的網頁，用於瞭解、探索原始碼並下載 Hashbrown GTK 應用程式 (連結到原始碼)。

程式庫、工具和元件

• svelte-image-crop 是一個使用 Web API 的簡單點擊拖曳圖片裁剪程式庫。
• svelte-datepicker 是一個使用 Svelte 建構的輕量級且包容性高的日期選擇器。
• svelte-regex-router 是一個簡單、輕量的程式庫，可讓您輕鬆處理 Svelte 應用程式中的路由。
• Svelte Micro 是一個輕量且反應靈敏的 Svelte 單元件路由器。
• svelte-entity-store 旨在為儲存實體物件集合提供一個簡單的通用解決方案。
• svelte-animation-store 是一個基於 Svelte 的 tweened store 的 store，可讓您暫停、繼續、重設、重播、反轉或調整 tween 的速度。

想要貢獻一個元件？ 將您自己的元件提交到 Svelte Society 網站上的 套件清單中。

下個月見！

我們是否遺漏了什麼？在 Svelte Society、Reddit 和 Discord 上加入我們！