Svelte 的更新动态：2024 年 1 月

新年快乐！对于 Svelte 的维护者们来说，这个月忙得不可开交——Svelte 5 的预览版迎来了大量新功能，同时 SvelteKit 2 已发布！

你可以在下面找到这两个项目的所有新功能，此外还有社区展示中的一些使用 Svelte 构建的资源和网站。

让我们开始吧……

SvelteKit 的新动态（2.0 及更多！）

随着 2.0 版本的发布，SvelteKit 现在比以往任何时候都更加强大。记得查看每个更新中附带的文档链接，了解如何使用新功能，以及新的 性能 页面——解释了 SvelteKit 如何让你的应用性能达到最佳。

• $app/paths 中的 resolvePath 已被 resolveRoute 替代。使用它可以使用参数填充路由 ID 来解析路径名 (1.29.0, 文档, #11261)
• 在 SSR 期间，response.arrayBuffer() 将直接被内联 (1.30.0, 文档, #10535)
• SvelteKit 2.0.0 新增内容：
  • 在 load 中的 untrack 用于选择退出失效检测 (文档, #11311)
  • 浅层路由，创建历史记录条目而无需导航 (文档, #11307)
  • HTML 类型定义 (#11222)
  • 报告配置错误时隐藏的内部堆栈跟踪 (#11292)
  • 搜索参数的细粒度失效处理 (文档, #11258)

你可以在 SvelteKit 文档 中找到 SvelteKit 2.0 的迁移指南。在 svelte-migrate 命令的帮助下，迁移应该是非常顺利的（如果不是完全自动的话）。

Svelte 的新动态

随着 Svelte 5 预览版 推出，Svelte 4（@latest）仅收到了一些错误修复——当前版本为 4.2.8。以下更新内容来自 Svelte 5 的预览分支：

• 新的 $inspect 赤符类似于 console.log，但会在其参数更改时重新运行 (5.0.0-next.16, 文档, #9705)
• $state 现在通过代理默认支持嵌套的响应式功能。此功能基于用户反馈，并包含大量上下文信息，感兴趣的用户可以查看 PR 了解优化的语法 (5.0.0-next.18, 文档/示例, #9739)
• 在赤符模式中禁用了绑定的回退值，因为它们容易引起混淆，是错误和实现复杂性的根源 (5.0.0-next.19, #9784)
• 回退属性现在是只读的（除非与 bind: 一起使用）。换句话说，默认值也应该是只读的 (5.0.0-next.19, #9789)
• 新的 unstate 函数允许你移除通过 $state 创建的对象和数组的响应式功能 (5.0.0-next.19, 文档, #9776)
• 为 window.addEventListener 添加了 GamepadEventHandlers（gamepadconnected 和 gamepaddisconnected）(5.0.0-next.23, 文档, #9861)
• {@const} 现在可以用于代码片段中的块 (5.0.0-next.24, #9904)
• 新的 $state.frozen 赤符允许你访问不能被修改的 $state 只读版本。这在你希望实现数据不可变模式而非可变模式时非常有用 (5.0.0-next.27, 文档, #9851)

要查看所有的更新内容，请查阅 主仓库的更改日志。

---

社区展示

使用 Svelte 构建的应用和网站

• eCourse 是一个设计时尚且可定制的网站模板，用于轻松托管在线课程。
• Typogram 是一个带有 “AI 魔力” 的品牌设计工具。
• calcium 是一个面向开发者的浏览器扩展，提供浏览器标签、书签、历史记录和常用开发文档的模糊查找功能。
• hintable 是一个有趣的单词猜测游戏。
• domian.io 可检索你域名最常见错拼的列表、它们的可用性以及注册的便捷方式。
• Story Scroller 是一个 REPL 示例，展示了如何使用 Svelte 制作可滚动的卡片列表。
• The Atlas of Sustainable Development Goals 2023 提供了关于 17 个可持续发展目标的交互式故事和数据可视化。
• Lingotrack 是一个社交平台，帮助语言学习者追踪学习进度并找到有趣的新媒体内容。
• Lofi Flow 让你可以将最喜欢的 YouTube lofi 直播电台和视频存放在一个地方。

学习资源

推荐 Svelte 贡献者和大使的内容

• 来自 Svelte Radio 的 Svelte 用于动态电商组件，Jacob Stordahl 的分享 和 Sam Littlefair 和 Prismic 的 Svelte 示例
• 我已经爱上了 SvelteKit v2 by Huntabyte
• 14 个使用 Svelte 的优秀真实项目 by Joy of Code
• 为 WinterJS 构建 SvelteKit 适配器 by Willow 和 Kev
• Progressive Splash Screen by Quang Phan (Svelte Vietnam)
• 本周的 Svelte：
  • 2023 年 12 月 1 日 - Svelte 4.2.8、重用 searchParams、peerDependencies！
  • 2023 年 12 月 8 日 - 表单 UX 验证、抑制 ESLint 警告、绑定函数
  • 2023 年 12 月 15 日 - SvelteKit 2.0
  • 2023 年 12 月 22 日 - SvelteKit 2.0.6、处理 peerDependencies、action params
  • 2023 年 12 月 29 日

要观看/收听

• 让我们用 SvelteKit 构建一个 Dropbox 克隆 🔥，还用到了 Firebase、Tailwind css、Shad-cn svelte 等 😁 by Lawal Adebola
• “App-like” 列表 → 详情视图过渡 🦸 使用 SvelteKit by Johnny Magrippis
• 学习 SvelteKit · 使用 SvelteKit 和 TailwindCSS 构建一个现代着陆页 by Smoljames

要阅读

• 将 SvelteKit 应用部署到 GitHub Pages by Captain Codeman
• 使用 Vitest 模拟 Svelte Stores 的实用指南 by Ben Tilling
• Svelte 5 很棒，但赤符仍需改进 by Kyle Nazario
• Shader Park 和 2D by Untested

库、工具和组件

• Routify，许多 Svelte 应用使用的流行路由库，已发布其新版本 3 的候选版本
• Superforms v2 现已推出——支持所有验证库
• SvelteKit-Design-Pattern 是一个模板，展示了 Kreonovo 的 SvelteKit MVC 设计模式（更多信息在 Reddit 帖子 中）
• Shadcn 的 Svelte VSCode 扩展 帮助你无需离开 IDE 就能直接安装和使用 Shadcn 组件
• SGSG 是一个基于 Svelte、Go、SQLite 和 gRPC 的另类全栈应用模板
• mistral-kit 是一个使用 mistral-7b 和 ollama 的代码生成网站
• svelte-browser-import 提供了直接在浏览器中导入和渲染 Svelte 应用/组件（.svelte 文件）的函数，无需构建步骤。
• progressbar-svelte 是一个用于自定义进度条的 Svelte 包
• MdCraft 是一个开源的网页应用，作为浏览器中的 Markdown 编辑器和预览器

本月内容就到这里！如果我们漏掉了什么，请随时在 Reddit 或 Discord 上告诉我们。

祝你有美好的一年 🥳