跳至主要内容

Svelte 2024年11月更新

Svelte 5 的新特性和大量新的社区库

Dani Sandoval

如果你错过了发布公告、全新的omnisite或维护者在Svelte Summit 上现场发布... Svelte 5 已经发布了！

Svelte Summit 上还宣布了SvelteHack 2024：Svelte 黑客马拉松（奖品不那么 Svelte）。提交截止日期为 1 月 9 日，只有 10 月 18 日之后启动的项目才有资格参加。所以准备好你的代码，开始黑客马拉松吧！

自 Svelte 5 发布以来，已经发布了一个小版本，引入了几个有用的功能。在本月的综述中，我们将深入探讨这些功能，以及 CLI、SvelteKit 等方面的更新……

Svelte 的新特性

如果你最近才迁移到 Svelte 5，请查看过去几个月的更新，了解所有已添加到此版本的功能。在本月，您将看到一些标记为 -next.XXX 的内容。这些更改包含在 5.0 版本中。

  • 现在可以使用代码片段填充插槽（5.0.0-next.262，#13427）
  • hidden until-found 和 beforematch 现在可用于 DOM 元素（5.0.0-next.266，MDN 文档，#13612）
  • 重大更改：逻辑块表达式中不允许状态变异（5.0.0-next.269，#13625）
  • $derived 符文现在允许在其中使用 getContext()（5.1.0，文档，#13830）

要查看所有用于改进 Svelte 编译器的出色工作——包括所有用于简化迁移的工作——请查看更改日志。

SvelteKit、Svelte CLI 和语言工具的新特性

  • adapter-auto 现在支持 Bun 包管理器（3.3.1，#12854）
  • Svelte CLI 现在支持许多用于新项目和现有项目的附加组件。您可以在CLI 存储库中找到所有附加组件的列表，或者通过在命令行中运行 npx sv create 来查找。
  • Svelte 扩展现在提供了一个 Svelte 5 组件迁移命令（extensions-109.1.0）

社区展示

使用 Svelte 构建的应用和网站

  • DocumentCloud 是一个一体化平台，全球各地的新闻机构都使用它来管理原始文档
  • Chord 是一款用于高质量录制播客和访谈的应用
  • Monokai.pro 现在使用 Svelte 5（有关更多详细信息，请参阅Reddit 帖子）
  • Svelte 音频可视化 可用于可视化语音输入和输出
  • avi12 的YouTube扩展 是 Svelte 如何在 Chrome 扩展程序中使用的绝佳示例
  • Multy 是一款简单的工具，允许您创建 URL 列表，并通过单个链接共享它
  • BlackJack 是一款使用 Svelte 5 构建的纸牌游戏，展示了 Svelte 功能以供教育和演示目的

学习资源

Svelte 贡献者和大使

本周 Svelte

阅读

观看

库、工具和组件

  • Svelte 5 测试示例 是一个很好的示例项目，演示了如何使用 Vitest 测试 Svelte 5 应用程序
  • Origin UI - Svelte 是一个广泛的复制粘贴组件集合，可用于快速构建应用程序 UI
  • Cancellable 是一个构建块，它向按钮和锚元素添加了三个反应式属性，以便在浏览器和平台之间创建更一致的用户体验
  • svelte-simple-router 是为 Svelte 5 制作的客户端路由器
  • svelte-openai-realtime-api 是一个用于使用 OpenAI 实时 API 的 Svelte 组件
  • FlyonUI 是一个开源 Tailwind CSS 组件库，具有语义类和强大的 JS 插件
  • Svelte-Next 自动执行 Svelte 版本更新
  • SvelteKit 动态组件加载演示 展示了如何根据后端 API 提供的内容动态加载不同的 Svelte 组件
  • Tzezar 的数据网格 是一个易于使用、易于自定义的 Svelte 5 数据网格
  • svelte-bundle 是一个用于将 Svelte 组件捆绑到单个 HTML 文件（带 SSR！）中的工具
  • svelte-virtuallists 使您的表格和列表保持高效和快速：仅渲染可见项目，而不是在大型列表中显示所有数据
  • Sveltick 是一个轻量级的流量跟踪库，用于您的 Svelte 应用程序

这就是 Svelte 这个巨大月份的所有内容！如果您发现我们错过了任何内容，请在Reddit 或Discord 上告诉我们。

下次再见 👋