Svelte 的最新动态：2021 年 4 月

两个历经数月（甚至数年）开发的项目终于发布到世界上。SvelteKit 现在已进入公开测试阶段，Svelte 的插槽组件功能也已上线！

关于 SvelteKit 的最新进展？

SvelteKit 是 Svelte 的多功能框架，用于构建 SSR、无服务器应用或共享单页面应用 (SPAs)。现在已经正式进入公开测试阶段。请预期会遇到一些 bug！更多详细内容请阅读 最新的博客文章。想知道 1.0 版本何时临近？请访问 GitHub 的里程碑页面。

想了解如何开始使用，与 Sapper 的区别、新功能及迁移路径？请收听本周的 Svelte Radio 播客，这集邀请了 Antony、Kev 和 Swyx 进行深度讨论。

Svelte 和语言工具的新特性

• 插槽组件，包括 <svelte:fragment slot="...">，允许组件使用者为特定插槽提供丰富内容（Svelte 3.35.0，语言工具 104.5.0）
• HTML 的关联编辑功能现在可以在 Svelte 文件中使用（语言工具，版本 104.6.0）
• 类型定义 svelte.d.ts 现在按照顺序解析，允许库作者为 Svelte 组件提供类型定义（语言工具，版本 104.7.0）
• vite-plugin-svelte 可用于在 Vite 中通用地使用 Svelte。通过 npm init @vitejs/app 初始化的应用中包含了基于此插件的 Svelte 选项。

---

社区展示

应用与网站

• Nagato 是一款任务管理工具，可以将常用的时间追踪和待办工具整合在一起。
• type-kana 是一个有助于学习日语平假名（ひらがな）和片假名（カタカナ）的测验应用。
• Pittsburgh Steps 是一个交互式地图，展示了宾夕法尼亚州匹兹堡市 800 多处公共户外楼梯。
• Music Mode Wheels 是一个以交互式轮盘形式展示音乐模式的网站。
• Critical Notes 帮助游戏主持人和玩家记录其角色扮演游戏的战役和冒险信息。
• Svelte Game of Life 是康威生命游戏的教育性实现，基于 TypeScript 和 Svelte。
• foxql 是一个在浏览器中运行的点对点全文搜索引擎。

演示、库、工具和组件

• svelte-nodegui 提供了一种使用 Node.js 和 Svelte 构建高性能、原生跨平台桌面应用的方法。
• Svelte Story Format 允许你使用 Svelte 语法在 Storybook 中编写“故事”。更多信息请参阅 Storybook 的博客。
• SelectMadu 是一个替代选择菜单的组件，支持搜索、多选、异步数据加载等特性。
• Svelte Checklist 是一个可定制的基于 Svelte 的待办清单组件。
• Suspense for Svelte 是一个 Svelte 组件，类似于 React 的 <Suspense> 概念。
• MiniRx 是一个可结合 Svelte 和 TypeScript 使用的 RxJS Redux Store。
• svelte-formly 用于为 Svelte 和 Sapper 生成动态表单。
• 7ty 是一个静态站点生成器，支持部分组件的渐进式渲染，并使用类似 Sapper 和 11ty 的基于文件的路由。

想贡献自己的组件？ 提交你的组件 到 Svelte 社区网站的 组件列表。

启动模板

• sveltekit-electron 是用于 SvelteKit 和 Electron 的启动模板。
• sveltekit-tailwindcss-external-api 包括使用 TailwindCSS 和外部 API 构建 Svelte 项目所需的一切，由 create-svelte 驱动。
• Sapper Netlify 是一个能运行在 Netlify Functions 上的 Sapper 项目。

正在寻找某个特定的启动模板？ 请查看 svelte-adders 和社区网站 sveltesociety.dev 上的其他模板示例。

学习资源

• 如何用 Svelte 和 SvelteKit 构建网站 是一步步讲解 SvelteKit 新设置的教程。
• 为 prefers-reduced-motion 创建 Svelte store 展示了如何制作一个自定义的 Svelte store，指示用户是否请求减少动画，从而提高无障碍性。
• Svelte 中的 TypeScript 支持 是 MDN 关于在 Svelte 中使用 TypeScript 的指南。
• 如何用 svelte-window 合并单元格 是一个关于 svelte-window 的讲解工具，它是流行的 react-window 工具的一种移植。更多信息请查阅 从 react-window 1:1 迁移到 svelte-window。
• 轻松嵌入 Svelte 组件 讲解了如何使用 Rollup 和 script 标签在任何地方嵌入 Svelte 组件。
• 将 Svelte 项目从 Rollup 迁移到 Snowpack 是一个视频教程，讲解了常见的迁移模式。
• 如何在 Svelte & Sapper 中实现路由国际化 解释了 leaf.cloud 如何将其网站翻译成荷兰语。
• Svelte Store：使用 Svelte Store 实现响应式上下文 是一个视频，回答了“如何使上下文值响应式？”的问题。
• 用 Cloudinary 和 Svelte 创建社交分享图片 是 Cloudinary 的一个视频，演示如何为 JAMstack 网站动态生成 Open Graph 图片和 Twitter 卡片。

下个月见！

有内容要添加吗？欢迎加入 Svelte Society、Reddit 或 Discord！