跳至主要内容

Svelte 新闻：2024 年 4 月

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

Dani Sandoval

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

此外，本月，大量新功能已合并到 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)
  • 破坏性变更：具有 shadowrootmode 属性的模板内的插槽现在将被保留（5.0.0-next.73，#10721)
  • 破坏性变更：$props() 不再接受泛型类型参数。相反，组件作者应像声明任何其他变量一样为其属性指定类型（5.0.0-next.76，#10694)
  • 新的 $bindable 符文允许父组件除了将它们用作常规属性外，还可以 :bind 到组件的属性 (文档，#10851)
  • 现在支持 webkitdirectory DOM 布尔属性（5.0.0-next.81，#10847)
  • 现在考虑表单重置对双向绑定的影响（5.0.0-next.82，文档，#10617)

SvelteKit 的新功能

  • adapter-vercel 现在具有倾斜保护功能，可确保客户端和服务器在任何特定部署中保持同步（@sveltejs/[email protected]，文档，#11987)
  • adapter-vercel 的构建输出文件现在包含框架元数据 - 提高平台的可观察性（@sveltejs/[email protected]，#11800)
  • adapter-cloudflare 和 adapter-cloudflare-workers 现在实现了 adapter.emulate，允许适配器在开发和预览期间模拟 Cloudflare 平台 (#11732)
  • 破坏性变更：adapter-node 现在可以优雅地关闭，并支持新的 IDLE_TIMEOUT 和 SHUTDOWN_TIMEOUT 环境变量（@sveltejs/[email protected]，文档，#11653)
  • 破坏性变更：adapter-node 中 precompress 的默认值现在为 true - 默认情况下使网站更快（@sveltejs/[email protected]，文档，#11945)
  • 现在在 adapter-auto 中支持 Google Cloud，无需任何额外配置（@sveltejs/[email protected]，文档，#12015)

有关 SvelteKit 中的所有更改，包括错误修复和特定于适配器的更改，请查看 每个软件包中的变更日志。

社区展示

使用 Svelte 构建的应用和网站

  • notepad 是一个面向自由职业者的工作区。在一个工具中提供时间跟踪、任务、报告、发票和联系人。
  • Tokenbase 是一个用于创建、管理和分发设计令牌的免费工具。轻松创建您的设计系统，并只需点击几下即可将其导出到代码。
  • MelloOS 是一个以 Windows 95 风格设计的假操作系统桌面
  • PowerHound 是一款用于跟踪科罗拉多州滑雪胜地和偏远地区的雪况的应用程序
  • ProductSurveys 直接在您的产品中收集用户反馈
  • WAIfinder 是一款交互式地图，显示在英国人工智能行业运营的实体
  • talkmedown 是一款使用 SvelteKit UI 和 Three.js 图形的紧急着陆生存游戏。
  • Bird Flapping 是那个有飞鸟的游戏（不要与 FlappyBird 混淆）
  • 扫雷游戏 FUNNYMODE 是扫雷游戏，但很有趣
  • Routickr 是一款带有 Firefox 和 Chrome 扩展程序的习惯跟踪应用程序
  • immich 是一款自托管的照片和视频管理解决方案

学习资源

特色 Svelte 贡献者和大使

阅读/观看

库、工具和组件

  • Svisualize 是一款 VS Code 扩展，可以在您编写代码时可视化您的组件
  • Neel/UI 是一套受 shadcn 启发的可自定义组件，您可以将其复制粘贴到您的 SvelteKit 应用程序中
  • BLICKCSS 是一个小型（约 30kb）CSS 库，可快速轻松地构建出色的网站和 Web 应用程序

本月就到这里！如果您发现我们错过了任何内容，请随时在 Reddit 或 Discord 上告诉我们。

下个月再见 👋