Svelte 最新动态：2023 年 5 月

在我们深入更新内容之前，有一些值得在开头提到的公告：

新的 Svelte 大使

本新闻简报的常驻嘉宾，也是 Svelte 内容创作的佼佼者 JoyOfCode 和 HuntaByte 被任命为 Svelte 大使。大使是在社区中因其乐于助人、贡献良多、并维护 Svelte 对于友好和包容社区声誉而广为人知的人们，我们非常感谢他们的参与！

SvelteHack 获奖者将在 5 月 6 日揭晓

在几天内，我们将知道谁赢得了 SvelteHack —— 一场于 2 月 17 日到 4 月 17 日之间举行的 Svelte 黑客松。请关注 5 月 6 日的 Svelte 峰会，看看您最喜欢的项目是否被选中 👀

许多黑客松的投稿作品将在本月的展示中亮相……但首先，让我们看看有哪些新动态！

Svelte 的新功能

• style 块现在支持 CSS @container 查询 (3.58.0)
• bind:innerText 现在可用于 contenteditable 元素 (3.58.0)
• 一个新的无障碍警告 a11y-interactive-supports-focus 现在会在交互式元素不能被聚焦时发出警告 (3.58.0)

有关 Svelte 编译器的所有更改，包括未发布的更改，请查看 变更日志。

SvelteKit 的新功能

