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）
• response.arrayBuffer() 现在将在 SSR 期间内联（1.30.0，文档，#10535）
• SvelteKit 2.0.0 添加了
  • load 中的 untrack 以选择退出失效（文档，#11311）
  • 浅路由，用于创建历史记录条目而不导航（文档，#11307）
  • html 类型定义（#11222）
  • 在报告配置错误时删除内部堆栈跟踪（#11292）
  • 细粒度的搜索参数失效（文档，#11258）

您可以在 SvelteKit 文档中找到 SvelteKit 2.0 的迁移指南SvelteKit 文档。使用 svelte-migrate 命令可以为您完成很多（如果不是全部）工作，因此迁移过程应该非常顺利！

Svelte 中的新功能

随着Svelte 5 预览版的发布，Svelte 4（@latest）仅修复了 bug，其当前版本为 4.2.8。以下更新来自版本 5 的预览分支

• 新的 $inspect 符文类似于 console.log，但它会在其参数发生变化时重新运行（5.0.0-next.16，文档，#9705）
• $state 现在被代理以默认方式嵌套反应性。这是对用户反馈的回应，PR 中提供了大量上下文——因此，如果您对预览期间语法如何改进感兴趣，请查看它（5.0.0-next.18，文档/示例，#9739）
• 在符文模式下不允许绑定回退值，因为它们会造成混淆，并且是 bug 和实现复杂性的来源（5.0.0-next.19，#9784）
• 回退 props 现在是只读的（除非与 bind: 一起使用）。相应地，默认值也应该是只读的（5.0.0-next.19，#9789）
• 新的 unstate 函数允许您从使用 $state 创建的对象和数组中删除反应性（5.0.0-next.19，文档，#9776）
• 添加了窗口的 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 创建可滚动的卡片列表
• 2023 年可持续发展目标地图集 提供了关于 17 个可持续发展目标的互动故事讲述和数据可视化。
• Lingotrack 是一个社交平台，供您作为语言学习者跟踪您的学习进度并找到引人入胜的新媒体
• Lofi Flow 允许您在一个地方保存您最喜欢的 YouTube lofi 直播电台和视频

学习资源

Svelte 贡献者和大使

• Jacob Stordahl 使用 Svelte 构建动态电子商务小部件 和 Sam Littlefair 和 Prismic 的 Svelte 切片 来自 Svelte Radio
• 我已经爱上 SvelteKit v2 了 由 Huntabyte 制作
• 14 个使用 Svelte 的精彩现实世界项目 由 Joy of Code 制作
• 为 WinterJS 构建 SvelteKit 适配器 由 Willow 和 Kev 制作
• 渐进式启动画面 由 Quang Phan（Svelte 越南）制作
• 本周 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、操作参数
  • 2023 年 12 月 29 日

观看/收听

• 让我们使用 SvelteKit 和 Firebase 构建 Dropbox 克隆🔥，Tailwind css、Shad-cn svelte 等😁 由 Lawal Adebola 制作
• “应用式”列表 → 详细信息视图过渡🦸与 SvelteKit 由 Johnny Magrippis 制作
• 学习 SvelteKit · 使用 SvelteKit 和 TailwindCSS 构建现代登录页面 由 Smoljames 制作

阅读

• 将 SvelteKit 应用程序部署到 GitHub Pages 由 Captain Codeman 制作
• 使用 Vitest 模拟 Svelte 存储的实用指南 由 Ben Tilling 制作
• Svelte 5 很好，但符文需要改进 由 Kyle Nazario 制作
• Shader Park 和 2D 由 Untested 制作

库、工具和组件

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

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

祝您新年快乐🥳