Svelte 最新消息：2022 年 9 月

還在煩惱這個月要做什麼嗎？這是你最後一次購買斯德哥爾摩 Svelte Summit 門票的機會！在 9 月 8-9 日加入我們 🎉

由於上個月初 SvelteKit 基於檔案系統的路由器重新設計合併，這個月有很多內容要介紹 - 從遷移腳本到許多新的部落格文章、影片和教學。

但新的路由並不是 SvelteKit 中唯一的新功能...

SvelteKit 的新功能

• 現在支援 Link 作為 HTTP 標頭，並且可以與 Cloudflare 的自動早期提示搭配使用 (1.0.0-next.405, PR)
• $env/static/* 現在是虛擬的，以防止將敏感值寫入磁碟 (1.0.0-next.413, PR)
• $app/stores 現在可以從瀏覽器上的任何位置使用 (1.0.0-next.428, PR)
• config.kit.env.dir 是一個新的設定，用於設定搜尋 .env 檔案的目錄 (1.0.0-next.430, PR)

重大變更：

• 基於檔案系統的路由器和 load API 改進了路由的管理方式。在安裝 @sveltejs/kit@1.0.0-next.406 或更新版本之前，請遵循此遷移指南 (PR, Issue)
• event.session 已從 load 中移除，同時也移除了 session store 和 getSession。請改用 event.locals (1.0.0-next.415, PR)
• 具名佈局已被移除，改用 (groups) (1.0.0-next.432, 文件, PR & 遷移說明)
• event.clientAddress 現在是 event.getClientAddress() (1.0.0-next.438, PR)
• $app/env 已重新命名為 $app/environment，以區別於 $env/... (1.0.0-next.445, PR)

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

語言工具更新

• TypeScript 無法很好地解析 SvelteKit 的 $types 的導入，最新版本的 Svelte 語言工具使其更好 (105.21.0, #1592)

---

社群展示

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

• canno 是一個簡單的互動式 3D 物理遊戲，具有可調整的重力、砲彈威力和除錯視覺化工具 - 使用 threlte 製作
• straw.page 是一個極其簡單的網站建構工具，可讓您直接從手機建立獨特的網站
• Patra 可讓您僅使用連結分享簡短筆記。沒有資料庫。沒有儲存空間
• promptoMANIA 是一個 AI 藝術社群，具有線上提示產生器
• Album by Mood 可讓您根據心情聆聽音樂
• Daily Sumeiro 是一款每日遊戲，可測試您的數學和邏輯技能
• Lofi and Games - 直接從瀏覽器玩輕鬆休閒的遊戲
• Pitch Pipe 是一個數位音調管，具有頻率分析儀和純律音程
• classes.wtf 是一個用 Go 和 Svelte 編寫的自訂分散式搜尋引擎，可讓您比標準課程目錄更快地搜尋哈佛課程
• Scrumpack 是一組工具，可協助 agile/scrum 團隊進行他們的儀式，例如規劃撲克和回顧

學習資源

Svelte 團隊主演

• Supper Club × Rich Harris，Svelte 作者 — Syntax Podcast 499
• 讓我們在 Svelte Radio 上與 Rich Harris 談談路由
• 2.17 - 與 Rich Harris 在 Vercel 打造 Svelte 的未來
• 1.15 - Shawn Wang (swyx) 談 SvelteKit 的最新資訊
• 將 Notion Tailwindcss 和 DaisyUI 新增至 Svelte 應用程式
• Svelte 101 會議
• Astro 和 Svelte
• Storyblok 在 Svelte 中
• Svelte London 八月錄音

學習新的 SvelteKit 路由

• 在 SvelteKit 中遷移重大變更，作者 Brittney Postma (Netlify)
• Svelte Kit API 的重大變更 - 修復 load，並在 1.0 之前收緊 SvelteKit 的設計 - LevelUpTuts 的影片
• SvelteKit 將永遠不同 - Joy of Code 的影片
• 讓我們從頭開始建構一個靜態 Markdown 部落格來學習 SvelteKit，作者 Josh Collinsworth (於 8 月 26 日更新，以跟上新的變更)

待觀看

• 給 React 開發人員的 Svelte 指南 和 Svelte 狀態管理指南，作者 Joy of Code
• 什麼是 Bookit？Svelte Kit Storybook 殺手 和 什麼是 Svelte Kit 中的 @type{import - JSDoc 語法，作者 LevelUpTuts
• TWF 又一個 JS 框架...還是不是？Svelte！，作者 TWF meetup

待閱讀

• 使用 Svelte 建立 Figma 外掛程式，作者 Lennart
• Svelte 影片部落格：使用 Mux 從您自己的 SvelteKit 網站發布 Vlog 和 Svelte Shy Header：使用 CSS 的 Peekaboo 黏性標頭，作者 Rodney Lab

程式庫、工具和元件

• @svelte-plugins/tooltips 是一個專為 Svelte 設計的簡單工具提示動作和元件
• Lucia 是一個簡單的 SvelteKit 驗證程式庫，可將您的 SvelteKit 應用程式連接到您的資料庫
• remix-router-svelte 是 react-router-dom API 的 Svelte 實作 (由 @remix-run/router 驅動)
• MKRT 是一個 CLI，可協助您快速建立 SvelteKit 路由
• Histoire 是一個用於產生故事應用程式的工具 - 展示特定使用案例元件的場景
• sveltekit-flash-message 是一個 Sveltekit 程式庫，可將暫時性資料傳遞到下一個請求，通常來自端點
• svelte-particles 是一個用於建立粒子效果的輕量型 TypeScript 程式庫
• svelte-claps 可為您的 SvelteKit 應用程式中的任何頁面新增拍手按鈕 (如 Medium)
• 霓虹閃爍 是一個 Svelte 元件，可讓您的文字以賽博龐克風格閃爍
• ComboBox 是一個搜尋輸入，可協助使用者從大量項目清單中進行選擇
• @svelte-put 是可用於您專案的有用 Svelte 內容
• vite-plugin-svelte-bridge 可讓您編寫 Svelte 元件，並從 React 和 Vue 中使用它們

UI 套件和啟動器

• Svelte-spectre 是一個基於 spectre.css 並由 Svelte 驅動的 UI 套件
• Skeleton 可讓您使用 Svelte + Tailwind 的強大功能來建構快速且反應靈敏的 Web UI
• iconsax-svelte 將流行的圖示套件帶入 Svelte
• laravel-vite-svelte-spa-template 是一個 Laravel 9、Vite、Svelte SPA、Tailwind CSS (具有表單外掛程式和長寬比外掛程式)、Axios 和 TypeScript 入門範本
• neutralino-svelte-boilerplate-js 是一個適用於 Neutralino 和 Svelte 的跨平台桌面範本
• figma-plugin-svelte-vite 是一個使用 Svelte、Vite 和 Typescript 建立 Figma 外掛程式的樣板
• Urara 是一個精巧且強大的 SvelteKit 部落格啟動器
• SvelteKit Commerce 是 Vercel 使用 SvelteKit 建構的高效能電子商務網站的一體化入門套件

我們遺漏了什麼嗎？請在 Reddit 或 Discord 上告訴我們！

下個月見！