Skip to main content

Svelte 的最新动态：2024 年 10 月

更强大的 each 块和无限循环的调用堆栈

Dani Sandoval

十月来了！这意味着一件事…… Svelte 秋季峰会只有19天了！通过订阅官方新闻通讯或在 Discord 的直播中关注，随时了解 Svelte 峰会的最新动态。

感谢许多尝试 Svelte 5 候选版本的朋友，维护者们为即将发布的版本投入了大量精力来修复 bug 并提高性能。本月，我们将介绍一些最重要的改动，以及社区过去几周创建的许多应用、资源和库。

Svelte 的最新动态

你想将你的项目迁移到 Svelte 5 吗？想尝试迁移工具并给团队提供反馈吗？那么你应该试试 svelte-migrate 工具！只需要运行 npx svelte-migrate svelte-5 即可开始。如果遇到任何问题，请提交问题。

以下是一些其他的新功能……

  • 旧组件现在可以通过 sync 选项异步手动实例化 (5.0.0-next.237, #12970)
  • each 块在 SSR 模式下表现更好——移除了不必要的声明，并在遍历数组之前缓存数组长度 (5.0.0-next.242, #13060)
  • 如果检测到无限循环，在开发模式下会显示调用堆栈，并打印出最后十个 effect (5.0.0-next.246, #13231)
  • 使用 @sveltejs/enhanced-img 的项目将看到更小的包大小，因为模块变量被内联到了模板中 (5.0.0-next.246, #13075)
  • <button> / <a> 元素缺少 aria-label 和内容时，现在会显示无障碍警告 (5.0.0-next.250, #13130)
  • 动画现在在计算变换时会考虑 zoom (5.0.0-next.254, #13317)
  • 在 runes 模式下，<svelte:self> 现已弃用。由于组件现在可以导入自身，因此不再需要 (5.0.0-next.256, #13333)
  • 几乎每个 Svelte 项目都在使用的 CLI 工具 svelte-check 现已大幅缩小 (repo, post)

想看看维护者为 Svelte 5 的生产准备都做了哪些工作？查看 CHANGELOG ，了解所有大小修复！

SvelteKit 和语言工具的最新动态

  • SvelteKit 现在支持 load 函数中的类型化数组。这“不要过度使用，因为它采用的是体积比原始数据大 33% 的 base64 编码，但在必要时非常有用”(2.6.0, #12716)
  • 通过 Svelte 5 的 Component 接口类型注释的组件现在支持更好的智能提示 (extensions-109.0.1)

社区展示

通过 Svelte 构建的应用和网站

  • svelte0.dev 通过文本提示使用 shadcn/ui 生成 Svelte UI
  • Mini Spreadsheet Component 是介绍 Svelte 响应式工作原理的绝佳工具
  • Poof 是一款自毁笔记应用，提供可选的待办列表、电子邮件提醒以及按指定日期删除内容的功能
  • kunft 是一个从 GitHub 中直接部署 Docker 容器和应用的云平台
  • quickprompt 是一个浏览器扩展，可轻松保存和检索 ChatGPT 提示
  • Dither 是一个受《奥伯拉·丁的回归》和 Meatspac.es 启发的低保真 GIF 聊天应用
  • cobalt 可以帮助你从喜欢的网站保存任何内容：视频、音频、照片或 GIF
  • YouTube Looper 是一个用于 YouTube 视频的自定义循环扩展
  • LeetLink 是一个类似 Linktree 的工具，支持自定义主题
  • WhatChord 是一个钢琴和弦查找工具
  • AIUI 是一个面向 OAI-Compatible API 的 Web UI

学习资源

由 Svelte 贡献者和大使提供

本周 Svelte

  • 第 74 集 — 更新日志、race 和 maybeStream、svelte:component 废弃
  • 第 75 集 — 更新日志、$props、$state
  • 第 76 集 — 更新日志、svelte-fsm、script module、尾部斜杠
  • 第 77 集 — 更新日志、Context API、JSX 和单文件组件
  • 第 78 集 — 更新日志、不确定的复选框、类和操作

Svienna 09/2024

阅读推荐

视频推荐

库、工具和组件

  • Tzezar’s Datagrid 是易用且易于自定义的数据网格组件
  • SparklePost 是一款演示应用，采用现代高效的 Web 开发技术，实施了原生 iOS 和 Android 应用中常见的界面模式
  • tipex 是基于 TipTap 构建的 SvelteKit 自定义富文本编辑器

本月的内容就是这些！如果我们遗漏了什么，可以在 Reddit 或 Discord 上告诉我们。

下次见 👋