Svelte 最新动态：2023 年 4 月

大家好！四月快乐！本月我们将讨论 Svelte 编译器中的所有新特性、SvelteKit 的一些提升用户体验的改进以及一个重磅展示（像往常一样）。

在核心团队的新闻中，Dominic Gannaway 已加入 Vercel 全职投入 Svelte 的开发！Dominic 是一位在 JavaScript 引擎性能优化、DOM、响应性、可访问性等方面的世界级专家！你可能知道他是 Inferno UI 框架或 Meta 的 Lexical WYSIWYG 编辑器的创造者。很期待在 Svelte 生态系统中看到他的才华绽放 🌱

别忘了！Svelte 峰会春季版，即 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）
• 在 bind:group 中的输入元素，当其值设置为 undefined 时会被清空（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 编译器的所有更改（包括尚未发布的更改），请查看 CHANGELOG。

SvelteKit 的新功能

• 你现在可以通过 cookies.getAll 获取请求的所有 cookies（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 图标库
• Swehl 是一个为哺乳期妈妈提供的电商商店、社区和教程网站
• Codeverter 是一个基于 GPT 的代码转换器，允许在不同语言和框架之间进行转换
• Game On Or Not 是一个免费的 Web 应用，帮助你和朋友组织体育活动
• Sveltia CMS 是一个基于 Git 的轻量级无头 CMS

学习资源

由 Svelte 贡献者和大使提供

• 自 SvelteKit 1.0 以来的流式传输、快照以及其他新特性，作者 Geoff Rich，发表于 svelte.dev 博客
• 开发 Vlog：Rich Harris 展示 Svelte 和 Kit 的新特性，2023 年 3 月，来自 Svelte Society
  • 如果你错过了这次直播，可以查看下一次直播 - 定于 4 月 5 日
• Svelte Society - 2023 年 2 月伦敦会议
• 本月的 Svelte Radio：
  • We all live in a Svelte Submarine
  • 使用 Svelte 构建家具，Bert Bengtson 访谈
  • Svelte 黑客松公告
  • LevelUpTuts：六个月后，Scott Tolinski 访谈
  • 我感冒了，做了关于 React 的噩梦 😱
• 本周的 Svelte 视频：
  • 2023 年 3 月 10 日 - 新提示！下划线你的链接！
  • 2023 年 3 月 17 日 - 更多可访问性警告！动态表单操作指南！
  • 2023 年 3 月 23 日 - SvelteKit 1.13.0，Vitest 和 Playwright 概述

推荐观看或收听

• 使用 Vercel 和 Supabase 部署 SvelteKit 全栈应用，$0 成本，作者 Joy of Code
• 为什么 Svelte.js 如此受欢迎？，作者 Prismic
• 在 SvelteKit 中使用 TanStack 表格创建交互式表格，作者 hartenfellerdev
• 结合 Houdini 的 SvelteKit + GraphQL，作者 Aftab Alam

推荐阅读

• 关于 Svelte 的一些想法，作者 Ty Hopp
• 为什么以及如何支持 SvelteKit 的 Storybook
• 利用 Authorizer 的 Svelte 身份验证教程，作者 The Thinks
• 在 SvelteKit 中使用 Zod 验证表单的服务端数据，作者 Ross Robino
• 我的 SvelteKit 应用是否需要站点地图，以及如何创建？
• 了解 SvelteKit 项目的结构，作者 Igor Nowosad
• 在 Svelte 中使用 Hooks 实现安全的身份认证，作者 Brewhouse Digital

库、工具和组件

• @vavite/node-loader 是一个 Node ESM 加载器，使用 Vite 转译模块，以支持 SvelteKit（或其他 Vite 项目）中的源映射和断点调试
• Inlang 正在为 SvelteKit 构建 i18n，且正在寻找反馈
• Skeleton - Svelte 和 Tailwind 的 UI 工具包，现在发布了 1.0 🎉
• SvelteKit-integrated-WebSocket 为 SvelteKit 提供了原生 WebSocket 支持，通过全局状态附加了一个 WebSocket 服务器
• Svelte Legos 是一个 Svelte 组合工具的集合
• svelte-stored-writable 是 Svelte 的 writable 存储的扩展，支持使用 localStorage 存储和恢复内容
• svelte-virtual 为高效渲染大列表提供了 Svelte 组件
• ChatGPT 克隆和启动器：
  • chatwithme.chat 是一个开源的 ChatGPT 界面
  • SlickGPT 是一个轻量级的 “自备 API 密钥” 的 OpenAI API 网页客户端，使用 Svelte 构建
  • AI Chat Bestie 是一个非官方的 ChatGPT 应用
  • chatgpt-svelte 是一个简单的 ChatGPT Open AI API 界面

感谢阅读！别忘了试试 Svelte Hackathon 🧑‍💻

一如既往，如果我们遗漏了什么，请随时在 Reddit 或 Discord 上告诉我们。

下次再见！