Svelte 最新消息：2021 年 4 月

經過數個月（甚至數年）開發的兩個專案已經問世。SvelteKit 現在推出公開測試版，而插槽元件現在可以在 Svelte 中使用！

SvelteKit 的最新進展？

SvelteKit - Svelte 用於建構 SSR、無伺服器應用程式或 SPA 的多功能框架 - 現在正式推出公開測試版。預期會有一些錯誤！更多細節請參閱最新的部落格文章。想知道 1.0 版何時接近完成嗎？請查看 github 上的里程碑。

想了解更多關於如何開始使用、與 Sapper 的不同之處、新功能和遷移路徑嗎？請收聽本週的 Svelte Radio 節目，Antony、Kev 和 Swyx 將深入探討。

Svelte & 語言工具的新功能

• 插槽元件，包括 <svelte:fragment slot="...">，可讓元件使用者以豐富的內容指定特定插槽 (Svelte 3.35.0，語言工具 104.5.0)
• 連結編輯現在適用於 Svelte 檔案中的 HTML (語言工具，104.6.0)
• 類型定義 svelte.d.ts 現在會依序解析，允許函式庫作者將類型定義與他們的 svelte 元件一起發布 (語言工具，104.7.0)
• vite-plugin-svelte 可在 Vite 中一般使用 Svelte。npm init @vitejs/app 包含使用此外掛程式的 Svelte 選項。

---

社群展示

應用程式與網站

• Nagato 是一個任務管理工具，可將常用的時間追蹤和待辦事項工具整合在一起。
• type-kana 是一個測驗應用程式，可幫助您學習日文音節文字平假名（hiragana）和片假名（katakana）。
• 匹茲堡階梯是匹茲堡市 800 多個公共戶外階梯的互動式地圖。
• 音樂調式輪是一個以互動輪盤形式顯示音樂調式的網站。
• Critical Notes 幫助遊戲主持人與玩家追蹤他們的角色扮演遊戲戰役和冒險。
• Svelte 生命遊戲 是 Conway 生命遊戲在 TypeScript + Svelte 中的教育性實作。
• foxql 是一個在您的瀏覽器上執行的點對點全文搜尋引擎。

示範、函式庫、工具與元件

• svelte-nodegui 是一種使用 Node.js 和 Svelte 建構高效能、原生且跨平台的桌面應用程式的方法
• Svelte Story 格式允許您使用 Svelte 語法在 Storybook 中編寫「故事」。更多資訊請參閱 Storybook 部落格。
• SelectMadu 是 select 選單的替代品，支援搜尋、多重選擇、非同步資料載入等。
• Svelte 核取清單 是使用 Svelte 建構的可自訂核取清單。
• Svelte 的 Suspense 是一個實現 React <Suspense> 核心概念的 Svelte 元件。
• MiniRx 是一個與 Svelte 和 TypeScript 搭配使用的 RxJS Redux 儲存。
• svelte-formly 為 Svelte 和 Sapper 產生動態表單
• 7ty 是一個使用 Svelte 的靜態網站產生器，支援元件的部分水合作用，並使用類似 Sapper 和 11ty 的基於檔案的路由。

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

啟動器

• sveltekit-electron 是使用 SvelteKit 的 Electron 入門套件
• sveltekit-tailwindcss-external-api 是您使用 TailwindCSS 和外部 API 建構 Svelte 專案所需的一切，由 create-svelte 提供支援。
• Sapper Netlify 是一個可以在 Netlify 函式上執行的 Sapper 專案。

正在尋找特定的啟動器嗎？ 請查看 svelte-adders 以及社群網站 sveltesociety.dev 上的許多其他範本範例

學習資源

• 如何使用 Svelte 和 SvelteKit 建構網站 是一個逐步教學，逐步引導您完成新的 SvelteKit 設定。
• Svelte 偏好減少動態儲存 示範如何建立一個自訂 Svelte 儲存，其值將指示使用者是否已請求減少動態並改善可存取性。
• Svelte 中的 TypeScript 支援 是 MDN 上關於如何在 Svelte 中使用 TypeScript 的指南。
• 如何使用 svelte-window 合併儲存格 是 svelte-window 的逐步解說，svelte-window 是流行的 react-window 工具的移植版本，用於合併表格儲存格。如需更多關於此遷移的資訊，請參閱 從 react-window 1:1 到 svelte-window。
• 易於嵌入的 Svelte 元件 解釋如何使用 Rollup 和 script 標籤在任何地方嵌入 Svelte 元件。
• 將 Svelte 專案從 Rollup 轉換為 Snowpack 在影片中逐步介紹了一種常見的遷移模式。
• 如何在 Svelte 和 Sapper 中國際化路由 解釋 leaf.cloud 如何將其網站翻譯成荷蘭文。
• Svelte 儲存：使用 Svelte 儲存的反應式內容 是對「我們如何使[a]上下文值具有反應性？」這個問題的影片解答。
• 使用 Cloudinary 和 Svelte 建立社群分享圖像 是 Cloudinary 的影片，示範如何為 JAMstack 網站動態開發 Open Graph 圖像和 Twitter 卡片。

下個月見！

有任何要補充的嗎？加入我們的 Svelte Society、Reddit 和 Discord！