Skip to main content

Svelte 的新动态：2024 年 4 月

Svelte 春季峰会将于 4 月 27 日举办！此外：响应式 Map、Date 和 Set

Dani Sandoval

春天即将到来（至少对地球的一半来说），这意味着 Svelte 春季峰会 也即将到来！活动将在 Svelte Society 的 YouTube 频道 上于 4 月 27 日进行直播。

此外，本月有大量新功能合并到 Svelte 5，使其成为迄今为止最优秀的 Svelte 版本。接下来我们将一一介绍这些新功能，让我们直接开始吧！

Svelte 的新动态

Svelte 5 目前处于预览阶段，并且每一天都在向正式发布更进一步。以下是它的更新日志中一些重点变更：

  • 新的 Map、Date 和 Set 类现在可以从 svelte/reactivity 导入并使用，与它们的原生对应项一样，但可适配 Svelte 的响应式模型（5.0.0-next.79，文档，#10803，#10622，#10781）
  • state/derived/props 现在可以重新从组件中显式导出（5.0.0-next.62，#10523）
  • bind:value 现在允许动态的 type 属性，从而修复了常见输入绑定的问题（5.0.0-next.66，#10608）
  • 改进了 SSR HTML 不匹配验证，并提供了更清晰的错误信息（5.0.0-next.69，#10658）
  • Breaking: 带有 shadowrootmode 属性的模板中的插槽现在会被保留（5.0.0-next.73，#10721）
  • Breaking: $props() 不再接受泛型类型参数。取而代之的是，组件作者应该像为其他变量声明一样对 props 进行类型定义（5.0.0-next.76，#10694）
  • 新的 $bindable 规则允许父级组件将 :bind 绑定到子组件的 prop，同时仍可将其用作普通的 prop（文档，#10851）
  • 现在支持 webkitdirectory DOM 布尔属性（5.0.0-next.81，#10847）
  • 表单重置现在已被纳入双向绑定的考虑范围（5.0.0-next.82，文档，#10617）

SvelteKit 的新功能

  • adapter-vercel 现在具有偏差保护功能，确保客户端和服务器在特定部署中保持同步（@sveltejs/adapter-vercel@5.2.0，文档，#11987）
  • adapter-vercel 的构建输出文件现在包括框架元数据，从而改善平台上的可观察性（@sveltejs/adapter-vercel@5.2.0，#11800）
  • adapter-cloudflare 和 adapter-cloudflare-workers 现在实现了 adapter.emulate，允许在开发和预览期间模拟 Cloudflare 平台（#11732）
  • Breaking: adapter-node 现在可以正常关闭，并支持新的 IDLE_TIMEOUT 和 SHUTDOWN_TIMEOUT 环境变量（@sveltejs/adapter-node@5.0.1，文档，#11653）
  • Breaking: adapter-node 中 precompress 的默认值现在为 true，默认加速站点速度（@sveltejs/adapter-node@5.0.0，文档，#11945）
  • Google Cloud 现在在 adapter-auto 中被支持，无需任何额外配置（@sveltejs/adapter-auto@3.2.0，文档，#12015）

有关 SvelteKit 的所有更改，包括错误修复和适配器的具体更改，请查看每个包的更新日志。

社区展示

使用 Svelte 构建的应用和站点

  • notepad 是为自由职业者设计的一体化工作空间，提供时间跟踪、任务、报告、发票和联系人管理功能。
  • Tokenbase 是一个免费工具，用于创建、管理和分发设计 Tokens。轻松创建设计系统，并快速将其导出为代码。
  • MelloOS 是一个模仿 Windows 95 风格的虚拟桌面。
  • PowerHound 是一款追踪科罗拉多州滑雪场和滑雪后方雪况的应用。
  • ProductSurveys 直接在你的产品中收集用户反馈。
  • WAIfinder 是一个交互式地图，展示了英国 AI 行业中运作的实体。
  • talkmedown 是一个使用 SvelteKit UI 和 Three.js 图形技术制作的紧急降落生存游戏。
  • Bird Flapping 就是那个有个扑动翅膀小鸟的游戏（不要和 FlappyBird 混淆）。
  • Minesweeper FUNNYMODE 是扫雷，但它很“好玩”。
  • Routickr 是一个带有 Firefox 和 Chrome 扩展的习惯跟踪应用。
  • immich 是一个自托管照片和视频管理解决方案。

学习资源

专注于 Svelte 的贡献者和大使

推荐阅读/观看

库，工具和组件

  • Svisualize 是一个 VS Code 扩展，可以在你编码时可视化你的组件。
  • Neel/UI 是一个灵感来自 shadcn 的可定制组件集合，适用于 SvelteKit 应用，可直接复制粘贴使用。
  • BLICKCSS 是一个小型（约 30kb）CSS 库，帮助快速轻松地构建优秀的网站和 Web 应用。

本月内容到此结束！如果我们遗漏了什么，请随时通过 Reddit 或 Discord 告诉我们。

下个月再见 👋