Svelte 新闻：2023 年 4 月

各位四月快乐！本月，我们将介绍 Svelte 编译器中的所有新功能、SvelteKit 中的一些生活质量改进以及（像往常一样）一个大型展示。

在核心团队新闻方面，Dominic Gannaway 已加入 Vercel 全职致力于 Svelte！Dominic 是在 JavaScript 引擎、DOM、反应式、可访问性等方面榨取性能的世界级专家！您可能知道他是 Inferno UI 框架或 Meta 的所见即所得编辑器 Lexical 的创建者。很高兴看到他在整个 Svelte 生态系统中的才能发挥作用 🌱

别忘了！Svelte Summit 春季，Svelte 的第六届虚拟会议，将于 5 月 6 日举行。此外，SvelteHack 结束仅剩两周时间……这是一个与社区分享您的创作，甚至可能赢得奖品的好机会！

现在让我们来看看本月的变化……

Svelte 的新功能

• 截至 3.56.0，现在可以使用许多新功能！
  • 为 on:eventname 添加 |stopImmediatePropagation 事件修饰符（#5085，文档）
  • 为 slide 过渡添加 axis 参数（#6182，文档）
  • 添加 readonly 实用程序以将 writable 存储转换为只读（#6518，文档）
  • 为媒体元素添加 readyState 绑定（#6666，文档）
  • 为图像添加 naturalWidth 和 naturalHeight 绑定（#7771，文档）
