Svelte 八月更新

SvelteKit 的 load 在 1.0 之前的更改，以及对 Vite 3 和 vite.config.js 的支持！

Dani Sandoval 2022 年 8 月 1 日

这个月有很多内容要讲... SvelteKit 的设计在 1.0 发布前将迎来重大变化。如果您还没有查看，请查看 Rich 的讨论，修复 load，并在 1.0 之前加强 SvelteKit 的设计 #5748。

此外，@dummdidumm (Simon H) 已加入 Vercel 全职开发 Svelte，并且 @tcc-sejohnson 已加入 SvelteKit 维护者团队！我们非常高兴现在有更多维护者专门致力于 Svelte 和 SvelteKit 的开发，并且已经注意到他们的影响。7 月份是 SvelteKit 自创建以来变化第三大的月份！

现在让我们继续了解其他更新...

SvelteKit 的新功能

动态导入的样式现在包含在 SSR 中 (#5138)
改进了路由和 prop 更新，以防止不必要的重新渲染 (#5654，#5671)
对错误处理进行了大量改进 (#4665，#5622，#5619，#5616)
SSR 构建现在尊重自定义 Vite 模式 (#5602)
现在支持自定义 Vite 配置位置 (#5705)
私有环境变量（也称为“密钥”）现在更加安全。现在，如果您意外地将它们导入到客户端代码中，您将看到错误 (#5663，文档)
adapter-vercel 现在正在使用 Vercel 的 v3 构建输出 API (#5514)
vite-plugin-svelte 已达到 1.0 并现在支持 Vite 3。您会注意到 dev（端口 5173）和 preview（端口 4173）的新默认端口 (#5005，vite-plugin-svelte 变更日志)

重大更改：

$app/env 中不再提供 mode、prod 和 server (#5602)
svelte-kit CLI 命令现在使用 vite 命令运行，并且需要 vite.config.js。这将允许与 Vite 生态系统中的其他项目（如 Vitest 和 Storybook）进行一流的支持 (#5332，文档)
endpointExtensions 现在是 moduleExtensions，可用于过滤参数匹配器 (#5085，文档)
SvelteKit 的最低版本现在为 Node 16.9 (#5395)
现在允许使用 %-编码的文件名。如果您在路由中包含 %，则现在必须将其编码为 %25 (#5056)
端点方法名称现在已大写，以匹配 HTTP 规范 (#5513，文档)
writeStatic 已删除，以与 Vite 的配置保持一致 (#5618)
transformPage 现在是 transformPageChunk (#5657，文档)
package.json 中不再需要 prepare 脚本 (#5760)
adapter-node 在等待 compression 库中的错误修复期间不再进行任何压缩 (#5560)

有关完整变更列表，请查看 kit 的变更日志。

Svelte 和语言工具的新功能

Svelte 组件现在支持 @layer CSS at-规则 (3.49.0，PR)
Svelte 的语言工具和插件现在支持 inert HTML 属性 (105.20.0，PR)
Svelte 插件现在将使用 SvelteComponentTyped 类型，如果可用 (105.19.0，PR)

社区展示

使用 Svelte 构建的应用程序和网站

PocketBase 是一个开源的 Go 后端，包含单个文件和使用 Svelte 构建的管理仪表盘
Hondo 是一款包含多轮的猜词游戏
Hexapipes 是一个玩六边形管道拼图的网站
Mail Must Move 是一款为那些希望完成更多工作的人设计的电子邮件
Jot Down 是一个 Visual Studio Code 扩展，用于快速简单的笔记记录
Kadium 是一个用于关注 YouTube 频道上传内容的应用程序
Samen zjin we #1metS10 是一个宣传网站，通过发送绘画或祝福来支持荷兰欧洲歌唱大赛决赛选手 S10
On Writing Code 是一个交互式网站，用于学习编程设计模式
Svelte-In-Motion 允许您在浏览器中创建 Svelte 动画视频
Svelte Terminal 是一个类似终端的网站
Bulletlist 是一款简单的工具，只有一个用途：制作列表
Remind Me Again 是一个用于在 Mac、Linux 和 Windows 上切换提醒的应用程序
Heyweek 是一款为渴望更多趣味的自由职业者构建的时间跟踪应用程序

学习资源

Svelte 团队推荐

Svelte 纪录片发布了！在 Svelte Radio 上
SvelteKit 初学者指南由 Vercel 提供
挑战：通过构建泡泡消除游戏来探索 Svelte 由 Brittney Postma 提供
让我们用 Svelte 编写一个客户端路由库由 lihautan 提供
Svelte Sirens 七月谈话 - 使用 Jess Sachs 进行 Svelte 测试

观看

10 个很棒的 Svelte UI 组件库由 LevelUpTuts 提供
了解 SvelteKit 的工作原理和 SvelteKit 端点由 Joy of Code 提供
使用 TS 和 Storybook 设置的 SvelteKit 由 Jarrod Kane 提供
使用 Svelte 构建应用程序！由 Simon Grimm 提供
SvelteKit 身份验证，更好的方法 - 教程由 Pilcrow 提供

阅读

一些各种 Svelte 演示由 Geoff Rich 提供
三种引导 Svelte 项目的方法由 Thilo Maier 提供
设计和使用 Svelte 构建应用程序由 Hugo 提供
在 SvelteKit 中通过 JS 定义路由由 Max Core 提供
将 Telegram API 集成到 SvelteKit 中由 Shivam Meena 提供
SvelteKit SSG：如何预渲染您的 SvelteKit 网站由 Rodney Lab 提供
ADEO 设计系统：使用 Svelte 和 Rollup 构建 Web 组件库由 Mohamed Mokhtari 提供
Svelte 手册由 The Valley of Code 提供
使用 Vitest 和 Playwright 测试 Svelte 组件由 David Peng 提供
使用 Phoenix 和 Svelte 进行过渡性应用程序由 Nathan Cahill 提供

技术演示

为 Svelte 提供最佳的 GraphQL 体验由 The Guild 提供
使用 Stylify CSS 加速 Svelte 网站的样式设计由 Stylify 提供
Supabase 身份验证助手改进版（支持 SvelteKit）由 Supabase 提供

库、工具和组件

Lucia 是一个简单的基于 JWT 的 SvelteKit 身份验证库，可将您的 SvelteKit 应用程序与您的数据库连接
Skeleton 是一个用于 Svelte + Tailwind 的 UI 组件库
pass-composer 可帮助您为 threlte 场景编写后处理过程
@crikey/stores-* 是一个库集合，用于扩展 Svelte 存储以满足常见用例
Svelte Chrome Storage 是 Svelte 存储和 Chrome 扩展存储之间的一个轻量级抽象
Svelte Schema Form 是一个 JSON 架构表单生成器
svelte-gesture 是一个库，允许您将更丰富的鼠标和触摸事件绑定到任何组件或视图
Snap Layout 和 universal-title-bar 将 Windows 11 的吸附布局和标题功能带到 Web 应用程序和 PWA 中。两者都可以作为 .svelte 模块或 Web 组件导入
svelte-adapter-bun 是一个用于 SvelteKit 应用程序的适配器，它生成一个独立的 Bun 服务器
json2dir 将 JSON 对象转换为目录树
Svelte Command Palette 是一个即插即用的命令面板组件
svelte-use-drop-outside 是一个 Svelte action，用于将元素放置在区域外部。
PowerTable 是一个 JavaScript 组件，可以将 JSON 数据转换为交互式 HTML 表格。
svelte-slides 是一个使用 Reveal.js 的 Svelte 幻灯片模板。
Svelte Theme Light 是一个基于 Svelte REPL 的 Visual Studio Code 主题。

我们是否错过了什么？请在 Reddit 或 Discord 上告诉我们！

9 月份仍然在寻找事情做吗？快来参加在斯德哥尔摩举行的 Svelte 峰会吧！立即获取门票。

下个月见！