Svelte 新闻：2021 年 4 月

两个历时数月（甚至数年）的项目终于面世了。SvelteKit 现已进入公开测试阶段，并且 Svelte 中也提供了插槽组件！

SvelteKit 有什么新消息？

SvelteKit - Svelte 用于构建 SSR、无服务器应用程序或 SPA 的多功能框架 - 现已正式进入公开测试阶段。请注意可能会存在 bug！更多详细信息请参阅最新的博文。想知道 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），即日语音节文字。
• Pittsburgh Steps 是宾夕法尼亚州匹兹堡 800 多套公共户外楼梯的交互式地图。
• Music Mode Wheels 是一个网站，以交互式轮盘的形式显示音乐调式。
• Critical Notes 帮助游戏管理员和玩家跟踪他们的角色扮演游戏战役和冒险。
• Svelte 生命游戏 是用 TypeScript + Svelte 编写的康威生命游戏的教育性实现。
• foxql 是一款在浏览器上运行的点对点全文搜索引擎。

演示、库、工具和组件

• svelte-nodegui 是一种使用 Node.js 和 Svelte 构建高性能、原生和跨平台桌面应用程序的方法。
• Svelte 故事格式 允许你使用 Svelte 语法在 Storybook 中编写“故事”。更多信息请参阅Storybook 博客
• SelectMadu 是选择菜单的替代方案，支持搜索、多选、异步数据加载等功能。
• Svelte 复选框 是一个用 Svelte 构建的可自定义复选框。
• Svelte 悬念 是一个 Svelte 组件，实现了 React 的<Suspense>的核心思想。
• 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 设置。
• 用于 prefers-reduced-motion 的 Svelte 存储 演示了如何创建自定义 Svelte 存储，其值将指示用户是否已请求减少运动并提高可访问性。
• Svelte 中的 TypeScript 支持 是 MDN 关于在 Svelte 中使用 TypeScript 的指南。
• 如何使用 svelte-window 合并单元格 是对 svelte-window 的逐步介绍，svelte-window 是流行的 react-window 工具的移植，用于合并表格单元格。有关此迁移的更多信息，请参阅从 react-window 1:1 移植到 svelte-window。
• 易于嵌入的 Svelte 组件 解释了如何使用 Rollup 和脚本标签在任何地方嵌入 Svelte 组件。
• 将 Svelte 项目从 Rollup 转换为 Snowpack 通过视频介绍了常见的迁移模式。
• 如何在 Svelte 和 Sapper 中实现国际化路由 解释了 leaf.cloud 如何将其网站翻译成荷兰语。
• Svelte 存储：使用 Svelte 存储实现反应式上下文 是对“如何使[一个]上下文值具有反应性？”问题的视频解答。
• 使用 Cloudinary 和 Svelte 创建社交分享图片 是 Cloudinary 的一个视频，演示了如何为 JAMstack 网站动态开发 Open Graph 图片和 Twitter 卡片。

下个月见！

有想补充的内容吗？加入我们的Svelte Society、Reddit 和Discord！