• 当启用热模块重载（HMR）时，修复错误后页面将重新加载 (1.14.0, #9497)
• 在“嵌入”模式下加载到同一 HTML 页面的两个应用程序现在可以同时加载 (1.15.7, #9610)
• 对于使用 svelte 字段以不同于标准 Vite 解析的方法解析 Svelte 文件的包，Vite 的编译现在会记录警告 (vite-plugin-svelte@2.1.0, kit@1.15.8)

语言工具的新功能

• 支持 <svelte:document> (#1958) 以及新的绑定的智能提示报告 (#1957) (107.3.0)
• “快速修复...” 的新修复全部选项菜单使得“添加所有缺失的导入”和其他检测到的错误更加方便 (107.3.0, #1939)
• 我们推出了一个全新且更好的官方 ESLint 插件！此前 ESLint 对 Svelte 的支持对于模板 AST 的处理效果不佳，导致误报/漏报及自定义 ESLint 规则障碍较高。这个全新的官方版本基于 ota-meshi 的 svelte-eslint-parser，已经准备好投入实际使用。试用并 分享您的反馈！

---

社区展示

使用 Svelte 构建的应用和网站

• Sound of War 是一个数据可视化项目，通过讲故事方式来帮助理解乌克兰的破坏规模
• Syntax FM’s swag shop 现在基于 SvelteKit、PlanetScale 和 Prisma 构建
• Appreciation Jar 是一个私人空间，您可以在此发送鼓励和感激信息给您的伴侣
• Japanese Jouzu 是一个学习日语声音和符号的应用
• MarkMyImages 是一个批量水印、图像调整大小、重命名、添加效果等的工具——所有操作都在设备上完成，速度快且保护隐私
• Immich 是一个从手机直接备份照片和视频的自托管方案
• Earbetter 是一个耳朵训练游戏，同时也是用于播放和编程音乐和音频的工具
• Tune Twisters 是一个反向猜歌游戏
• ResponseHunt 是一个基于浏览器请求的解谜游戏——用您的编程技能找到“黄金”响应
• Wolfensvelte 3D 是 Wolfenstein 3D 的 Svelte“移植版”
• Code Solving 教授如何用代码解决问题
• Make Bookmarklets 是一个快速创建 JavaScript 书签应用，同时包含代码检查、智能提示和自动压缩功能
• GeniePM 是一个帮助产品经理撰写用户故事和需求的 AI 工具
• Bitesized News 是一个通过聊天提供新闻摘要并回答问题的 AI
• Open Tunings 是一个探索替代吉他调音的方法的地方，而无需实际调音
• BlinkSMS 是一款为斯德哥尔摩学生公寓设计的短信提醒工具，帮助预订洗衣时间
• Dev Links 帮助开发者在一个地方展示多个链接，类似于 Linktree 和 Kofi
• Audiogest 是一个语音转文本并总结任意音频的工具
• MineSweep 是一个基于 Svelte 和 JavaScript 构建的扫雷游戏
• Biolytics 让您可以导入所有的实验室测试结果并集中查看
• Zero share 是一个基于 WebRTC 的安全点对点文件共享工具
• Svelte lab 是一个用于创建和分享 SvelteKit 项目的在线沙盒

学习资源

推荐 Svelte 贡献者和大使的资源

• 开发日志：2023 年 4 月 - TypeScript vs JSDoc、过渡 API、Dominic Gannaway 加入 Svelte 团队
• Rich Harris 讨论框架、网络和边缘计算。 来自 Vercel 在纽约的 Svelte Meetup
• Svelte & SvelteKit 由 Rich Harris 在 Frontend Masters 授课
• 本周 Svelte：
  • 2023 年 3 月 31 日 - SvelteKit，Svelte；静态站点和无头 CMS 演示
  • 2023 年 4 月 22 日 - SvelteKit 1.15.7，跳过链接，错误处理，静态资源
  • 2023 年 4 月 14 日 - SvelteKit 1.15.5，无障碍按钮、高级切换状态 🧪🔥
• Svelte Radio
  • 在 React 中使用 Svelte，Puru Vijay
  • Eric Brehault 和 Nuclia
  • Alex Patterson 谈 Svelte 在 AppWrite 的应用
  • Wasita 和 Eshin 讨论在 Dartmouth 的研究中的 Svelte

观看

• 构建现代 Web 应用的完整 SvelteKit 教程 和 简单的 SvelteKit 页面过渡 来自 Joy of Code
• 针对 React 开发者的 Svelte | 您的下一个 JavaScript 框架？ 来自 Cretezy
• Svelte 和 SvelteKit：完整指南 来自 Ali Alaa 在 Udemy 上的课程
• SvelteKit 生成 AI 应用课程 来自 Johnny Magrippis

阅读

• 使用 GraphQL 和 SvelteKit 的无头 WordPress 和 如何解决 SvelteKit 中的重复 meta 标签问题 作者 Justin Ahinon
• 如何在 SvelteKit 项目中设置 tRPC 作者 Raqueebuddin Aziz
• 使用 Svelte 提升数据可视化 作者 newline
• 搭建离线 SvelteKit 应用的第一部分：设置使用 WebAssembly 的 SQLite 作者 hartenfellerdev

库，工具和组件

• Sveltris 让组件和状态原语可以在框架间自由切换
• SwiftMarket 是基于 SvelteKit 构建的电子商务解决方案，数据库使用 Pocketbase，支付使用 Stripe
• Svelegante 是 Svelte 中一个优雅的可写存储
• Table Generator 通过图形编辑器在线创建、设计和自定义您的表格
• Svelte Animated Headline 是一个能够以吸引的方式显示信息的动画标题组件
• SvelteKit Music App Example 演示了如何连接和处理数据以及使用 TailwindCSS 开发前端组件的实际例子
• Socio 是一个 WebSocket 实时通信（RTC）API 框架，用于将前端逻辑与数据库实时连接
• Flowbite Svelte 是 Svelte 的官方 Flowbite 组件库
• Wundergraph 一个前端框架的后端，刚刚发布了 Svelte 查询客户端
• Lucia 发布了 1.0 的 SvelteKit 简单灵活的身份验证库
• svelte-stepper 是一个用于构建动画步骤流程的简单库，适用于 Svelte

如往常一样，如果我们遗漏了什么，请随时在 Reddit 或 Discord 让我们知道。

下次见！