Svelte 十月 2024 新闻
更好的 each 块和用于无限循环的调用栈
十月到了!这意味着……Svelte Summit 秋季峰会 仅剩 19 天!通过订阅官方通讯或在直播期间关注Discord,随时了解最新的 Svelte Summit 新闻。
感谢许多尝试 Svelte 5 发布候选版本的用户,维护人员一直在努力解决错误并为即将发布的版本实施性能改进。这个月,我们将介绍最显著的变化,以及社区在过去几周内创建的众多应用程序、资源和库。
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)。- 如果检测到无限循环,现在将显示一个调用栈 - 打印出最后十个效果 - 在开发模式下(5.0.0-next.246,#13231)。
- 使用
@sveltejs/enhanced-img
的项目由于模块变量被内联到模板中,因此应该会看到更小的包(5.0.0-next.246,#13075)。 - 现在对于缺少 aria-label 和内容的
<button>
/<a>
元素,会发出 a11y 警告(5.0.0-next.250,#13130)。 - 动画现在在计算变换时会考虑
zoom
(5.0.0-next.254,#13317)。 - 在 runes 模式下,
<svelte:self>
现已弃用。由于组件现在可以自己导入,因此它不再需要(5.0.0-next.256,#13333)。 svelte-check
(几乎每个 Svelte 项目都使用的 CLI)现在变得更小了(仓库,帖子)。
想知道维护人员在使 Svelte 5 准备好投入生产方面都做了哪些工作?查看变更日志,了解所有修复 - 大大小小!
SvelteKit 和语言工具的新功能
- SvelteKit 现在在
load
函数中支持类型化数组。“不建议过度使用,因为它使用 base64 编码,比原始数据大 33%,但在需要时很有用”(2.6.0,#12716)。 - 通过 Svelte 5 的
Component
接口键入的组件获得正确的智能感知(extensions-109.0.1)。
社区展示
使用 Svelte 构建的应用和网站
- svelte0.dev 允许您通过文本提示使用
shadcn/ui
生成 Svelte UI。 - 迷你电子表格组件 是了解 Svelte 中反应性如何工作的一个很好的入门。
- Poof 是一款自毁笔记应用程序,包括可选待办事项列表、电子邮件提醒和在特定日期后删除等功能。
- kunft 是一个云平台,用于直接从 GitHub 部署 Docker 容器和应用程序。
- quickprompt 是一个浏览器扩展,使保存和检索 ChatGPT 提示变得容易。
- Dither 是一款受 Obra Dinn 的回归和 Meatspac.es 启发的低保真 GIF 聊天应用程序。
- cobalt 帮助您从您最喜欢的网站保存任何内容:视频、音频、照片或 GIF。
- YouTube Looper 是一个 Youtube 视频的自定义循环扩展。
- LeetLink 是一款类似于 Linktree 的工具,具有可自定义的主题。
- WhatChord 是一个钢琴和弦查找器。
- AIUI 是一个适用于 OAI 兼容 API 的 Web UI。
学习资源
Svelte 贡献者和大使
- Dockerize 您的 SvelteKit 应用程序:实用指南,作者 Stanislav Khromov。
- 本地优先是 Web 开发的未来吗?、升级到 Svelte 5 的隐藏益处 - 更小的包大小 和 SvelteKit 流式传输详解:何时以及如何使用 - Stanislav Khromov 的视频。
- Svelte 5 - 所有关于新 API 的内容,Simon Holthausen 在 CITYJS 大会上的演讲。
- 学习如何使用 Svelte 5 代码片段,Joy of Code。
- Svelte London - 2024 年 9 月,maya 演讲“副项目的乐趣 ✨”。
本周 Svelte
- 第 74 集 — 变更日志、竞赛和 maybeStream、svelte:component 已弃用。
- 第 75 集 — 变更日志、$props、$state。
- 第 76 集 — 变更日志、svelte-fsm、脚本模块、尾部斜杠。
- 第 77 集 — 变更日志、Context API、JSX 和单文件组件。
- 第 78 集 — 变更日志、不确定复选框、类和操作。
Svienna 2024 年 9 月
- 如何在您的 SvelteKit 中拥抱 Zod,Sasan Jaghori。
- 日期:一个浪漫故事与 JS 中日期的交集,Domenik Reitzner。
- Svelte 5:你为什么要这么做,Simon Holthausen。
阅读
- 我关于将一个约 15,000 LOC 的项目升级到 Svelte 5 的想法,作者 /u/practisingdeeplurk。
- 如何将未捆绑的 Svelte 包发布到 npm,作者 Matthew Davis。
- 将 YouTube Looper 迁移到 Svelte 5,作者 Wilker Lucio。
- 跳出 Svelte 的反应式语句,作者 Zell Liew。
- 使用 Svelte 和 D3 进行数据可视化,作者 DataVizSvelte。
观看
- 2024 年 SvelteKit 数据获取详解,作者 Ben Davis。
- 数据库还是不数据库? 和 GitHub 问题作为 CMS?,作者 With Svelte。
- SvelteKit Superforms 速成课程 和 使用 SvelteKit、Vendure、Houdinigql、Shadcn-svelte 构建全栈电子商务平台,作者 Lawal Adebola。
库、工具和组件
- Tzezar 的数据网格 是一个易于使用且易于自定义的数据网格组件。
- SparklePost 是一个演示应用程序,使用现代且高效的 Web 开发技术实现了在原生 iOS 和 Android 应用程序中常见的界面模式。
- tipex 是一个可自定义的 SvelteKit 富文本编辑器;基于 TipTap。
本月就到这里!如果您发现我们遗漏了任何内容,请在Reddit 或Discord 上告诉我们。
下次再见 👋