• 支持组件上的 <!-- svelte-ignore ... -->（#8082）
• 当其值设置为 undefined 时，bind:group 中的输入将被清除（3.56.0，#8214）
• 当使用扩展属性在 {#each} 块中交换元素时，<input> 值现在将保留（3.56.0，#7578）
• 全面改进警告 - 从 noreferrer 到 aria 规则（3.56.0）
• 添加 svelte:document（3.57.0，#3310）
• style: 指令现在将优先于 style= 属性（3.57.0，#7475）
• CSS 单位现在受 fly 和 blur 过渡支持（3.57.0，#7623，文档）

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

SvelteKit 的新功能

• 您现在可以使用 cookies.getAll 获取请求的所有 cookie（1.10.0，#9287，文档）
• 使用 use:enhance 中新公开的 submitter 参数轻松管理（多个）表单的提交状态（1.12.0，#9425，文档）
• 默认错误页面现在具有深色模式样式（1.13.0，#9460）
• 您现在可以省略对 SvelteKit 具有特殊含义的所有方法和变量的类型，并且仍然可以获得完全的类型安全性！在 公告博客文章 中阅读更多相关信息

---

社区展示

使用 Svelte 构建的应用和网站

• Peerbeer 允许您在没有任何第三方或数据限制的情况下点对点 (p2p) 共享文件
• unplaneted 是一个用于探索超大型太空图像的界面
• PokeBook 是一款用于创作诗歌的数字笔记本，提供了一个美观、无干扰的环境和自动保存功能
• papi 允许您为 AI 模型创建提示并使用唯一链接与他人共享
• Mathesar 是一款简单的开源工具，为 PostgreSQL 数据库提供了一个类似电子表格的界面
• SQLite Playground 允许您在浏览器中了解 SQLite 如何运行和存储数据
• svgl 是一个包含 SVG logo 的精美库
• Swehl 是一个面向母乳喂养母亲的电子商务商店、社区和教程网站
• Codeverter 是一个由 GPT 驱动的代码转换器，允许您在不同的语言和框架之间进行转换
• Game On Or Not 是一款免费的网络应用，可帮助您与朋友一起组织体育活动
• Sveltia CMS 是一个基于 Git 的轻量级无头 CMS

学习资源

来自 Svelte 贡献者和大使

• 自 SvelteKit 1.0 以来流式传输、快照和其他新功能，由 Geoff Rich 在 svelte.dev 博客上发布
• 开发博客：Rich Harris 向我们展示了 Svelte 和 Kit 的新功能，2023 年 3 月，来自 Svelte Society
  • 如果您错过了现场直播，请查看 下一个 - 预计将于 4 月 5 日举行
• Svelte Society - 2023 年 2 月伦敦
• 本月的 Svelte Radio 播客
  • 我们都生活在 Svelte 潜艇里
  • 使用 Svelte 和 Bert Bengtson 制作家具
  • Svelte 黑客马拉松公告
  • Scott Tolinski 的 LevelUpTuts 6 个月后
  • 我感冒了，并且做了一些关于 React 的发烧梦 😱
• 本周 Svelte 视频
  • 2023 年 3 月 10 日 - 新提示！为您的链接添加下划线！
  • 2023 年 3 月 17 日 - 更多 a11y 警告！操作方法：动态表单操作！
  • 2023 年 3 月 23 日 - SvelteKit 1.13.0、Vitest 和 Playwright 概述

观看或收听

• 使用 Vercel 和 Supabase 部署全栈 SvelteKit 应用，费用为 0 美元，由 Joy of Code 发布
• 为什么 Svelte.js 如此受欢迎？，由 Prismic 发布
• 使用 TanStack Table 在 SvelteKit 中创建交互式表格，由 hartenfellerdev 发布
• SvelteKit + 使用 Houdini 的 GraphQL，由 Aftab Alam 发布

阅读

• 关于 Svelte 的想法，由 Ty Hopp 发布
• Storybook 说明为什么（以及如何）它支持 SvelteKit
• 使用 Authorizer 的 Svelte 身份验证教程，由 The Thinks 发布
• 使用 Zod 在服务器上验证 SvelteKit 表单，由 Ross Robino 发布
• 我的 SvelteKit 应用是否需要站点地图，以及如何创建它？ 和 使用 Zod 补充 SvelteKit 中的零配置类型安全性以获得更高的类型安全性 和 为 SvelteKit 单仓配置 Turborepo，由 Thilo Maier 发布
• 在 SvelteKit 中添加页面过渡，由 Josh Collinsworth 发布
• 使用 SvelteKit 和 Playwright 进行端到端测试 和 为什么您应该在下一个 SvelteKit 项目中使用 TypeScript，由 Justin Ahinon 发布
• 了解 SvelteKit 项目的结构，由 Igor Nowosad 发布
• 使用 Hook 在 Svelte 中实现安全身份验证，由 Brewhouse Digital 发布

库、工具和组件

• @vavite/node-loader 是一个 Node ESM 加载器，它使用 Vite 将模块进行转译以在 SvelteKit（或任何 Vite）项目中启用源映射和断点支持
• Inlang 正在为 SvelteKit 构建 i18n，并且正在 征求反馈
• Skeleton - Svelte 和 Tailwind 的 UI 工具包 - 现在已发布 1.0 版本 🎉
• SvelteKit-integrated-WebSocket 通过将 WebSocket 服务器附加到全局状态，为 SvelteKit 中的 WebSocket 提供了一流的支持
• Svelte Legos 是一个包含基本 Svelte 组合实用程序的集合
• svelte-stored-writable 是 Svelte 的 writable 的即插即用扩展，它还可以使用 localStorage 存储和恢复其内容。
• svelte-virtual 提供了 Svelte 组件，可以有效地渲染大型列表。
• ChatGPT 克隆和启动器
  • chatwithme.chat 是一个开源 ChatGPT UI
  • SlickGPT 是一个用 Svelte 编写的轻量级“使用您自己的 API 密钥”的 OpenAI API 网络客户端
  • AI Chat Bestie 是一款非官方的 ChatGPT 应用
  • chatgpt-svelte 是 ChatGPT Open AI API 的简单 UI

感谢您的阅读！并且别忘了尝试参加 Svelte 黑客马拉松 🧑‍💻

与往常一样，如果您发现我们错过了任何内容，请随时在 Reddit 或 Discord 上告诉我们。

下次再见！