Svelte 7 月更新

Svelte 4 已经发布，大家也开始构建应用了！有很多新的展示案例、库和教程可以分享。所以让我们直接进入主题吧...

Svelte 新特性

本月的大新闻是 Svelte 4.0 的发布！您可以在发布 Svelte 4 的文章中阅读所有相关信息。从性能修复和开发者体验改进到全新的网站、文档和教程... 此次新版本为 Svelte 5 打下了基础，并尽可能减少了重大变更。

如果您已经在使用 Node.js 16，那么您的项目可能不会遇到任何重大变更。但请务必阅读迁移指南以获取所有详细信息。

要查看 Svelte 编译器的所有变更（包括未发布的变更）的完整列表，请查看变更日志。

SvelteKit 新特性

本月有很多很棒的错误修复，因此请务必升级到最新版本！还有一些新的特性需要提及。

• 新的 event.isSubRequest 布尔值指示这是否是在服务器请求期间对应用程序自身 API 之一的同源获取请求（1.21.0，文档，#10170）。
• 一个新的配置选项 config.kit.env.privatePrefix 将在环境变量上设置一个私有前缀。默认为 ''（1.21.0，文档，#9996）。
• VERSION 现在可以通过 @sveltejs/kit 导出和访问。这可以用于功能检测或任何其他需要了解当前 SvelteKit 版本的信息（1.21.0，文档，#9969）。

对于特定于适配器的更改，请查看每个适配器目录中的变更日志。

---

社区展示

使用 Svelte 构建的应用和网站

• Heerdle 是 Spotify 现已停运的 Heardle（每日音乐猜歌游戏）的翻版。
• Meoweler 是一个充满猫咪和热门目的地有用信息的旅行网站。
• 来自宜家的技术主管详细介绍了他们使用 Svelte 构建页面（和页面模板）的方式。
• 替代密码的探索 提供了所有流行的密码管理工具的交互式比较可视化。
• audiogest 允许您一键将语音转换为文本并总结任何音频。
• heroify 使用 AI 为您的网站生成 3D 图形。
• Diesel Legacy: The Brazen Age 是一款格斗游戏，其排行榜和个人资料页面都是使用 Svelte 构建的。
• markmyimages 是一个水印工具，具有批量图像调整大小、重命名、效果等功能。
• md.robino.dev 是一个基于 Web 的 Markdown 编辑器。
• YABin 是另一个具有某些特定功能的粘贴板。

学习资源

• 发布 Svelte 4 的文章
• svelte.dev：全面改版

Svelte 贡献者和大使

• 开发博客：2023 年 6 月 - 与 Rich Harris 共同探讨 Svelte 4.0
• PodRocket：Svelte 4 与 Geoff 共同探讨
• This Dot Media：Svelte 4 发布派对 与 Simon、Ben、Geoff 和 Puru 共同探讨
• 揭秘 Svelte：两个极客之间 是 Rich Harris 和 Dax Raad 之间的一次幽默对话。
• 社区教程：使用 VPS、Docker、CapRover 和 GitHub Actions 自托管 SvelteKit 由 Stanislav Khromov 提供
• SvelteKit 和 Storybook 由 Jeppe Reinhold 提供
• 本周 Svelte 动态
  • 2023 年 6 月 2 日 - SvelteKit 1.20.1、Svelte 4 预发布版、无头 UI 库
  • 2023 年 6 月 9 日 - 更新、SvelteKit 自托管、将样式传递给子元素
  • 2023 年 6 月 16 日 - Svelte 4 next.1、如何创建汉堡菜单、分组布局
  • 2023 年 6 月 23 日 - Svelte 4、弹出窗口和悬停、使用 SvelteKit 进行实时请求
• Svelte 电台
  • SvelteLab - SvelteKit 的 Svelte REPL 由 Antonio 和 Paolo 提供
  • Svelte 电台直播 - Svelte 4 夏季特别节目 由 Simon 和 Puru 提供
• Svelte 社区 - 2023 年 6 月伦敦
• 使用 Svelte Context API 和存储、使用 Svelte 和 GSAP 实现不可能的 FLIP 布局动画 和 使用 Svelte 创建漂亮的演示文稿 由 Joy of Code 提供

待观看

• 在 SvelteKit 中构建服务器端过滤、分页和排序表格 由 hartenfellerdev 提供
• 2023 年 Svelte 和 SvelteKit 最佳图标库 由 SvelteRust 提供

待阅读

• 从零到生产：使用 SvelteKit 由 Justin Ahinon 提供
• 关于 Svelte(Kit) 的思考：一年和 30 亿次请求之后 由 Claudio Holanda 提供
• 我如何使用 SvelteKit 和 Capacitor 发布 iOS 和 Android 的感恩日记应用程序 由 Stanislav Khromov 提供
• 边学边做：Vue 开发人员构建 Svelte 单页应用程序 由 Black Spike 提供
• 在 SvelteKit 中生成面包屑和导航、使用 SvelteKitAuth 和 OAuth 提供程序进行 SvelteKit 身份验证：综合指南 和 使用 Salesforce OAuth 提供程序进行 SvelteKitAuth 由 Aakash Goplani 提供
• 立即查找并删除 Svelte 组件孤儿 由 Jeremy Zaborowski 提供
• 从 Routify 迁移到 SvelteKit 路由器 由 Aakash Goplani 提供
• 使用 Threlte 和 D3 创建 3D 数据可视化 由 DataViz Cubed 提供
• Svelte 实时多人游戏：用户状态 和 SvelteKit PostCSS 教程：今天使用未来的 CSS 由 Rodney Lab 提供
• SvelteKit 的路由世界：使用动态路由和参数释放应用程序的强大功能 由 Igor Nowosad 提供

库、工具和组件

• Vercel AI SDK 是一个可互操作、支持流式传输、面向边缘的软件开发工具包，用于使用 React 和 Svelte 构建的 AI 应用程序。
• Superforms 1.0 已发布。查看迁移指南和新功能列表以了解更多详细信息。
• Panda CSS 是一个 CSS-in-JS 库，具有构建时生成的样式、RSC 兼容性和多变体支持。
• svelte-section-list 是一个无头 Svelte npm 包，提供用于管理项目和部分的拖放功能。
• WebStorm 正在其 IDE 工具中开始使用 Svelte 语言服务器。
• shadcn-svelte 是shadcn/ui 的非官方 Svelte 移植版本，可以轻松地从通用的基础组件构建组件库。
• sveltekit-multibuild 是一个入门仓库，用于自动创建 Android 应用、网站、桌面应用和 Chrome 扩展程序。
• SvelteKit AI 聊天机器人 是一个使用 SvelteKit、Vercel AI SDK、OpenAI 和 Vercel KV 构建的开源 AI 聊天机器人应用程序模板。
• KitAI 为 SvelteKit 和 Next.js 提供了包含电池的 AI 模板。
• Svelte 表单构建器 是一个面向 Svelte 的无代码拖放表单构建器。

感谢您的阅读！与往常一样，如果您发现我们错过了任何内容，请随时在Reddit或Discord上告诉我们。

下次再见 👋